前端面经-HTML部分（持续更新中）

下面都是本人在学习过程中整理的一些高频面试题，希望对您能有帮助。

1、主流浏览器有哪些以及它的内核？

• IE: trident内核
• Firefox：gecko内核
• Safari:webkit内核
• Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
• Chrome:Blink

2、Doctype的作用。

• 声明位于文档中的最前面的位置，处于html标签之前。此标签可告知浏览器解析器使用哪种HTML或XHTML规范来解析文档。

3、div+css 的布局较 table 布局有什么优点？

• 改版的时候方便，只需要改CSS文件
• 页面加载速度更快、结构化清晰、页面显示简洁
• 表现与结构相分离
• 易于优化（seo）搜索引擎更友好，排名更容易靠前

4、img 的 alt 与 title的作用。

• alt 属性用来指定替换文字，当图片不能正常加载时，会显示替换文字
• title属性用于设置HTML元素的建议性的信息，它是全局属性，可以用于所有的HTML元素

5、请谈一下你对网页标准和标准制定机构重要性的理解。

• 网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，最终提高网站易用性。

6、请谈一下你对微格式的理解。

• 微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准，是为特殊应用而制定的特殊格式。
• 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示

7、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

• 被点击访问过的超链接样式不在具有 hover 和 active 了，解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）。

8、简述一下块级元素和行内元素特点以及它们的区别。

• 块级元素总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可设置。
• 内联元素和相邻的内联元素在同一行

9、HTML语义化的好处。

• 当页面样式加载失败的时候能够让页面呈现出清晰的结构
• 有利于 seo 优化，利于被搜索引擎收录
• 便于其他设备解析
• 便于项目的开发及维护，使 html 代码更具有可读性

10、iframe的优缺点。

• 优点：解决加载缓慢的第三方内容；并行加载脚本。
• 缺点：阻塞主页面的onload事件；即使内容为空，加载也需要时间；不利于SEO。

11、meta标签的作用是什么？有哪些常见的meta标签？

• meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
• 常见的meta标签
  • keywords定义文档关键词，用于搜索引擎
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • description定义web页面描述
    <meta name="description" content="该页面用于...">
  • author定义页面作者
    <meta name="author" content="Tom">

12、HTML5新特性。

• 语义化标签
• 增强型表单
• 视频和音频
• Canvas绘图
• SVG绘图
• 地理定位API
• 拖拽API
• WebWorker
• WebStorage
• WebSocet

13、localStorage和sessionStorage的区别

• localStorage和sessionStorage都是window对象提供的全局属性，用途都是在浏览器中存储key/value对的数据
• 两者的唯一区别在于时效性。localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么sessionStorage存储的数据也就被清空了。