乐趣区

前端HTMLCSS笔试题面试题

jiezi

前言

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

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
退出移动版