html/css面试题（3）

一、一次完整的HTTP事务是怎么一个过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

二、HTTPS是如何实现加密

HTTP 协议（HyperText Transfer Protocol，超文本传输协议）：是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。
https是一种http与SSL证书共同协作构建的网络协议，https优势就在于能够保证网络传输高效的同时，可以很好的维护网络传输过程的安全。
如何进行https加密？这涉及到了对SSL证书的申请，不同类型的网站所需的SSL证书类型不同，申请这一数字证书需要想数字证书颁发机构验证域名的所有权以及公司相关的信息，这也是为什么网站部署了SSL证书之后就拥有了一个安全可信的形象。完成申请之后，根据申请证书的教程，完成下载以及安装。这就实现了对http到https的转变，即完成了https加密。

三、浏览器是如何渲染页面的

先简要概述浏览器渲染的步骤：

1.处理HTML标记并构建DOM树
2.处理CSS标记并构建CSSOM树
3.将DOM与CSSOM合并成一个渲染树
4.根据渲染树来布局，计算每个节点的布局信息
5.将各个节点绘制到屏幕上

四、响应式布局原理

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。

响应式设计与自适应设计的区别：
响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

五、清除浮动的方法

最常用的4种：

1.额外标签法（在最后一个浮动标签（添加float ）后，新加一个标签，给其设置clear：both；）（不推荐）

什么是clear：both？
clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3.使用after伪元素清除浮动（推荐使用）

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content: "";display: block;height: 0;clear:both;visibility: hidden;}.clearfix{*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}<body><div class="fahter clearfix"><div class="big">big</div><div class="small">small</div><!--<div class="clear">额外标签法</div>--></div><div class="footer"></div>
</body>

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

4.使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{content: "";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;}<div class="fahter clearfix"><div class="big">big</div><div class="small">small</div></div><div class="footer"></div>

优点：代码更简洁
缺点：用zoom:1触发hasLayout.

六、http协议和tcp协议

TCP是传输层协议，定义数据传输和连接方式的规范。握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。
HTTP 超文本传送协议(Hypertext Transfer Protocol )是应用层协议，定义的是传输数据的内容的规范。
HTTP协议中的数据是利用****TCP协议传输的，特点是客户端发送的每次请求都需要服务器回送响应，它是TCP协议族中的一种，默认使用 TCP 80端口。
好比网络是路，TCP是跑在路上的车，HTTP是车上的人。每个网站内容不一样，就像车上的每个人有不同的故事一样。

参考

七、刷新页面，js请求一般会有哪些地方有缓存处理

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

什么是dns缓存？
DNS缓存是指在正常访问ip之后，系统会将这个ip存储起来，当再次访问的时候，系统就会直接把本地的DNS缓存提取显示，等于是加速了网址的解析。
CDN是什么？
http缓存是浏览器端缓存，cdn是服务器端缓存。
举个例子来说明cdn的作用：cdn就是代理。厂家给商家发货，你从商家买货，商家就是cdn，很方便。

八、如何对网站的文件和资源进行优化

1、文件合并（目的是减少http请求）
2、文件压缩（目的是直接减少文件下载的体积）
3、使用cdn托管资源
4、使用缓存
5、gizp压缩你的js和css文件
6、meta标签优化（title,description,keywords）、heading标签的优化、alt优化
7、反向链接，网站外链接优化

九、你对web标准和W3C重要性的理解

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

标签字母要小写
标签要闭合
标签不允许随意嵌套

2.对于css和js来说

尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

十、data-属性的作用

data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取 :
需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。
即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

十一、如何让Chrome浏览器显示小于12px的文字

歌下 css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px;
解决方法 ：css3里的一个属性：transform:scale()

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform:scale()这个属性只为可以缩放可以定义宽高的元素，如果与span等行内元素搭配，需要display:block

这个属性前给-webkit-谷歌前缀，那么就可以控制字体的大小

十二、的title和alt有什么区别

Alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。

title 可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。鼠标滑过时显示的文字提示，用户体验上很重要。当然不必要所有的img标签都加此属性，比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。

十三、如何实现页面每次打开时清除本页缓存

（1）用HTML标签设置HTTP头信息

<HEAD><META    HTTP-EQUIV="Pragma" CONTENT="no-cache"><META    HTTP-EQUIV="Cache-Control" CONTENT="no-cache"><META    HTTP-EQUIV="Expires" CONTENT="0"></HEAD>

说明：HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时，浏览器重新访问服务器已获取页面。如下是使用Cache-Control的基本方法：

1.no-cache:强制缓存从服务器上获取新的页面
2.no-store: 在任何环境下缓存不保存任何页面
HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，同样可以包含在头信息中。

（2）在需要打开的url后面增加一个随机的参数：

增加参数前：url=test/test.jsp
增加参数后：url=test/test.jsp?ranparam=random()
说明：因为每次请求的url后面的参数不一样，相当于请求的是不同的页面，用这样的方法来曲线救国，清除缓存

（3）chrome：
现在新版的Chrome在developer Tools（F12调出来）的Settings（右下角有个齿轮标志）中有了个Disable cache选项。勾了便可以。

（4）ajax方法
（5）：用随机数，随机数也是避免缓存的一种很不错的方法！
URL 参数后加上 “?ran=” + Math.random(); //当然这里参数 ran可以任意取了

十四、http的几种请求方法和区别

HTTP协议是一个广泛应用的Internet协议。在其中有8个不同的请求方法：
GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
GET：向特定的资源发出请求。
POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。

十五、CSS预处理器的比较less sass

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
CSS预处理器

1.基于CSS的另一种语言
2.通过工具编译成CSS
3.添加了很多CSS不具备的特性
4.能提升CSS文件的组织

提供功能：

1.嵌套反映层级和约束
2.变量和计算，减少重复戴拿
3.Extend 和 Mixin 代码片段
4.循环适用于复杂有规律的样式
5.import CSS 文件模块化

十六、如何进行网站性能优化

1.合并js和css文件
2.Sprites图片技术（图片精灵技术）
3.压缩图片和文本
4.按需加载（及可见区域以外的区域延时加载）
5.确保功能图片优先加载
6.图片格式优化
7. 使用 Progressive JPEGs（高级JPEG）
8.代码的精简
9.延迟加载和执行非必要代码
10.使用Ajax
11.借助自动化工具来实现页面的优化

十七、WEB标准以及W3C标准是什么?

1、Web标准不是某一个标准，而是一系列标准的集合
web标准简单来说可以分为结构、表现和行为
结构主要是有HTML标签组成
表现即指css样式表
行为主要是有js、dom组成
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
2、W3C对于WEB标准提出了规范化的要求
1）标签和属性名字母要小写
2）标签要闭合
3）标签不允许随意嵌套
4）尽量使用外链css样式表和js脚本。让结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
5）样式尽量少用行间样式表，使结构与表现分离
6）标签的id和class等属性命名要做到见文知义，更利于seo，代码便于维护

十八、伪元素和伪类的区别

为什么css要引入伪类和伪元素呢？
css引入伪类和伪元素概念是为了格式化****文档树以外的信息。也就是说：伪类和伪元素是用来修饰不在文档树中的部分。

伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。
伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。
伪类和伪元素的区别：
· 伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。·

参考

十九、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

Doctype作用是什么？
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
1） 盒模型： IE下标准模式为标准w3c盒模型【content+padding+border+margin】，怪异模式为IE盒模型【content+margin：padding与border包含在content宽高中】
2）行内元素的垂直对齐：基于 Gecko 的浏览器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】标准模式对齐至基线，怪异模式对齐至底部
3）怪异模式中，IE6/7/8都不认识!important声明
4）设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
5）使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

二十、CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？

可继承的样式：

1.font-size
2.font-family
3.color
4.text-indent

不可继承的样式：

1.border
2.padding
3.margin
4.width
5.height

优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比内联优先级高，但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

二十一、CSS3有哪些新特性？

1.CSS3的选择器

E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n)匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. @Font-face 特性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

3. 圆角

border-radius: 15px;

4.CSS3 的渐变效果

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。效果图如下：

5.css弹性盒子模型

<div class="boxcontainer"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>
</div>
.boxcontainer { width: 1000px; display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal;
} .item { background: #357c96; font-weight: bold; margin: 2px; padding: 20px; color: #fff; font-family: Arial, sans-serif;
}

6. CSS3制作特效

Transition
对象变换时的过渡效果
translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）
Animation