HTML面试题

尤雨溪不懂VUE
217 阅读9分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

1.盒子模型

当对一个文档进行布局渲染时，浏览器会将一个个元素表示为矩形盒子。 属性:

  • content：实际内容
  • border：边框
  • padding：内边距
  • margin：外边距

标准盒子模型：

  • 盒子总宽度：width+border+padding+margin
  • 盒子总高度：height+border+padding+margin

怪异盒子模型： 可以开启box-sizing: border-box;，开启后 总宽度=withd=内容+border+padding+margin

2.选择器及优先级

CSS常用选择器：

  • 标签选择器
  • 类选择器
  • id选择器
  • 后代选择器
  • 子选择器
  • 伪类选择器
  • 伪元素选择器

CSS3新增选择器

  • 层次选择器
  • 伪类选择器
  • 属性选择器

选择器优先级：标签<类<id<行内样式<通配符选择器

3.CSS中的属性继承

  • 字体属性系列
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
  • 文本属性系列
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
  • 列表属性
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
  • 元素可见性/透明度
visibility
transiton

4.前端单位区别

px

px是“像素”，绝对单位。

em

em是相对单位，相对于当前对象内的font-size的大小。浏览器默认1em=16px

rem

rem是相对单位，相对于HTML根标签的font-size的大小。

vw/vh

是一个相对单位，相对于浏览器可视窗口的大小

5.CSS隐藏页面的元素

  • display:none;不占位置
  • visibility:hidden;占位置
  • opacity:0;
  • height:0;weight:0;
  • 定位
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

6.BFC

块级格式化上下文：形成一个相对外界完全独立的空间，保护内部元素不受外界的干扰。

触发条件

  • 浮动
  • 绝对定位或者固定定位
  • display:inline-block
  • overflow:hidden;

使用场景

  • 外边距塌陷

同一个BFC的两个上下的盒子的margin会重叠，以大的为主。

解决方案：在其中一个盒子外面包裹一层容器

  • 清除内部浮动

overflow:hidden;

7.元素水平居中的方式

  1. 子绝父相，子的上下左右都给0，margin:auto;
  2. 子绝父相，后子元素：
top:50%;
left:50%;
margin-top:-50%;
margin-left:-50%;
  1. 子绝父相，后子元素：
top:50%;
left:50%;
transform:translate(-50%,-50%);
  1. flex布局，给父元素开启：
display: flex;
justify-content: center;
align-items: center;

8.两栏布局

给父元素开启flex布局，左孩子盒子给一个固定宽度，右孩子盒子给个flex:1;

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

9.三栏布局（双飞翼，圣杯）

  • 两边绝对定位，中间使用margin撑开。

  • flex布局，让中间的盒子自适应。

<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        width: 200px;
        background: coral;
    }

    .right {
        width: 120px;
        background: lightblue;
    }

    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>
  • 仅需将容器设置为display:flex;，
  • 盒内两边元素给固定宽度，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
  • 盒内元素的高度撑开容器的高度

10.CSS3新增了哪些新特性

  • 阴影
  • 文字特效
  • 属性、伪类选择器
  • 边框样式
border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框
  • transition过渡属性
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
  • transform转换
transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

11.css动画有哪些

  • transition 实现渐变动画，根据时间改变
  • transform 转变动画，变化位置
  • animation 实现自定义动画

12.回流和重绘

回流：布局引擎会根据样式来计算盒子在页面上的位置和大小。

重绘：当计算好盒子的位置和大小后，将其渲染到页面上。

13.浏览器的解析和渲染机制

  • 解析HTML，生成DOM树；同时解析CSS，生成CSSOM树。
  • 将DOM树和CSSOM结合，生成render-tree。
  • 回流
  • 重绘
  • 展示。将像素发给GPU，展示到页面上。

14.CSS sprit是什么？有什么优缺点？

将许多小图片拼接到一张图片里面，通过background-position来调节位置，展示要显示的内容。

优点

  • 减少了http请求，提高了页面加载速度。
  • 便于压缩。
  • 便于更换风格，只需要更换大图片的颜色。

缺点

  • 图片合并麻烦。
  • 图片修改麻烦。
  • 首次请求精灵图图片响应速度慢。

15.link和@import的区别

  • link是HTML引入的方式，@import是CSS的引入方式。
  • link权重大于@import。
  • link最大限度支持并行下载；@import过多的嵌套会导致串行下载，会出现FOUC（文档样式短暂失效，页面闪烁）。

16.display与float、position的关系

如果display取值为none，则float、position都不起作用。

17.清除浮动的几种方式

  • 父级div定义height
  • 父级div也浮动，定义宽度
  • 父级div定义 overflow：hidden
  • 结尾处加空div标签
  • 父级定义伪类 :after （最优解）

之所以清除浮动，是因为子元素如果浮动，则脱离标准流，若父元素靠子元素撑开，则此时会撑不开。

18.解决外边距塌陷

父子元素都有上外边距，则父元素塌陷较大值

同一个BFC的两个上下的盒子的margin会重叠，以大的为主。

  1. 给父元素底部增加border
  2. 给父元素底部增加padding
  3. 给父元素增加overflow:hidden
  4. 定位或者浮动

19.为什么要初始化CSS样式

因为浏览器的兼容问题，每个浏览器对标签的默认值都不尽相同，所以要初始化默认值。

但是，初始化CSS对SEO有影响，所以要在影响最小化的情况下初始化。

20.CSS3新增伪类有哪些？

  • p:first-of-type

  • p:last-of-type

  • p:only-of-type

  • P:only-of-child

  • p:nth-child(2)

  • :after 在元素之前添加内容，也可用来清除浮动

  • :before 在元素之后添加内容

  • :enable 已启用的表单元素

  • :disable 已禁用的表单元素

  • :checked 单选框或者复选框被选中

21.行内元素float:left后可否变为块级元素

浮动后更像是行内块元素，此时给他设置宽高都是有效果的。

22.行内元素和块级元素

块级元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等

行内元素

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。

一般不可以设置宽度，高度以及对齐等属性。特殊行内元素可以设置宽高：img，input。

常见的行内元素有：<a>,<strong>,<b>,<em>,<del>,<span>等

默认的宽度就是它本身的宽度

行内块元素

和其他行内或行内块级元素元素放置在同一行上；

元素的高度、宽度、行高以及顶

和底边距都可设置。

23.动画的最小间隔

一般屏幕刷新率是60HZ，即1s刷新60次，所以最小间隔理论是1/60*1000ms=16.7ms

24.CSS合并

避免使用@import导入多个文件，可以使用css工具将多个文件合并成一个css文件，例如Sass。

25.列出你知道的改变页面布局的属性

width ,height ,float ,left ,right ,position ,top ,bottom ,padding ,margin

26.Sass和Less是什么？为什么要使用他们？

他们是CSS预处理器，赋予了CSS语言的动态特性，例如变量，继承，运算，函数等

优点：

  • 结构清晰
  • 多级继承
  • 无视浏览器之间的差异
  • 完全兼容CSS，可以和老项目混合使用

27.如何实现小于12px的字体效果

transform:scale() 这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个 display:inline-block;

28.前端要注意的SEO

  • 合理的TDK

title，description，keywords。搜索权重逐个减小。title值要强调重点，不同页面要不同；不同页面的description也要不同；keywords要列举关键词。

  • 语义化HTML，要符合W3C的标准，让搜索引擎更容易理解网页。

  • 重要的HTML代码放在前面，因为搜索引擎抓代码是从上到下，要保证重要的被抓到。

  • 重要内容不用JS。

  • 少用iframe标签：里面的内容不会被浏览器抓取。

  • 非装饰性图片要加alt属性。

  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

29.如何提高网站速度

content方面

  • 减少HTTP请求：合并文件，CSS精灵，图片懒加载（当页面有很多图片时，先加载上面的，下面的等滚到时再加载）

  • 减少DNS查询

  • 减少DOM

server方面

  • 使用CDN（简化很多耗时的优化任务，例如图片的渐进渲染）

  • 对组件压缩

  • 条件允许的话，尽量使用SSR

cookie方面

  • 减小cookie大小

js方面

  • 将脚本放在页面底部

  • 精简，压缩脚本

  • 从外部引入js

  • 减少DOM访问

CSS方面

  • 将样式表放在顶部

  • 不使用CSS表达式

  • 使用，不使用@import

30.HTTP的几种请求方法用途

  • GET：发送一个请求来获得服务器上的资源。
  • POST：向URL指定的资源提交数据。
  • PUT：类似POST，也是向服务器提交数据，但是PUT指定了资源在服务器的位置。
  • DELETE：删除服务器上的某资源。

31.对于浏览器内核的理解

主要有两部分：渲染引擎和JS引擎。

渲染引擎：获取网页内容，加入样式，计算页面的显示方式。

JS引擎：解释和执行JS，以此来实现页面的动态效果。

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

32.HTML5的新特性

绘画canvas

媒体标签video和audio

localStorage和sessionStorage存储

新的表单控件：calendar，url，search等

新的技术：websocket(基于TCP的全双工通信协议。浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性连接，并进行双向数据传输)等。

33.HTML5离线存储怎么使用

用户没联网时，可以正常访问站点或者应用；当联网时，更新缓存文件。

原理：基于.appcache文件的缓存机制（不是存储），通过文件上的解析清单离线存储资源。之后再没网状态下，浏览器会将这些资源展示到界面上。

34.img的alt和title有什么不同

alt：当img不能正常显示时显示里面的文字

title：为设置该属性的元素提供建议性信息

35.渐进增强和优雅降级

渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后针对高级浏览器进行优化。

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

36.一个页面上有大量图片，如何进行优化？

  • 懒加载

  • 预加载

  • 渐进渲染

  • 大图片使用精灵图

  • 小图片使用Iconfont，Base64等技术

37.Logo SEO优化

  1. logo里面放一个h1标签，目的是为了提高权重，告诉浏览器这个地方很重要

  2. h1面放一个链接，可以返回首页的。

  3. 链接里面要放网站名称，但文字不要显示。（font-size=0）

38.CSS中的渐进增强，优雅降级

优雅降级：产品优先在高版本浏览器中使用，但是要向下兼容旧版本的浏览器。

渐进增强：从低版本的浏览器进行适配。

39.定位position

  • static：静态定位，不脱离文档流。top，right，bottom，left等属性不生效。
  • absolute：绝对定位，脱离文档流，相对定位的父元素进行定位。左右margin为auto将会失效，通过top，right，bottom，left来决定元素位置。
  • relative：相对定位，参照物为原来的位置，不脱标，左右margin为auto不会失效。
  • fixed：固定定位，参照物为浏览器窗口，不会脱离文档流。
avatar
文章
阅读
粉丝