HTML5的经常使用知识点 | 8月更文挑战

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

enmmm，昨天写的HTTP协议的文章没有推荐上首页，感受可能不算在挑战内，不敢继续写了，今天写个HTML5的吧……

1、Doctype的做用

Doctype是html5标准网页的声明，且必须声明在html文档的第一行，来告知浏览器的解析器是用什么文档标准解析这个文档，不一样的渲染模式会影响到浏览器对于css代码甚至js脚本的解析

有两种模式：

一、怪异模式：浏览器用自带的模式解析页面,若是html第一行没写Doctype就是默认怪异模式

二、标准模式：浏览器用标准的W3C模式解析页面，按页面中的html和css渲染

2、HTML、XML、XHTML的区别

一、HTML：超文本标记语言

二、XML：可扩展标记语言，用于存储数据和结构，可扩展，和json相似，可是更轻量级，更高效

三、XHTML：可扩展超文本标记语言，基于HTML和XML

3、经常使用的meta标签

简介：meta标签由name和content两个属性定义，用来描述页面的属性，例如网页描述，关键词，页面刷新，比例等

一、charset表示页面编码

<meta charset='UTF-8'>
复制代码

二、http-equiv表示文档开头的做用，能够设置http缓存过时的时间

<meta http-equiv='expires' content='Sat,23 Jun 2099 18:00:00'>
复制代码

三、viewport用来设置手机端的大小和比例

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1' >
复制代码

4、src和href的区别

一、src指向外部资源的位置，在请求时会把请求的地址下载下来，例如js文件或者img图片等；而且此时浏览器会暂停执行页面中其余内容，直到src请求结束后再执行编译

二、href指向网络所在资源，例如cdn地址，可是浏览器会并行加载请求的地址，不会暂停执行页面的其余内容。

5、data-属性你知道吗

<div id='handlerList'>
    <ul>
        <li data-idx='1'>点击1</li>
        <li data-idx='2' data-name='d2'>点击2</li>
    </ul>
<div>
//js：
$("#handlerList li").click(function() {
    let idx = $(this)[0].dataset.idx;
    if(idx === 1) {
        ……
    }
})
复制代码

表示html的数据属性，能够把数据存在html元素中。我以为主要在jq中用的比较多，循环展现后经过不一样的data-属性来判断作一些操做。

6、script标签中的defer和async的做用和区别

一、defer：表示脚本在文档解析后执行，异步加载后不会当即执行，而是等文档解析后再执行

二、async：异步加载脚本，相比defer是async会在脚本解析后当即执行，因此这个属性下js加载顺序是乱的，每一个script不能存在关联，不然会引发报错

好啦，先写这么多，想要互赞的就赞我，我会赞回去，谢谢~