前端面试经典题目合集（HTML+CSS）一

1、说说你对HTML语义化的理解？

（1）什么是HTML语义化？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

（2）为什么要语义化？

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

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

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

便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2、link和@import的区别

两者都是外部引用css的方式，但存在一定的区别：

区别1：link是XHTML标签，除了加载css外，还可以定义RSS等其他事物；@import属于css范畴，只能加载css

区别2：link引用css时，在页面载入的同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在css2.1提出的，低版本的浏览器不支持。

区别4：link支持使用JavaScript控制DOM区改变样式；而@import不支持。

3、超链接target属性的取值和作用

target属性指定所链接的页面在浏览器窗口中的打开方式。

它的参数值主要有：

_blank：在新浏览器窗口中打开链接文件

_parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件

_self：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定

_top：在当前的整个浏览器窗口中打开所链接的文档，因而或删除所有框架。

4、介绍一下你对浏览器内核的理解？

主要分为两部分：渲染引擎和JS引擎

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

JS引擎：解析和执行JavaScript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

5、常见的浏览器内核有哪些？

1、Trident内核：IE，MaxThon，TT，The World，360，搜狗浏览器等。

2、Gecko内核：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等

3、Presto内核：Opera7及以上（Opera内核原为Presto，现为Blink（Webkit的分支））

4、webkit内核：Safari，Chrome等

6、iframe有哪些缺点？

• iframe会阻塞主页面的Onload事件；
• 搜索引擎的检索程序无法解读这种页面，不利于SEO
• iframe和主页共享连接池，而浏览器对相同域的连接有限，所以会影响页面的并行加载

使用iframe之前需要考虑到这两个缺点，如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题

7、label的作用是什么？

label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。在使用时，需要注意label标签的for属性值要与后面对应的input标签id属性值相同。

8、如何在页面上实现一个圆形的可点击区域？

map+area或者svg；border-radius；纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

9、实现不适应border画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？

<div  style="width:100%;height:1px;background-color:black"></div>

10、HTML5标签的作用？

• 使web页面的内容更加有序和规范
• 使搜索引擎更加容易按照HTML5规则识别出有效的内容
• 使web页面更接近于一种数据字段和表

11、HTML5有哪些新增的表单元素

HTML5新增了很多表单元素让开发者构建更优秀的web应用程序，主要有：datalist、Keygen、output

12、HTML5存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用cookies。HTML5 提供 了下面两种本地存储方案：

localStorage：用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会消失

sessionStorage：同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

13、解释一下CSS的盒模型

标准的css 盒模型：宽度=内容的宽度+边框的宽度+内边框的宽度

14、css选择器的优先级

ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器>继承的样式

15、要动态改变层中内容可以使用的方法

innerHTML，innerText

16、你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites，JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器

（2）前端模板js+数据，减少由于HTML标签导致的带宽浪费，前端用度量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能

（4）当需要设置的样式很多时设置className而不是直接操作style

（5）少用全局变量、缓存DOM节点查找的结果，减少IO读取操作

（6）避免使用CSS Expression（css表达式）

（7）图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。

17、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对css初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼与熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法是：*{padding:0;margin:0;}，但不建议这样初始化。

18、解释下浮动和它的工作原理？清除浮动的技巧？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1）使用空标签清除浮动

这种方法是在所有浮动标签后面添加一个空标签，定义css clear:both，弊端就是增加了无意义标签

2）使用overflow

给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;  （zoom:1用于兼容IE6）

3）使用after伪对象清除浮动

该方法只适用于非IE浏览器。使用中需要注意以下几点：该方法中必须为需要清除浮动元素的伪对象中设置height:0; 否则该元素会比实际高出若干像素。