HTML面试题

什么是盒模型？

盒模型分为标准模型和ie盒子模型

标准盒子模型：盒子的宽度就是内容content的宽度

ie盒子模型：盒子的宽度包含content  border 以及padding

1.设置两种模型：

box-sizing:border-box; ----ie盒子模型

border-sizing:content-box;   -----标准盒子模型

2.js获取宽高(domEl表示要获取宽高的dom元素,以获取宽度为例)

2.1domEl.style.width   (style对象获取的属性是内联样式，既元素标签中style属性的值，也就是说如果css是外部引入的话style对象将无法获取到)

2.2domEl.currentStyle.width   (currentStyle对象返回所有样式声明，按css层叠规则作用于元素的最终样式，只有ie支持,获取页面最终渲染后的结果)

2.3window.getComputedStyle(domEl)   (与currentStyle原理一样，只是兼容的浏览器相对多一点比如opera)

2.4domEl.getBoundingClientReact.width   (getBoundingClientReact用于获取某个元素相对于视口位置的集合，包含的属性有 top right bottom left width height )

2.5 domEl.offsetWidth  (元素视图的属性)

关于offsetWidth,clientWidth,innerWidth总结：

offsetWidth :返回元素宽度，包括content + padding + border

clientWidth :返回元素的宽度，包括content + padding

style.width :返回元素的宽度 ，只包括 content

scrollWidth : 返回元素的宽度，包括content padding 和溢出宽度，如果无溢出则等于clientWidth

 

行内元素有哪些？块级元素有哪些？空元素有哪些？行内元素和块级元素有什么区别？

行内元素：span input ，a, b ,img ,strong ,select

块级元素：p div table ul li dl ol  dd dt h1 h2...

空元素：<br />  <img /> <hr /> <input /> <link /> <meta >  <area> <col> <source>

行内元素与块级元素的区别：

块级元素默认单独占一行，可以设置宽高，

行内元素：默认在一行除非放不下才换行，设置宽高无效，可以设置水平margin padding 垂直margin padding设置无效

块级元素里面可以放行内元素，行内元素不可以放块级元素，只能放其他行内元素或者文本

补充：

inline-block:块级行内元素，可以设置宽高，也有不换行的特性，还可以设置vertical-align属性，垂直居中，HTML中的换行符（\n）空格(\s)  tab(\t)等合并为空白符，在font-size不为0的情况下，空格符占据一定的空隙

 

简述src和href的区别：

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

 

什么是css  hack?

由于不同厂商的浏览器对css的解析和认识不完全一样，会导致不同浏览器生成的网页效果不一致，此时我们就要针对不同的浏览器写不同的css，让它达到我们想要的效果。

css hack 的三种形式：

1.属性级hack：在css属性前面加上加上特定的符号，比如ie6能够识别"_" "*",ie7能够识别“*”

2.选择器级hack:在选择器上面加上hack

3.针对ie的条件注释hack

 

什么叫优雅降级和渐进增强？

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

优雅降级：一开始就构建完整的功能，然后再进行兼容性处理。

两者之间的区别：渐进增强是往前看，从最基本的开始不断扩充，优雅降级是往回看，从复杂的功能开始，并视图减少用户体验

 

http的状态码：

200:ok  ,表示请求响应成功

204：no content ,表示请求成功，但是无响应内容

206：partial content ,表示服务器已经完成了部分get请求(客户端进行了范围请求)

 

301：moved permanently 永久重定向

302：found, 临时重定向

303：see other 表示请求资源存在另一个uri,应该使用get定向获取请求资源，303与302功能一样，只是303明确客户端应该使用get请求

304：not modified ，资源未修改，使用缓存

 

400：bad request ,表示请求报文存在语法错误或者参数错误，服务器不理解

401：unauthorized,表示发送的请求需要有http认证信息或者认证失败了

403：forbidden,表示对请求资源的访问被服务器拒绝了

404：not found ,表示请求的资源服务器没有找到

 

500：internel server error,表示服务器执行请求时出错

503：service unavaible ，表示服务器超负载或停机维护，无法处理请求

 

一次完整的http事务是怎样的过程？

1.域名解析：

1.1浏览器会搜素自身的DNS缓存，缓存中存在该域名的缓存，并且没有过期，解析结束，否则执行1.2

1.2浏览器会搜素操作系统的DNS缓存，如果找到就结束，没有则继续

1.3读取hosts文件,如果有则结束，否则继续

1.4浏览器发起DNS系统调用，向本地配置的首选DNS服务器发起域名解析请求

如果以上4个步骤还未解析出，则进行以下步骤（针对windows系统）：

1.5操作系统会查找NETBIOS name Cache (里面存着最近一段时间计算机成功通讯的计算机的ip和计算机名)，如果解析不成功，则继续

1.6查询WINS服务器，不成功则继续

1.7客户端进行广播查询，不成功则继续

1.8读取MLHosts文件，不成功则解析失败

2.发起tcp3次握手

拿到域名对应的ip之后，进行arp域名解析，浏览器会以随机的一个端口向服务器的web程序的80端口发起tcp请求连接，这个连接请求经过层层包装，tcp头部---》ip头部---》以太网头部，到达服务器端，其间经过各种路由设备，进入网卡，然后进入到内核的tcp/ip协议栈，解封包，一层一层的剥开，最终到达webc程序，建立tcp/ip连接。

3次握手过程：客户端向服务器端发送seq=x请求，服务器端接收到请求向客户端发送ack=x+1,seq=y包,客户端接收到这个包发送ack=y+1确认，3次握手建立。

4tcp为什么要经过3次握手？

因为计算机通信是靠协议进行通信的，不同协议之间不能通信，3次握手相当于试探对方是否遵循tcp/ip协议，协商完成之后就可以通信了

5为什么http协议要基于tcp来实现？

tcp是一个端到端的面向连接的可靠的协议，所以http协议基于传输层tcp协议不用担心数据传输的各种问题

建立tcp连接之后发起http请求：

http请求/响应报文：

起始行：如GET/HTTP/1.0（请求的方法 请求的url 所使用的协议）

头部信息

主体

请求行中的方法：

GET:完整请求一个资源

HEAD:仅请求响应首部

POST：提交表单

PUT:上传文件

OPTIONS:返回请求所支持的方法

TRACE:追求一个资源请求中间经过的代理（不能由浏览器发出该请求）

什么·是URL 、URI、URN?

URI：统一资源标识符

URL：统一资源定位符

URN：统一资源名称

URL、URN都属于URI

请求协议有哪些？

http/0.9:stateless

http:/1.0:MIME,keep-alive(保持连接)，缓存

http/1.1:presistent connection 持久连接

服务器响应http请求，浏览器拿到html代码

浏览器解析html并请求html中的资源，浏览器将页面渲染给用户。