html5
新增的语义化标签
| 标签 | 名称 |
|---|---|
<header> |
头部标签 |
<nav> |
导航标签 |
<article> |
内部标签 |
<section> |
定义文档某个区域 |
<aside> |
侧边栏标签 |
<footer> |
尾部标签 |
新增的多媒体标签
新增视频标签
<video src = "文件地址"></video>
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| muted | muted | 静音播放 |
| autoplay | autoplay | 自动播放（谷歌浏览器需要添加 muted ） |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
| poster | imgurl | 加载等待的画面图片 |
新增音频标签
<audio src = "文件地址"></audio>
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
html5 新增 input 表单
| 属性值 | 说明 |
|---|---|
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
| type=“number” | 限制用户必须输入数字类型 |
| type=“email” | 限制用户必须输入 email 类型 |
| type=“url” | 限制用户必须输入 url 类型 |
| type=“date” | 限制用户必须输入日期类型 |
| type=“time” | 限制用户必须输入时间类型 |
| type=“mouth” | 限制用户必须输入月类型 |
| type=“week” | 限制用户必须输入周类型 |
新增表单属性：
| 属性 | 值 | 描述 |
|---|---|---|
| placeholder | 提示文本 | 表单的提示信息 |
| required | required | 内容不能为空 |
| multiple | multiple | 可以多选文件提交 |
| autofocus | autofocus | 自动聚焦 |
| autocomplete | off / on | 需要有 name 属性，显示提交过的值，默认打开 |
css3
ie9以上版本支持
新增属性选择器
属性选择器可以根据元素特定属性来选择元素，而不需要借助类和 id 选择器，用 [ ] 来进行属性的选择：
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有 att 属性的 E 元素 |
| E[att = “val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
| E[att ^= “val”] | 选择具有 att 属性且值以 val 开头的 E 元素 |
| E[att $= “val”] | 选择具有 att 属性且值以 val 结尾的 E 元素 |
| E[att *= “val”] | 选择具有 att 属性且值含有 val 的 E 元素 |
新增结构伪类选择器
常用于根据父级选择器 来选择里面的子元素：
| 选择符 | 简介 |
|---|---|
| E : first-child | 匹配父元素 E 中的第一个子元素 |
| E: first-child | 匹配父元素中的第一个子元素 E |
| E: last-child | 匹配父元素中的最后一个子元素 E |
| E: nth-child(n) | 匹配父元素中的第 n 个子元素 E |
| E: first-of-type | 指定类型 E 的第一个 |
| E: last-of-type | 指定类型 E 的最后一个 |
| E: nth-of-type(n) | 指定类型 E 的第 n 个 |
nth-child(n) 和 nth-of-type(n) 的区别：
- nth-child(n) 会把所有的盒子都排列序号，执行的时候首先看 nth-child(n)，再看看选中的 nth-child(n) 是否符合前面的类型，若不符合，则不执行；
- nth-of-type(n) 会把指定元素的盒子排列序号，也就是 nth-of-type(n) 先看是否符合类型，再进行排序。
- 当 子元素类型复杂时，推荐使用 nth-of-type(n)；
- 当 子元素类型单一时，例如表单元素 li，推荐使用 nth-child(n)；
新增伪元素选择器
伪元素选择器可以利用 css 创建新元素标签，而不需要 html 标签，从而简化 html 结构：（可以清除浮动）
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- 也可以用 单冒号，浏览器会自动识别成 双冒号；
- before 和 after 创建的元素属于行内元素；
- 语法格式：
elememt::before{}； - before 和 after 必须有 content 属性；
- 伪元素选择器，权重为 1；
盒子模型 border-box
box-sizing: border-box;：当设置 width 范围内的 padding 和 border 值时，将不会再撑大盒子了。
推荐使用在 css 文件刚开始的 * 定义中来定义全局。