「面试题库」web前端系列HTML题库，难度系数:三颗星

01

在一个结构良好的web网页里，多个h1标签会不利于SEO吗？

点击空白处查看答案

不影响

02

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

点击空白处查看答案

（1）声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

（2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。

（3）在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

03

行内元素有哪些？块级元素有哪些？

点击空白处查看答案

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气）。

（3） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p。

04

link 和@import 的区别是？

点击空白处查看答案

（1）link属于XHTML标签，而@import是CSS提供的；

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；

（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

（4）link方式的样式的权重高于@import的权重。

05

当下列的HTML代码加载时会触发新的HTTP请求吗？

<div style="display: none;">

<img src="mypic.jpg" alt="My photo">

</div>

点击空白处查看答案

会

06

对WEB标准以及W3C的理解与认识？

点击空白处查看答案

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

07

iframe有哪些缺点？

点击空白处查看答案

iframe会阻塞主页面的Onload事件；

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

08

XHTML和HTML有什么区别？

点击空白处查看答案

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。

最主要的不同：
XHTML 元素必须被正确地嵌套；
XHTML 元素必须被关闭，标签名必须用小写字母；
XHTML 文档必须拥有根元素。

09

写出几种IE6 BUG的解决方法。

点击空白处查看答案

1.双边距BUG float引起的 使用display；
2.3像素问题 使用float引起的 使用dislpay:inline -3px；
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active；
4.Ie z-index问题给父级添加position:relative；
5.Png 透明 使用js代码改；
6.Min-height 最小高度 !Important 解决；
7.select 在ie6下遮盖 使用iframe嵌套；
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)；
9.ie 6 不支持!important；

10

img标签上title与alt属性的区别是什么?

点击空白处查看答案

Alt 当图片不显示是用文字代表；
Title 为该属性提供信息。

11

你如何对网站的文件和资源进行优化?

点击空白处查看答案

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

12

简述一下src与href的区别。

点击空白处查看答案

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

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

13

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

点击空白处查看答案

渐进增强progressive enhancement：

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

优雅降级graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要；

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

14

浏览器的内核分别是什么？

点击空白处查看答案

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

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

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

15

一次完整的HTTP事务是怎样的一个过程（浏览器渲染页面的过程）？

点击空白处查看答案

基本流程：

a.用户输入URL地址；

b.浏览器解析URL，解析出主机名；

c.浏览器将主机名转换成服务器IP地址（浏览器先查找本地DNS缓存列表，如果没有就向浏览器默认的DNS服务器发送查询请求，同时缓存）；

d.浏览器将端口号从URL中解析出来；

b.浏览器建立一条与目标web服务器的TCP连接，发起TCP的3次握手；

e.浏览器向服务器发送一条HTTP请求报文；

f.服务器端响应http请求，浏览器得到html代码；

g.浏览器解析html代码，并请求html代码中的资源；

h.浏览器对页面进行渲染呈现给用户；

未完待续......