第二十二天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.userAgent
str.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()元素的父元素中申明了一个变量，且初始值为0
counter-increment: counter-name ;
使用前自增1，在子元素中写
content: counter( counter-name );
把自增后的数据给content属性
content: counters( counter-name, “.”);
二级自增