前端面试题 => 【HTML】

HTML面试题总结

1. 对 HTML 语义化的理解

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

2. H5新增特性

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

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

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

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

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

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

• id、class、title、style；

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

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

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

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

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

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

9. iframe标签的主要功能是什么，有什么优缺点？

• 优点：
  • 当前页面，直接加载其他页面，而不必发生跳转；
• 缺点：
  • 框架中的内容不会被搜索引擎读取，且会增加过多的HTTP请求，影响页面载入速度；

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

• 按钮有三种：
  • 普通按钮、提交按钮、重置按钮；
• 常用标签：
  • <input type="button">、<input type="submit">、<input type="rest">、<button>；

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

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

12. 什么是 重绘 和 重排？

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