标准的HTML文档必须包含哪几个元素:
- DOCTYPE
- html
- head
- body
HTML和HTML5的区别有哪些？
- 旧版本的HTML比较依赖浏览器的插件，例如播放视频需要安装Flash插件
- 由于HTML5不再基于SGML，所以文档声明类型（DOCTYPE）只有一种
- HTML5消除了过时或冗余的元素，如：font、center等
- HTML5新增了许多语义化的元素（article、header等）和新功能（video、canvas等），提供更好的跨平台支持
- HTML5制订了新的全局属性和元素属性，全局属性有draffable、contenteditable等，元素属性有accept、placeholder等
HTML实体的应用场景有哪些？
如果要在HTML文档中显示特殊字符（‘<’,‘>’等），那么就可以使用HTML实体。
HTML实体还能预防XSS（跨站脚本攻击）。XSS通常会将脚本代码注入到HTML文档中，再解析执行。但使用了HTML实体后，就可以让相关代码只打印，而不执行。
什么是Shadow DOM(影子中的DOM)？
Shadow DOM是浏览器的一种功能，能够自动添加子元素，例如audio元素（如下）在网页中能使用进度条、音量控制等功能，这些相关元素都由浏览器自动生成。
<audio controls src="test.wav"></audio>
元素属性src和href有何区别？
两者功能不同。href(hypertext reference)能够建立一条通道，将当前文档和定义的资源连接起来。src(source)是将定义的资源嵌入到当前文档中。
img元素中的title和alt属性有何区别？
title是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。link和style元素中的title比较特殊，表示样式表的名称；alt是局部属性，仅可用在img、input等元素，提供在图片未载入或加载失败时的替代文本。只有当input元素的type属性为image时，才能使用alt属性。
3种将CSS样式应用到元素上的方式有什么区别？
| 方式 | 特殊性 | HTTP请求 | 重用范围 | 文档大小 | 伪类与伪元素 |
|---|---|---|---|---|---|
| 内联样式 | 最高 | 无 | 不可重用 | 增加 | 不可定义 |
| 内嵌样式 | 与外部相同 | 无 | 当前文档 | 增加 | 可定义 |
| 外部样式 | 与内嵌相同 | 有 | 整个项目 | 保持 | 可定义 |
3种嵌入JavaScript的方式有什么区别？
| 方式 | 内容和行为 | HTTP请求 | 重用范围 | 文档大小 | 特点 |
|---|---|---|---|---|---|
| 内联脚本 | 耦合 | 无 | 当前文档 | 增加 | 将内联脚本放在外部样式表之后，会延迟其他资源的下载 |
| 外部脚本 | 分离 | 有 | 整个项目 | 保持 | 容易维护，高复用，可用defer或async属性解决页面阻塞问题 |
| 元素属性 | 耦合 | 无 | 不可重用 | 增加 | 两种定义方式，分别是事件属性和在链接属性中使用特殊伪协议的URL。不但能制作可执行JavaScript的浏览器书签，还能用a元素模拟按钮的效果 |
meta元素可以定义文档的哪些元数据？
meta元素可定义的元数据可简要概括为4类：
- 声明HTML文档内容所用的字符编码
- 完善文档描述信息，让搜索引擎更容易解析索引，提升SEO(search engine optimization)
- 适配移动设备，使页面在各种尺寸的屏幕中显示正确
- 指定首选样式表、执行重载或重定向
a元素除了可以用于导航外，还有什么其他功能？
href属性中的URL可以是浏览器支持的任何协议，因为有这个特点，a元素也可以用于手机拨号、发送短信、发送邮件等功能。当发送短信的时候，可将内容作为参数直接带过去；当发送邮件时，可将收件人、抄送人、主题和内容作为参数直接带过去，如下所示：
<a href="tel:10086">拨打电话</a>
<a href="sms:10086?body=text">发送短信</a>
<a href="mailto:strick@pw.org?cc=jane@pe.com">发送邮件</a>
元素的布尔属性disable和readonly有何区别？
元素操作是指读取、写入的操作。Tab导航是指能否用Tab键定位到该元素
| 属性 | 元素外观 | 元素操作 | 获取焦点 | Tab导航 | 表单提交 | 元素支持 |
|---|---|---|---|---|---|---|
| disabled | 修改 | 否 | 否 | 否 | 没有发送数据 | input、textarea、option、select和button等元素 |
| readonly | 维持 | 是 | 是 | 是 | 会发送数据 | input和textarea |
表格布局的弊端
- 可访问性差，表格布局中的内容从左到右和从上到下的读取并不总是有意义，并且还缺乏依赖关系，无障碍工具（如屏幕阅读器）从这些文档中获取的数据会非常混乱，影响用户的浏览
- 难以实现响应式，通常可用媒体查询对不同设备呈现适合的界面，但表格布局需要用单元格嵌套表格，而单元格之间的合并要用元素的colspan或rowspan属性，不能用CSS属性简单的设置
- 可维护性差，表格布局需要使用大量的元素属性，并且表格之间需要相互嵌套。这使得代码难以阅读，特别是如果不缩进，标签没有层次感，更加难以理解代码的意图
- 不够语义化，表格布局会用到大量的单元格，单元格（th或td）不像nav、header、footer等元素有明确的含义。语义化的界面既能保持代码整齐，又能提升搜索引擎优化
- 加载速度慢，嵌套的表越多，文档就变得越臃肿，不但会加长网络传输的时间，而且会增加渲染的时间
除了video和audio元素，HTML5还支持哪些其他多媒体元素？
HTML5还支持embed和track元素。embed元素用于嵌入外部资源，例如SVG矢量图形、应用程序或插件等。track元素是audio和video的子元素，为多媒体文件添加辅助文本信息，例如字幕、屏幕阅读器说明和主题等。在Chrome浏览器中，可用WebVTT(网络视频文本轨道)文件和track元素结合，给媒体资源添加可同步字幕。
<video>
<source src="video" type="video/webm">
<track kind="subtitles" src="video" label="中文" srclang="zh" default>
</video>
canvas元素用属性和用CSS设置宽高有什么区别？
可将canvas元素简单理解为两部分：画布和容器。CSS控制的是容器的尺寸，而属性控制的是画布的尺寸，绘图都是在画布上进行，画布默认宽为300px，高位150px。
