前端HTML+CSS笔试题面试题

时间 2019-11-17 标签前端 html+css html css 笔试面试

前言

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

HTML

一、HTML语义化的理解

一、用正确的标签作正确的事情！
二、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
三、在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的。
四、搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。
五、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解html

二、HTML5有哪些新特性、移除了那些元素？

HTML5如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长前端

绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，好比article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker、 websocket、 Geolocation

移除的元素：html5

纯表现的元素：basefont、big、center、font、s、strike、 tt、u
对可用性产生负面影响的元素：frame、frameset、noframes

支持HTML5新标签：java

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引擎web

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

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

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

七、请描述一下 `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