HTML 常用标签：构建网页的基石

引言

在网页开发的世界里，HTML标签就像是搭建大厦的砖块。作为前端开发的基础，掌握HTML标签及其正确用法，是每一位想要入门前端的开发者必不可少的技能。无论是简单的个人博客，还是复杂的电商网站，都是由这些标签搭建而成的。

你可能会问："现在有这么多前端框架，直接学React、Vue不就好了吗？"答案是否定的。即使是最复杂的前端应用，其底层仍然是HTML标签。理解这些标签的语义和用法，不仅能帮助你写出更加清晰、结构化的代码，还能提升网站的可访问性和搜索引擎优化效果。

本文将带你了解HTML中最常用、最基础的标签，从文本处理到列表构建，从图片展示到表格创建，全面介绍这些"网页积木"的特性和用法。无论你是完全的新手，还是想要巩固基础的开发者，这篇文章都能为你提供清晰的指引。

文本标签：内容的呈现

段落标签

段落标签<p>是最常用的HTML标签之一，用于定义一个文本段落。浏览器通常会在段落前后添加一些空白边距。

html

<p>这是一个段落。段落是由若干个句子组成的内容集合，表达一个完整的意思。</p>
<p>这是另一个段落。浏览器会自动在两个段落之间添加一些间距。</p>

段落标签的特点：

自动在前后创建一些空间（外边距）
是块级元素，默认会占据父元素的整个宽度
可以包含文本和其他行内元素，但不能包含块级元素

行内标签

行内标签不会打断文本流，常用于在文本中标记特定部分：

html

<!-- 强调文本 -->
<em>斜体强调</em> 和 <strong>加粗强调</strong>

<!-- 标记文本 -->
这个部分<mark>特别重要</mark>需要注意。

<!-- 删除线和下划线 -->
这个价格<del>¥100</del> <ins>¥80</ins>特价促销中。

<!-- 上标和下标 -->
水的化学式是H<sub>2</sub>O
2<sup>3</sup> = 8

行内标签的选择应该基于语义，而不仅仅是视觉效果：

<em>和<strong>表示强调程度，而不仅仅是斜体和加粗
<mark>表示标记或高亮，适合引起读者注意
<del>和<ins>表示删除和插入的内容，适合显示修改
<sub>和<sup>分别表示下标和上标，适合数学或化学公式

标题标签

HTML提供了六级标题标签，从<h1>到<h6>，表示文档的不同层级结构：

html

<h1>这是最主要的标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是最小的标题</h6>

标题标签的使用规范：

每个页面通常只使用一个<h1>，表示页面的主要主题
标题应该按层级使用，不要为了视觉效果而跳级（如从h1直接到h3）
标题标签对SEO非常重要，搜索引擎通过标题来理解页面结构
不要仅为了让文本变大或变粗而使用标题标签，应该使用CSS来控制样式

文本格式化

除了基本的行内标签，HTML还提供了一些专门用于格式化文本的标签：

html

<!-- 计算机代码 -->
<code>console.log('Hello, World!');</code>

<!-- 预格式化文本，保留空格和换行 -->
<pre>
  function greet() {
    return 'Hello, World!';
  }
</pre>

<!-- 引用 -->
<blockquote>
  <p>学而不思则罔，思而不学则殆。</p>
  <cite>——孔子</cite>
</blockquote>

<!-- 地址信息 -->
<address>
  联系方式：[email protected]<br>
  北京市朝阳区某某街道
</address>

这些标签不仅提供视觉上的格式化，更重要的是它们赋予了文本特定的语义：

<code>表示这是一段计算机代码
<pre>保留文本中的空格和换行，常用于展示代码块
<blockquote>表示这是一段引用的内容
<address>专门用于标记联系信息

列表标签：组织信息的方式

无序列表

无序列表使用<ul>标签创建，每个列表项使用<li>标签。适合表示没有特定顺序的项目集合：

html

<h3>购物清单</h3>
<ul>
  <li>牛奶</li>
  <li>面包</li>
  <li>鸡蛋</li>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
</ul>

无序列表默认使用实心圆点作为项目符号，但可以通过CSS的list-style-type属性修改。

有序列表

有序列表使用<ol>标签创建，同样使用<li>作为列表项。适合表示有特定顺序或步骤的内容：

html

<h3>煮面条步骤</h3>
<ol>
  <li>将水烧开</li>
  <li>放入面条</li>
  <li>等待8-10分钟</li>
  <li>沥干水分</li>
  <li>加入调料</li>
</ol>

有序列表有几个特殊属性：

start：指定起始数字，如<ol start="5">
reversed：倒序排列，如<ol reversed>
type：指定编号类型，如<ol type="a">使用小写字母

定义列表

定义列表使用<dl>标签，包含术语<dt>和定义<dd>，适合展示术语及其解释：

html

<h3>前端开发术语</h3>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于描述HTML文档样式的语言。</dd>
  
  <dt>JavaScript</dt>
  <dd>一种编程语言，可以实现网页的动态交互效果。</dd>
</dl>

定义列表比较特殊，一个术语可以对应多个定义，反之亦然：

html

<!-- 一个术语多个定义 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dd>用于创建网页的标准</dd>
</dl>

<!-- 多个术语一个定义 -->
<dl>
  <dt>HTML</dt>
  <dt>XHTML</dt>
  <dd>用于创建网页的标记语言</dd>
</dl>

嵌套列表

列表可以相互嵌套，创建层级结构：

html

<ul>
  <li>前端开发
    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ol>
  </li>
  <li>后端开发
    <ol>
      <li>Node.js</li>
      <li>Python</li>
      <li>Java</li>
    </ol>
  </li>
</ul>

嵌套列表在创建网站导航、目录结构等场景非常有用。每一级列表都会有不同的缩进和项目符号，形成清晰的视觉层级。

图片和链接：多媒体与导航

图片标签

<img>标签用于在网页中嵌入图片：

html

<img src="images/cat.jpg" alt="一只橘色猫咪" width="300" height="200">

重要属性说明：

src：图片的路径，可以是相对路径或绝对URL
alt：替代文本，当图片无法显示时显示，对可访问性和SEO很重要
width和height：指定图片尺寸，建议设置以防止页面加载时的布局偏移

图片最佳实践：

总是提供有意义的alt属性，描述图片内容
使用合适的图片格式（JPEG用于照片，PNG用于图标或透明图片，WebP用于综合优化）
考虑使用响应式图片技术，如srcset属性或<picture>元素

html

<!-- 响应式图片示例 -->
<img 
  src="images/photo-small.jpg" 
  srcset="images/photo-small.jpg 400w,
          images/photo-medium.jpg 800w,
          images/photo-large.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="风景照片">

链接标签

<a>（锚）标签用于创建超链接，是网页导航的基础：

html

<!-- 基础链接 -->
<a href="https://www.example.com">访问Example网站</a>

<!-- 内部页面链接 -->
<a href="about.html">关于我们</a>

<!-- 链接到页面特定部分 -->
<a href="#section2">跳到第二部分</a>

<!-- 链接行为特性 -->
<a href="https://www.example.com" target="_blank" rel="noopener">在新标签页中打开</a>

<!-- 电子邮件链接 -->
<a href="mailto:[email protected]">发送邮件</a>

<!-- 电话链接 -->
<a href="tel:+8612345678901">拨打电话</a>

链接属性说明：

href：指定链接目标，可以是URL、页面锚点或特殊协议（mailto, tel等）
target：指定链接打开方式，_blank表示新窗口/标签
rel：指定链接与当前文档的关系，如noopener、nofollow等
download：指示浏览器下载URL而非导航到它

图片链接

图片和链接可以结合使用，创建图片链接：

html

<a href="product.html">
  <img src="images/product.jpg" alt="产品展示">
</a>

这种组合在网站中很常见，比如产品缩略图、导航图标等。

锚点链接

锚点链接允许导航到同一页面的特定部分：

html

<!-- 目标位置 -->
<h2 id="section2">第二部分</h2>

<!-- 指向该位置的链接 -->
<a href="#section2">跳到第二部分</a>

<!-- 可以在URL中包含锚点 -->
<a href="page.html#section3">跳到另一页的第三部分</a>

锚点链接对于长页面内容非常有用，可以创建页内目录，方便用户快速导航到感兴趣的部分。

表格标签：展示结构化数据

表格结构

HTML表格使用<table>标签创建，由行<tr>和单元格<td>或<th>组成：

html

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
    <td>设计师</td>
  </tr>
</table>

表格标签的基本结构：

<table>：定义整个表格
<tr>：定义表格行
<th>：定义表头单元格
<td>：定义数据单元格

表格标题

表格可以使用<caption>标签添加标题：

html

<table>
  <caption>员工信息表</caption>
  <tr>
    <th>姓名</th>
    <th>部门</th>
  </tr>
  <!-- 表格内容 -->
</table>

<caption>元素应该直接放在<table>标签后面，它提供了对表格内容的简要描述。

表格头部、主体和页脚

大型表格可以分为头部、主体和页脚三个部分：

html

<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>销量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品A</td>
      <td>￥100</td>
      <td>200</td>
    </tr>
    <tr>
      <td>产品B</td>
      <td>￥120</td>
      <td>150</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>-</td>
      <td>350</td>
    </tr>
  </tfoot>
</table>

这种结构有多个好处：

语义更清晰，表示数据的不同部分
可以针对不同部分应用不同的样式
当表格非常长时，浏览器可以独立滚动<tbody>，保持<thead>和<tfoot>可见

单元格合并

表格可以通过colspan和rowspan属性合并单元格：

html

<table border="1">
  <tr>
    <th colspan="2">姓名和年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td rowspan="2">工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
    <!-- 这里不需要td，因为上面的单元格已经占用了这个位置 -->
  </tr>
</table>

colspan：指定单元格横向合并的列数
rowspan：指定单元格纵向合并的行数

计算合并单元格时需要特别注意，确保表格结构的完整性，避免单元格重叠或缺失。

常见错误和注意事项

混淆块级元素和行内元素
- 错误：<p><div>内容</div></p>（在段落中嵌套块级元素）
- 正确：<div><p>内容</p></div>（块级元素包含段落）
图片缺少alt属性
- 错误：<img src="logo.png">
- 正确：<img src="logo.png" alt="公司Logo">或装饰性图片<img src="decoration.png" alt="">
表格用于布局
- 错误：使用表格创建网页布局
- 正确：使用CSS（特别是Flexbox和Grid）进行页面布局，表格只用于表格数据
链接没有描述性文本
- 错误：<a href="page.html">点击这里</a>
- 正确：<a href="page.html">查看产品详情</a>
滥用标题标签
- 错误：使用<h1>-<h6>仅为了字体大小效果
- 正确：按文档结构层次使用标题标签，使用CSS控制视觉样式

总结与拓展

HTML标签是构建网页的基础构件，正确理解和使用这些标签对于创建结构良好、语义清晰的网页至关重要。本文介绍了最常用的HTML标签，包括文本标签、列表标签、图片和链接标签以及表格标签。

关键要点回顾：

使用标题标签（<h1>-<h6>）创建有层次的文档结构
利用段落（<p>）和行内标签（<em>, <strong>等）格式化文本
使用列表（<ul>, <ol>, <dl>）组织相关信息
图片标签（<img>）需要提供alt属性以提高可访问性
链接标签（<a>）是创建网页导航的基础
表格标签（<table>）适用于展示结构化数据，不应用于页面布局

记住，选择HTML标签应该基于内容的语义，而不仅仅是视觉效果。正确的语义化标签使用不仅使代码更清晰，还能提高网站的可访问性和搜索引擎优化。

拓展阅读

掌握这些基础HTML标签后，你就可以开始构建自己的网页了。随着经验的积累，你会逐渐学习更多高级标签和属性，以及如何使用CSS和JavaScript增强你的网页。记住，良好的HTML基础是成为优秀前端开发者的第一步！

HTML 常用标签：构建网页的基石 ​

引言 ​

文本标签：内容的呈现 ​

段落标签 ​

行内标签 ​

标题标签 ​

文本格式化 ​

列表标签：组织信息的方式 ​

无序列表 ​

有序列表 ​

定义列表 ​

嵌套列表 ​

图片和链接：多媒体与导航 ​

图片标签 ​

链接标签 ​

图片链接 ​

锚点链接 ​

表格标签：展示结构化数据 ​

表格结构 ​

表格标题 ​

表格头部、主体和页脚 ​

单元格合并 ​

常见错误和注意事项 ​

总结与拓展 ​

拓展阅读 ​

HTML 常用标签：构建网页的基石

引言

文本标签：内容的呈现

段落标签

行内标签

标题标签

文本格式化

列表标签：组织信息的方式

无序列表

有序列表

定义列表

嵌套列表

图片和链接：多媒体与导航

图片标签

链接标签

图片链接

锚点链接

表格标签：展示结构化数据

表格结构

表格标题

表格头部、主体和页脚

单元格合并

常见错误和注意事项

总结与拓展

拓展阅读