标签之标题
标题介绍与应用
标题（Heading）是通过 <h1> - <h6>标签进行定义的。
<h1>定义最大的标题 <h6>定义最小的标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>生成h1~h6快捷键：h$*6
VSCode插件
快速打开浏览器
扩展 -> 搜索open in browser -> 点击安装
正确使用标题
请确保将 HTML 标题标签只用于标题。
不要仅仅是为了生成粗体或大号的文本而使用标题。
正确使用标题有益于SEO
应该将< h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推
标题标签位置摆放
在标签中添加属性：align="left | center | right" 默认居左
标签之段落_换行_水平线
标签之段落、换行、水平线
标签之段落
段落是通过<p>标签定义的
<p>这是一个段落 </p>
<p>这是另一个段落</p>
换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>
<br /> 元素是一个空的 HTML 元素。
<p>这个<br>段落<br>演示了分行的效果</p>
水平线
<hr/>标签在 HTML 页面中创建水平线
<hr color="" width="" size="" align=""/>属性：
- color：设置水平线的颜色
- width：设置水平线的长度
- size：设置水平线的高度
- align：设置水平线的对齐方式（默认居中），可取值left|right
标签之图片
网站中最多的元素
网站中最多的元素毋庸置疑，一定是图片
<img> 标签定义 HTML 页面中的图像
<img src="" alt="" title="" width="" height="">属性：
- src：路径（图片地址与名字）
- alt：规定图像的替代文本
- width：规定图像的宽度
- height：规定图像的高度
- title：鼠标悬停在图片上给予提示
路径详解
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
E:\itbaizhanCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">相对路径
两者相对关系，两者在同⼀路径下可以直接访问
- ⼦级关系:
/ - ⽗级关系:
../ - 同级关系:
./
网络路径
具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png
标签之超文本链接
超链接描述
HTML使用标签 <a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
超链接属性
在标签<a>中使用了href属性来描述链接的地址
默认情况下，链接将以，以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
特别提示
后期我们会通过CSS样式修改掉这些效果
<a href="url">链接文本</a>超链接表现
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
超链接之锚点
超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
跳转到当前文档的某个部分的形式就是“锚点”
锚点实现方式
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>标签之文本
常用文本标签
标签 | 描述 |
| 定义着重文字 |
| 定义粗体文本 |
| 定义斜体字 |
| 定义加重语气 |
| 定义下标字 |
| 定义上标字 |
| 定义删除字 |
| 元素没有特定的含义 |
特别提示
常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇
列表标签之有序列表
有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。
<ol>
<li>世纪恒通</li>
<li>世纪恒通科技股份</li>
</ol>
type属性
<ol>的属性type 拥有的选项
- 1 表示列表项目用数字标号（1,2,3…）
- a 表示列表项目用小写字母标号（a,b,c…）
- A 表示列表项目用大写字母标号（A,B,C…）
- i 表示列表项目用小写罗马数字标号（i,ii,iii…）
- I 表示列表项目用大写罗马数字标号（I,II,III…）
有序列表嵌套
列表是可以进行嵌套的
<ol>
<li>贵阳</li>
<li>
<ol>
<li>世纪恒通</li>
<li>多彩贵州</li>
</ol>
</li>
<li>黎阳航发</li>
</ol>
列表标签之无序列表
无序列表实现
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于 <ul> 标签。每个列表项始于<li> 标签。
type属性
<ul>的属性type 拥有的选项
- disc 默认实心圆
- circle 空心圆
- square 小方块
- none 不显示
无序列表嵌套
列表是可以进行嵌套的
快捷键
快速生成上述结构：ul>li>a[href=#]
列表标签之自定义列表
自定义列表实现
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
应用场景
在一些需要对列表进行解释的部分，可以使用自定义列表
标签之表格
表格展示效果
表格在数据展示方面非常简单，并且表现优秀
表格组成与特点
行、列、单元格
单元格特点：同行等高、同列等宽。
表格标签
表格：
<table>行：
<tr>单元格(列)：
<td>快捷键
快速生成表格结构：table>tr*2>td{单元格}
表格其他标签
表格名字：
<caption>表格头部：
<thead>特殊单元格：
<th>表格的身体：
<tbody>表格的脚步：
<tfoot>
复杂且并不常用的表格标签
<table>
<caption>表格名字</caption>
<thead>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>李四</td>
<td>20</td>
</tr>
</tfoot>
</table>
表格属性详解
<table>表格属性
- border：设置表格的边框
- width：设置表格的宽度
- height：设置表格的高度
- align：设置表格的水平对齐方式
- cellpadding：设置内容距离边框的距离
- cellspacing：设置单元格之间的距离
- bgcolor：设置表格背景颜色
- bordercolor：设置边框颜色
- background：设置背景图片
<tr>的属性
- height：设置一行的高度
- bgcolor：设置一行的背景颜色
- background：设置一行的背景图片
- align：设置行里内容水平对齐方式，取值：left、center、right
- valign：设置行里内容垂直对齐方式，取值：top、middle、bottom
<td>的属性
- width：设置单元格的宽度，同列等宽
- height：设置单元格的高度，同行等高
- align：设置单元格内容水平对齐方式
- valign：设置单元格内容垂直对齐方式
- bgcolor：设置单元格背景颜色
- background：设置单元格背景图片
表格单元格合并
单元格合并属性
- 水平合并：colspan
- 垂直合并：rowspan
<table align="center" border="" width="500px" height="200px" cellspacing="0">
<tr>
<td colspan="3">单元格1单元格2单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td rowspan="2">单元格6-11</td>
<td>单元格7</td>
<td rowspan="3">单元格81318</td>
<td colspan="2" rowspan="2">单元格9101415</td>
</tr>
<tr>
<td>单元格12</td>
</tr>
<tr>
<td>单元格16</td>
<td>单元格17</td>
<td>单元格19</td>
<td>单元格20</td>
</tr>
</table>
