HTML5 零基础完全教程-2-HTML5 基础标签
2. HTML5 基础标签
学习目标
- 掌握HTML5常用的文本格式化标签
- 理解语义化容器标签的使用
- 学会使用注释标签
- 熟悉常用的HTML字符实体
文本格式化标签
HTML5提供了多种标签来格式化文本，使其在页面上以特定的方式显示。下面介绍最常用的文本格式化标签：
标题标签（<h1>到<h6>）
HTML提供六个级别的标题，从<h1>（最大）到<h6>（最小）：
html复制代码<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
小贴士：每个HTML页面应该只有一个<h1>标题，它通常用于页面的主标题。标题标签不仅影响文本的显示大小，也对网页的结构和搜索引擎优化（SEO）非常重要。
段落标签（<p>）
<p>标签用于定义段落：
html复制代码<p>这是一个段落。它可以包含多行文本，浏览器会自动处理段落内的换行和空格。</p>
<p>这是另一个段落。每个段落之间浏览器会自动添加一些间距。</p>
换行标签（<br>）
<br>标签用于插入一个换行，而不开始一个新段落：
html复制代码<p>这是第一行文本。<br>这是第二行文本，位于同一段落内。</p>
小贴士：<br>是一个空元素，不需要结束标签。在HTML5中，可以写为<br>或自闭合形式<br/>。
水平线标签（<hr>）
<hr>标签用于插入一条水平线，通常用于分隔内容：
html复制代码<p>这是第一部分内容。</p>
<hr>
<p>这是第二部分内容。</p>
文本强调标签
HTML提供了多种方式来强调文本：
- 加粗文本：
- <strong>：表示文本很重要，通常显示为加粗（推荐使用，有语义）
- <b>：仅表示文本加粗显示（无特殊语义）
- html复制代码
- <p>这段文字包含<strong>重要内容</strong>和<b>加粗文本</b>。</p>
- 倾斜文本：
- <em>：表示强调，通常显示为斜体（推荐使用，有语义）
- <i>：仅表示文本斜体显示（无特殊语义）
- html复制代码
- <p>这段文字包含<em>强调内容</em>和<i>斜体文本</i>。</p>
- 下划线：
- <u>：给文本添加下划线
- html复制代码
- <p>这段文字包含<u>带下划线的文本</u>。</p>
- 删除线：
- <del>：表示已删除的文本（有语义）
- <s> 或 <strike>：表示不再正确的文本
- html复制代码
- <p>这件商品原价<del>yen199</del>，现在只要<strong>yen99</strong>！</p> <p>这是<s>错误的信息</s>更正后的信息。</p>
- 插入线：
- <ins>：表示插入的文本，通常显示为下划线
- html复制代码
- <p>我们将于<del>明天</del><ins>后天</ins>举行会议。</p>
上标和下标
- <sup>：上标文本
- <sub>：下标文本
html复制代码<p>水的化学式是H<sub>2</sub>O。</p>
<p>二次方表示为x<sup>2</sup>。</p>
预格式化文本（<pre>）
<pre>标签保留文本中的空格和换行，常用于显示代码：
html复制代码<pre>
function sayHello() {
console.log("Hello, World!");
}
</pre>
代码标签（<code>）
<code>标签用于表示计算机代码片段：
html复制代码<p>HTML中段落使用<code><p></code>标签定义。</p>
标记标签（<mark>）
<mark>标签用于突出显示文本，通常背景为黄色：
html复制代码<p>请注意这段文字中的<mark>重要信息</mark>需要特别关注。</p>
小号文本（<small>）
<small>标签用于定义小号文本，常用于免责声明、注释等：
html复制代码<p>这是正常大小的文本。<small>这是小号文本，常用于脚注或法律声明。</small></p>
缩写标签（<abbr>）
<abbr>标签用于定义缩写，并提供完整描述：
html复制代码<p>我们使用<abbr title="超文本标记语言">HTML</abbr>来构建网页。</p>
小贴士：当用户将鼠标悬停在带有title属性的<abbr>元素上时，会显示完整的描述。
地址标签（<address>）
<address>标签用于定义文档或文章的联系信息：
html复制代码<address>
Written by <a href="mailto:john@example.com">John Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
文字方向标签（<bdo>）
<bdo>标签用于改变文本的方向：
html复制代码<p>从左到右：<bdo dir="ltr">这是正常文本</bdo></p>
<p>从右到左：<bdo dir="rtl">这是反向文本</bdo></p>
语义化容器标签
通用容器（<div>）
<div>是一个通用的块级容器，常用于组织和样式化内容：
html复制代码<div>
<h2>我的博客文章</h2>
<p>这是文章内容...</p>
<p>更多内容...</p>
</div>
小贴士：<div>本身没有特定语义，它主要用于结合CSS进行页面布局和样式设计。
行内容器（<span>）
<span>是一个行内容器，常用于对文本的一部分应用样式：
html复制代码<p>我最喜欢的颜色是<span style="color:blue">蓝色</span>。</p>
小贴士：<div>和<span>的主要区别是：<div>是块级元素，会另起一行；而<span>是行内元素，不会破坏文本流。
注释标签
HTML注释用于在源代码中添加说明，这些注释不会显示在浏览器中：
html复制代码<!-- 这是一个HTML注释，用户在浏览网页时看不到它 -->
<p>这是可见的段落。</p>
<!--
这是多行注释
可以跨越多行
用于较长的说明
-->
小贴士：注释对于代码维护非常重要，特别是在复杂项目中。好的注释可以帮助你和其他开发者理解代码的结构和目的。
字符实体
HTML中的一些字符是预留的，如<和>。要在文本中显示这些特殊字符，我们需要使用字符实体。
常用的字符实体包括：
显示结果 | 描述 | 实体名称 | 实体编号 |
不间断空格 |
|
| |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
’ | 撇号 | ' | ' |
(c) | 版权符号 | © | © |
(R) | 注册商标 | ® | ® |
TM | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
示例：
html复制代码<p>在HTML中，小于号 < 和大于号 > 需要使用字符实体。</p>
<p>版权所有 (c) 2023 我的网站。</p>
小贴士：记住最常用的字符实体（如<、>、&和©）是很有用的。对于不常用的字符，可以在需要时查阅参考资料。
实际应用示例
下面是一个综合使用多种基础标签的例子：
html复制代码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5基础标签示例</title>
</head>
<body>
<!-- 页面标题 -->
<h1>我的个人博客</h1>
<!-- 文章部分 -->
<div>
<h2>HTML5学习笔记</h2>
<p>HTML5是<abbr title="超文本标记语言">HTML</abbr>的第五个主要版本，于2014年正式发布。</p>
<p>它引入了许多新特性，包括：</p>
<p>1. 语义化标签如<code><header></code>和<code><footer></code></p>
<p>2. 多媒体支持如<code><audio></code>和<code><video></code></p>
<p>这段代码：</p>
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<p>你好，世界！</p>
</body>
</html>
</code></pre>
<p>创建了一个简单的HTML页面。</p>
<p>HTML中的特殊字符如<、>、&需要使用字符实体表示。</p>
</div>
<hr>
<!-- 联系信息 -->
<address>
作者：张三<br>
电子邮件：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
网站：<a href="https://www.example.com">www.example.com</a>
</address>
<p><small>(c) 2023 我的博客。保留所有权利。</small></p>
</body>
</html>
章节总结
在本章中，我们学习了：
- 多种文本格式化标签，包括标题、段落、换行、加粗、倾斜等
- 语义化容器标签<div>和<span>的使用
- HTML注释的添加方法
- 常用的HTML字符实体
这些基础标签是构建HTML页面的基本构件。掌握它们的用法，你就能创建结构良好且内容丰富的网页。
练习题
- 创建一个HTML页面，包含一个主标题(h1)，两个子标题(h2)，和三个段落(p)。为内容选择一个你感兴趣的主题，如你的爱好或最近的一次旅行。
- 在上述页面中，使用<strong>或<b>标签强调段落中的关键词，使用<em>或<i>标签表示段落中的引文或特殊术语。
- 使用<pre>和<code>标签展示一段HTML或其他编程语言的代码片段，确保代码格式保持不变并且特殊字符正确显示。
- 创建一个包含至少三个不同HTML字符实体的段落，例如版权符号((c))、注册商标((R))、小于号(<)和大于号(>)等。
- 使用<div>和<span>标签创建一个简单的布局，并解释这两种标签的区别和各自的使用场景。你可以使用简单的内联样式(style属性)来突显它们的不同。