乐趣区

前端HTMLCSS笔试题面试题

前言

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

HTML

1、HTML 语义化的理解

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

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

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

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

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

2、HTML5 有哪些新特性、移除了那些元素?

<font color=’red’>HTML5</font> 现在已经不是 <font color=’red’>SGML</font> 的子集,主要是关于图像,位置,存储,多任务等功能的增加

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

    移除的元素

  • 纯表现的元素:<font color=’red’>basefont、big、center、font、s、strike、tt、u</font>
  • 对可用性产生负面影响的元素:<font color=’red’>frame、frameset、noframes</font>

支持 HTML5 新标签

  • <font color=’red’>IE8/IE7/IE6</font> 支持通过 <font color=’red’>document.createElement</font> 方法产生的标签
  • 可以利用这一特性让这些浏览器支持 <font color=’red’>HTML5</font> 新标签
  • 浏览器支持新标签后,还需要添加标签默认的样式
  • 当然也可以直接使用成熟的框架、比如 <font color=’red’>html5shim</font>

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
  • 空元素:<br> <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
退出移动版