html前端面试题

1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2.每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

声明位于文档中的最前面的位置，处于 标签之前。

</!doctype>

1.此标签可告知浏 览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

2.⽂档解析类型有：

BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个

模式）

CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯。

IE8还有⼀种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。

3、Quirks 模式是什么？它和 Standards 模式有什么区别

Quirks就是怪异盒子模型，在Quirks 模式下，盒子的宽高包括了padding和border，还可以设置行内元素的宽高。

Standards 模式就是标准盒子模型，盒子的宽高包含内容，padding和border在宽高之外，给行内元素设置宽高，都不会生效，如 果父元素没有设置百分比的高度，子元素设置一个百分比的高度是

margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平

居中，但在 quirks 模式下却会失效。 无效的用 ，

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

1.修改的时候更加方便，只需要修改css文件

2，加载速度更快，页面简洁

3，结构与样式分离

4，对seo更加友好，排名更加靠前

5、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？

img的alt是当图片未加载出来的时候，在图片位置显示的内容，title是当鼠标移到图片位置所显示的文字

strong 是对字体的加粗

em 是斜体

6、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强：先针对低版本浏览器实现一个最基本的页面，再针对高级浏览器进行效果和交互的优化，达到更好的用户体验。

优雅降级：与渐进增强正好相反，一开始先写一个完整功能的页面，在对低版本浏览器进行兼容。

区别：优雅降级是页面效果从复杂到简单，同时要保证基本功能都要实现。渐进增强是由简单到复杂，不断扩充。

7、为什么利用多个域名来存储网站资源会更有效？

CDN 缓存更方便

突破浏览器并发限制

节约 cookie 带宽

节约主域名的连接数，优化页面响应速度 （因为老的浏览器（IE6是典型），针对同一个域名只允许同时保持两个HTTP连接。将图片等资源请求分配到其他域名上，避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接（比如ajax请求）。）

防止不必要的安全问题

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

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降

低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，

最终提高网站易用性。

9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookies： 在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k， ⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要⾃⾏封装 ，内存较小，一般用来保存用户的token信息，

sessionStorage ：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动

除），⼤⼩为5M，兼容IE8+

localStorage ：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、

localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式

10、简述一下 src 与 href 的区别

1. href 是跳转到指定页面；而src 是将内容插入到当前位置。

2. href是异步加载，而src是同步加载。

src例如 js 脚本，img 图片 和 frame 等元素

11、知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg，Webp：WebP 。

科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。

图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook

Ebay 等知名网站已经开始测试并使用 WebP 格式。

在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

12.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

1.微格式就是把语义化嵌入到HTML标签之中，增强页面的语义化，

2.在捉取前端页面时，能够更准确识别该内容的语义

13.在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始， 一次 js 请求一般情况下有哪些地方会有缓存处理？

dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

14一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

1.使用图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置到浏览器顶端的距离和到页面低端的距离，如果前者小于后者，优先加载。

2.如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3.如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

4.如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

15. 你如何理解HTML结构的语义化？

  用正确的标签做正确的事情。
  html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
  搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
  使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

16. 谈谈以前端角度出发做好SEO需要考虑什么？

1.标签语义化

2.维护网站，提高内容质量，保持更新

3. 控制首页链接数量网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

5.控制页面的大小

减少http请求，提高网站的加载速度。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

6.适量的关键词和网页描述

17、有哪项方式可以对一个 DOM 设置它的 CSS 样式？

外部样式表，引入一个外部 css 文件

内部样式表，将 css 代码放在 标签内部

内联样式，将 css 样式直接定义在 HTML 元素内部

18、CSS 都有哪些选择器？

派生选择器（用 HTML 标签申明）

id 选择器（用 DOM 的 ID 申明）

类选择器（用一个样式类名申明）

属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）

除了前 3 种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如 div .a{

}）

群组选择器（利用逗号间隔，比如 p,div,#a{

}）

那么问题来了，CSS 选择器的优先级是怎么样定义的？

基本原则：

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越

高。

复杂的计算方法：

用 1 表示派生选择器的优先级

用 10 表示类选择器的优先级

用 100 标示 ID 选择器的优先级

19、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围 内？

最基本的：

设置 display 属性为 none，或者设置 visibility 属性为 hidden

技巧性：

设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

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

答案：被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的

排列顺序: L-V-H-A（link,visited,hover,active）