1.标签语义化作用

见标签知其意，让代码结构清晰，方便阅读，有利于其他设备解析。例如：屏幕阅读器、盲人阅读器，遵循W3规范以语义化标签渲染网页更利于搜索引擎的优化（SEO），网络不佳时（无样式），网页也更具可读性，常见的语义化标签如下mian、aside、footer、code、article、section等标签。

2.常见浏览器内核

浏览器内核负责对网页语法进行解析，即内部的渲染引擎，决定网页的显示效果，常见的内核有以下几种：

  1. IE浏览器，微软出品的Trident内核，厂商前缀-ms-；
  2. Chrome，谷歌出品的Webkit内核，已经转向Blink内核，厂商前缀-webkit-；
  3. Firefox，Mozilla出品的Gecko内核，厂商前缀-moz-；
  4. 欧朋浏览器，欧朋出品的Presto内核，厂商前缀-o-；
  5. Safari，苹果出品的Webkit，厂商前缀-webkit-；

3.image标签title与alt属性的区别

alt标签是图片无法正常显示时对图片的描述；
title为设置该属性的元素提供建议性的信息，鼠标悬停在元素上时会提示文字信息。

4.HTML和XHTML的区别

XHTML是可以拓展的超文本标签语言，更严格更纯洁的HTML语言，具有以下的特点：

  1. XHTML标签必须被正确的嵌套；
  2. XHTML标签存在闭合；
  3. 标签名必须小写；
  4. XHTML必须拥有根元素；

5.iframe的优缺点

优点

可以解决第三方静态内容加载缓慢的问题；
iframe无刷新文件上传；
iframe跨域通信；

缺点

iframe会阻塞主页面的onload事件；
无法被搜索引擎捕获到导致不利于SEO；
增加服务器的http请求；
内存开销大；

6.常见文档类型和DOCTYPE

doctype一般声明于html文件的第一行，作用是告诉浏览器以哪一个文档类型进行解析文本，如果不存在则以包容模式解析具体的文档类型，常见有以下几种文档类型：

  1. Standards （标准）模式用于呈现遵循最新标准的网页；
  2. Quirks（包容兼容）模式用于呈现为传统浏览器而设计的网页；

7.HTML5-!DOCTYPE HTML

HTML5不基于SGML标准通用标记语言，则不需要DTD 文档类型定义引用，但是需要DOCTYPE规范浏览器行为，而HTML4基于SGML，需要引用DTD，文件第一行进行如下声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
定义HTML文档。

8.使用link和@import导入样式的区别

可以通过link和@import引入CSS资源文件，但是具有一下的不同点：

  1. 性质不同，link是xhtml标签，无兼容性问题，可用于加载CSS文件的同时还可以进行RSS信息聚合等事务，而@import属于CSS范畴，在CSS2时提出，低版本浏览器不支持，只能用于加载CSS文件；
  2. 加载时间不同，link引用CSS随页面载入时同时加载，@import需要在页面加载完毕后被需要时才会加载；
  3. 写法不同，link是写在head标签中，而@import在html中只能写在style标签中；
  4. 样式权重不同，link引用的样式权重高于@import；

9.无样式内容闪烁（FOUC）

无内容闪烁英文称为Flash of Unstyle Content，@import需要在页面加载完毕后被需要时才会加载，因此页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式，解决方法是使用在head中使用link标签加载CSS样式表，文档按顺序载入，body渲染完成后link早已加载完成，所以不会出现FOUT问题。

10.浏览器内核引擎

浏览器内核主要分成两部分，渲染引擎和JS引擎。
1. 渲染引擎负责页面内容（HTML、XML、图像等）输出到网页中，浏览器的内核不同渲染的效果也不同；
2. JS引擎则是解析和执行javascript进而实现网页的动态效果，且两者越来独立化。

11.HTML5中manifest离线缓存

<html manifest='cache.manifest'>开启离线缓存，当浏览器发现HTML头部有manifest属性，进行请求manifest文件，首次访问浏览器就会根据manifest文件的内容下载相应的资源并进行离线存储。如果资源没有发生改变，则浏览器直接读取manifest中离线缓存的文件进行渲染。

12.页面可见性API用途

通过监听visibilityState的属性值进行检测页面是否可见以及打开网页时的一些日志，根据监听document的visibilitychange事件检测用户是否切屏，锁屏，退出等状态，用于切换页面则视频停止播放等场景。

13.src和href区别

href标识超文本引用，用于link和a等元素应用，通过href将当前元素和引用资源之间建立联系；
src表示引用资源替换当前元素用在img、script、iframe，无跨越问题，<script src="js.js"></script>当浏览器解析时会暂停其他资源的下载和处理，常说的将引用js文件时要放在body的最底部的原因于此。

14.输入框autocomplete

浏览器会自动记录同名（name）input框中的值，并在用户输入时会提示造成数据的泄露不安全，通过给标签设置autocomplete为off来取消此功能，IE浏览器需要在internet选项菜单中里的自动完成里面设置。

15.浏览器离线持久化存储

浏览器可以通过cookie、ssessionStorage、localStorage进行对数据进行存储，同源策略下均可以访问，但具有一下不同点：

  1. 性质不同，cookies是为了标识用户身份而存储用户本地终端上的数据，自动在同源http请求头中携带，cookies在浏览器和服务器间来回传递信息，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存；
  2. 存储大小的限制不同，cookie仅可以保存4Kb且数量不超过20条，sessionstorage和localstorage保存的数据可达到5M；
  3. 生命周期不同，cookie可以设置生命周期且在过期之前均有效，sessionstorage仅在浏览器窗口关闭或者页面之前有效，若不手动删除localstorage则永久有效；
  4. 作用域不同，cookie和localStorage在所有的同源标签页（不同页面但域名端口相同）都是共享，而不同标签页面的sessionStorage不共享；

16.label标签作用

label 标签来定义表单控件之间的关系，for属性值与一个控件a的id一致时，点击label标签，控件a会获得焦点，将控件包裹在label标签中就省去for和id的对应关系。

17.网页验证码作用

区分用户是计算机还是程序;
防止恶意破解密码和刷票行为；

18.meta标签viewport的理解

<meta></meta>元素可提供有关页面的元信息并且仅存在与head标签内，设置viewport视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
使文档宽度等于设备的真实屏幕的宽度，同时可控制用户的缩放行为，缩放是相对于文档宽度等于屏幕宽度而言，即1css的代表更多的物理像素。场景化分析，如果不添加meta的视口标签，那么在iPhone6中你设置一个375px的div，浏览器默认整文档宽度是980px，所以会出现左右的滚动条，设置视口标签那么默认是文档的宽度等于屏幕的宽度，所以375px恰好可以撑满屏幕。

19.HTML5新特性

  1. 语义化标签；
  2. 丰富input中type类型;
  3. 音频（audio）和视频（video）；
  4. 拖放API；
  5. 地理位置；
  6. canvas画布；
  7. svg；
  8. webWorker；

20.HTML页面的渲染过程

  1. 浏览器解析HTML源码标签，根据标签嵌套创建DOM树，并行加载静态资源文件，每一个HTML标签都是文档树中的一个节点，构成了由documentElement节点为根节点的DOM树；
  2. 浏览器解析CSS代码，计算得出样式数据，构建CSSOM树，非法的语法被直接忽略掉，解析CSS的时候按照顺序来定义优先级浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < !important的规则进行解析；
  3. DOM树和CSSOM树组成渲染树并绘制渲染树到屏幕上；
  4. 如果渲染树中的节点被移除、位置改变、元素的显示隐藏等属性改变都会重新执行上面的流程，这一个行为称为回流；与重绘不同，重绘是渲染树上的某一个属性需要更新且仅影响外观、风格，不影响布局，例如：修改background-color就属于重绘只是重新绘制到屏幕中上，回流必定造成重绘；

余浩的博客 持续更新...前端面试题HTML部分

赏