HTML5 CSS3新增特性

都有兼容性问题，IE9+以上版本浏览器才支持
div对搜索引擎来说没有语义

<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<asider>:侧边栏标签
<footer>:尾部标签
<audio>:音频标签
<video>:视频标签 尽量使用mp4格式
<video src="文件地址" controls="controls"></video>

/*照顾兼容性*/
<video width="" height="" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
     您的浏览器不支持video标签。
</video>
/*属性*/
/*自动播放 autoplay="autoplay"*/
/*muted="muted"  谷歌解决不自动播放的问题*/
/*controls="controls" 控制开始与暂停*/
/*loop="loop" 无限循环*/
/*poster="图片路径" 加载时等待的图片画面*/


/*音频都支持MP3*/
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
     您的浏览器不支持audio标签。
</audio>
/*属性*/
/*自动播放 autoplay="autoplay"*/
/*controls="controls" 控制开始与暂停*/
/*loop="loop" 无限循环*/
/*muted="muted"  静音播放*/
/*音频谷歌禁用自动播放,可以通过JavaScript解决*/

IE9中需要转换成块级元素
新增input类型

• email
• url
• date
• time
• month
• week
• number
• tel
• search
• color
  验证的时候必须添加form表单域

新增表单属性

required="required"  内容不能为空
placeholder="提示文本"  提示信息，存在默认值则不显示
autofocus="autofocus"   自动聚焦，光标自动生成
autocomplete="on/off"    默认是on
multiple="multiple"

input::placeholder{
    color:颜色;/*修改placeholder的颜色*/
}

CSS3新特性
IE9+才支持

新增选择器 权重都是0010

属性选择器：利用属性选择器就可以不用借助于类或者id选择器
标签名[属性名]

E[att] 具有att属性的E
E[att="val"] 具有att属性且值为val的E  重点
E[att^="val"]开头
E[att$="val"]结尾
E[att*="val"]包含

结构伪类选择器：主要根据文档结构来选择，常用于父级选子元素

E:first-child
E:last-child
E:nth-child(n)
会把所有孩子都排序号，之后回去看要选择的东西
父元素中第n个子元素E，n可以是数字，关键字和公式
关键字even偶数 odd奇数
公式从0开始计算，只能写n
E:nth-child(n){
    backgroundcolor:pink;/*所有孩子都是pink色*/
}
公式：
2n偶数 2n+1奇数 5n五的倍数 n+5从第五个开始（包含第五个） -n+5前五个（包含）
E:first-of-type 指定类型E的第一个
E:last-of-type
E:nth-of-type(n) 

伪元素选择器：利用CSS模拟一个标签，简化HTML结构
创建的是行内元素（不能设置大小），文档树中找不到，所以叫伪元素，必须有content属性
before在父元素内容前创建，after在父元素内容后插入，占空间
伪元素和标签一样权重为0001

• ::before 在元素内部的前面插入
• ::after 在元素内部的后面插入

盒子模型

其它特性