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

前端阿坤

已于 2024-02-23 16:05:50 修改

阅读量587

点赞数 4

分类专栏： HTML 文章标签：前端

于 2024-02-23 15:16:33 首次发布

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

版权

HTML 专栏收录该内容

1 篇文章

订阅专栏

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>
<i>1234567 </i>

（4）标准块标签：div

<div>弦弦掩抑声声思，似诉平生不得志。</div>

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

（5）标准行内标签：span

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

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

（6）上下标：

sup：上标
sub：下标（subway）

a <sub>1 </sub>=10
a <sup>2 </sup>=20

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

（7）自结束标签：

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

都属于行内元素。

（8）删除标签：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>
<u>页面中的内容 </u>
<h1>琵琶行 </h1>
<!-- <h2>琵琶行</h2>
<h3>琵琶行</h3>
<h4>琵琶行</h4>
<h5>琵琶行</h4>
<h6>琵琶行</h6> -->
<p style="text-indent:32px">
<b>嘈嘈 </b>切切错杂弹 <br/>  <i>1234567 </i>
</p>
a <sub>1 </sub>=10
a <sup>2 </sup>=20
<p style="text-indent:32px">
大珠小珠 <strong>落玉盘 </strong>
间关莺语 <del>花底滑 </del>
</p>
<span id="box" >间关莺语花底滑，幽咽泉流冰下难. </span>
<hr>
<div>弦弦掩抑声声思，似诉平生不得志。 </div>
<div>弦弦掩抑声声思，似诉平生不得志。 </div>
<span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。 </span>
<span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。 </span>
</body>
</html>