前端面试题型汇总

程序员文章站 2022-06-09 21:13:09

...

HTML

HTML语义化

<!DOCTYPE>的作用

SEO中的TDK

HTML5中新增标签

块级元素和内联元素

img中的alt和title的区别

title与h1的区别、b与strong的区别、i与em的区别

<meta>元标签

label标签的作用

iframe的缺点

HTML和XHTML的区别

reflow和repaint

CSS

css样式初始化

块级元素和内联元素样式区别

css的盒模型

伪类和伪元素

position各属性区别

display各属性区别

float浮动元素的影响

display：none和visibility：hidden的区别

display，float，position的相互影响

样式中属性的继承

BFC块级格式化上下文

css hack

css选择器及其权重优先级

清除浮动的几种方法

css3变换，transition

css3动画，animation

媒体查询，@media

link和@import 导入css文件的区别

水平、垂直居中的几种方式

省略文本的样式

bix-sizing属性

双栏布局和三栏布局

css预处理，less和sass

css sprite

z-index属性

src和href引入地址的区别

flex弹性布局

JavaScript

详细内容：

HTML

HTML语义化

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

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

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

<!DOCTYPE>的作用

不是一个HTML标签，是一个用于告诉浏览器当前HTML版本的指令

告知浏览器按照何种规范解析页面

添加了<!DOCTYPE>，就等同于开启了标准模式

SEO中的TDK

在SEO中，所谓的TDK其实就是title、description、keywords这三个标签，这三个标签在网站的优化过程中，title标题标签，description描述标签，keywords关键词标签。

SEO中TDK详细介绍

HTML5中新增标签

新增语义化标签

块级元素和内联元素

常用的块级元素：

　　address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ul , li

常用内联的元素：

　　a , b , br , em , font , img , input , label , select , small , span , textarea

内联元素和块级元素的float属性区别

img中的alt和title的区别

alt是给搜索引擎识别，在图像无法显示时的替代文本；

title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。

（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。

title与h1的区别、b与strong的区别、i与em的区别

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。

i内容展示为斜体，em表示强调的文本；

<meta>元标签

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

label标签的作用

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>

<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

iframe的缺点

会阻塞主页面的Onload事件；

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript。动态给iframe添加src属性值，这样可以绕开以上两个问题。

HTML和XHTML的区别

XHTML 元素必须被正确地嵌套。

错误：this is example.

正确：this is example.

XHTML 元素必须被关闭。

错误：this is example.

正确：this is example.

标签名必须用小写字母。

错误：this is example.

正确：this is example.

空标签也必须被关闭

错误： 

正确： 

XHTML 文档必须拥有根元素。

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。

repaint和reflow

repaint就是重绘，reflow就是回流

在性能优先的前提下，reflow的性能消耗要比repaint的大。

repaint是某个dom元素进行重绘，reflow是整个页面进行重排，也就是对页面所有的dom元素渲染。

repaint的触发：

  1）不涉及任何dom元素的排版问题的变动为repaint，例如元素的color、text-align等改变。

  2）color的修改，text-align的修改，a：hover也会造成重绘，伪类引起的颜色等变化不会导致页面的回流，仅仅会触发重绘。

  reflow的触发：

1）width、height、border、margin、padding的修改

2）通过hover造成元素表现的改动，如display:none会导致回流

3）appendChild等dom元素操作。

4）font类style 的修改。

5) background的修改，现在经过浏览器厂家的优化，部分background的修改只会触发repaint。

如何尽量避免回流reflow：

a、尽可能在dom末稍通过修改class来修改元素的style属性，尽可能减少受影响的dom元素。

b、避免设置多项内联样式，使用常用的class方式进行设置样式，以避免设置样式时访问dom的低效率。

c、设置动画元素position属性为fixed或absolute：由于当前元素从dom流中独立出来，因此受影响的只有当前元素。

d、牺牲平滑度满足性能：动画精度太强，会造成更多的repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。

f、避免使用table进行布局，table每个元素的大小以及内容的改变，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以针对性的repaint和避免不必要的reflow。

g、避免在css中使用运算式

CSS

css样式初始化

原因

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

弊端

初始化样式会对SEO有一定的影响

淘宝初始化样式

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }

块级元素和内联元素样式区别

内联元素：

内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。

内联元素不可以设置宽高

内联元素可以设置margin，padding，但只在水平方向有效。

块状元素：

块级元素会独占一行，默认情况下宽度自动填满其父元素宽度

块级元素可以设置宽高

块级元素可以设置margin，padding

内联块状元素 inline-block：

表现为同行显示并可修改宽高内外边距等属性。简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个span标签设置inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

css的盒模型

IE 盒子模型、W3C 盒子模型；

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

区别： IE的content部分把 border 和 padding计算了进去;

伪类和伪元素

伪类

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

:link

伪类将应用于未被访问过的链接，与:visited互斥。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被**的元素，如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接，与:link互斥。

伪元素

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

:first-letter

伪元素的样式将应用于元素文本的第一个字（母）。

:first-line

伪元素的样式将应用于元素文本的第一行。

:before

在元素内容的最前面添加新内容。

:after

在元素内容的最后面添加新内容。

position各属性区别

relative 相对定位

不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面（z-index只能在position属性值为relative或absolute或fixed的元素上有效。）（两个都为定位元素，后面的会覆盖前面的定位）

absolute 绝对定位

使元素完全脱离文档流（在文档流中不再占位）

使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）

使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）

相对于最近一个有定位的父元素（定位属性除static之外）偏移（若其父元素没有定位则逐层上找，直到document）

相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）

可使用z-index改变显示层级

fixed 固定定位

fixed生成固定定位的元素，相对于浏览器窗口进行定位。

static 默认值

默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

sticky 粘性定位

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

display各属性区别

block

单独占一行，可以设置width,height，maigin四个方向，padding四个方向；

元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度；

inline

多个内联元素占同一行，直到放不下才换行。设置width,height,margin-top,margin-bottom,padding-top,padding-bottom无效；（通过添加背景颜色可以看出有设置上述属性，但是不会影响其他元素的布局）

inline-block

像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。比如：input,select,img等。

none

inline和inline-block出现的问题

水平呈现的元素间，换行显示或空格分隔的情况下会有间距

解决方法

相邻inline-block元素不分行写，写在同一行并且中间无空格

select父元素使用font-size:0

float浮动对元素的影响

float(对块级、行内、内联块元素的影响)

display：none和visibility：hidden的区别

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；

visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

display，float，position的相互影响

样式中属性的继承

BFC块级格式化上下文

css hack

css选择器及其权重优先级

清除浮动的几种方法

css3变换，transition

css3动画，animation

媒体查询，@media

link和@import 导入css文件的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；

@import属于CSS范畴，只能加载CSS。

link引用CSS时，在页面载入时同时加载；

@import需要页面网页完全载入以后加载。

link是XHTML标签，无兼容问题；

@import是在CSS2.1提出的，低版本的浏览器不支持。

link支持使用Javascript控制DOM去改变样式；

@import不支持使用Javascript控制DOM去改变样式。

水平、垂直居中的几种方式

省略文本的样式

bix-sizing属性

双栏布局和三栏布局

css预处理，less和sass

css sprite

z-index属性

src和href引入地址的区别

flex弹性布局

上一篇： java之动态代理

下一篇： [ 面试题 ] 常见面试题（一）

前端面试题型汇总

HTML

CSS

JavaScript

HTML

CSS

Java面试题汇总

腾讯、百度、华为、搜狗和滴滴Android面试题汇总

Java常用类String的面试题汇总(java面试题)

你可能不熟练的十个前端HTML5经典面试题

阿里产品经理面试问题汇总（必会这28道面试考题及答案）

阿里产品经理面试问题汇总（必会这28道面试考题及答案）

撩课-Web大前端每天5道面试题-Day6

Java面试题汇总

学习web前端面试如何才能通过

前端面试题套路--终极版（Vue、JavaScript）