前端面试题之HTML
如何理解HTML语义化
参考答案
HTML 语义化就是使用正确的标签做正确的事；比如段落就用 p 标签，页眉就用 header 标签，页脚用 footer 标签，导航用 nav 标签，文章就用 article 标签，视频用 video 标签等等。
语义化 HTML 的好处有：
- 易于用户阅读：在没有 CSS 情况下，页面也能够更好的呈现内容结构与代码结构；
- 便于团队的开发和维护：更具有可读性，让代码更好的维护；
- 有利于 SEO：搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重；
- 利于其他设备的解析：如屏幕阅读器、盲人阅读器，提高可访问性。
meta viewport是做什么用的，怎么写
参考答案
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
| 参数 | 含义 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"device-width" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要（很少使用） |
| user-scalable | 是否允许用户进行缩放 |
img标签中的alt和title有什么区别
参考答案
- alt 是当图片加载失败时，显示在网页上的替代图片的文字；
- title 是鼠标放在图片上时显示的文字，来更加清楚的表达链接的目的；
- alt 只适用于 img 标签，而 title 适用于很多标签。
你用过哪些HTML5标签
参考资料
HTML5有哪些新特性？废除了哪些元素？如何让低版本的IE支持 HTML5新标签？
参考答案
新特性：
- 语义：新增加了
<section>、<article>、<nav>、<header>、<footer>等标签； - 连通性：增加 Web Sockets、Server-sent events 特性，帮助我们实现服务器将数据推送到客户端的功能；
- 离线 & 存储：对本地离线存储的更好的支持；localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除；
- 多媒体：
<audio>和<video>元素嵌入并支持新的多媒体内容的操作； - 2D/3D 绘图 & 效果：增加用于绘制图像的 canvas，SVG 矢量图像格式；
- 性能 & 集成：HTML5 会通过 XMLHttpRequest2 等技术，帮助您的 Web 应用和网站在多样化的环境中更快速的工作；
- 设备访问 Device Access：能够处理各种输入和输出设备。
废除的元素：
- 表现元素：basefont、big、center、font、s、strike、tt、u；
- 部分浏览器支持的元素：applet、bgsound、blink、marquee；
- 对可用性产生负面影响的元素：frameset、frame、noframes,在 html5 中不支持 frame 框架，只支持 iframe 框架。
让低版本的 IE 支持 HTML5 新标签：
使用 html5shiv 可以解决 IE 低版本不兼容的问题，只需要在 head 中加入当版本低于 IE9 时，浏览器会加载 html5.js 脚本，使得支持 HTML5 的新功能，也可以将脚本文件下载到本地。
<head>
<!--[if lt IE 9]>
<script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
</script>
<![endif]-->
</head>
参考资料
H5是什么
参考答案
首先 H5 != HTML5，其次 H5 是指在手机这类无法播放 Flash 的移动端上呈现的，可以达到 Flash 效果的网页，也可称移动端 PPT。
@import与link的区别
参考答案
- @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 的标签，不仅可以加载 CSS，还可以定义 RSS、rel 连接属性等；
- 页面被加载时，@import 引入的 CSS 将在页面加载完毕后被加载；link 标签引入的 CSS 被同时加载；
- @import 在 IE5+ 才能被识别；link 不存在兼容问题；
- @import 不支持使用 JS 控制 DOM 改变样式；而 link 支持。
常见的浏览器内核
参考答案
浏览器的内核分成两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。
JS 引擎：解析 JavaScript 语言，执行 JavaScript 语言来实现网页的动态效果。
常见的浏览器内核如下：
- Trident 内核（又称 MSHTML）：IE、猎豹安全浏览器、360安全浏览器、搜狗浏览器、百度浏览器、UC浏览器等等；
- Gecko 内核：Netscape6 及以上版本、FireFox 等；
- Webkit 内核：Chrome、Safari等；
- Presto 内核（现为 Blink）：Opera7 及以上。
什么是重绘和重排
参考答案
什么是DOCTYPE
参考答案
<!DOCTYPE>必须声明在文档中的最前面的位置。
<!DOCTYPE>声明不是一个 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
注意：总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
HTML全局属性有哪些
参考资料
更多面试题请移步至 我的新博客 - 持续更新地址
