HTML5&CSS
HTML5&CSS
五、HTML常见标签(反复记忆，几乎没有逻辑，需要记忆力)
常见标签分类介绍：
文本标签、多媒体标签、列表标签、链接标签、表格标签、表单标签
（一）标题标签(熟练掌握)
HTML提供<h>系列标签，这里的代表1-6，用于修饰标题，其中<h1>定义最大的标题，<h6>定义最小的标题。
标题标签： <h1></h1> <h6></h6>
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<!--
标题的特点：
1.加粗 2.文字会变大 3.换行
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
一级标题
二级标题
三级标题
</body>
</html>
（二）段落标签 (熟练掌握)
<p> 段落标签，使得文本独立成段。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| align | 段落对齐方式left左对齐（默认）center 居中right 右对齐 |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<!--
段落的特点：
1.换行
-->
<p>七月的风，和煦温暖；七月的雨，清凉缠绵；七月的天，湛蓝深远；七月的景，欣欣向荣。在这个生机勃勃的七月，我们摆脱了书本的束缚，伴随着同学们的欢笑声迎来了暑假！</p>
<p>暑假第二天，妈妈和我便去了姥爷姥姥家，我独自走在乡间的小路上，绿树成荫，两边的花儿争奇斗艳的开放着，东边的鲜花白似飘雪，西面的鲜花红如火焰，阳光之下，红白交映，分外清新宜人。小河旁边，数百朵不知名小花环绕簇拥，五颜六色，竞相开放，真是好一派佳景啊！微风拂过，一朵朵婀娜多姿的花儿随风舞蹈，好似亭亭玉立的少女。把鼻子拂在花上闻一闻，那诱人的花香夹杂着大自然的气息迎面拂来，沁人心脾，令人心醉神迷！</p>
<p>顺着林荫小径不知不觉进了院，我还没从花的海洋中回过神来，便又踏入了另一个欢腾的世界。</p>
<p>一进屋，我便得知妈妈要带我去爬山，我一听，高兴地一蹦三尺高。说时迟，那时快，我换好衣服，戴上太阳镜，在妈妈的陪同下登上了小南山。艳阳高照，一大片一大片的云仿佛就要压到了我的头顶了，我气喘呼呼地向上爬着，费了九牛二虎之力才爬上了山头，真是不容易啊！我躺在绿油油的山头，仰望天空，尽情享受阳光的沐浴，好惬意啊！忽然，一只彩蝶映入了我的眼帘，只见它扇动翅膀，萦绕着我翩翩起舞，接着是两只、三只，好似一个蝴蝶的天堂，我享受着太阳公公的馈赠，悄悄的入睡了。</p>
<p>夜幕降临，收听着乡村的广播，看看新闻，何乐而不为呢？打开窗户，天边的星星向你眨眼，皎洁的明月在云层里穿梭，一切都是那么恬静。静得会使你想起嫦娥奔月的故事，牛郎织女的佳话。再也没有城市的那种汽车鸣笛，人们的喧嚣，特别安逸。这是，你冲一冲热水澡，坐在开着空调的屋子里，轻轻地闭上了双眼，明天迎接你的一定是一片灿烂的曙光，将你带入那神话般的世界里。</p>
<p>新暑假，新生活！遨游在快乐的天地中，在这个美好的七月中，在这个愉悦的暑假中，希望我们能够像一只只自由的小鸟飞向梦想的彼岸</p>
<p align="center">今天是星期五</p>
</body>
</html>
（三）文本格式化标签
文本格式化标签:
主要用于修饰文本内容的标签
1、换行标签 (熟练掌握)
<br/> 换行标签，是一个单标记标签，每次需要换行就添加一个<br/>标签，换几行加几个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<br><br><br><br>
<p>
床前明月光， <br>
疑是地上霜, <br>
举头望明月， <br>
低头思故乡。 <br>
</p>
</body>
</html>
2、分割线标签 (了解)
分割线标签在HTML页面中创建一条水平的分割线，用于定义内容的主题变化。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| width | 定义水平线的长短单位是像素/百分比 |
| size | 定义水平线的粗细单位是像素/百分比 |
| color | 定义水平线的颜色颜色可以是英文单词：例如red,blue,yellow,pink颜色也可以是编码：#FF0000 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分割线标签</title>
</head>
<body>
内容主题部分
<h2>
人口计生法完成修改 法律保障实施三孩生育政策及配套支持措施
</h2>
<!--
分割线标签特点：
1.width 设置长度 单位 像素/百分比 默认取浏览器窗口的宽度作为线的长度
2.size 设置粗细 单位 像素/百分 默认是1
3.color 设置线的颜色 默认是灰色
4.align 设置线的对其方向 左中右对齐， 默认是居中对齐
-->
<hr width="50px">
<hr width="50%">
<hr size="30px">
<hr color="blue">
<hr width="100px" color="pink" align="right">
评论部分
<p>
我独生子，现在工资3500，每月房贷2700... 34岁，没结婚。房子首付花完了家里所有的钱。为啥要点进来看生育政策，跟我没半毛钱关系。。。
</p>
<p>
29岁月工资2000，首付付不起，无房无车不敢结婚，更不敢生孩子
</p>
</body>
</html>
3、加粗标签 (熟练掌握)
<b> 、<strong>标签可以使字体加粗。
4、斜体标签(熟练掌握)
<em> 、<i>标签可以使字体倾斜。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加粗、斜体标签</title>
</head>
<body>html
<p>
野比大雄、<b>静香</b>、<i>多啦A梦</i>
</p>
</body>
</html>
5、上标标签(了解)
上标标签:
在html中，sup标签是使用来定义上标文本的，所谓上标文本就是显示在当前文本的右上角，而且比当前文本更小的文本内容。
6、下标标签(了解)
下标标签:
在html中，sub标签是使用来定义下标文本的，所谓下标文本就是显示在当前文本的右下角，而且比当前文本更小的文本内容。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上标、下标</title>
</head>
<body>
2<sup>2</sup> + 3<sup>2</sup> = 13<br>
H<sub>2</sub>O
</body>
</html>
7、字体格式化标签(熟练掌握)
<font> 用于设置字体尺寸、字体颜色等。
| 属性名 | 属性说明 |
|---|---|
| size | 定义字体大小, 默认大小3号。取值范围:1~7 1号最小，7号最大 |
| color | 设置字体的颜色颜色可以是英文单词：例如red,blue,yellow颜色也可以是编码：#FF0000 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体格式化标签</title>
</head>
<body>
<font size="6">中公教育</font>
<font size="5" color="red">优就业</font>
<font size="3" color="blue">java研发工程师</font>
</body>
</html>
8、居中标签(了解)
居中标签:
<center>标签用于将文本居中显示。
代码
（四）官网练习
完整案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 align="center">优就业简介</h3>
<hr>
<p>
<b>优就业</b>作为一家专注于<i>IT职业教育培训企业</i>，坚持以“纯善”作为企业发展的价值观基石，在创造商业价值的同时，更加注重对员工、对学员、对社会的回馈。 始终坚持以<font size="5" color="red">“成为一个能让员工快速成长并对人类社会发展有贡献的教育企业”</font>奋斗目标。
</p>
<p>
自成立以来，不断通过慈善捐款、建立社会企业、资助贫困大学生、组织公益活动等多种形式履行企业的社会责任。优就业始终重视保障员工基本权益，为员 工提供业务水平、管理能力等多层次教育培训，真正践行企业对员工的关爱;同时，优就业始终坚持“学员的事是重要的事”这一服务理念，不断提升教学能力和服务 水准，为学员提供更贴心的职业培训。先后通过成立社会工作服务中心;“阳光伴你行”公益项目;西华大学助学金项目;汶川、玉树地震救助及捐款计划等多种形式履 行企业的社会责任，成为国内较早的救灾型公益企业。
</p>
<hr>
<center>
<font color="gray">
北京中公教育科技有限公司<br>
Copyright1999-2020.All Rights Reserved 京ICP证161188号
</font>
</center>
</body>
</html>
HTML5&CSS
（五）HTML多媒体标签
1、HTML图片标签（重要）
在我们日常上网中大家会发现网站上会有很多的图片信息展示，这样会使整个网站所表达的意思更加明确，也让整个网站看着非常舒服，接下来带领大家学习如何在HTML中添加图片。
图片标签<img>
如果我们想要在HTML网页中展示图片，首先需要准备好图片，格式不限，jpg、png、gif、bmp、jpeg 均可。
通常情况我们会将图片copy到项目的img文件夹下：
img标签的语法格式：
<img src=”” width=”” height=”” alt=”” title=”” />
图片标签相关属性
| 属性名 | 属性说明 |
|---|---|
| src | 设置图片的引用路径，可以是相对路径或绝对路径 1. 相对路径 ./ 当前目录 ../ 上一级目录 ../../ 上上一级目录 2. 绝对路径：网络绝对路径：通过url地址加载资源 如：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi04.c.aliimg.com%2Fimg%2Fibank%2F2013%2F211%2F016%2F791610112_758613609.jpg&refer=http%3A%2F%2Fi04.c.aliimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632030455&t=3982f7efd55afad7d0876f385be6db0c 磁盘绝对路径 需要通过本地访问该页面 如：D:\images\1.jpg |
| width | 设置图片的宽度，以像素为单位。 |
| height | 设置图片的高度，以像素为单位 |
| title | 悬浮文字，当鼠标悬浮到图片上时的提示文字 |
| alt | 替代文本，由于某种原因图片无法显示时会使用替代文本替代图片内容。 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!--
src 图片路径
1.相对路径
2.绝对路径
2.1 网络绝对路径
2.2 本地绝对路径
-->
<!-- 相对路径-->
<h3>相对路径</h3>
<img src="img/1.jpg">
<h3>网络绝对路径</h3>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi04.c.aliimg.com%2Fimg%2Fibank%2F2013%2F211%2F016%2F791610112_758613609.jpg&refer=http%3A%2F%2Fi04.c.aliimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632030455&t=3982f7efd55afad7d0876f385be6db0c">
<h3>本地磁盘绝对路径</h3>
<img src="C:\Users\Administrator\Desktop\第二阶段前端项目空间\day01\img\1.jpg" />
<h3>图片尺寸</h3>
<img src="img/1.jpg" width="100px" >
<h3>图片的悬浮提示</h3>
<img src="img/1.jpg" width="100px" title="一片竹林" >
<h3>图片的替代文本</h3>
<img src="img/1111.jpg" width="100px" alt="图片失效了" >
</body>
</html>
2、HTML音频标签(了解)
<audio> 标签定义声音，比如音乐或其他音频流。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| src | 要播放的音频的 URL |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| muted | 规定视频输出应该被静音 |
代码
<audio src="./media/1.mp3" muted controls loop></audio>
3、HTML视频标签（了解）
<video> 标签定义视频，比如电影片段或其他视频流。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| src | 要播放的视频的 URL |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | 设置视频播放器的高度 |
| width | 设置视频播放器的宽度 |
| loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| muted | 规定视频的音频输出应该被静音 |
代码
<video src="./media/020.mp4" controls width="200px" ></video>
（六）HTML列表标签(熟练掌握)
<ul> 定义无序列表
<ol> 定义有序列表
<li> 列表项, 是ul和ol的子标签
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<!-- 有序列表-->
<ol>
<li>橙子</li>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ol>
<!-- 无序列表 -->
<h3>无序列表</h3>
<ul>
<li>橙子</li>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</body>
</html>
（七）超链接标签(熟练掌握)
超链接标签是在html页面中提供一种页面间跳转的方式。
语法结构：
<a href="" target="">热点文字或图片</a>
属性解析：
| 属性名 | 属性说明 |
|---|---|
| href | 访问目标的url地址（必填）地址取值:目标路径 |
| target | 定义打开页面的方式 ,常用的两种方式取值为：取值：blank 在新的选项卡中打开 _self 在本页面打开（默认） |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接标签</title>
</head>
<body>
<a href="./8-练习.html">点击打开8-练习.html</a>
<a href="./1-标题标签.html">点击打开1-标题.html</a>
<a href="http://www.baidu.com">点击跳转到百度首页</a>
<a href="http://www.jd.com" target="blank">点击跳转到京东首页</a>
<a href="http://www.ujiuye.com/"><img src="./img/1.jpg" alt=""></a>
</body>
</html>
（八）HTML表格标签(重要,熟练掌握)
2、案例相关标签
2.1、表格标签
HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成。
常用标签:
| 标签名 | 作用 |
|---|---|
| table | 父标签，相当于表格的容器 |
| tr | 用来定义行，写在table标签内 |
| td | 用来定义列（单元格），写在tr标签内 |
| th | 表格的列标题: 加粗，居中 |
| caption | 表格的标题 |
属性解析：
| 属性名 | 属性说明 |
|---|---|
| border | 表格边框的宽度(粗细) |
| width | 表格的宽度 |
| height | 表格的高度 |
| align | 对齐方式 |
| bgcolor | 表格的背景颜色 |
| rowspan | 合并行 |
| colspan | 合并列 |
| cellspacing | 单元格之间的空白 |
| cellpadding | 表格边缘与内容之间的空白 |
| thead | 标签定义表格的表头 |
| tbody | 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容 |
| tfoot | 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。 |
案例1：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" width="300px" align="center">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center" bgcolor="lightblue">
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr align="center" bgcolor="red">
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</table>
</body>
</html>
案例2：合并单元格
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" width="300px" align="center">
<tr bgcolor="lightgreen">
<td colspan="2">两列合成一列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td bgcolor="gray"rowspan="2" >两行合成一行</td>
</tr>
<tr>
<td>第三行第一列</td>
</tr>
</table>
</body>
</html>
3、案例完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="400px" cellspacing="0" >
<caption><h2>学生信息表</h2></caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>个人简介</th>
</tr>
<tr align="center">
<td>1001</td>
<td>柳岩</td>
<td>女</td>
<td>演员,很大</td>
</tr>
<tr align="center">
<td>1002</td>
<td>刘涛</td>
<td>女</td>
<td rowspan="2">我是一名演员</td>
</tr>
<tr align="center">
<td>1003</td>
<td>宝强</td>
<td>男</td>
</tr>
<tr align="center">
<td>1004</td>
<td colspan="2">张艺兴</td>
<td>小绵羊</td>
</tr>
</table>
</body>
</html>
表格练习
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" width="600px">
<tr>
<td colspan="5" bgcolor="gray">基本信息</td>
</tr>
<tr>
<td width="15%">姓名</td>
<td width="15%"></td>
<td width="15%">性别</td>
<td width="15%"></td>
<td rowspan="6"></td>
</tr>
<tr>
<td>国籍</td>
<td></td>
<td>民族</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>健康状况</td>
<td></td>
</tr>
<tr>
<td>年龄</td>
<td></td>
<td>婚姻状况</td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td>现所在地</td>
<td></td>
</tr>
<tr>
<td>电话号码</td>
<td></td>
<td>电子邮箱</td>
<td></td>
</tr>
</table>
</body>
</html>
（九）HTML表单标签(熟练掌握)
1、案例介绍
HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成。
2、案例相关标签
2.1、表单标签
<form>是在页面中创建出一个表单，表单标签在HTML中是没有效果展示的，能展示的是表单中的各种标签。如果数据需要提交给服务器，负责收集数据的标签必须放在表单之中。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| action | 数据提交的路径，指向数据提交的服务器地址 |
| method | 数据提交的方式，常用取值：get、post |
2.2、输入域标签
<input>标签用于获取用户输入信息，通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。
input属性：
| 属性名 | 属性说明 |
|---|---|
| id | 为当前组件提供一个唯一的标识 |
| type | 定义表单输入项input的组件类型 详见下一个表格type属性值说明 |
| name | 为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据 |
| value | 为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on |
| checked | 设置单选框/复选框的默认选中状态（全选、反选） |
| readonly | 设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交 |
| disabled | 设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交 |
| size | 组件的长度 |
| maxlength | 设置允许输入的最大的长度 |
| placeholder | 输入框的提示信息 |
input-type属性值说明:
| 属性值 | 说明 |
|---|---|
| text | 文本框(默认)，单行的输入字段，用户可在其中输入纯文本。 |
| password | 密码框。 内容为非明文 |
| radio | 单选框。 必须将其设置为同一组(name的名字必须相同) |
| checkbox | 复选框。 必须将其设置为同一组(name的名字必须相同) |
| file | 附件框。用于文件上传。 |
| hidden | 隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。 |
| submit | 提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性 将按钮起一个名字 |
| reset | 重置按钮。 用于将所有的 表单输入项恢复到 默认状态 |
| image | 图形提交按钮 |
| button | 普通按钮。 需要和JavaScript事件一起用 |
2.3、下拉列表标签
提供一个下拉列表框，让用户进行选择。 <select>
属性解析:
| 属性值 | 说明 |
|---|---|
| name | 下拉列表框的名字。 |
| 属性selected选中项、value为当前下拉项的值 | |
| multiple | multiple 属性规定输入字段可选择多个值 |
2.4、文本域标签
HTML提供了多行输入的文本控件：<textarea>
属性解析:
| 属性值 | 说明 |
|---|---|
| cols | 设置文本域的列数 |
| rows | 设置文本域的行数 |
