基础标签

本章将介绍HTML中最常用的基础标签，这些标签是构建网页的基石。

标题标签

HTML提供了六级标题标签，<h1> 到 <h6>，<h1> 最大，<h6> 最小。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>标题标签示例</title>
  </head>
  <body>
    <!-- 一级标题：通常用于页面主标题 -->
    <h1>一级标题</h1>

    <!-- 二级标题：通常用于章节标题 -->
    <h2>二级标题</h2>

    <!-- 三级标题：通常用于小节标题 -->
    <h3>三级标题</h3>

    <!-- 四级标题 -->
    <h4>四级标题</h4>

    <!-- 五级标题 -->
    <h5>五级标题</h5>

    <!-- 六级标题：最小的标题 -->
    <h6>六级标题</h6>
  </body>
</html>

重要提示

每个页面应该只有一个 <h1> 标签，用于页面的主标题
标题标签应该按层级顺序使用，不要跳级
标题标签对SEO（搜索引擎优化）很重要

标题标签的正确使用

html

<!-- 正确示例：按层级使用 -->
<h1>网页开发教程</h1>
<h2>HTML基础</h2>
<h3>标题标签</h3>
<h2>CSS基础</h2>
<h3>选择器</h3>

<!-- 错误示例：跳级使用 -->
<h1>网页开发教程</h1>
<h3>HTML基础</h3>
<!-- 错误：跳过了h2 -->

段落标签

<p> 标签用于定义段落，浏览器会自动在段落前后添加空白。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>段落标签示例</title>
  </head>
  <body>
    <!-- 第一个段落 -->
    <p>这是第一个段落。段落是网页中最基本的文本容器。</p>

    <!-- 第二个段落 -->
    <p>这是第二个段落。每个段落都会自动换行，并在前后添加间距。</p>

    <!-- 第三个段落 -->
    <p>
      HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。
      它描述了网页的结构，由一系列元素组成。
    </p>
  </body>
</html>

换行标签

<br> 标签用于在文本中插入换行，是一个单标签。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>换行标签示例</title>
  </head>
  <body>
    <!-- 在段落中使用换行 -->
    <p>第一行文字<br />第二行文字<br />第三行文字</p>

    <!-- 诗歌格式 -->
    <p>床前明月光，<br />疑是地上霜。<br />举头望明月，<br />低头思故乡。</p>
  </body>
</html>

注意

<br> 标签只用于必要的换行，不要用它来增加段落间距。段落间距应该用CSS控制。

水平线标签

<hr> 标签用于创建水平分割线，用于分隔内容。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>水平线标签示例</title>
  </head>
  <body>
    <h1>文章标题</h1>

    <!-- 水平分割线 -->
    <hr />

    <p>这是文章的第一部分内容。</p>

    <!-- 水平分割线 -->
    <hr />

    <p>这是文章的第二部分内容。</p>
  </body>
</html>

文本格式化标签

HTML提供了多种文本格式化标签，用于强调或修饰文本。

强调标签

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>文本格式化标签示例</title>
  </head>
  <body>
    <!-- 加粗标签 -->
    <p><b>粗体文字</b> - 使用 b 标签</p>
    <p><strong>重要文字</strong> - 使用 strong 标签（语义化，表示重要）</p>

    <!-- 斜体标签 -->
    <p><i>斜体文字</i> - 使用 i 标签</p>
    <p><em>强调文字</em> - 使用 em 标签（语义化，表示强调）</p>

    <!-- 下划线标签 -->
    <p><u>下划线文字</u> - 使用 u 标签</p>
    <p><ins>插入文字</ins> - 使用 ins 标签（语义化，表示新增内容）</p>

    <!-- 删除线标签 -->
    <p><s>删除线文字</s> - 使用 s 标签</p>
    <p><del>删除文字</del> - 使用 del 标签（语义化，表示删除内容）</p>

    <!-- 上标和下标 -->
    <p>H<sub>2</sub>O - 水的化学式，使用 sub 下标</p>
    <p>E = mc<sup>2</sup> - 爱因斯坦公式，使用 sup 上标</p>

    <!-- 标记标签 -->
    <p><mark>高亮标记文字</mark> - 使用 mark 标签</p>

    <!-- 小号文字 -->
    <p><small>小号文字</small> - 使用 small 标签</p>
  </body>
</html>

语义化 vs 非语义化标签

标签	含义	是否语义化
`<b>`	粗体	否（仅样式）
`<strong>`	重要内容	是
`<i>`	斜体	否（仅样式）
`<em>`	强调内容	是
`<s>`	删除线	否（仅样式）
`<del>`	已删除内容	是

最佳实践

推荐使用语义化标签（<strong>、<em>、<del>等），因为它们对搜索引擎和屏幕阅读器更友好。

引用标签

短引用

<q> 标签用于短引用，浏览器会自动添加引号。

html

<p>孔子说：<q>学而时习之，不亦说乎？</q></p>

长引用

<blockquote> 标签用于长引用，通常会有缩进效果。

html

<blockquote>
  <p>生活就像一盒巧克力，你永远不知道下一颗是什么味道。</p>
  <cite>—— 电影《阿甘正传》</cite>
</blockquote>

引用来源

<cite> 标签用于标注引用的来源。

html

<p>《红楼梦》的作者是<cite>曹雪芹</cite>。</p>

缩写标签

<abbr> 标签用于标注缩写词，title 属性提供完整解释。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>缩写标签示例</title>
  </head>
  <body>
    <!-- 鼠标悬停时会显示完整解释 -->
    <p><abbr title="HyperText Markup Language">HTML</abbr>是一种标记语言。</p>
    <p><abbr title="Cascading Style Sheets">CSS</abbr>用于网页样式。</p>
    <p><abbr title="World Wide Web">WWW</abbr>是万维网的缩写。</p>
  </body>
</html>

代码标签

HTML提供了专门用于显示代码的标签：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>代码标签示例</title>
  </head>
  <body>
    <!-- 行内代码 -->
    <p>使用 <code>console.log()</code> 输出内容。</p>

    <!-- 键盘输入 -->
    <p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制内容。</p>

    <!-- 程序输出 -->
    <p>程序输出：<samp>Hello World</samp></p>

    <!-- 变量 -->
    <p>变量 <var>x</var> 的值是 10。</p>

    <!-- 预格式化代码块 -->
    <pre>
<code>function hello() {
    console.log("Hello, World!");
}

hello();</code>
    </pre>
  </body>
</html>

`<pre>` 预格式化标签

<pre> 标签会保留文本中的空格和换行：

html

<pre>
    这里的
        空格和换行
    都会被保留
</pre>

地址标签

<address> 标签用于定义联系信息：

html

<address>
  作者：张三<br />
  邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br />
  地址：北京市朝阳区xxx街道
</address>

div和span标签

<div> 和 <span> 是HTML中最常用的容器标签，它们本身没有任何样式。

div标签（块级元素）

<div> 是块级元素，独占一行，用于组合其他HTML元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>div标签示例</title>
  </head>
  <body>
    <!-- 头部区域 -->
    <div class="header">
      <h1>网站标题</h1>
      <nav>导航菜单</nav>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="article">
        <h2>文章标题</h2>
        <p>文章内容...</p>
      </div>
      <div class="sidebar">
        <h3>侧边栏</h3>
        <p>侧边栏内容...</p>
      </div>
    </div>

    <!-- 底部区域 -->
    <div class="footer">
      <p>版权信息</p>
    </div>
  </body>
</html>

span标签（行内元素）

<span> 是行内元素，只占据内容宽度，用于标记文本的一部分：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>span标签示例</title>
  </head>
  <body>
    <p>
      我的名字是<span class="name">张三</span>，今年<span class="age">25</span
      >岁。
    </p>

    <p>价格：<span class="price">¥99.00</span></p>

    <p>状态：<span class="status">已完成</span></p>
  </body>
</html>

块级元素 vs 行内元素

特性	块级元素	行内元素
占据空间	独占整行	只占内容宽度
宽高设置	可以设置	不能设置
包含元素	可以包含块级和行内元素	只能包含行内元素
常见标签	div, p, h1-h6, ul, li	span, a, img, strong

html

<!-- 块级元素示例 -->
<div style="width: 200px; height: 100px; background: lightblue;">
  这是一个div，独占一行
</div>
<div style="width: 200px; height: 100px; background: lightgreen;">
  这是另一个div，另起一行
</div>

<!-- 行内元素示例 -->
<span style="background: lightblue;">span1</span>
<span style="background: lightgreen;">span2</span>
<span style="background: lightyellow;">span3</span>

常用标签总结

标签	作用	类型
`<h1>` - `<h6>`	标题	块级
`<p>`	段落	块级
`<br>`	换行	行内
`<hr>`	水平线	块级
`<strong>`	重要文本（粗体）	行内
`<em>`	强调文本（斜体）	行内
`<div>`	块级容器	块级
`<span>`	行内容器	行内
`<pre>`	预格式化文本	块级
`<code>`	代码文本	行内

综合示例

下面是一个综合运用各种基础标签的示例：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML基础标签示例</title>
  </head>
  <body>
    <!-- 页面主标题 -->
    <h1>HTML基础标签教程</h1>

    <!-- 分割线 -->
    <hr />

    <!-- 章节标题 -->
    <h2>什么是HTML？</h2>
    <p>
      <abbr title="HyperText Markup Language">HTML</abbr
      >是一种用于创建网页的标准标记语言。
      它由一系列<strong>元素</strong>组成，这些元素告诉浏览器如何显示内容。
    </p>

    <h2>学习要点</h2>
    <p>学习HTML需要掌握以下内容：</p>
    <p>
      1. <strong>标签</strong>：HTML的基本单位<br />
      2. <strong>属性</strong>：为标签提供附加信息<br />
      3. <strong>文档结构</strong>：HTML文档的基本框架
    </p>

    <h2>代码示例</h2>
    <p>下面是一个简单的HTML代码：</p>
    <pre>
<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code>
    </pre>

    <h2>提示信息</h2>
    <p>
      按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件。<br />
      按 <kbd>F12</kbd> 打开开发者工具。
    </p>

    <h2>引用</h2>
    <blockquote>
      <p>学习HTML是网页开发的第一步，也是最基础的一步。</p>
      <cite>—— 网页开发教程</cite>
    </blockquote>

    <!-- 分割线 -->
    <hr />

    <!-- 页脚信息 -->
    <address>
      作者：Tech Docs Station<br />
      更新日期：2024年
    </address>
  </body>
</html>

本章小结

本章我们学习了：

标题标签：<h1> 到 <h6>，用于定义不同级别的标题
段落标签：<p> 用于定义段落
换行和水平线：<br> 和 <hr>
文本格式化标签：<strong>、<em>、<mark> 等
引用标签：<q>、<blockquote>、<cite>
代码标签：<code>、<pre>、<kbd>
容器标签：<div> 和 <span>

下一章我们将学习链接与图像，了解如何在网页中添加超链接和图片。

基础标签 ​

标题标签 ​

标题标签的正确使用 ​

段落标签 ​

换行标签 ​

水平线标签 ​

文本格式化标签 ​

强调标签 ​

语义化 vs 非语义化标签 ​

引用标签 ​

短引用 ​

长引用 ​

引用来源 ​

缩写标签 ​

代码标签 ​

<pre> 预格式化标签 ​

地址标签 ​

div和span标签 ​

div标签（块级元素） ​

span标签（行内元素） ​

块级元素 vs 行内元素 ​

常用标签总结 ​

综合示例 ​

本章小结 ​

下一章 ​

基础标签

标题标签

标题标签的正确使用

段落标签

换行标签

水平线标签

文本格式化标签

强调标签

语义化 vs 非语义化标签

引用标签

短引用

长引用

引用来源

缩写标签

代码标签

`<pre>` 预格式化标签

地址标签

div和span标签

div标签（块级元素）

span标签（行内元素）

块级元素 vs 行内元素

常用标签总结

综合示例

本章小结

下一章