学习笔记——HTML面试问题总结

一些常问的HTML方面的面试问题。

---

1.物理像素，逻辑像素，CSS像素，PPI, 设备像素比是什么？

物理像素：表示屏幕上的点，1920*1080表示屏幕上由1920个物理像素点

逻辑像素：表示屏幕展示物体的视觉尺寸大小，逻辑像素相同表示物体看起来或者打印出来的大小一样，物理像素点越小，一个逻辑像素包含的物理像素点就越多，看起来越清晰（屏幕分辨率）。

CSS像素：一般情况下等同于逻辑像素，但是浏览器可以放大，手机也有放大模式，此时不再相等。

PPI：屏幕对角线的物理像素的个数除以对角线英寸数。

设备像素比：在水平或垂直方向，在同一排一个逻辑元素能放几个物理元素。

2.<meta name="viewport" content="width=device-width">作用?

让页面的布局视口宽度等于视觉视口宽度，此时页面元素会以设备逻辑像素宽度作为文档宽度进行布局。告诉当前页面是移动端页面。

3.Doctype作用?

告知浏览器应当以何种标准来解析当前文档。

4.标准模式与兼容模式各有什么区别？

标准模式：页面的排版和JS的运作模式以浏览器的最高标准解析当前文档。

兼容模式：页面布局以宽松的方式向后兼容显示，模拟老式浏览器的行为以防止站点无法工作。尽可能的显示更多内容给用户看。

5.谈谈对语义化的理解？

页面布局使用类似<header><footer><nav>等标签，能够直观的表示当前页面的结构布局。

优点：

1.代码结构清晰，利于阅读，有利于开发和维护。

2.提高用户体验，页面加载失败时，页面结构清晰。

3.有利于其他设备（屏幕阅读器）解析，根据语义渲染页面。

4.有利于SEO优化，搜索引擎会根据不同标签给予不同权重。