一、HTML基础标签
1.HTML简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言
标记语言是一套标记标签
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML 运行在浏览器上，由浏览器来解析
HTML文档也叫做 web 页面
文档的后缀名：xxx.html 或 xxx.htm
2.HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
3.HTML基础标签
html
html是网页的根标签，网页的所有内容，都必须要写在该标签里面
head
head是头部标签，用于导入外部的资源信息和描述网页自身信息
title
title是网页自身的标题标签，它里面的内容会在网页的浏览器的选项卡上显示
body
body是主体标签，网页中能看到到所有内容，都必须要写在该标签里面
文档声明，是告诉浏览器采用什么标准去解析下面的网页，这里表示html5的标准
如果没有文档声明标签，浏览器会根据网页中具体的标签去判断使用什么标准
其他标准：
HTML 4.01
XHTML 1.0
meta
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务
meta标签是单标签，不需要闭合标签，规范写法，单标签需要自闭合
声明编码：
utf-8 包含全世界所有国家需要用到的字符
gb2312 包含全部中文字符
页面关键词：
页面描述：
页面重定向和刷新：
content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页
移动设备：
如果不是响应式网站，不要使用initial-scale或者禁用缩放
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px
width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容
导入外部资源，比如：网页选项卡图标，外部样式
h1~h6
h1~h6是网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗
p
p标签是段落标签，用于描述一段内容
hr
hr是水平线标签，用于对网页中的内容进行分隔
br
在网页中，无论打多少空格，或者换多少次行，默认都只是一个空格
如果需要手动换行，需要使用br标签
strong
strong是加粗标签，用于突出一段内容里面的部分信息
em
em是倾斜标签，也用于突出一段内容里面的部分信息
特殊符号
空格
< 小于号
> 大于号
" 双引号
© 版权符号
img
img是图片标签，src属性设置图片的地址，地址可以是本地地址，也可以是网络地址
title属性设置鼠标悬停提示信息，alt属性设置图片的替代文字，当图片无法显示时，显示对应的文字
width属性设置图片宽度，height属性设置图片高度，如果只设置了其中一个属性，另一个属性会等比缩放
a
超链接标签，根据链接类型可以分为：页面间链接，锚链接，功能性链接
1.页面间链接：
href属性设置链接的地址，可以是本地地址，也可以是网络地址
target属性设置目标窗口打开的位置，属性值_self替换自身窗口，_blank是打开新窗口
2.锚链接：
用于当前页面的跳转，从页面的某个区域，跳转到另一个区域
通常需要两个a标签，一个a标签通过name属性设置锚标记，另一个a标签通过href属性跳转到对应的锚标记处
注意：href属性值需要加一个#号
如果需要跨页面，在href属性中，显示设置地址，在地址的后面在设置对应的锚标记
3.功能性链接：
利用超链接打开本地的应用
div
div是分区标签，是一个块级标签，通常用于网页的布局
span
span是范围标签，是一个行级标签，通常用于突出显示段落中的部分内容
4.标签分类
所有的标签可以分为两类：块级标签和行级标签(内联标签)
块级标签：该元素独占一行(h2,p)
行级标签：按行显示，一行不够放，才会自动换行(a,strong,em,img)
注意：通常情况下，行级标签要放在块级标签里面使用
注意：p标签不能嵌套p标签
二、列表、表格、表单
1.有序列表和无序列表
ol是有序列表标签，它里面的列表项是有序号的
ul是无序列表标签，它里面的列表项是没有序列的，但是有符号
li 是列表项标签
列表可以嵌套定义
通过设置ol的type属性值，可以改变序号类型，可以设置属性值有：A，a，I，i，1
ul标签通过type属性，也可以设置符号类型：属性值有：disc，circle，square
2.定义列表标签
dl是定义列表标签
dt的定义列表的标题标签
dd是定义列表的描述标签，用来描述dt
可以用多个dd去描述一个dt
一个dl可以只描述一个dt，也可以描述多个dt
一般图文布局的结构会使用定义列表标签
3.表格标签
table是表格标签，通过border属性设置表格的边框，width属性设置宽度，height属性设置高度
设置表格的属性align="center"，将整个表格居中
tr是行标签
设置tr的align属性，控制的是tr里面的所有td的水平对齐方式
td是列标签
td设置align属性，只是对当前td设置水平对齐方式
colspan属性，用于单元格跨列
rowspan属性，用于单元格跨行
如果表格里面的单元格需要跨列或者跨行：
先将完整的表格画好
然后做跨列
最后做跨行
4.表格的完整结构
表格根据结构划分：thead是表格的头部，tbody是表格的主体，tfoot是表格的尾部
caption是表格的标题标签
td是普通列，th是表头列，th里面的内容默认会加粗并且居中
5.表单标签
form是表单标签，表单的作用是：接收用户输入的数据，并向服务器发送
method属性设置表单的提交方式：GET和POST (POST比GET更安全)
action属性设置表单的提交地址，比如：http://192.168.112.55:8080/address/add
6.表单里面的常用元素
form是表单标签，所有的表单元素，必须要放到form标签里面，才能提交到服务器
如果表单中使用了文件域，表单标签需要添加一个enctype="multipart/form-data"属性
input标签是表单的元素，绝大多数表单元素都是使用input标签，通过type属性设置元素的类型
type="text"是文本框，size属性设置初始长度，maxlength属性设最大输入长度，name属性设置表单元素的名称
type="password"是密码框
type="radio"是单选框，注意：一组单选框，必须要设置相同的name属性值，value属性设置表单元素保存的值，
checked属性设置默认选中,该属性的属性值也是checked。
注意：在html中如果属性值跟属性名相同，可以省略属性值
type="checkbox"是复选框，也可以使用checked属性
type="file"是文件域，该标签用于选择文件
type="button"是普通按钮
type="submit"是提交按钮，用于将表单里面的数据向服务器提交，disabled属性设置表单元素禁用
type="reset"是重置按钮，用于清空表单里面的填写内容
type="image"是图片提交按钮，它不需要通过value属性设置文本，但是需要通过src属性设置一张图片
type="hidden"是隐藏域，用于在网页中隐藏信息。在实际开发中，隐藏域里面的信息是需要加密存储的
select标签是下拉框，option是下拉框的选项标签，value属性设置每个选项的值，
注意：值可能跟显示的文本不一样，selected属性设置默认选中
textarea标签是文本域，其实就是多行文本框，rows属性设置行数，cols属性设置每行列数，
readonly属性表示只读
7.html5新增表单元素
type="number"是数字文本框，min设置最小值，max设置最大值，step设置增量值
type="range"是滑块，min，max，step用法同number
type="url"是网址文本框，输入的内容必须以ftp: 或者 http: 或者 https: 开头
type="email"是邮箱文本框，输入的内容必须包含@字符
type="search"其实就是文本框，只是专门用于做搜索框用，输入内容后，带有清空内容的小按钮
新增属性：
placeholder属性设置文本框里面的提示内容，当在文本框中输入真正的内容时，会自动消失
required属性给文本框，添加非空验证
pattern属性用于给文本框，添加正则表达式验证
三、初始样式
1.行内样式表
通过在标签中使用style属性的方式，可以给标签添加行内样式
在实际开发中，不推荐使用行内样式，因为行内样式不方便样式的复用
行内样式，违反了内容与表现分离的原则，网页后期改版会变复杂
更关键的是，这样的网页不利于搜索引擎搜索
2.内部样式表
在head标签中通过style标签，定义内部样式。style标签可以通过type属性明确里面的样式类型，type属性可以省略
内部样式表：可以做到当前页面的样式复用，但是不能做到多页面样式的复用，内容与表现的分离不够彻底
在style标签里面，通过定义选择器的方式，定义样式
下面的样式就是根据p标签的名称定义选择器，给p标签添加样式：
p{font-size:30px;color:red;}
3.外部样式表
通过link标签，引入外部样式文件，href属性设置样式文件的路径
注意：必须设置rel属性的属性值为stylesheet。告诉浏览器引入的外部资源是样式表资源
如果有多个页面需要该样式，直接引入，方便多页面样式的复用
网页的内容和样式彻底分离，这样的网页更利用搜索引擎搜索
引入外部样式文件的第二种方式，在style标签中，通过@import方式导入指定的样式文件