HTML经典面试题

发呆的小蔡°

已于 2022-01-26 11:32:48 修改

阅读量458

点赞数

分类专栏：前端面试题文章标签： html 前端 css3

于 2022-01-26 11:31:34 首次发布

本文链接：https://blog.csdn.net/Shivy_/article/details/122697348

版权

前端面试题专栏收录该内容

13 篇文章 4 订阅

订阅专栏

HTML5新增的标签及作用

定义文档类型，在文档开头有 <!DOCTYPE html>
新增了结构性标签：主要确保HTML文档的结构完整性
a) header标签：定义页面的也没信息，一般用在头部，比如登录栏
b) nav标签：定义导航链接，一般用来创建导航
c) article标签：定义独立的内容，比如独立的段落，章节
d) footer标签：定义页尾，一般用来创建页脚
e) section标签：定义网页的区块，一般用来做结构划分
f) aside标签：定义所处内容之外的内容，语意“其他的内容”
g) datalist标签：定义选项列表；datalist需要与input输入框配合使用，input中的值可以不是datalist中的
h) 画布canvas
audio标签：定义音乐，属性有：src,controls,autoplay,loop
video标签：定义视频，属性有： src,controls,autoplay,loop及宽高
embed标签：定义插入的内容（媒体内容），比如可以插入swf；属性有src,type（type定义插入的内容的类型，值为各种MIME类型）
新增的input属性
a) 新增的type值：比如， date,time,month,week,search,submit,number,password….
b) 新增的属性，例如placeholder（输入框提示），multiple（可以选择多个值），required（必填项），autocomplete（设置下次是否自动完成），autofocus（自动获取焦点），pattern（验证输入框的输入是否合法）

px,em,rem的区别

px像素，绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI
em（font size of the element），是相对长度单位。相当于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相当于浏览器的默认字体尺寸。他会继承父级元素的字体大小，因此并不是一个固定的值。
rem是CSS3新增的一个相对单位（font size of the root element）,相当于根元素的字体大小;
rem 与 em 相似，只不过前者依赖于根元素，后者依赖于父元素
IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只有html根元素。这个单位集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早版本外，所有浏览器均已支持rem
使用场景：
a) 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。
b) 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

百分比（%）与vw / vh

当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般我们的直观理解都会认为子元素的百分比完全相对于直接父元素
vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
a) vw：相对于视窗的宽度，视窗宽度是100vw
b) vh：相对于视窗的高度，视窗高度是100vh
c) vmin：vw和vh中的较小值
d) vmax：vw和vh中的较大值
e) vw / vh和百分比很类似，但是还是有区别的： vw/vh相对于视窗的尺寸，百分比大部分相对于祖先元素，也有相对于自身的情况，比如（border-radius,translate等等）

link与import区别

link属于html标签，而@import是css提供的。
页面被加载时，link因为是HTM标签, 把认会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

前端页面有哪三层构成，分别是什么？作用是什么？

结构层：由HTML或XHTML相关的标记语言创建
表示层：由CSS负责创建
行为层：由Javascript或Dom对事件进行反应

空（void）元素有哪些？

br , hr , link , input , img , meta

HTML的块级元素有哪些？

div, p, ul, li, table, h1~h6, form……..

HTML的行内元素有哪些？

span, a, img, input, button, textarea, select

行内元素和块级元素有什么区别？

行内元素：
a) 设置宽高无效
b) 对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
c) 不会自动进行换行
块级元素：
a) 能够识别设置宽高
b) margin和padding的上下左右均对其有效
c) 独占一行

怎么将行内元素转换为块级元素？

使用css中的 display：block，把行内元素转换成块级元素

使用display:inline-block会产生什么问题？解决方法？

相邻的两个 display: inline-block 元素之间会产生一段空白，有间隙。
解决方式：

不换行的将这两个div元素写在同一行，因为换行也会占dom文档流
可以在父元素里添加属性font-size: 0，也可以消除元素间的间隙
注意：有时两个使用display: inline-block的元素，它们的子元素可能会出现错位的问题，也就是上部没有对齐；这一般都是display: inline-block会让两个div元素下部对齐，解决方式如下：
让两个div的高度相同
两个div高度不一致的情况下，可以使用 vertical-align: top，进行对齐
使用 overflow: hidden属性来解决

为什么要初始化CSS？

CSS初始化是指重设浏览器的样式，因为兼容性的问题，导致不同的浏览器的默认样式兼容都不同；因此如果不初始化就可能出现差异。所以在开发前首先要做的就是初始化CSS，尽可能的把它们统一；使得在后续的开发中可以更加的方便，减少CSS的代码量，节约网页的下载时间。

table标签下面会包含哪些标签元素

tr,th,td,thead,tbody,tfoot

什么是盒子模型？

盒子模型就是网页设计中常用到的一种思维模式，主要规定了元素是如何显示元素间的相互关系；定义所有的元素都有像盒子一样的外形；盒子模型主要包括了4个：

内容区（content）：元素的宽和高，内容，也就是元素的width、height
填充区（padding）：在盒子里面，盒子和内容之间，显示在盒子和内容之间的空白区，补白，内填充或内边距
边框区（border）：盒子的边缘，盒子边缘或者盒子边缘的厚度
外边界区（外边距margin）：外边距不会影响盒子可见框的大小，但是会影响盒子的位置

盒子模型和（IE盒模型）怪异盒子模型的区别？

盒子模型：盒子的宽等于content的宽，盒子的高等于content的高
（IE盒模型）怪异盒子模型：盒子的宽等于content的宽+左右border+左右padding，盒子的高等于content的高+上下border+左右padding

怎么让一个没有宽高的div元素，垂直水平居中？

使用CSS3的transform属性，具体如下：
a) 父盒子设置为： position：relative（相对定位）
b) div设置为：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%)
跟第一种方法类似，通过定位+ margin 实现
a) 父盒子设置为： position：relative（相对定位）
b) div设置为： width：200px; height: 200px; position:absolute; left:50%; top:50%; margin-top: -100px; margin-left: -100px
使用flex布局，具体如下：
a) 父盒子设置为：width：200px; height:200px; display:flex; justify-content:center; align-items:center
第一种和第二种方式都可以实现元素的水平垂直居中，但是建议使用transform, 不建议使用margin-left/margin-top；因为transform属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些；top/left属于布局属性，会引起页面layout回流和repaint重绘