一.HTML介绍
1.什么是HTML
超文本标记语言（hypertext markup language）
超文本：在网页中显示的内容不局限于文本，还可以是图片、视频、音频、超链接、列表等。
标记：是HTML语言的特点，核心表示符号为<>,而<>在HTML语言中的内容呈现的就是标签！
2.HTML在前端中的作用
HTML构成了网页的内容与结构
网页分为静态网页和动态网页，区别为：静态与动态不是由是否存在动态效果、动画效果决定，由数据决定。
一个网站是否能够动态显示数据、动态的进行更新才是衡量动态网页的标准。
3.HTML的基础模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是一个网页</title>
</head>
<body>
沧海竞舟，华山论剑，苍穹问道
</body>
</html>
4.HTML语言的特点
1.标签要正确嵌套
2.父子级标签书写时，注意缩进
3.HTML中标签名大小写都行，规范为小写
4.HTML的标签有两种：双标签、单标签
双标签为一对，由开标签和关标签组成，关标签内由斜杠 如：<> < />
单标签无开关之分，规范下也要书写斜杠 如：< />
5.HTML文档中根标签可以存在多个
6.网页文件的后缀名可以为html或htm
二、HTML中常用标签
1.标题标签，h1~h6
如：<h1>沧海竞舟</h1>
特点：文本自带加粗效果，h1字体最大，h6字体最小
2.段落标签， p
如：<p>华山论剑</p>
特点：用于表示网页中的正文内容，不会像标题标签一样自带加粗效果，正常文本显示，
3.换行标签， br
如：沧海竞舟<br />
华山论剑<br />
苍穹问道<br />
特点：在浏览器显示内容时，换行显示，单标签
4.分割线标签， hr
特点：用于界定网页中的内容区，可以划区域，分割内容，单标签
hr标签属性：
width:宽度，可以给具体的数值（默认单位是像素px），也可以给百分比
size：高度，取值为1~7，值越大越高
color：颜色，取颜色的英文单词
标签属性的语法格式：
（1）标签属性写在标签行间，双标签写在开标签，单标签写在内部
（2）标签属性也成为行间属性
（3）标签属性名=“值”，一组与一组之间使用空格隔开，第一组属性要与标签名以空格隔开
如：<hr width="50%" size="5" color="green" />
5.字体标签， font
特点：用于承载不同样式的文本
font标签属性：
size：字体大小，取值范围：1-7，值越大，子越大
color：字体颜色，英文单词或十六进制代码
如：<font size="7" color="#EB7959">沧海竞舟</font>
可以实现字体加粗的标签：b、strong
可以实现字体倾斜的标签：i、em
b与i实现字体变化是从UI角度出发，strong和em是从强调的语义层面修改的文本效果。
不同浏览器对强调的理解不一样，所以strong和em的样式可能会不出现
如：<!--加粗-->
<b>沧海竞舟</b><strong>华山论剑</strong>
<!--倾斜-->
<font size="6" color="deeppink"><i>苍穹问道</i></font>
<em>宇宙无垠</em>
6.图片标签， img
img标签的属性
src：图片的路径，可以是相对路径，也可以是绝对路径
相对路径：具有参照关系的路径
绝对路径：网址链接，从磁盘根目录出发的路径
width：图片的宽度
heigh：图片的高度
若width和height同时给，按照给定的值显示，若只给一边另一边也会等比缩放
alt:图片由于某些原因加载失败时，为了增强用户体验，显示展位文本
title：鼠标悬停在标签上时，出现文本提示
7.超链接标签， a
超链接标签链接完成后，可以进行路径跳转
标签属性：
href：超链接的链接地址，可以是相对路径，也可以是略对路径。书写时除了域名还要加上网络传输协议
targer：链接的打开方式、位置，默认值为_self刷新自身，该为_blank后，可以让链接在新窗口打开
如：<a href="http://www.moudu.com" target="_blank">某度</a>
8.列表、有序列表、无序列表
有序列表：ol li
无序列表：ul li
ol和ul本身是不会显示的，在页面中显示的是li中的内容
ol li与ul li 的组合是固定的，li的父级必须是ul或者ol，ul、ol内的直接子级必须是li
无序列表ul的type属性值：disc小黑点（默认）、circle圆圈、square黑方块
有序列表ol的type属性值：1代表有序数字（默认）、a代表小写字母、A代表大写字母、i带表小写罗马数字、I代表大写罗马数字
如：<ol type="I">
<li>沧海竞舟</li>
<li>华山论剑</li>
<li>苍穹问道</li>
</ol>
<ul type="disc">
<li>沧海竞舟</li>
<li>华山论剑</li>
<li>苍穹问道</li>
</ul>
9.实体字符还有HTML注释
HTML注释的形式：<!--注释内容-->
实体字符的作用是将一些特殊符号以纯文本的形式展示出来，而不具备含义，如尖括号<>,版权符号、双引号、空格
四、表格table
1.表格中的标签组成：
最外层是table
表格标题caption
行tr标签
单元格：th表头单元格、td内容单元格
th表头单元格默认字体加粗和居中
2.表格属性：
border：设置给table标签，让表格产生边框，并让单元格之间有分割线，是必须存在的属性，可以不给值。
cellspacing：设置给table标签，单元格与单元格之间的间隙
cellpadding：设置给table标签，单元格与自身内容之间的间隙
width：设置给table表格整体变宽，不能设置给tr，设置给th或td后，
此单元格所在这一列的整体宽度都会发生变化，因为表格默认是对齐的
height：设置给table表格整体变高，设置给tr这一行变高，设置给th或td后，
此单元格所在这一行整体高度都会发生变化，因为表格默认是对齐的
align：取值left、center、right。设置给table影响表格整体的位置，设置给tr影响这一行中所有单元格中内容的位置，
设置给th或td只影响这个单元格中内容的位置
bgcolor：颜色的英文单词、十六进制代码。设置给table整个表格变色，设置给tr这一行变色，设置给th或td此单元格变色
bordercolor：设置给表格边框及分割线的颜色，设置给table标签
colspan：列合并，设置给th或td，然后从当前这一个单元格开始合并给定数量的单元格，
为了保证合并完成后表格对齐，需要将当前这个单元格所在这一行后面合并的单元格删除
rowspan：行合并，设置给th或td，然后从当前这一个单元格开始合并给定数量的单元格，
为了保证合并完成后表格的对齐，需要将当前这个单元格所在这一列同一位置上合并的单元格删除
五、表单form
1.表单form在实际开发中的应用场景：登录、注册
2.表单标签的属性构成及原理
action属性：数据提交的地址
method属性：数据提交方式。常用的有post、get
收集数据的标签要写在form内部
form标签本身在页面中是不显示的，显示的是收集数据的标签
只有当submit提交按钮点击时，form标签内部收集到的数据，才会以method的方式提交到actionde地址上去
3.表单form内部收集数据的标签分类
（1）input标签
type属性标识input收集数据的方式：
text 文本输入框
password 密文输入框
radio 单选框
checkbox 复选框
file 文件上传域
button 普通按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏域
date 日期选择框
name属性时为了收集、提交数据设置关键字的属性
value属性时收集的数据值
输入框、文件上传域、日期可以不给定value，因为可以输入或选择，但是单选框及复选框想要进行数据提交，必须把value的值绑定在标签内部
name就是数据传递的名字，而value才是数据的值
placeholder占位符属性，针对输入框提供的占位文本，用于提示用户输入信息
checked属性，针对单选框、复选框提供的默认选中
disabled 禁用
（2）select...option标签，下拉选择框，数据会以下拉列表的形式呈现，我们去选择对应的数据
name属性设置给select标签，代表当前数据的关键字
value属性设置给option标签，时真正传递提交的数据，写在option标签内的文本只是为了在页面中显示内容
selected属性设置给option标签，可以实现默认选中
（3）textarea标签，文本域
name属性为数据提供关键字
rows行数，用于限制文本域的高度，如果内容超出了指定的行数，出现纵向滚动条
cols列数，用于限制文本域的宽度，如果内容超出了指定的列数，自动换行
六、框架集frameset
1.使用场景
frameset框架集，可以包含多个页面，将多个页面的内容集成在一起进行显示。最典型的场景时***管理系统首页面
2.frameset的使用注意事项
（1）frameset与body不能同时存在
（2）frameset的字标签可以是frame，也可以是frameset,但是frame的父级只能是frameset
（3）frameset的属性
rows,限制子标签的高度，可以给具体的值，也可以给*通配剩余量
cols,限制子标签的宽度，可以给具体的值，也可以给*统配剩余量
border,调整多个frame之间分割线的粗细
（4）frameset属性：
src,引入集成的页面路径
noresize,在集成完毕后，不允许拉伸页面尺寸
name,为了当前的frame页面设置一个名称，后期在改变内容时，可以指定到底时哪一个页面要改变
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
