关于HTML+css的面试题及答案（1）

1:主流浏览器的内核分别是什么？

IE：trident内核 [‘traidnt ]

Firefox：gecko 内核 [ˈɡekəʊ]

Safari：webkit 内核

Chrome,Opera：Blink内核(基于webkit)

2:每个HTML文件开头都有<!DOCTYPE html>，它的作用是什么

<!DOCTYPE html>声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）

严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

<!DOCTYPE html>不存在或格式不正确会导致文档以混杂模式呈现

3: div+css的布局较table布局有什么优点？

（1）div+css布局的好处：

a.符合W3C标准，结构、样式和行为分离，代码结构清晰明了，带来足够好的可维护性。

b.布局精准，网站版面布局修改简单。

c.加快了页面的加载速度（最重要的）。

d.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

table布局的好处

a.容易上手。

b.可以形成复杂的变化，简单快速。

c.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

4:img的alt属性与title属性有何异同

alt属性:在图片无法加载的时候才会显示的其值,

title属性:在图片正常加载鼠标划上去显示的值

5:strong标签与em标签的异同

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

6:渐进增强和优雅降级之间的不同

渐进增强（progressive enhancement） [prəu'ɡresiv][ɪnˈhɑːnsmənt]

：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级( graceful degradation)[ˈɡreɪsfl ,deɡrəˈdeɪʃn]：一开始就构建完整的功能，然后再针对低版本浏览器进

行兼容。

渐进增强的观点关注内容本身

优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略

7:为什么利用多个域名来存储网站资源

:CDN缓存更方便（CDN主要用来使用户就近获取资源）。

：突破浏览器并发限制（同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。一些静态资源，如果放到不同的域名下面就能实现与其他资源的并发请求。）

:节约 cookie 带宽

:节约主域名的连接数，优化页面响应速度

:对于UGC的内容和主站隔离，防止不必要的安全问题。

8:网页标准和标准制定机构的意义

网页标准的制定，使得web发展的更健康，提高网站的易用性。

a、开发者遵循统一的标准，降低了开发难度和开发成本

b、SEO优化网页也会更加方便，不会因为滥用代码出现各种bug和安全问题。

9:简述一下 src与 href 的区别

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。例如：js脚本，img图片，frame等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么将js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

10:网页制作会用的图片格式有哪些

Png,jpeg,gif,svg,webp

webp格式：谷歌开发的新的图片格式，体积小，质量好，但兼容性略差

11:微格式，前端中怎么考虑微格式

微格式（Microformats）是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式

作用：

a、在捉取Web内容时，能够更为准确地识别内容块的语义；

b、对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

应用例子：

当用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息

12:从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？

DNS缓存，CDN缓存，客户端(浏览器缓存)，服务器缓存

DNS缓存是指在正常访问ip之后，系统会将这个ip存储起来，当再次访问的时候，系统就会把本地的DNS缓存提取显示，等于是加速了网址的解析。

CDN是Content Delivery NetWork的简称，即‘内容分发网络'的意思，主要用于分地域的集群服务器，当用户浏览网站请求数据时，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。

服务器缓存就是存放频繁访问内容的服务器。

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

a. 图片懒加载，滚动到相应位置才加载图片。

b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。

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

14:你如何理解 HTML 结构的语义化？

A:在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:裸奔时也好看；

B:用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

C:有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

D:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），更好的方式来渲染网页；

E:便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

15:以前端角度出发，有哪些注意事项有利于SEO?

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

(2).网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

(3).控制首页链接数量,要适中

(4).导航优化：

a:尽量采用文字方式

b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性

c:应该加上面包屑导航

(5).控制页面的大小:减少http请求，提高网站的加载速度

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

title标题，强调重点即可，

meta keywords标签：关键词，列重要关键字即可

meta description标签：网页描述，要高度概括

body中的标签：尽量让代码语义化

a标签：页内链接，要加 “title” 属性加以说明

img应使用 “alt” 属性加以说明

strong、em标签 : 需要强调时使用

巧妙利用CSS布局

谨慎使用 display：none

保留文字效果

16:对DOM设置CSS样式的方式有哪些？

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

B:内部样式表，将 css 代码放在 <head> 标签内部，<style>里

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

17:css选择器有哪些，选择器的权重的优先级

选择器类型

(1)、ID　　#id

(2)、class　　.class

(3)、标签　　p

(4)、通用　　*

(5)、属性　　[type="text"]

(6)、伪类　　a: hover

(7)、伪元素　　li: nth - child

(8)、子选择器（ul < li）、相邻选择器（h1 + p）、后代选择器（li a）

权重计算规则

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

!important 比内联优先级高

(1). 第一等：代表内联样式，如: style=””，权值为1000。

(2). 第二等：代表ID选择器，如：#content，权值为0100。

(3). 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

(4). 第四等：代表标签和伪元素选择器，如div p，权值为0001。

(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

(6). 继承的样式没有权值。

(7).相同权重

优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;

继承性

可继承： font-size font-family color;

不可继承：border padding margin width height ;

CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个 元素的每个 元素。

p:last-of-type 选择属于其父元素的最后 元素的每个 元素。

p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

18:css中，对DOM元素设置不显示的方式

display:none；隐藏，并且不占位，宽高各种属性值，都‘丢失’
visibility：hidden;隐藏，占位，仅是视觉上‘看不见’
width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示

19:超链接访问过后，hover样式就不出现的问题是什么，如何解决

问题是：a标签的四种状态，排序出问题了。

正确排序：L-V-H-A

love hate原则，即l（link）ov（visited）e h（hover）a（active）te。

a:link 普通的、未被访问的链接

a:visited 用户已访问的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

20: 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。