1、HTML5新标签
header标签
- 一般用来定义网页的头部
- 可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
- 完整的网页或者是完整的块（网页的一个独立区域）是头部、内容、 尾部组成的（并不是强制）
- 整个页面没有header限制个数，可以使用多个
footer标签
1footer标签代表一个网页或者章节内容的底部区域
2footer通常包含章节的作者，版权数据和文章的其他链接\
nav标签
- 元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。
- 导航部分的常见示例是菜单，目录和索引
- 并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
- 一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航
section标签
- section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
- 假设有一个效果，上边是nav导航栏，导航栏一般对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
- section主要是对网页进行分块，也可以对网页中的某块内容进行分块
- 其实和div没有什么区别（个人更喜欢用div
article标签
- 代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
- 比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
aside元素
1. 表示一个和其余页面内容几乎无关的区域
- 被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
- 这个里边的内容和其他元素内容关联性不强
figure元素
-
代表一块独立的内容，是一个独立的引用单元
-
这个标签在主文中用来引用 图片、插画、表格、代码段等等信息
-
一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
-
如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签
2、HTML5表单的新类型
- type旧类型：
-
- text： 文本框
- password： 密码框
- radio： 单选框
- checkbox： 多选框
- button： 按钮
- reset： 重置按钮
- submit： 提交按钮
- type新类型
-
- color：用来引入或者打开指定颜色的控件
- date：日期的控件（年月日）
- week：日期的控件（年周）（火狐不支持）
- month：日期的控件（年月）（火狐不支持）
- email：编辑email的字段自带验证，但是验证不完整，一般还是自己书写在移动端上 有相对应的自动弹出键盘包含 @ .com 等按键
- number：用来输入数字的控件多了一个上下的按键，可以增加和降低数字大小
- search：用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字
- tel：电话号码输入框
- url：url地址
、音视频
- 视频基本标签用法 ：
-
- src 属性：指定播放文件的URL。
- width、height属性：
-
-
- 设置媒体元素的大小，单位为像素；
- 省略该属性，则使用播放源文件的大小；
- 仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。
-
- 音频基本格式 ：
- **<audio src="" controls> </audio>**
- src 属性：指定播放文件的URL。
- 其他和视频一样。
六、补充CSS3
1、css3选择器：
-
E:first-child 匹配父元素的第一个子元素E。
-
E:last-child 匹配父元素的最后一个子元素E。
-
E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
-
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
-
E:first-of-type 匹配同类型中的第一个同级兄弟元素E
-
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
-
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
-
E:nth-child(2n) 偶数项
-
E:nth-child(2n+1) 奇数项
-
E:nth-child(even) 偶数项
-
E:nth-child(odd) 奇数项
a标签的4个伪类
四个伪类
-
- link：当有链接属性时
- visited:当连接被访问过以后
- hover：当连接被鼠标悬浮的时候
- active:当连接在激活状态的时候
- 位置不能互换这4个选择器 优先级是一样的。顺序改变就可能后边覆盖前边的比如visited写在最后，那么当连接被访问过后，访问过后的颜色就会覆盖hover和active
- 记忆：爱恨法则 love-hate
- hover适用于多数其他元素，并且伪元素也可以使用
<style>
a{
color: pink;
}
.a1:link{
color: yellow;
}
.a2:visited{
color: blueviolet;
}
.a3:hover{
color:red;
}
.a4:active{
color: #2ba5eb;
}
<body>
<a href="###" class="a1">link 当有链接属性时</a>
<a href="####" class="a2">visited 当连接被访问过之后</a>
<a href="####" class="a3">hover 当连接被鼠标悬浮的时候</a>
<a href="####" class="a4">active:当连接在激活状态的时候</a>
<a href="##" class="a1 a2 a3 a4">同时设置4个伪类</a>
</style>
3、常用伪元素
- 伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。
- 虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等
- 伪元素必须拥有content属性 ，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的
<style>
li::after {
content: "";
display: block;
width: 100px;
height: 2px;
background-color: pink;
}
</style>
4、圆角边框
●CSS3 圆角边框（IE9.0以前版本不支持）：
○border-radius:5px 15px 20px 25px ;
○border-radius:20px / 10px ;
border-radius：50%；能做一个圆\
