HTML基础标签
一、标签的分类
1. 排版标签
2. 文本格式化标签
3. 媒体标签
4. 链接标签
二、排版标签
标题标签
使用场景：新闻和文章的排版一般都含有标题，用来突出显示文章的主题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
语义：一至六级标题，重要程度依次递减
特点：
文字都加粗
文字大小不一样，从h1~h6文字大小依次递减
独占一行
注意：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
段落标签
使用场景：在新闻和文章的页面中，用于分段显示
<p>这是文章的段落<p>语义：段落
特点：
段落和段落之间有间距
独占一行
<html> <head> <title>段落标签</title> </head> <body> <h1 align="center">荷塘月色</h1> <p align="right">朱自清</p> <p> 这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p> <p> 沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</p> <p> 路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。</p> <p> 曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。</p> <p> 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。</p> <p> 荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾；但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有。</p> <p> 忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流的季节。梁元帝《采莲赋》里说得好： 于是妖童媛女，荡舟心许；鷁首徐回，兼传羽杯；棹将移而藻挂，船欲动而萍开。尔其纤腰束素，迁延顾步；夏始春余，叶嫩花初，恐沾裳而浅笑，畏倾船而敛裾。</p> <p> 可见当时嬉游的光景了。这真是有趣的事，可惜我们现在早已无福消受了。 于是又记起，《西洲曲》里的句子： 采莲南塘秋，莲花过人头；低头弄莲子，莲子清如水。 今晚若有采莲人，这儿的莲花也算得“过人头”了；只不见一些流水的影子，是不行的。这令我到底惦着江南了。——这样想着，猛一抬头，不觉已是自己的门前；轻轻地推门进去，什么声息也没有，妻已睡熟好久了。</p> <p>一九二七年七月，北京清华园。</p> </body> </html>换行标签
使用场景：让文字强制换行显示
你好，<br>世界。 <!-- 你好， 世界。 -->语义：换行
特点：
单标签
让文字强制换行
水平线标签
使用场景：分割不同主题内容的水平线
<p>等你下课</p> <hr> <p>你住的 巷子里</p>语义：主题的分割和转换
特点：
单标签
在页面中显示一条水平线
三、文本格式化标签
文字加粗
strong
b
两个标签都可以对文本进行加粗，`strong`为语义化标签
文本倾斜
em
i
两个标签都可以对文本进行倾斜，em为语义化标签
文本下划线
ins
u
两个标签都可以对文本添加下划线，ins为语义化标签
文本删除线
del
s
两个标签都可以对文本添加删除线，del为语义化标签
<html>
<head>
<title>文本格式化标签</title>
</head>
<body>
<h1 align="center"><ins>任意门 —— 五月天<ins></h1>
<hr>
<p align="center">
<em>行天宫后 二楼前座 那个小房间<br>
日夜排练 我们听着唱片<br>
唱片来自 那唱片行 叫摇滚万岁<br>
和驻唱小店 都在士林边缘<br>
我们都想 离开这边 追寻另一边<br>
苗栗孩子 搬到台北求学<br>
水手之子 重考挤进 信义路校园<br>
和高雄学弟 当时看不顺眼</em><br>
<strong>我们曾走过 无数地方 和无尽岁月<br>
搭着肩环游 无法遗忘 的光辉世界<br>
那年我们都 冲出南阳街<br>
任意门通向了音乐<br>
任意门外我们都任意的飞<br>
是自由的滋味</strong><br>
<del>七号公园 初次登场 是那个三月<br>
自强隧道 漫长的像永远<br>
椰林大道 谁放弃了 律师的家业<br>
头也不回地 越来越唱越远<br>
外滩风光 跃出课本 是那么新鲜<br>
从回民街 再飞到尖沙咀<br>
男儿立志 成名在望 不论多遥远<br>
一离开台北 却又想念台北<br>
我们曾走过 无数地方 和无尽岁月<br>
搭着肩环游 无法遗忘 的光辉世界<br>
无名高地到 鸟巢的十年<br>
一路铺满汗水泪水<br>
任意门外我们用尽全力飞<br>
管他有多遥远<br>
我们曾走过 无数地方 和无尽岁月<br>
搭着肩环游 无法遗忘 的光辉世界<br>
那个唱片行 何时已不见<br>
是谁说过摇滚万岁<br>
任意门里我们偶尔也疲倦<br>
平凡的我们 也将回到 平凡的世界<br>
生活中充满 孩子哭声 柴米和油盐<br>
曾和你走过 麦迪逊花园<br>
任意门外绕一大圈<br>
你问我全世界是哪里最美<br>
答案是你身边 只要是你身边<br>
行天宫后 二楼前座 那个小房间<br>
兽妈准备 宵夜是大鸡腿<br>
每个梦都 像任意门<br>
往不同世界 而你的故事<br>
现在正是起点</del><br>
</p>
</body>
</html>四、媒体标签
1. 图片标签
使用场景：在网页中显示图片
<img src="" alt="" title="" width="" height="">src: 必填，图片的路径
alt: 图片加载失败时替换的文字
title: 鼠标悬停在图片上所显示的文字
width: 图片的宽度
height: 图片的高度
当width和height只设置一个值的时候，另一个会等比例缩放
当width和height同时都设置的时候，图片会被拉伸
特点：单标签，src为必填，如果不填则无法加载图片
<html>
<head>
<title>图片标签</title>
</head>
<body>
<!-- source: 源，缩写src -->
<img src="自传.jpg" alt="图片加载失败了" title="自传——五月天——同级目录" width="100" height="300">
</body>
</html>2. 路径
页面需要加载媒体资源或者其他外部资源的时候，我们需要在网页内去把对应的资源导入进来，所以我们就需要通过路径去找到对应的资源。
类似于生活中的找人需要通过对应的路径才能找的到，也就说你需要知道另一个人在什么地方才可以找到那个人。
绝对路径
指的是目录下的绝对位置
D:\a\b\c\d.jpg
相对路径（相对于当前文件的路径）
当前文件：要引入其他的文件的文件
目标文件：要被其他文件引入的文件
相对路径的分类
同级目录
当前文件和目标文件在同一目录下
<img src="./自传.jpg">`./`表示的就是当前目录
下级目录
目标文件在当前文件的下级目录下
<img src="./images/自传.jpg">./images表示的是当前目录下的`images`目录
上级目录
目标文件在当前文件的上级目录下
<img src="../images/自传.jpg">../images表示当前目录的上级目录下的`images`目录
3. 音频标签
使用场景：在网页内使用音频，MP3等
<audio src="./audio.mp3" controls autoplay loop></aduio>src: 音频的路径
controls: 是否在页面上显示播放控件
autoplay: 是否打开页面自动播放（仅部分浏览器支持）
loop: 是否循环播放
<html>
<head>
<title>音频标签</title>
</head>
<body>
<!--
当标签的属性值类型为true或false时，我们可以通过是否在标签内写该属性来表示
如下：
audio标签有controls属性但是没有属性值，相当于 controls="true"
当标签内只有属性名时，说明这个属性名对应是属性值是true
-->
<audio src="./audios/任意门 — 五月天.mp3" controls autoplay loop></audio>
<!--
上面的audio标签和下面的audio标签是等价的
-->
<audio src="./audios/任意门 — 五月天.mp3" controls="true" autoplay="true" loop="true"></audio>
</body>
</html>4. 视频标签
使用场景：在页面内插入视频
<video src="./video.mp4" controls autoplay loop></video>src: 视频资源路径
controls: 是否显示视频播放控件
autoplay: 是否自动开始播放
loop: 是否循环播放
<html>
<head>
<title>视频标签</title>
</head>
<body>
<video src="./videos/篮球大牛.mp4" controls autoplay loop></video>
</body>
</html>五、超链接标签
使用场景：在一个页面内跳转到其他页面或页面中的某个区域
<a href="./index.html">跳转到首页</a>href: 要跳转的目标路径
站外路径：https://www. baidu.com
站内路径：./index.html
target: 链接的打开方式（默认是在当前标签页打开）
_blank: 打开新的标签页
_self: 在当前标签打开
六、列表标签
无序列表
使用场景：用于展示无序且相关联的数据
<h2>无序列表</h2> <ul> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> </ul>
ul: 表示无序列表的整体li: 无序列表的内容
注意：ul标签下只能包含li标签，li标签下可以包含任意内容
有序列表
<h2>有序列表</h2> <ol> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> </ol>
ol: 有序列表的整体li: 有序列表的内容
注意：ol标签下只能包含li，li标签下可以包含任意内容
ul和ol下的li是一样的，如果li在ul下，则在内容开头添加无序符号，如果是在ol下则添加数字序号
自定义列表
<h2>自定义列表</h2> <dl> <dt> 水果 <dd>苹果</dd> <dd>香蕉</dd> <dd>葡萄</dd> </dt> <dt> 香烟 <dd>利群</dd> <dd>金圣</dd> <dd>白沙</dd> </dt> </dl>
dl: 自定义列表的整体
dt: 自定义列表的主题
dd: 自定列表主题下的内容项
注意：dl标签下只允许包含dt或dd标签，dt/dd标签下可以包含任意内容，dt标签不是必须的，dl标签下可以直接包含dd标签
七、表格标签
在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
标签组成：
table: 表格
tr: 表格的行
td: 表格的单元格
标签的嵌套关系：table>tr>td
表格的属性：
border: 边框的宽度
width: 表格的宽度，当属性作用在单元格上时表示单元格的宽度
height: 表格的高度，当属性作用在单元格上时表示单元格的高度
表格的标题和列标题：
caption: 表格的标题
th: 表格的列标题，包含在tr下
表格的结构标签：
thead: 表头
tbody: 表格主体内容
tfoot: 表格的底部
合并单元格：
将多个单元格横向或纵向合并成一个单元格
步骤：
明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
上下合并→只保留最上的，删除其他
左右合并→只保留最左的，删除其他
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
rowspan: 跨行合并，纵向合并
colspan: 跨列合并，横向合并
表格个人简历：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>林卓群的个人简历</title>
</head>
<body>
<table border="1">
<caption><strong>林卓群的个人简历</strong></caption>
<tr>
<td>姓名</td>
<td>林卓群</td>
<td>性别</td>
<td>男</td>
<td rowspan="4">
<img src="./images/my.png" alt="" width="100" height="120">
</td>
</tr>
<tr>
<td>年龄</td>
<td>26</td>
<td>婚姻状况</td>
<td>未婚</td>
</tr>
<tr>
<td>手机号</td>
<td>15679711120</td>
<td>政治面貌</td>
<td>中共党员</td>
</tr>
<tr>
<td>毕业学校</td>
<td colspan="3">赣南师范大学</td>
</tr>
<tr>
<td>联系地址</td>
<td colspan="4">江西省南昌市南昌县向塘镇江西工商职业技术学院</td>
</tr>
<tr>
<td colspan="5" align="center">
<strong>工作经历</strong>
</td>
</tr>
<tr>
<td colspan="5" height="100">无</td>
</tr>
<tr>
<td colspan="5" align="center">
<strong>教育经历</strong>
</td>
</tr>
<tr>
<td colspan="5">无</td>
</tr>
<tr>
<td colspan="5" align="center">
<strong>自我评价</strong>
</td>
</tr>
<tr>
<td colspan="5">无</td>
</tr>
</table>
</body>
</html>