第二十二天H5进阶(H5知识点开始)

HTML5特性

1.语义化（ Semantics ） 可以更精确的描述HTML文档内容，清晰的呈现HTML的文档结构。2.连通性（ Connectivity ）使用新的方式与服务器后台通信。3.离线存储（ Offline and storage ）网页可以把数据缓存到本地，高效的操作离线数据。4.多媒体（ Multimedia ）使用<video>和<audio>实现音频视频播放。5.2D和3D图形渲染（ 2D/3D graphics  and effects ）提供更多的呈现方式。6.性能与集成（ Performance and integration ）提供更快的速度优化和更好的使用计算机硬件的方式。7.设备访问（ Device access）允许使用各种输入和输出设备。8.样式（ Styling ）让开发者可以开发更复杂的页面。也就是CSS3.

Html5 文档类型的必要性。

告诉浏览器基于哪种规范解析HTML。如果不添加文档类型，会触发IE7及以下进入怪异模式。    正常模式：width = content     怪异模式：width = content + padding + border

lang与charset区别

lang：设置语言，使用什么人的语言编写的（中国人等）charset：字符编码，改变字符编码可能会导致字符乱码

常见浏览器引擎及厂商前缀

判断浏览器内核navigator.userAgentstr.indexOf("keyword")>-1注意：最好根据需要判断某一特性是否支持该浏览器

路径问题

1.网址2.相对URL，以/开头：（要加上项目名称）从网址下项目的根目录开始寻找3.相对URL，不以/开头：从当前文件所在目录开始寻找

元素属性href 和 src 路径问题及区别

Web资源： html, css, js, img(png ,jpg)…..    示例    <link href=”“>    <img src=””>    <script src=””>Href： 异步加载web资源。如果网速慢，会造成网页布局混乱（CSS未加载出来）。Src：同步加载web资源，加载完src才继续加载下面代码。若网速慢，会造成网页白屏。

Emmt(仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度)

document的classList属性

data-自定义属性

伪元素与元素及伪类的区别

伪元素VS元素：    不能被选中，不能通过JS获取    在页面显示：::before ::after     伪元素可以被元素替换。伪元素VS伪类：    伪类是控制元素的显示状态的。    不能被其他元素替换。

CSS3 calc()计算函数（多用于屏幕的自适应）

动态计算尺寸，可以使用+-*/混合运算，IE9以下不支持，常用于布局calc()内部嵌套另一个calc()，但仅欧朋浏览器支持必须在运算符左右加空格。在低版本的浏览器使用，需要增加浏览器厂商前缀。

CSS3颜色函数rgba()

rgba(颜色值，颜色值，颜色值，透明度)opacity VS rgba() VS transparent对比：    --rgba():颜色透明度    --opacity:元素及其内容，子元素透明度。    --transparent = rgba( 255, 0, 0, 0)

CSS3计数函数counter()

counter-reset: counter-name ;counter()元素的父元素中申明了一个变量，且初始值为0counter-increment: counter-name ;使用前自增1，在子元素中写content: counter( counter-name );把自增后的数据给content属性content: counters( counter-name, “.”);二级自增