HTML面试题总结

1. 对 HTML 语义化的理解

1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
2. 代码结构清晰，方便团队的管理和维护，并且语义化更具有可读性，减少差异化；
3. 提升用户体验； 例如：title、alt用于解释名词或者图片信息、label标签的活用
4. 有利于SEO优化，提升搜索引擎排名； 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息； 爬虫依赖于标签来确上下文和关键字的权重；
5. 方便其他设备的解析（屏幕阅读器、盲人阅读器、移动设备等等）；

2. H5新增特性

1. 语义化更好的标签： header、nav、aside、article、section、footer；
2. 音视频标签： audio、video； 如果浏览器不支持自动播放怎么办? 在属性中添加autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)；
3. 以 data- 开头的自定义属性；
4. 本地存储： localStorage、sessionStorage；
5. 表单控件； 给 type 属性设置值； url、search、file、email、date、number、month、color、tel；
6. 画布； Canvas；
7. 拖拽释放： drag、drop；
8. 新技术： 浏览器多线程：webWorker； 前后台持久化通信技术：webSocket；

3. HTML5常用的结构标签有哪些，它替换了之前的哪些标签？

• header、nav、main、article、aside、footer、section
• <div class="header">、<div class="nav">、<div class="main">...

4. HTML文档采用 UTF-8编码集 的优势是什么？

1. utf-8： 使用3个字节表示一个符号，基本上可以覆盖世界上所有的语言；
2. 优势： 与传统的gb2312、gbk相比，可识别的字符集更多，也是行业界推荐的；

5. 标签中常用的属性有哪些？

• id、class、title、style；

6. 标签中的 title属性 和 alt属性 的区别是什么？

1. title： 是标签的描述属性，当鼠标移入时，稍等一会儿就会出现title属性的属性值；
2. alt: 用在可置换元素上，当外部资源无法正确加载时，alt属性的属性值就会显示在占位符上；

7. 什么是置换元素 和 非置换元素，每种类型至少举出三个例子

1. 置换元素： 置换元素的内容来自外部，该元素仅是外部资源的占位符； <img>、<video>、<audio>...；
2. 非置换元素： 非置换元素内容来自当前文档，必须使用双标签； <p>、<h1> ~ <h6>、<ul>...；

8. 标签中的 href属性 和 src属性 有什么区别？

1. 二者都是对外部资源的引用；
2. href： 用于超文本或样式，用在 <link>标签 和 <a>标签上；
3. src： 用在外部资源占位符上，如<img>、<iframe>、<script>、<video>...；

9. iframe标签有什么优缺点？

1. 优点： 重载页面时不需要加载整个页面，只需要重载页面中的一个框架页，从另一方面来说，减少数据的传输，加快了网页下载速度； 技术易于掌握，使用方便，可主要使用于不需要搜索引擎来搜索的页面； 当前页面，直接加载其他页面，而不必发生跳转；
2. 缺点： iframe 会阻塞主页面中的 Onload 事件； 会产生很多页面，不容易管理； 多框架的页面会增加服务器的http请求，影响页面的并行加载； 并行加载：同一时间针对不同域名下的请求，iframe和所在页面在同一个域下面，而浏览器的并行加载的数量是有限制的；

10. 表单中的按钮有几种，常用的标签有哪几个？

1. 按钮有三种： 普通按钮、提交按钮、重置按钮；
2. 常用标签：

<input type="button" />
<input type="submit" />
<input type="rest" />
<button />

11. 表单数据的提交方式有几种，分析使用场景？

1. POST： 表单数据通过请求体发送；
2. GET： 表单数据通过URL地址栏发送；

12. 什么是 重绘 和 重排？

1. 重绘： 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘；
2. 重排： 和重绘相反，当改变布局的时候，就会引起重排；
3. 重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）