html5面试

（1）html语义化

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

---

为什么要进行语义化

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
• 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

（2）加载一个资源的过程

• 浏览器根据DNS服务器得到域名的IP地址
• 向这个IP发送http请求
• 服务器收到，处理并返回http请求
• 浏览器得到返回内容

浏览器渲染页面的过程

• 根据HTML结构生成Dom Tree
• 根据css生成CSSOM
• 将Dom与CSSOM整合生成Render Tree
• 根据Render Tree开始渲染和展示
• 遇到<scrript>标签时,会执行并阻塞渲染

---

描述DOM事件捕获的具体流程

从上到下分别是:

• window
• document
• html
• body
• 目标元素

iframe分析

iframe 常被用于复用部分界面

(1)iframe的缺点

1. （Iframes 阻塞页面加载）window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况

---

如何关闭开启form表单的自动完成功能

<form autocomplete="on|off">

<em>与<strong>的区别

< em > 和 < strong > 是表达要素(phrase elements)。 < em > （emphasized text）表示一般的强调文本，而 < strong > （strong emphasized text）表示比 < em > 语义更强的的强调文本

IE的meta标签

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame 

为什么要进行css初始化

1. 因为浏览器的兼容问题，不同浏览器对某些html标签的默认值设置是不同的，不初始化css会出现浏览器间的页面显示差异
2. 有利于css样式的重用
3. a标签的text-decoration
4. li的list-style

什么是<!DOCTYPE>？及其作用，何为混杂模式

1. 告知浏览器以何种模式来渲染文档
2. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
3. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

---

hybird开发

image.png