html5 css3 新增总结

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 文件刚开始的 * 定义中来定义全局。