HTML/HTML5
一、文档加载顺序。
文档入下，数字编号为加载顺序。
<html><!--1-->
<head><!--2-->
<link href="link/common.css" rel="stylesheet" /><!--3-->
<script src="js/v2.js"></script><!--4-->
</head>
<body><!--5-->
<div>
<span></span><!--6-->
v2是一个轻量级的前端框架。<!--7-->
</div>
<img alt="" src="yep.png"><!--8-->
<p>vue是一套灵活的html标记类型的前端框架。<!--9--></p><!--10-->
</body>
</html>{?} 可以利用加载顺序的原理做什么？
二、文档加载规则（文档阻塞）。
{?} 文档加载阻塞会造成什么问题？
[A] 界面卡顿、变形、闪烁等。
{?} 哪些内容会阻塞文档加载？
[A] 只有
脚本文件会阻塞文档加载。☆
三、解决文档加载。
{?} 解决文档加载有哪几种方式？分别在哪个版本开始支持？原理是什么？
[A]
- 可以在脚本文件上加属性标记(
defer[HTML4.1]/async[HTML5])。- 异步加载。
{?} 两种标记有什么区别？
[A]
- 书写规范。
- defer 书写规范入下。
<script src="js/v2.js" defer="defer"></script><!--推荐价值对的方式（``HTML4.1``不支持单标记）-->
- async 书写规范入下。
<script src="js/v2.js" async></script><!--推荐单标记的方式（``HTML5``可以良好的支持单标记）脚本执行时间。
结论：
- 绿色 ---- HTML解析
- 蓝色 ---- 脚本网络读取。
- 红色 ---- 脚本执行。
- 实现原理：都是异步加载。
- 执行时间：defer 总是在HTML解析完成后执行。async 在网络请求完成时，及时执行。
四、文档解析。
单标签和双标签。
- HTML的解析时，所有标签应该有闭合标记。
- 单标签的闭合标记以
/>结尾（如:<img/>），理论上单标签元素不允许有子元素。 - 双标签的闭合标记以
</{nodeName}>结尾（如：<div></div>）。
块级元素、行级元素、行级-块级元素。
- 块级元素[
display:block]- 特点：
- 每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
- 元素的高度、宽度、行高和顶底边距都是可以设置的。
- 元素的宽度如果不设置的话，默认为父元素的宽度。
- 常见块级元素：div、p、h1...h6、ol、ul、dl、table、address、blockquote、form
- 特点：
- 行级元素[
display:inline]- 特点：
- 可以和其他元素处于一行，不用必须另起一行。
- 元素的高度、宽度及顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字、图片的宽度，不可改变。
- 常见行级元素：a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var
- 特点：
- 块级元素[
- 行级-块级元素[
display:inline-block]- 特点：
- 可设置高度、宽度、行高以及顶和底边距，且可元素共用一行。
- 常见行级-块级元素：无。
- 特点：
五、元素属性。
标准属性。
- 标准属性包含属性名称和属性值。
- 定义规范。
- 属性名称和属性值用等于符号拼合，属性值包含在单引号或双引号中间。多个属性之间用空格分开。
<div aria-lib="v2" arai-support="IE9+"></div>
特殊属性。
- 属性值和属性名称相同，属性值唯一，且DOM解析时具有特殊含义。
- 定义规范。
- 只写属性名称（可按照标准属性属性）。
<input readonly required/>
六、标签特性和属性特性。
不同标签的默认属性和样式有所区别，请使用合适的标签做界面呈现，减少不必要的样式。
不同的属性在用户交互中有不同的响应，请使用合适的属性，减少不必要的脚步。