web前端2--标签
（在web前端中超级重要！！！）
1、标题标签
双标签
在HTML中标题标签用于定义网页中的标题或子标题。HTML提供了六个级别的标题标签分别是`<h1>`到`<h6>`，其表示不同的标题级别，其中`<h1>`是最高级别，`<h6>`是最低级别。
作用：加粗效果
```js
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
```
<!-- h1通常只要一个 易于阅读和理解 -->2、段落标签
段落标签由开始标签`<p>`和结束标签`</p>`组成，开始和结束标签之间的内容会被视为一个段落。
段落与段落之间有一定的间距。
这有助于使页面内容更易读，提升用户体验。
段落标签会独占一整行的，单独显示一行文字可以使用p标签
3、换行标签
遵循空白折叠规则，连续的空白字符（空格、换行符等）会被合并成一个空格。
<p>
这是第一行<br>这是第二行
</p>
4、字符实体
写出< > 和标签冲突
使用<在页面中呈现"<"
使用> 在页面中呈现">"
使用 在页面中呈现一个空格
使用© 在页面中呈现版权符号"©"
使用¥ 在页面中呈现人民币符号"￥"
5、文本格式化标签
粗体文本 b strong(语义上表示强调)
斜体文本 i em(语义上表示强调)
删除线文本 s del
下划线文本 u ins
上标 x <sup>2</sup>
下标H<sub>2</sub>O
标签语义化 好理解 有利于机器解析
6、span标签
包裹文字 视觉上不会有任何变化
配合css添加特殊的样式
<p>这是一个 <span style="color: red;">普通的</span> 文本</p>
7、图片标签
img标签插入图片
属性注意点
- 属性写在开始标签的内部
- 标签存在很多属性
- 属性之间空格隔开
- 没有顺序之分
| 属性 | 说明 |
| :------: | :------------------------------------: |
| `src` | 指定需要展示图片的路径 |
| `alt` | 替换文本：当图片加载失败时，显示的文字 |
| `title` | 提示文本：当鼠标悬停时，显示的文字 |
| `width` | 图片的宽度 |
| `height` | 图片的高度 |
如果只设置width和height中的一个
另一个会等比缩放
8、超链接
超链接(Hyperlink)通常简称为链接(Link)，是指从一个网页指向另一个目标的连接关系，
这个目标可以是另一个网页，也可以是当前网页中的其它位置，还可以是图片、文件、应用程序等。
链接的两端分别称为源锚点和目标锚点，通过点击源锚点即可以跳转到目标锚点。
href 指定连接的目标 跳到什么位置
跳到指定位置
<a name="top"></a> target 指定新页面的打开方式
| 属性值 | 说明 |
| :------: | :--------------------------------------------: |
| `_self` | 默认，在现有窗口中打开新页面，原窗口将被覆盖。 |
| `_blank` | 在新窗口中打开新页面，原窗口将被保留。 |
9、div标签
`div`标签 容器，常用于布局。
div里面嵌套任意标签
10、列表标签
1、无序列表
<ul>
<li>唱歌</li>
<li>跳舞</li>
<li>打篮球</li>
</ul><ul> 标签 标识了无序列表的开始和结束
<li> 标签 代表单个列表项
无序列表用布局 一些长得一样 结构一样的东西
快捷键 ul>li*100 (若干个)
- 支持嵌套 列表项里面包含无需列表
<ul>
<li>列表项 1
<ul>
<li>嵌套列表项 1.1</li>
<li>嵌套列表项 1.2</li>
</ul>
</li>
<li>列表项 2</li>
</ul>"disc"实心圆点
"circle"空心圆点
"square" 实心方块
style="list-style: none" 清除小圆点
```html
<ul style="list-style: none">
<li>唱歌</li>
<li>跳舞</li>
<li>打篮球</li>
</ul>
<ul style="list-style:square">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
```
2、有序列表
HTML有序列表用于组织一组需要按特定顺序展示的列表项，因此被称为“有序”列表。列表项前通常使用数字作为标记，表明各项的顺序。
`<ol>`标签：这个标签定义了有序列表的开始和结束，是创建有序列表的容器。所有需要按顺序展示的列表项都应该包含在这个标签内部。
`<li>`标签：代表有序列表中的单个列表项。与无序列表一样，每个列表项都使用`<li>`标签来标记，但在有序列表中，每个`<li>`项前通常会自动添加一个数字，反映其在列表中的顺序。
在使用有序列表时，也应遵循将`<li>`标签直接嵌套在`<ol>`标签内的规范，以保持结构清晰和语义准确。
"decimal-leading-zero"数字前带有前导零(01, 02, 03)
"lower-alpha"使用小写字母作为标记(a, b, c)
"upper-alpha"使用大写字母作为标记(A, B, C)
"lower-roman"使用小写罗马数字(i, ii, iii)
"upper-roman"使用大写罗马数字(I, II, III)
3、定义列表
dl 定义整体结构 容器
dt 用于名词 需要解释定义的项目
dd 紧随dt之后 提供dt的说明和定义
```html
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于设置HTML文档的样式。</dd>
<dd>CSS允许控制文本颜色、字体和页面布局等。</dd>
</dl>
```
支持嵌套 dt里面可以嵌套一个完整的dl
4、iframe标签
在一个网页中嵌入另一个html页面
frameborder="0" 0是无框 1 有框
<iframe src="https://www.bilibili.com/" frameborder="1" width="1000" height="500"></iframe>
11、实例--人物简介
