HTML总结

本文仅供自己复习使用

一、html语义化

1、每个标签能够表示自己的含义和定位，当CSS效果无法展现时，能够告诉人们这个标签是在什么位置的，如<article>等
2、对于盲文阅读器等其他设备进行解析
3、有利于SEO，爬虫的时候需要根据标签来解析各部分，如果全是<div>就不是很方便
4、便于团队开发和维护

---

二、其他

1、html标签允许小写

2、自定义属性data-*

①使用自定义属性时，*应为驼峰命名，如data-maxAge，但是在css的属性选择器中为[data-max-age]
②如果需要通过js获取自定义属性值，可通过dataset来获取

var a = document.getElementById('aa');
var data = a.dataset.maxAge;      // 相当于 var data = a.getAttribute('data-max-age');

另外如果想加入一个自定义属性也可以通过js来

var b = document.getElementById('bb');
b.setAttribute('max-age', 11);  // 这里不需要加data前缀

---

三、DOCTYPE 的作用

doctype必须写在html的第一行，告诉浏览器以什么标准解析文档
没定义doctype或定义错了都会变成怪异模式（用浏览器自己的标注解析文档）
除此之外还有标准模式（用w3c来解析文档）和接近标准模式
怪异模式：
1）盒模型是IE盒模型即 width = content + padding + border，也就是说 box-sizing: border-box
2）对 inline 或 table-cell 元素的 vertical-align 默认为 button
3）可以给内联元素设置宽高

标准模式：
1）盒模型为 content-box，宽高都是 content
2）inline 或 table-cell 元素的 vertical-align 是 base-line
3）不可以给内联元素设置宽高

四、HTML、XML、XHTML的区别

先说一下他们都是ML（标记语言）
HTML：通过标签和属性来构成网页结构
XML：主要拿来描述和存储数据，主要就是跨不同系统共享数据
XHTML：基于XML，类似于严格版本的HTML

五、scr和href的区别

src其实就是get请求，把资源请求到后跟使用这个的标签进行替换，一般页面加载就会替换，必须这个下载完了才能下一步
href是把这个标签和某资源建立连接，可以和其他的并行操作
静态资源没有同步异步一说，但是src感觉上就像是同步（会被阻塞），而href就像是异步（不会被阻塞）

六、link和@import的区别

link是HTML标签，@import是CSS规则
link和页面同时加载，而@import是要页面加载后才加载
link的权重大于@import权重

七、img的srcset是什么

说白了就是图像集，但是可以根据设置的屏幕大小，来规定使用哪种图片

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w,
             clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw">

还有哪一个标签能起到跟srcset相似作用？
<picture></picture>内部放0-多个<source>和一个<img>
看有没有合适的source，不行就用img

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

八、script标签中defer和async的区别

首先什么都不加直接用 <script src="xxx.js"></script> 这样会阻塞后面的运行，这俩其实都是异步的
而使用 defer 或 async 不会阻塞后面运行
不过，defer 和 async 只对外联脚本也就是用src的有用
defer 翻译一下其实是立即加载，延迟执行，且有顺序（但具体看浏览器，所以有时候顺序有问题），在DOMContentLoaded事件之前执行（具体也看浏览器）
async 是立即下载，下载好了就执行，不知道谁先执行完