web前端 --- 常见页面标签和语义化标签

本文链接：https://blog.youkuaiyun.com/weixin_62443409/article/details/125287029

本文介绍了HTML5的基本概念、发展历史和网页开发环境。详细讲解了HTML5的常用标签，包括块标签如div、hn、p，行内标签如strong、em、span，以及特殊标签如sub、sup、br、hr等。通过实例展示了如何使用这些标签构建网页，并强调了标签的语义化使用。最后，提供了一个实际的HTML5代码案例，涵盖了标题、段落、强调、上下标、自结束标签和布局元素的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML5

（1）含义： HTML（Hypertext Markup Language）---超文本标记语言

是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素 --- 根标签定义
<head> 元素包含了文档的元（meta）数据，如 <meta charset="UTF-8"> 定义网页编码格式为 UTF-8 --- 属性定义
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<header> 元素包换了网页头部 --- 头部内容
<session> 元素包含网页模块内容
<footer> 元素包含网页页脚内容

（2）发展历史

HTML标签是固定的，XML标签是用户自定义的。

全球第一个网站

蒂姆·伯纳斯-李建立（http://info.cern.ch）

（3）网页开发

开发环境：sublime、vscode、hbuider、webstrom
运行环境：浏览器（chrome、edge）

（4）基本语法结构

网页文档声明
网页属性
网页内容

附：HTML文档的后缀名

.html
.htm

以上两种后缀名没有区别，都可以使用。

2、常见页面标签

根据标签在页面中的表现形式，标签分为两大类：

（1）块标签：占据一行，即便内容未满

div：标准块标签
hn：标题标签（n:1-6）
p：段落标签
table：表格标签
hr：分隔线标签

（2）行内标签：内容有多少，占多少

strong/b：加粗
i/em：斜体字
u：（underline）下划线
del：中划线
sub：(subway)下标
sup：上标
span：标准行内标签

（3）标签语义化：H5新特性 --- （正确的标签干正确的事）

article：文章标签
city：城市
address：地址
aside：边沿
footer：尾部
header：头部
section：正体部分
code：代码
br：换行标签

3、标签详解

（1）标题标签：hn --- （n:1-6）

<h1>一级标题</h1>
<h2>二级标题</h2> 
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
PS：无七级标题

标题标签的默认样式是自动加粗的；字体大小一级标题最大，六级最小；标题与标题之间有较大的间距，独占一行，相当于块元素。

（2）段落标签：p

<p>段落标签</p>

段落标签的默认样式是行与行之间有空行，相当于块元素。

（3）强调标签：

加粗标签：strong/b
斜体标签：em/i

大珠小珠<strong>落玉盘</strong><!--strong：加粗-->
<i>1234567</i> <!--i:斜体-->

（4）标准块标签：div

<div>弦弦掩抑声声思，似诉平生不得志。</div><!--div:标准块标签，换行输出-->

div是用来布局的，只是一个区块，块元素。

（5）标准行内标签：span

<span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。</span>

span标签无语义，一般用来包裹文字，行内元素。

（6）上下标：

sup：上标
sub：下标（subway）

a<sub>1</sub>=10<!--sub:(subway)下标-->
a<sup>2</sup>=20<!--sup:(super)上标-->

<sup>标签定义上标文本，上标文本会显示在当前文本流字符高度一半的上方。
<sub>标签定义下标文本，下标文本会显示在当前文本流字符高度一半的下方。

（7）自结束标签：

br：强制换行
hr：分隔线标签

都属于行内元素。

（8）删除标签：del -- 中划线

间关莺语<del>花底滑</del><!--del:中划线-->

4、案例

（1）代码

<!DOCYTPE html>
<html> <!--开始标签-->
    <head> <!--头部，其中内容无法显示-->
        <meta charset="utf-8"><!--定义页面编码-->
        <title> 
            第一个页面
        </title><!--标题，可显示-->
    </head>
    <body> 
        <style>
            #box{
                color: red;
            }

            .msg{
                display: block;
            }

        </style><!--1、让id为box的标签，显示为红色。2、将msg类的行内标签转为块标签-->
        <u>页面中的内容</u>
        <h1>琵琶行</h1>
        <!-- <h2>琵琶行</h2>
        <h3>琵琶行</h3>
        <h4>琵琶行</h4>
        <h5>琵琶行</h4>
        <h6>琵琶行</h6> -->

        <p style="text-indent:32px"> <!--开头缩进32个像素，浏览器默认16个像素代表一个字母-->
            <!--b:blod。加粗--><b>嘈嘈</b>切切错杂弹 <br/><!--换行。自结束标签，无需添加</br>。/在H5中可省略--> <i>1234567</i> <!--i:斜体-->
        </p> <!--段落 -->
        a<sub>1</sub>=10<!--sub:(subway)下标-->
        a<sup>2</sup>=20<!--sup:(super)上标-->
        <p style="text-indent:32px">
            大珠小珠<strong>落玉盘</strong><!--strong：加粗-->
            间关莺语<del>花底滑</del><!--del:中划线-->
        </p> <!--段落间有空行，开头无空格-->
        <span id="box" >间关莺语花底滑，幽咽泉流冰下难.</span><!--span:标准行内标签-->
        <hr>
        <div>弦弦掩抑声声思，似诉平生不得志。</div>
        <div>弦弦掩抑声声思，似诉平生不得志。</div><!--div:标准块标签，换行输出-->

        <span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。</span>
        <span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。</span>

    </body><!--可显示的内容-->
</html> <!--结束标签-->