一、HTML 5 新加标签
header ： 头部
nav： 导航链接部分
footer：页脚、底部
article：文章
section：文章内的节 区域 也就是 某一块
aside：内容之外的内容；边栏使用；
等，了解更多需要去 w3c 看。
二、HTML 5 新增属性
1、下拉框效果
上层 input 标签 内的 list 属性必须为下层 datalist 标签的 id；
内层 option 标签 必须包含 value 属性。
代码：
<input type="text" value="请输入内容" list="star"/>
<datalist id="star">
<option value="a1234">a1234</option>
<option value="a1234">a1111</option>
<option value="a1234">a2222</option>
<option value="a1234">a3333</option>
<option value="a1234">a44444</option>
<option value="a1234">a55555</option>
</datalist>
2、无法形容的效果
看着挺好的效果
代码：
<fieldset style="width: 200px">
<legend>修改密码</legend>
旧密码：<input type="text"><br>
新密码：<input type="text">
</fieldset>
3、新增表单 type 属性值
input 内的 type 属性的新增
email ： 输入 电子邮箱；
tel ：输入手机号 手机使用 会主动弹出数字键盘
url：输入 url 格式
number：输入 数字格式
search：搜索框
range：自由拖动模块 相当于 可拖动的进度条
time：小时分钟
data：年月日
datetime：时间
month：月年
week ：星期年
4、新增表单属性熟悉
placeholder：提示文字 相当于 Android 的 hint 属性
autofocus：自动获取焦点 也就是自动获取输入光标
multiple：多文件上传 可以文件多选
required：内容不能为空
accesskey：规定激活某个元素的快捷键
5、插入音视频
1）、音频
标签：
属性：src 资源引入
autoplay 自动播放
controls 显示播放相关的控制开关
loop 循环播放
代码：
<audio autoplay loop controls>
<source src="test.mp3"/>
</audio>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akvVfQLV-1572505404156)(https://upload-images.jianshu.io/upload_images/6433394-e09c1b8acf2e5e2a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
2）、视频
标签：
属性：src 资源引入
autoplay 自动播放
controls 显示播放相关的控制开关
loop 循环播放
代码：
<video autoplay controls loop>
<source src="test.mp3" />
</video>
三、CSS 新增内容
1、新增伪类选择器
:first-child : 属于其父类元素下 第一个子元素；
:last-child : 属于其父类元素下 最后一个子元素；
:nth-child(n) :从第一个开始数，第 n 个子元素； 括号内 even 表示所有偶数的子条目，odd 表示所有奇数 的子条目，n 表示全选，2n 表示偶数，2n+1 表示奇数；
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
width: 200px;
}
ul li:first-child {
background-color: red;
}
ul li:last-child {
background-color: green;
}
ul li:nth-child(3) {
background-color: cornflowerblue;
}
ul li:nth-child(even){
background-color: darkorange;
}
</style>
</head>
<body>
<ul>
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
<li>英国</li>
<li>法国</li>
</ul>
</body>
2、属性选择器
标签 带有某个属性的 都可以被选择；
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
width: 200px;
}
li[class] {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<ul>
<li >中国</li>
<li class="demo">美国</li>
<li>俄罗斯</li>
<li>英国</li>
<li class="fg">法国</li>
</ul>
</body>
效果：
以某一个 属性值开头的 属性^=属性值，以某个属性值结尾的属性$=属性值，
代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
width: 200px;
}
li[class^=demo] {
background-color: cornflowerblue;
}
li[class$=demo]{
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>中国</li>
<li class="demo2333">美国</li>
<li>俄罗斯</li>
<li>英国</li>
<li class="2333demo">法国</li>
</ul>
</body>
效果：
3、伪元素
一个点类名，两个点是伪选择器，四个点是伪元素选择器
属性
：：first-letter ：选择第一个字
：：first-line ：选择第一行
：：selection ：选中的数据
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p::first-letter {
font-size: 40px;
color: green;
}
p::first-line {
color: red;
}
p::selection {
font-size: 10px;
color: darkorange;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<p>
记忆在时间中尘封，往事如流水匆匆逝去，生命花瓣在冬夜飘零，犹如停留叶面的晨露。人们都在追寻一片乐土，可以远离战火和纷争，享受上苍给予的快乐与宁静，背负着坎坷命运的大地上，这样的梦想似乎遥不可及。曾经有这样一个人，他的梦就是要把虚无的遥远变成触手可及的真实，即便是去白日的阳光，永远行走在黑夜的暗影。岁月不断沧桑残酷，破晓分割黑夜白昼，当天边的北斗星再一次升起，这个梦将被无尽的延续..
</p>
</body>
4、伪元素清除浮动
属性和值：
：：before ：在某个元素之前
：：after ：在某个元素之后
这两个伪元素都将数据内容插入到了 其它标签的内部；这两个伪元素被指为行内元素。
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div::before {
content: "我在";
width: 200px;
height: 200px;
display: block;
background-color: cornflowerblue;
color: white;
}
div::after {
content: "上班";
width: 200px;
height: 200px;
color: white;
background-color: green;
}
</style>
</head>
<body>
<div>
望京
</div>
</body>
四、Css 3 盒子模型
Css 2 的盒子模型：盒子尺寸=盒子原有尺寸+padding +border
Css 3的盒子模型：盒子尺寸=原有盒子尺寸=内容尺寸+padding+border
将 Css 2的盒子模型转换为 Css 3 盒子模型步骤在原有的样式内添加：box-sizing：border-box；
实现向内的边框代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 500px;
height: 500px;
background-color: cornflowerblue;
position: relative;
}
div:hover::after {
content: "";
width: 100%;
height: 100%;
border: 5px solid red;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
</body>
