2020前端面试（七）- HTML面试题

点这里，欢迎关注

HTML部分

1.HTML中Doctype的作用：

• Doctype声明用于告诉浏览器以何种方式来解析渲染页面。

• 对于HTML5不是基于SGML（标准通用标记语言）实现的，所以在声明DOCTYPE时不需要指定DTD。可以直接声明为

• 对于html，xml，xhtml，这三类是基于SGML（标准通用标记语言）实现的。在声明DOCTYPE时需要指定相应的DTD(文档类型定义)，浏览器需要以该DTD为标准来解析渲染页面。

• 补充：DTD是指文档类型定义,定义了一种标记语言的规范。标记语言是以DTD为标准的实现。

2.HTML中的严格模式和混杂模式：

• 严格模式，也称为标准模式。这种模式下，浏览器使用W3C的标准解析渲染页面。

• 混杂模式，也称为怪异模式。这是一种比较宽松的向后（旧）兼容的模式，浏览器会使用老版本浏览器的规则来解析渲染页面，由于不同浏览器的混杂模式不一样，所以显示的效果会大相径庭。

• 如果没有DOCTYPE声明或形式不正确则会导致文档以混杂模式呈现。

3.web Quality

• 无障碍性是指能够被残障人士使用的易用的网站。

• 具体实现：

  • 设置相对的字体大小，这样用户就能够使用浏览器菜单来改变默认的字体尺寸。

  • 为图片添加alt属性，当浏览器不能正常显示图像时，仍能知道图像的相关描述。

4.对HTML语义化标签的理解：

• 简单来说，就是正确的标签做正确的事。
• 对于开发者而言，语义化标签有利于阅读，便于团队的开发和维护。
• 对于机器而言，有利于搜索引擎优化，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，有效提升网站的排名。
• 其他方面，支持读屏软件，方便其他设备的解析，利于无障碍阅读，提高可访问性。

5.常见的语义化标签：

• header （网站名称，logo，存放nav）
• nav （导航栏）
• main（文档的主体部分，存放section）
• section（文档的各个章节）
• artical（独立性强的内容：文章，博客，用户评论）
• aside（导航，广告）
• footer（版权，网站信息）

6.iframe:

（1）什么是iframe?

iframe是一个内联框架元素 ，能够另一个html页面嵌入到当前页面中。

（2）iframe的缺点：

• iframe会阻塞主页面的onload事件；
• window的onload 事件在所有 iframe 加载完毕后(包含里面的元素)才会触发,因此会影响网页加载速度。
• 搜索引擎无法解读iframe，不利于SEO;
• iframe和主页面共享连接池，可能会阻塞主页面资源的加载。（连接池：浏览器与web服务器的并发连接数量，连接池是有限的）

解决iframe阻塞主页面onload事件的方案：

//动态的为iframe设置src属性
<iframe id="frame"></iframe>
<script>
    frame.src="xxx.html"
</script>

（3）iframe通信：

同源情况下：直接通信

跨域请求下：

• postMessage
• window.name
• location.hash
• document.domain

7.HTML5的新属性：

• 标签方面
  • 语义化标签 header nav article section aside footer
  • 输入表单类型 color calander date time email url search
• 多媒体方面
  • audio video source embed track
• 存储方面
  • 提供了web存储（localStorage,sessionStorage）
  • 还提供了本地离线存储，即把需要离线存储在本地的文件列在一个manifest配置文件
• 其他：
  • 拖拽功能 drag/drop
  • 全双工协议websocket
  • web worker线程
  • 地理定位
  • canvas绘图