前端HTML+CSS笔试题面试题

作者: 蛙哇 | 来源:发表于2019-11-06 17:47 被阅读0次

前言

前端的面试和学习都是不可或缺的事情，在这里收集一些高频面试题，供自己现在和以后查阅和查缺补漏的同时，也希望对小伙伴有所帮助。

HTML

1、HTML语义化的理解

1、用正确的标签做正确的事情！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

存储大小：

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

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

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

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

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

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

10、HTTP状态码及其含义

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

11、你能描述一下渐进增强和优雅降级之间的不同吗

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

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

12、渲染优化

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

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

3、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

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

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

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

13、如何进行网站性能优化

1、减少HTTP请求：合并文件、CSS精灵、inline Image

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

3、不使用CSS表达式

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

5、将脚本放到页面底部

6、将javascript和css从外部引入

7、压缩javascript和css

CSS

1、盒子模型

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

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

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

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

3、CSS3有哪些新特性

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

CSS3新增伪类有那些？

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

4、CSS常用选择器

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

5、link与@import的区别

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

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

什么是BFC?

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

如何产生BFC?

display: inline-block
position: absolute/fixed

BFC作用

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

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

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

position: absolute

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

position: relative

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

8、`display:inline-block`什么时候不会显示间隙？

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

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

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

10、为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

11、自适应布局

思路：

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

12、`position`有哪些值？有什么作用？

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

13、垂直居中有哪些方法？

单行文本的话可以使用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;（不定高）

14、水平居中的方法

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

15、Flex布局

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

16、`stylus/sass/less`区别

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

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

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

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

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

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