前端面试题（html篇）

拼搏现实的明天。 2022-02-01 06:39 253阅读 0赞

### HTML篇 ###

1、**你做的页面在那些浏览器测试过？这些浏览器的内核分别是什么**  
IE:trident内核  
Firefox: gecko内核  
Safari:webkit内核  
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核  
Chrome:Blink（基于webkit,Google与Opera Software共同开发）

2、**Doctype作用？标准模式与兼容模式各有什么区别？**  
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器，用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现  
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

3、**行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？**  
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

1.  行内元素有：`a b span img input select strong`（强调的语气）
2.  块级元素有：`div ul ol li dl dt dd h1 h2 h3 h4…p`
3.  常见的空元素：

鲜为人知的是：

4、**页面导入样式时，使用link和@import有什么区别？**  
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;  
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;  
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

5、**介绍一下你对浏览器内核的理解？**  
主要分成两部分：渲**染引擎(layout engineer或Rendering Engine)和JS引擎。**

**渲染引擎**：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

**JS引擎**：解析和执行javascript来实现网页的动态效果。  
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

6、**常见的浏览器内核有哪些？**  
**Trident内核**：IE,MaxThon,TT,The World,360,搜狗浏览器等。\[又称MSHTML\]  
**Gecko内核**：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等  
**Presto内核**：Opera7及以上。 \[Opera内核原为：Presto，现为：Blink;\]  
**Webkit内核**：Safari,Chrome等。 \[ Chrome的：Blink（WebKit的分支）\]

7、**html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？**  
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。  
**绘画 canvas**;  
用于媒介回放的 `video` 和 `audio` 元素;  
本地离线存储 `localStorage` 长期存储数据，浏览器关闭后数据不丢失;  
`sessionStorage` 的数据在浏览器关闭后自动删除;  
语意化更好的内容元素，比如 `article、footer、header、nav、section;`  
表单控件，`calendar、date、time、email、url、search;`  
新的技术`webworker, websocket, Geolocation;`

移除的元素：  
纯表现的元素：`basefont，big，center，font, s，strike，tt，u;`  
对可用性产生负面影响的元素：`frame，frameset，noframes；`

*  **支持HTML5新标签**：  
    IE8/IE7/IE6支持通过`document.createElement`方法产生的标签，  
    可以利用这一特性让这些浏览器支持HTML5新标签，  
    浏览器支持新标签后，还需要添加标签默认的样式。  
    当然也可以直接使用成熟的框架、比如html5shim;

*  **如何区分HTML5**： DOCTYPE声明\\新增的结构元素\\功能元素  
    H5新特性  
    表单 画布 音视频 地理定位 媒体查询 css新特性 离线缓存 本地存储 拖拽

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

**9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？**  
`cookie`是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），`cookie`还可以设置有效时间  
`cookie`数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递，  
每次`ajax`请求都会吧`cookie`传送到后台，`cookie`一半用做用户登陆，后台可以根据`cookie`信息判断用户是否登陆状态  
`sessionStorage`和`localStorage`不会自动把数据发给服务器，仅在本地保存。  
**区别在于  
存储大小：**  
`cookie`数据大小不能超过4k。  
`sessionStorage`和`localStorage` 虽然也有存储大小的限制，但比`cookie`大得多，可以达到5M或更大。  
有期时间：  
`localStorage` 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；  
`sessionStorage` 数据在当前浏览器窗口关闭后自动删除。  
`cookie` 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

**10、iframe有那些缺点？**  
`iframe`会阻塞主页面的`Onload`事件；  
搜索引擎的检索程序无法解读这种页面，不利于SEO;  
`iframe`和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。  
使用`iframe`之前需要考虑这两个缺点。如果需要使用`iframe`，最好是通过`javascript`  
动态给`iframe`添加`src`属性值，这样可以绕开以上两个问题。

**11、Label的作用是什么？是怎么用的？**  
`label`标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
    <input type=“text“name="Name" id="Name"/>
    <label>Date:<input type="text" name="B"/></label>

**12、如何实现浏览器内多个标签页之间的通信?**  
`WebSocket`、也可以调用`localstorge`、`cookies`等本地存储方式，还可以使用页面的路有参数传递  
`localstorge`另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，  
我们通过监听事件，控制它的值来进行页面信息通信；

**13、如何在页面上实现一个圆形的可点击区域？**  
`map+area`或者`svg`或者`border-radius`  
纯`js`实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

**14、title与h1的区别、b与strong的区别、i与em的区别？**  
`title`属性没有明确意义只表示是个标题，`H1`则表示层次明确的标题，对页面信息的抓取也有很大的影响；  
`strong`是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：`<strong>`会重读，而`<B>`是展示强调内容。  
i内容展示为斜体，`em`表示强调的文本；

**15、data-属性的作用是什么？**  
`h5`新增的属性 ，可以通过`ele.dataset`获取到标签上的`data-*`的属性 返回一个对象

**16、简述一下src与href的区别**  
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

**17、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个**  
对象：`Window document location screen history navigator`  
方法：`Alert() confirm() prompt() open() close()`

**18、标准模式与怪异模式的两个常见区别**  
1）盒模型：IE下标准模式为：`content+padding+border+margin`。怪异模式下为：`content+margin(padding,border`包含在`content`宽高中)  
2）怪异模式中IE6/7/8都不识别！`important声明`  
3）设置行内元素宽高，标准模式下不生效，怪异模式下生效  
4）`margin:0 auto`,在标准模式下会水平居中，怪异模式下不会。

**19，常见兼容性问题？**

**问题：png24位的图片在iE6浏览器上出现背景，**

解决：解决方案是做成PNG8.

**问题：浏览器默认的`margin`和`padding`不同。**  
解决：方案是加一个全局的`*{margin:0;padding:0;}`来统一。

**问题：IE6双边距bug:块属性标签`float`后，又有横行的`margin`情况下，在ie6显示`margin`比设置的大。**  
浮动ie产生的双倍距离 `#box{ float:left; width:10px; margin:0 0 0 100px;}`这种情况之下IE会产生20px的距离，

解决：解决方案是在`float`的标签样式控制中加入 ——\_`display:inline;`将其转化为行内属性。(\_这个符号只有ie6会识别)  
渐进识别的方式，从总体中逐渐排除局部。  
首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。  
·

css 
      .bb{ 
       background-color:#f1ee18;/*所有识别*/ 
      .background-color:#00deff\9; /*IE6、7、8识别*/ 
      +background-color:#a200ff;/*IE6、7识别*/ 
      _background-color:#1e0bd1;/*IE6识别*/ 
      }

**问题：IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用`getAttribute()`获取自定义属性，Firefox下,只能使用`getAttribute()`获取自定义属性.**  
解决：解决方法:统一通过`getAttribute()`获取自定义属性.

**问题：IE下,even对象有x,y属性,但是没有`pageX,pageY`属性，Firefox下,`event`对象有`pageX,pageY`属性,但是没有x,y属性.**  
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

问题：Chrome 中文界面下默认会将小于 `12px` 的文本强制按照 `12px` 显示,  
解决：可通过加入 CSS 属性 `-webkit-text-size-adjust: none;` 解决.

**问题：超链接访问过后`hover`样式就不出现了 被点击访问过的超链接样式不在具有`hover`和`active`了**  
解决：方法是改变CSS属性的排列顺序:`L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}`

**20、HTML与XHTML——二者有什么区别？**  
1.所有的标记都必须要有一个相应的结束标记  
2.所有标签的元素和属性的名字都必须使用小写  
3.所有的XML标记都必须合理嵌套  
4.所有的属性必须用引号""括起来  
5.把所有<和&特殊符号用编码表示  
6.给所有属性赋一个值  
7.不要在注释内容中使“–”  
8.图片必须有说明文字

**21、`<img>`的`title`和`alt`有什么区别？**  
`title`是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。  
`alt`是`<img>`的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。