html语法 - 技术栈

HTML基础与实战知识点汇总

HTML（超文本标记语言）是构建网页的基础，本文将汇总HTML的核心知识点，从基础结构到实战应用，帮助你系统掌握HTML编程。

一、HTML文档基础结构

HTML文档有固定的基本结构，所有网页都遵循这一框架：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

核心组成部分说明：

<!DOCTYPE html>：声明文档使用HTML5规范
<html>：根元素，包裹整个HTML文档，lang属性指定页面语言（如zh-CN表示中文）
<head>：存放供机器处理的信息，不直接显示在页面上
- <meta charset="UTF-8">：指定字符编码为UTF-8，避免乱码
- <meta name="viewport">：用于响应式设计，确保移动端正常显示
- <title>：设置页面标题，显示在浏览器标签栏
<body>：包含页面的所有可见内容

二、HTML标签基础

1. 标签的基本概念

标签用尖括号<>``表示，分为**开始标签**（如

）和**结束标签**（如
`）
大部分标签是双标签 （有开始和结束），少数是单标签 （如<img>、<hr>）
标签可以嵌套，但不能交叉嵌套

2. 常用基础标签

标题标签（h1-h6）

用于表示不同层级的标题，从h1（最高级）到h6（最低级）：

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- ... 直到h6 -->

标题文字默认加粗显示，独占一行
建议每个页面只使用一次h1，h2-h6根据内容结构合理使用（通常不超过3级）

段落标签（p）

用于定义文本段落，内容会自动换行：

html 复制代码

<p>这是一个段落。段落文字会根据容器宽度自动换行，</p>
<p>多个p标签之间会有默认的间距。</p>

强调与格式化标签

用于对文本进行强调或格式化：

html 复制代码

<strong>strong标签：表示重要内容，默认加粗显示</strong>
<em>em标签：表示强调内容，默认倾斜显示</em>
<ins>ins标签：表示插入的内容，默认下划线显示</ins>
<del>del标签：表示删除的内容，默认删除线显示</del>

水平线标签（hr）

单标签，用于添加水平线分隔内容：

html 复制代码

<p>这是上方内容</p>
<hr>
<p>这是下方内容</p>

三、元素的分类

HTML元素分为块级元素 和内联元素，两者在布局上有显著区别：

1. 块级元素

独占一行，宽度默认填满父容器
可以嵌套其他块级元素或内联元素
常见块级元素：p、h1-h6、div、header、nav、main、section、footer等

html 复制代码

<!-- 块级元素示例 -->
<div>div是通用块级容器</div>
<h2>h标签是块级元素</h2>
<p>p标签也是块级元素</p>

2. 内联元素

不独占一行，多个内联元素可在同一行显示
通常用于包裹文本或其他内联元素，不能嵌套块级元素
常见内联元素：strong、em、a、span等

html 复制代码

<!-- 内联元素示例 -->
<p>这是一段包含<span>span内联元素</span>和<a href="#">a链接</a>的文本</p>

四、语义化结构标签

HTML5引入了语义化结构标签，使代码更具可读性，同时帮助搜索引擎理解页面结构：

标签	含义	用途
`<header>`	头部	包含页面标题、Logo、导航等
`<nav>`	导航	存放主要导航链接
`<main>`	主要内容	页面核心内容，每个页面只应有一个
`<section>`	章节	对内容进行分块，包含相关主题的内容
`<article>`	文章	独立完整的内容（如博客、新闻）
`<aside>`	侧边栏	与主内容相关但非核心的内容（如注释、广告）
`<footer>`	页脚	包含版权信息、联系方式等

完整结构示例：

html 复制代码

<body>
  <header>页面头部（标题+导航）</header>
  <nav>导航菜单</nav>
  <main>
    <section>第一部分内容</section>
    <article>主要文章内容</article>
    <aside>侧边栏信息</aside>
  </main>
  <footer>页脚信息</footer>
</body>

五、无语义标签

无语义标签不表示特定含义，主要用于布局和样式控制：

<div>：块级通用容器，用于组合其他元素

html 复制代码

<div class="container">
  <h2>内容标题</h2>
  <p>这是一段内容</p>
</div>

<span>：内联通用容器，用于包裹部分文本

html 复制代码

<p>这是一段包含<span style="color: red;">红色文本</span>的段落</p>

六、超链接与锚点链接

超链接是网页导航的核心，通过<a>标签实现：

1. 基本语法

html 复制代码

<a href="目标地址" 属性>链接文本</a>

2. 常见链接类型

外部链接：链接到其他网站

html 复制代码

<a href="https://www.deepseek.com">跳转到DeepSeek官网</a>

内部链接：链接到同一网站的其他页面

html 复制代码

<a href="11-音视频标签.html">跳转到音视频标签页面</a>

空链接：点击后停留在当前页面
html 复制代码
```
<a href="#">空链接</a>
```

功能链接：

html 复制代码

<a href="mailto:example@qq.com">发送邮件</a> <!-- 邮件链接 -->
<a href="tel:1234567890">拨打电话</a> <!-- 电话链接 -->
<a href="sms:1234567890">发送短信</a> <!-- 短信链接 -->

3. 常用属性

target：控制链接打开方式
- _blank：在新窗口打开
- _self：在当前窗口打开（默认）
html 复制代码
```
<a href="https://www.deepseek.com" target="_blank">新窗口打开链接</a>
```

title：鼠标悬停时显示提示文字

html 复制代码

<a href="https://www.deepseek.com" title="跳转到DeepSeek官网">悬停查看提示</a>

4. 锚点链接

用于在长页面中快速跳转到指定位置，步骤如下：

定义锚点目标（使用id属性）
html 复制代码
```
<p id="section1">第一部分内容</p>
```
创建指向锚点的链接（使用#+id）
html 复制代码
```
<a href="#section1">跳转到第一部分</a>
```

返回顶部示例（通常在页脚使用）

html 复制代码

<a href="#top">返回顶部</a> <!-- 需在页面顶部元素设置id="top" -->

七、表格标签

表格用于展示结构化数据，核心标签如下：

标签	含义
`<table>`	表格容器
`<tr>`	表格行
`<th>`	表头单元格（默认加粗居中）
`<td>`	数据单元格
`<thead>`	表格头部
`<tbody>`	表格主体
`<tfoot>`	表格底部

1. 基本表格示例

html 复制代码

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

2. 合并单元格

通过属性实现单元格合并：

colspan：水平合并（跨列）
rowspan：垂直合并（跨行）

示例：

html 复制代码

<table>
  <tr>
    <th colspan="2">个人信息</th> <!-- 合并2列 -->
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>
    <th rowspan="2">联系方式</th> <!-- 合并2行 -->
    <td>电话：13800138000</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>邮箱：zhangsan@example.com</td>
    <td>北京</td>
  </tr>
</table>

八、音视频标签

HTML5原生支持音视频播放，无需依赖插件。

1. 视频标签（video）

html 复制代码

<video src="视频路径" controls poster="封面图路径"></video>

src：视频文件路径
controls：显示播放控制栏
poster：视频加载前显示的封面图

2. 音频标签（audio）

html 复制代码

<audio src="音频路径" controls></audio>

src：音频文件路径
controls：显示音频控制栏

九、项目实践：综合应用

以下是一个科技新闻页面的综合示例，整合了上述大部分知识点：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科技日报 - 探索未来科技</title>
  <style>
    /* 样式省略，实际项目中会包含CSS美化 */
  </style>
</head>
<body>
  <header>
    <h1><a href="#" title="科技日报">科技日报</a></h1>
    <p>探索未来科技，传递创新力量</p>
  </header>

  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">科技动态</a></li>
      <li><a href="#">国际科技</a></li>
    </ul>
  </nav>

  <main>
    <section>
      <h2>量子计算机取得突破性进展</h2>
      <p>中国自主量子计算机"本源悟空"实现重大突破...</p>
      <img src="量子计算机.jpg" alt="量子计算机" title="量子计算机">
    </section>

    <section>
      <h3>行业数据</h3>
      <table>
        <tr>
          <th>领域</th>
          <th>投资额（亿美元）</th>
          <th>增长率</th>
        </tr>
        <tr>
          <td>人工智能</td>
          <td>1200</td>
          <td>23%</td>
        </tr>
      </table>
    </section>

    <section>
      <h3>科技大讲堂视频</h3>
      <video src="科技讲座.mp4" controls poster="讲座封面.jpg"></video>
    </section>
  </main>

  <footer>
    <p>© 2025 科技日报社 版权所有</p>
    <a href="#top" class="back-to-top">↑ 返回顶部</a>
  </footer>

  <script>
    // 返回顶部功能（简单JS实现）
    const backToTop = document.querySelector('.back-to-top');
    backToTop.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>