优秀的编程知识分享平台

网站首页 > 技术文章 正文

HTML5 零基础完全教程-2-HTML5 基础标签

nanyue 2025-03-25 16:02:44 技术文章 7 ℃

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学习笔记

        
HTML5是HTML的第五个主要版本，于2014年正式发布。

        
它引入了许多新特性，包括：

        
1. 语义化标签如
和

        
2. 多媒体支持如和

        
        
这段代码：

        




    示例


    
你好，世界！



        

        
        
创建了一个简单的HTML页面。

        
        
HTML中的特殊字符如<、>、&需要使用字符实体表示。

    

    
    

    
    
    

        作者：张三

        电子邮件：zhangsan@example.com

        网站：www.example.com
    

    
    
(c) 2023 我的博客。保留所有权利。




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

    

        

                        
Tags：

                    

                

                        

                
            

            
                    

            





    






    
猜你喜欢
最近发表
标签列表