1. <header></header> 2. <nav></nav> 3.<section></section> // 内含内容div 4.<article></article> 5.<aside></aside> 6.<footer></footer> 7.<figure> // 用于图像、图片、视频 8. <figcaption></figcaption> 9.</figure>
老browser 兼容 新标签方法css
方法一：
<style> article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
</style>
<script src="html5shiv.js"></script>
方法二：
<script src="custom.moderizr.js"></script>
语义化的重要性：html
1. 呈现清晰的结构 2. 搜索引擎更易识别，易被检索 3. 无障碍性，方便其余设备解析 4. 便于开发和维护，语义化更具可读性 5. 适应将来浏览器和开发工具的发展趋势
支持 Mp四、WebM、Ogg 三种类型。 MIME 类型有 video/mp4 、video/ webm、video/ogg html5
属性 autoplay: 自动播放 controls: 显示控件（height width 设定播放器宽高） loop: 循环播放 web
muted 静音（chrome 高版本中有可能autoplay 不能用，使用 autoplay muted 循环但静音播放）chrome
语法：<audio src="XXXX.wav"> 浏览器不支持audio 标签 </audio>canvas
支持格式：Mp3 、Wav、Ogg浏览器
<audio>
<source src="AA.ogg" type="audio/ogg"> // type 是 MIME 类型,启动适当类型的应用程序
<source src="bb.mp3" type="audio/mpeg">
"Your browser dones not support the audio type"
</audio>
把 API 提供给客户端 JS，使脚本可以绘制ionic
<object> 定义一个嵌入对象，向XHTML 添加多媒体 </object> 若<object> 元素未能显示，会执行内部的代码 所以能嵌套多个 object 元素
多媒体标签能极大提高用户体验ide
1.E[att][attr=“x”]匹配全部具备att属性的元素。 2.E[att~="val"]匹配全部att属性具备多个空格分隔的值、其中至少有一个值等于“val”的元素(若是忽略了波浪号，则说明须要完成彻底匹配)。 3.E[att|=“val”]匹配全部att属性具备多个连字号分隔(-)的值,其中一个值以“val”开头的元素，主要用于lang属性； 4.E[a^="def"] 选择 a 属性值以 "def" 开头的全部元素 5.E[a$="def"] 选择 a 属性值以 "def" 结尾的全部元素 6.E[a*="def"] 选择 a 属性值中包含子串 "def" 的全部元素
1. :target:目标伪类选择符（做为被触发元素，触发后有效） 2. :not：否认伪类选择符 3. :root：根伪类选择符（绑定 html 上） 4. :empty：空伪类选择符，内容为空的元素设置的样式 5. :nth-of-type:匹配父元素内，同类型的第n个标签 6. e:nth-child(n)：匹配父元素中的第n个元素，而且为e元素的标签,非 e 标签也算在内 7. e:last-of-type: 指定类型的最后一个 e 元素 8. e:first-of-type:指定类型的第一个 e 元素 9. e:only-child 只包含一个子元素，而且匹配为e 10. e:only-of-type : 只包含一个同类型的子元素 11. e:nth-last-of-type : 同类型的最后一个e 元素 12. e:nth-last-child : 父元素中的最后一个元素(不必定是e)
1.E:disabled 设置该元素处于不可用状态的样式; 2.E:enabled 设置该元素处于可用状态时的样式； 3.E:read-only 指定当元素处于只读状态时的样式 4.E:read-write 指定当元素处于非只读状态时的样式； 5.E:checked 指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked) 6.E:default 指定当页面打开时默认处于选中状态的radio或checkbox控件的样式 7.E:indeterminate 指定当页面打开时,若是一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样
box-shadow: x y 模糊半径 扩展半径 color inset（不写默认为外阴影）
半圆设置 border-radius: 50% 50% 0 0/100% 100% 0 0 （上部分的半圆） 右上角左下角不收缩的半圆 border-radius: 50% 0 50% 0/100% 0 100% 0 --------------------- 那边须要90度角的半圆：50%/100% 椭圆 长宽不一致时，border-radius:50%;
css 样式 @font-face(font-family:"myFirstFont";src:url(XXX.ttf);) // 适用格式 woff、eot 等 图标库，下载后引入css 文件 fontclass：引入class名 unicode ：在内容区适用 &.... symbol ：支持多个图标，但兼容性差。1）引入 JS 2)插入 svg
经常使用字体库网站：svg
阿里 http://wwww.iconfont.cn/ fontello http://fontello.com/ icommon https://icomoon.io/ Font-Awesome http://www.fontawesome.com.cn/ Glyphicon https://www.glyphicons.com/ ionicons https://ionicons.com/