好程序员 web 前端分享 HTML5 常见面试题集锦五

　　 1 、页面导入样式时，使用 link 和 @import 有什么区别？

　　 答案：差别1 ：本质的差别： link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。

　　 差别2 ：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候）， link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

　　 差别3 ：兼容性的差别： @import 是 CSS2.1 提出的，所以老的浏览器不支持， @import 只有在 IE5 以上的才能识别，而 link 标签无此问题。

　　 差别4 ：使用 dom(document o bject model 文档对象模型 ) 控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为 @import 不是 dom 可以控制的 .

　　 2 、 <img> 标签上 title 属性与 alt 属性的区别是什么？

　　 答案： title 属性是鼠标划上去显示的内容

　　 alt 属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。

　　 3 、请写出至少 5 个 html5 新增的标签，并说明其语义和应用场景

　　 答案：section ：定义文档中的一个章节

　　 nav ：定义只包含导航链接的章节

　　 header ：定义页面或章节的头部。它经常包含 logo 、页面标题和导航性的目录。

　　 footer ：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

　　 aside ：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

　　 4 、 HTML 与 XHTML ——二者有什么区别？

　　 答案：

　　 1 、 HTML 元素必须被正确地嵌套。

　　 2 、 XHTML 元素必须被关闭。

　　 3 、标签名必须用小写字母。

　　 4 、 XHTML 文档必须拥有根元素。

　　 5 、 iframe 的优缺点？

　　 答案：优点：

　　 a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

　　 b. iframe 无刷新文件上传 c. iframe 跨域通信

　　 缺点：

　　 a. iframe 会阻塞主页面的 Onload 事件 b. 无法被一些搜索引擎索引到

　　 c. 页面会增加服务器的 http 请求 d. 会产生很多页面，不容易管理。

　　 6 、全屏滚动的原理是什么？用到了 CSS 的哪些属性？

　　 答案：原理：有点类似于轮播，整体的元素一直排列下去，假设有5 个需要展示的全屏页面，那么高度是 500% ，只是展示 100% ，剩下的可以通过 transform 进行 y 轴定位，也可以通过 margin-top 实现

　　 overflow ： hidden ； transition ： all 1000ms ease ；

　　 7 、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE ？

　　 答案：响应式网站设计(Responsive Web design) 是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

　　 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

　　 页面头部必须有meta 声明的 viewport 。

　　 <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

　　 8 、 ::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用

　　 答案：单冒号(:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。

　　 ::before 就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于 dom 之中，只存在在页面之中。

　　 :before 和 :after 这两个伪元素，是在 CSS2.1 里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改成使用双冒号，成为 ::before ::after

　　 9 、怎么让 Chrome 支持小于 12px 的文字？

　　 答案：p{font-size:10px;-webkit-transform:scale(0.8);}//0.8 是缩放比例

　　 10 、简述一下你对 HTML 语义化的理解？

　　 答案：1 、用正确的标签做正确的事情。

　　 2 、 html 语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；

　　 3 、即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；

　　 4 、搜索引擎的爬虫也依赖于 HTML 标记确定上下文和各个关键字的权重，利用 SEO;

　　 5 、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。