2. HTML5 基础标签

学习目标

• 掌握HTML5常用的文本格式化标签
• 理解语义化容器标签的使用
• 学会使用注释标签
• 熟悉常用的HTML字符实体

文本格式化标签

HTML5提供了多种标签来格式化文本，使其在页面上以特定的方式显示。下面介绍最常用的文本格式化标签：

标题标签（

到

）

HTML提供六个级别的标题，从

（最大）到

（最小）：

html复制代码
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题

小贴士：每个HTML页面应该只有一个

标题，它通常用于页面的主标题。标题标签不仅影响文本的显示大小，也对网页的结构和搜索引擎优化（SEO）非常重要。

段落标签（

）

标签用于定义段落：

html复制代码
这是一个段落。它可以包含多行文本，浏览器会自动处理段落内的换行和空格。
这是另一个段落。每个段落之间浏览器会自动添加一些间距。

换行标签（
）

标签用于插入一个换行，而不开始一个新段落：

html复制代码
这是第一行文本。
这是第二行文本，位于同一段落内。

小贴士：
是一个空元素，不需要结束标签。在HTML5中，可以写为
或自闭合形式
。

水平线标签（

---

）

html复制代码
这是第一部分内容。

这是第二部分内容。

文本强调标签

HTML提供了多种方式来强调文本：

• 加粗文本：
• ：表示文本很重要，通常显示为加粗（推荐使用，有语义）
• ：仅表示文本加粗显示（无特殊语义）
• html复制代码
• <p>这段文字包含<strong>重要内容</strong>和<b>加粗文本</b>。</p>
• 倾斜文本：
• ：表示强调，通常显示为斜体（推荐使用，有语义）
• ：仅表示文本斜体显示（无特殊语义）
• html复制代码
• <p>这段文字包含<em>强调内容</em>和<i>斜体文本</i>。</p>
• 下划线：
• ：给文本添加下划线
• html复制代码
• <p>这段文字包含<u>带下划线的文本</u>。</p>
• 删除线：
• ：表示已删除的文本（有语义）
• 或 ：表示不再正确的文本
• html复制代码
• <p>这件商品原价<del>yen199</del>，现在只要<strong>yen99</strong>！</p> <p>这是<s>错误的信息</s>更正后的信息。</p>
• 插入线：
• ：表示插入的文本，通常显示为下划线
• html复制代码
• <p>我们将于<del>明天</del><ins>后天</ins>举行会议。</p>

上标和下标

• ^{：上标文本}
• _{：下标文本}

html复制代码
水的化学式是H2O。
二次方表示为x2。

预格式化文本（

）

标签保留文本中的空格和换行，常用于显示代码：
html复制代码
function sayHello() {
    console.log("Hello, World!");
}

代码标签（）
标签用于表示计算机代码片段：
html复制代码
HTML中段落使用
标签定义。
标记标签（）
标签用于突出显示文本，通常背景为黄色：
html复制代码
请注意这段文字中的重要信息需要特别关注。
小号文本（）
标签用于定义小号文本，常用于免责声明、注释等：
html复制代码
这是正常大小的文本。这是小号文本，常用于脚注或法律声明。
缩写标签（）
标签用于定义缩写，并提供完整描述：
html复制代码
我们使用HTML来构建网页。
 小贴士：当用户将鼠标悬停在带有title属性的元素上时，会显示完整的描述。
地址标签（
）
标签用于定义文档或文章的联系信息：
html复制代码

    Written by John Doe.

    Visit us at:

    Example.com

    Box 564, Disneyland

    USA

文字方向标签（）
标签用于改变文本的方向：
html复制代码
从左到右：这是正常文本
从右到左：这是反向文本
语义化容器标签
通用容器（
）
是一个通用的块级容器，常用于组织和样式化内容：
html复制代码

    
我的博客文章
    
这是文章内容...
    
更多内容...

 小贴士：
本身没有特定语义，它主要用于结合CSS进行页面布局和样式设计。
行内容器（）
是一个行内容器，常用于对文本的一部分应用样式：
html复制代码
我最喜欢的颜色是蓝色。
 小贴士：
和的主要区别是：
是块级元素，会另起一行；而是行内元素，不会破坏文本流。
注释标签
HTML注释用于在源代码中添加说明，这些注释不会显示在浏览器中：
html复制代码
这是可见的段落。

 小贴士：注释对于代码维护非常重要，特别是在复杂项目中。好的注释可以帮助你和其他开发者理解代码的结构和目的。
字符实体
HTML中的一些字符是预留的，如<和>。要在文本中显示这些特殊字符，我们需要使用字符实体。
常用的字符实体包括：
显示结果
描述
实体名称
实体编号

不间断空格
 
 
<
小于号
<
<
>
大于号
>
>
&
和号
&
&
"
引号
"
"
’
撇号
'
'
(c)
版权符号
(c)
(c)
(R)
注册商标
(R)
(R)
TM
商标
TM
TM
×
乘号
×
×
÷
除号
÷
÷
示例：
html复制代码
在HTML中，小于号 <> 需要使用字符实体。
版权所有 (c) 2023 我的网站。
 小贴士：记住最常用的字符实体（如<、>、&和(c)）是很有用的。对于不常用的字符，可以在需要时查阅参考资料。
实际应用示例
下面是一个综合使用多种基础标签的例子：
html复制代码


    
    
    


    
    
我的个人博客
    
    
    

        
HTML5学习笔记
        
HTML5是HTML的第五个主要版本，于2014年正式发布。
        
它引入了许多新特性，包括：
        
1. 语义化标签如
和
    
    

    
    
    

        作者：张三

        电子邮件：zhangsan@example.com

        网站：www.example.com
    
    
    
(c) 2023 我的博客。保留所有权利。


章节总结
在本章中，我们学习了：
多种文本格式化标签，包括标题、段落、换行、加粗、倾斜等
语义化容器标签
和的使用
HTML注释的添加方法
常用的HTML字符实体
这些基础标签是构建HTML页面的基本构件。掌握它们的用法，你就能创建结构良好且内容丰富的网页。
练习题
创建一个HTML页面，包含一个主标题(h1)，两个子标题(h2)，和三个段落(p)。为内容选择一个你感兴趣的主题，如你的爱好或最近的一次旅行。
在上述页面中，使用或标签强调段落中的关键词，使用或标签表示段落中的引文或特殊术语。
使用
和标签展示一段HTML或其他编程语言的代码片段，确保代码格式保持不变并且特殊字符正确显示。
创建一个包含至少三个不同HTML字符实体的段落，例如版权符号((c))、注册商标((R))、小于号(<)和大于号(>)等。
使用
和标签创建一个简单的布局，并解释这两种标签的区别和各自的使用场景。你可以使用简单的内联样式(style属性)来突显它们的不同。



        

        

            
            
            
            
        
        
    
    
        

        CSS 实体    
    




    

        
上一篇：十八.XSS跨站脚本攻击原理及代码攻防演示(一)
        
下一篇：【python】常用的内置函数和包（python中的内置函数大全）