HTML语义化

定义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更好的代码，同时让浏览器的爬虫和及其很好地解析

作用：

• 在没有CSS的情况下，页面也能呈现出很好的内容、代码结构
• 提升用户体验：title和alt属性，label标签
• 利于SEO（搜索引擎优化），爬虫依赖于标签来确定上下文和各个关键字的权重
• 方便其他设备解析（如屏幕阅读器、盲人阅读器）
• 便于团队的开发和维护

注意：

• 尽可能减少无语义标签div和span
• 语义不明显时尽量使用p，因其有默认上下间距
• 不要使用纯样式标签而用CSS

JavaScript加载

第三方脚本加载

<script type="text/javascript" src="/script.js"></script>

蓝色线代表网络读取，红色线代表执行时间，绿色线代表HTML解析

defer和async都是异步读取脚本，defer按照脚本顺序执行，async不一定按脚本顺序执行

HTML， CSS， JS加载顺序

html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析->dom树构建完成->加载图片->页面加载完成

• js放在head中会立即执行，阻塞后续的资源下载与执行，js按照script标签出现顺序进行解析
• 放在body中则会先渲染页面
• 动态脚本（内联脚本）不受样式影响，解析到它时便执行
• CSS样式会阻塞图片的加载，不给图片使用样式会提高加载速度；脚本不会阻塞图片的加载
• link标签是同时加载的，script标签才会加载完一个再加载另一个；加载和解析是两个概念，加载是并行的，解析是顺序的

DOCTYPE

DOCTYPE有严格和过渡两种风格，浏览器有标准和混杂两种呈现模式

标准模式中，浏览器根据规范呈现页面。混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。

对于 HTML 4.01 文档，

• 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现
• 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现
• 有过度 DTD 而没有 URI 会导致页面以混杂模式呈现
• DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现

HTML元素的显示优先级

在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。

表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；

非表单元素包括：连接（a），div，table，span等。

所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

有窗口元素包括：select元素，object元素，以及frames元素等等。

无窗口元素：大部分html元素都是无窗口元素。