前端HTML+CSS笔试题面试题

前言

前端的面试和学习都是不可或缺的事情，在这里收集一些高频面试题，供本身如今和之后查阅和查缺补漏的同时，也但愿对小伙伴有所帮助。

HTML

一、HTML语义化的理解

一、用正确的标签作正确的事情！

二、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

三、在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的。

四、搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。

五、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

二、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

三、<img>的title和alt有什么区别

• alt 是图片加载失败时，显示在网页上的替代文字；
• title 是鼠标放上面时显示的文字。
• alt是img必要的属性，而title不是。

四、从浏览器地址栏输入url到显示页面的步骤

• 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
• 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构（如HTML的DOM）；
• 载入解析到的资源文件，渲染页面，完成。

五、HTML全局属性(global attribute)有哪些

• class:为元素设置类标识
• data-*: 为元素增长自定义属性
• draggable: 设置元素是否可拖拽
• id: 元素id，文档内惟一
• lang: 元素内容的的语言
• style: 行内css样式
• title: 元素相关的建议信息

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

主要分红两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

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

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

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

七、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）

cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大
有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭

八、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行内元素不能够设置宽高，不独占一行
• 块级元素能够设置宽高，独占一行

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

• svg
• border-radius
• 纯js实现 须要求一个点在不在圆上简单算法、获取鼠标坐标等等

十、HTTP状态码及其含义

• 1XX：信息状态码
• 2XX：成功状态码
• 3XX：重定向
• 4XX：客户端错误
• 5XX: 服务器错误

十一、你能描述一下渐进加强和优雅降级之间的不一样吗

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

优雅降级：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

十二、渲染优化

一、使用CSS3代码代替JS动画（尽量避免重绘重排以及回流）

二、页面中空的 href 和 src 会阻塞页面其余资源的加载 (阻塞下载进程)

三、用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能

四、当须要设置的样式不少时设置className而不是直接操做style

五、少用全局变量、缓存DOM节点查找的结果。减小IO读取操做

六、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳

1三、如何进行网站性能优化

一、减小HTTP请求：合并文件、CSS精灵、inline Image

二、将样式表放到页面顶部

三、不使用CSS表达式

四、使用<link>不使用@import

五、将脚本放到页面底部

六、将javascript和css从外部引入

七、压缩javascript和css

CSS

一、盒子模型

盒模型分为两类: IE盒模型和标准盒模型。 二者的区别在于:

• IE盒模型的width/height = content + border + padding
• 标准盒模型的width/height = content

二、CSS优先级算法如何计算？

• 优先级就近原则，同权重状况下样式定义最近者为准
• 载入样式以最后载入的定位为准
• 优先级为: !important > id > class > tag; !important 比 内联优先级高

三、CSS3有哪些新特性

• 新增各类css选择器
• 圆角 border-radius
• 多列布局
• 阴影和反射
• 文字特效text-shadow
• 线性渐变
• 旋转transform

CSS3新增伪类有那些？

• :after 在元素以前添加内容,也能够用来作清除浮动。
• :before 在元素以后添加内容。
• :enabled 已启用的表单元素。
• :disabled 已禁用的表单元素。
• :checked 单选框或复选框被选中。

四、CSS经常使用选择器

通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a    等
后代选择器：p span、div a   等
伪类选择器：a:hover 等
属性选择器：input[type="text"]  等

五、link与@import的区别

• link是HTML方式， @import是CSS方式
• link最大限度支持并行下载，@import过多嵌套致使串行下载，出现FOUC(文档样式短暂失效)
• link能够经过rel="alternate stylesheet"指定候选样式
• 浏览器对link支持早于@import，可使用@import对老浏览器隐藏样式
• @import必须在样式规则以前，能够在css文件中引用其余文件
• 整体来讲：link优于@import

六、如何建立块级格式化上下文(block formatting context),BFC有什么用

什么是BFC?

• BFC格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响

如何产生BFC?

• display: inline-block
• position: absolute/fixed

BFC做用

• BFC最大的一个做用就是：在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响

解决上外边距重叠;重叠的两个box都开启bfc;
解决浮动引发高度塌陷;容器盒子开启bfc
解决文字环绕图片;左边图片div,右边文字容器p,将p容器开启bfc

七、绝对定位和相对定位的区别

position: absolute

绝对定位：是相对于元素最近的已定位的祖先元素

position: relative

相对定位：相对定位是相对于元素在文档中的初始位置

八、display:inline-block 何时不会显示间隙？

• 移除空格
• 使用margin负值
• 使用font-size:0
• letter-spacing
• word-spacing

九、清除浮动的几种方式，各自的优缺点

• 父级div定义height
• 结尾处加空div标签clear:both
• 父级div定义伪类:after和zoom
• 父级div定义overflow:hidden
• 父级div也浮动，须要定义宽度
• 结尾处加br标签clear:both
• 比较好的是第3种方式，好多网站都这么用

十、为何要初始化CSS样式?

• 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。
• 固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化

十一、自适应布局

思路：

• 左侧浮动或者绝对定位，而后右侧margin撑开
• 使<div>包含，而后靠负margin造成bfc
• 使用flex

十二、position有哪些值？有什么做用？

• static。默认值，不脱离文档流，top，right，bottom，left等属性不生效。
• relative。不脱离文档流，依据自身位置进行偏离，当子元素设置absolute，将依据它进行偏离。
• absolute。脱离文档流，依据top，right，bottom，left等属性在正常文档流中偏移位置。
• fixed。经过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。

1三、垂直居中有哪些方法？

• 单行文本的话可使用height和line-height设置同一高度。
• position+margin：设置父元素:position: relative;，子元素height: 100px;
• position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
• position+transform：设置父元素position:relative,子元素：position: *
• absolute;top: 50%;transform: translate(0, -50%);（不定高）
• 百搭flex布局(ie10+)，设置父元素display:flex;align-items: center;（不定高）

1四、水平居中的方法

• 元素为行内元素，设置父元素text-align:center
• 若是元素宽度固定，能够设置左右margin为auto;
• 若是元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
• 使用flex-box布局，指定justify-content属性为center
• display设置为tabel-ceil

1五、Flex布局

display: flex  //设置Flex模式
flex-direction: column  //决定元素是横排仍是竖着排
flex-wrap: wrap     //决定元素换行格式
justify-content: space-between  //同一排下对齐方式，空格如何隔开各个元素
align-items: center     //同一排下元素如何对齐
align-content: space-between    //多行对齐方式

1六、stylus/sass/less区别

• 均具备“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
• Scss和LESS语法较为严谨，LESS要求必定要使用大括号“{}”，Scss和Stylus能够经过缩进表示层次与嵌套关系
• Scss无全局变量的概念，LESS和Stylus有相似于其它语言的做用域概念
• Sass是基于Ruby语言的，而LESS和Stylus能够基于NodeJS NPM下载相应库后进行编译；

20、知道css有个content属性吗？有什么做用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最多见的应用是利用伪类清除浮动。

2一、CSS在性能优化方面的实践

• css压缩与合并、Gzip压缩
• css文件放在head里、不要用@import
• 尽可能用缩写、避免用滤镜、合理使用选择器

2二、CSS3动画（简单动画的实现，如旋转等）

• 依靠CSS3中提出的三个属性：transition、transform、animation
• transition：定义了元素在变化过程当中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定义元素的变化结果，包含rotate、scale、skew、translate。
• animation：动画定义了动做的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction