前端面试题html

田园修勾

已于 2022-08-08 20:00:25 修改

阅读量511

点赞数

文章标签：前端

于 2022-07-26 18:39:25 首次发布

本文链接：https://blog.csdn.net/m0_51185558/article/details/126000901

版权

html面试题

为了面试做准备

1、css布局方式

答：flex布局、table布局、float布局、响应式布局

2、垂直居中的方式

答：①行高=高
②margin：auto 0px；
③绝对定位：top：50%；自身高度的一半的负值。
④flex布局align：center

3、rem、em、vh、vw、px各代表的含义

答：px：绝对单位，页面像素展示。
em：相对单位，以父节点的字体大小为单位变化。
rem：相对定位，root em，相对于根节点html的大小变化。
vh、vw：依据视图窗口的宽度和高度，变化。

4、有哪些方式可以隐藏页面元素？说出三种。

答：1.宽高设置成0px；这种方式虽不显示元素，但是依然占位。
2.display：none；不占位，页面中不存在次元素。
3.opacity：页面中存在元素，占位。

5、做好seo需要考虑什么？

答：语义化html标签。
合理的使用title，description，keywords元素。
少用iframe嵌套。
图片加alt。

6、html语义化的目的？

答：用正确的标签做正确的事。代码易于阅读，条理清晰，便于开发人员编写。

7、css中position的值有那些？

答：relative：相对定位，半脱离标准流，占位，占的是原来的位置；fixed：固定定位，脱离标准流，不占位，不会随着页面的滚动而变化位置。absolute：绝对定位，脱离标准流，不占位，一般与相对定位结合使用，不单独使用。

8、如何将table的边框合并?

答：在table的css样式中，添加border-collapse：collapse；

table{
	border-collapse:collapse;
}

9、水平居中的几种方式？

1、文本类，如p：text-align：center；
2、margin：0px auto；
3、绝对定位和固定定位：position：absolute；position：fixed；
例如：

div{
	width:100px;
	position:absolute;
	/*position:fixed;*/
	left:50%;
	transform:translateX(-50px);
}

10、overflow：hidden的三层意思？

①超出部分隐藏
②清除浮动
③解决外边距塌陷问题

11、css的引入方式有哪些？

①外联：推荐使用

<link rel="stylesheet" href="css/style.css">

②内联：

<style>
	标签属性样式
</style>

③行内样式：不推荐使用，权重最高

<p style="color:red"></p>

12、css3有那些新特性？

transition、linear-gradient、transform，animation、audio、video

13、媒体标签audio，有哪些属性？

答：controls 控制面板，autoplay 自动播放，loop=‘true’ 循环播放，muted 静音

14、input标签的常用类型有哪些？说出四个。

答：文本 text，密码 password，email 邮箱，number数字类型

15、说出四个display的常用值

答：block：块类型，可以设置宽高
inline-block：行内块类型，可以设置宽高
inline：行内类型，不可以设置宽高
none：空类型（缺省值），不显示标签

16、什么是精灵图片Ｓｐｒｉｔｅ？

答：把多张晓得图片整合到一张大的图片上，可以减少服务器的请求。使用时通过坐标定位。

17、ｔａｒｇｅｔ的值有哪些？作用是什么？

答：＿ｂｌａｎｋ：在新窗口打开链接。
＿ｓｅｌｆ：在当前窗口打开链接
＿ｐａｒｅｎｔ：在含有链接框架的父框架中打开链接
＿ｔｏｐ：在当前浏览器的整个页面打开链接，会删除所有的框架

18、网页验证码是做什么用的？

答：区分用户是真人的程序还是计算机
防止恶意操作等

19、css基本选择器有哪些？权重如何？

答：有类选择器（class）、标签选择器、ID选择器。
权重：!important>行内样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

20、flex布局如何设置？

答：理论上任何标签都可以成为盒子，选择需要布局的容器，添加 display：flex；可以使容器变成弹性盒子。flex布局以后，其子元素的float、clear、vertical属性会失效。

21、flex的常用属性。

答：1、flex-direction：决定主轴方向。
取值：【row：水平方向，左至右；row-reverse：水平方向，右至左；column：垂直方向，上至下；column-reverse：垂直方向，下至上】。
2、flex-wrap：项目（盒子的子元素）排列在一条线上。【nowrap：默认不换行，项目越多，分得的宽度越小；wrap：换行，第一行在上方；wrap-reverse：换行，第一行在下方】
3、flex-flow：flex-direction和flex-wrap的简写形式，默认值为wrap nowrap。
4、justify-content：项目在主轴上的对齐方式。
取值：【
flex-start（默认值）：左对齐；
flex-end：右对齐；
center：居中；
space-between：两端对齐，项目之间的间隔都相等；
space-around：每个项目两侧的间隔相等，项目与项目间的间隔是项目与边框间隔的两倍。】
5、align-items：项目在交叉轴上的对齐方式。左上角xy左边（0,0）位置。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6、align-content：多轴线的对齐方式，如只有一根轴线则不生效。左上角xy左边（0,0）位置。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

22、display：none和visibility：hidden的区别？

答：display：none；隐藏元素，html结构中没有其对应的标签存在，不会占位。
visibility：hidden；隐藏元素，html结构中存在其对应标签，但不显示，占位。

23、css实现宽高为浏览器窗口一半的正方形？

答：①已知宽高：

	{
		width:50%;
		padding-top: 50%;
        background-color: red;
	}

②vw：

	{
		width: 50vw;
		height: 50vh;
		background-color: red;
	}

23、用css实现三角形

答：

                width:0;
                height:0;   
                border-left:30px solid transparent;   
                border-right:30px solid transparent;   
                border-bottom:30px solid red;

24、伪类和伪类元素的区别？

答：伪类只能用“：” ，而伪类元素可以使用“：”和“：：”。伪类只是使用，而伪类元素可以看成伪造一个元素使用。

25、重排和重绘是什么？

答：重排：当一个标签元素在html中不占位时，浏览器会重新计算个标签的位置和尺寸大小，将现存在的标签按正确的方式排列好，这个过程叫做重排。
重绘：一个标签元素的外观发生改变，但位置和大小不变依然占位没有改变布局时，浏览器会重新绘制各个标签元素的外观，这个过程叫做重绘。

26、重排和重绘的关系？

答：重排需要重新设置布局，而重绘不需要，重排必定会有重绘，而重绘不一定会需要重排，重排相比重绘，消耗性能资源更多。

27、触发重排的方式和避免重排的方法？

答：触发的方式：页面最开始的渲染、占位标签元素的添加删除，元素内容的修改、字体大小的修改、元素位置的变化、style属性的设置等。
避免的方法：书写页面时，避免样式集中改变，少使用 absolute 或 fixed等脱离文档流的操作。

28、关于 link 和 @import 区别说法错误的是（）?

A.link 是 XTHML 标签，无兼容问题
B.两者均属于 CSS 范畴
C.link 可以使用 JavaScript 控制 DOM 改变样式，@import 不支持
D.link 引用 CSS 时，页面加载同时加载样式，@import 需要页面完全载入以后加载

正确答案: B

答案解析：

link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件

29、下述有关 border:none 以及 border:0 的区别，描述错误的是？（不定项选择题）

A.border:none 表示边框样式无
B.border:0 表示边框宽度为 0
C.当定义了 border:none，即隐藏了边框的显示，实际就是边框宽度为 0
D.当定义边框时，仅设置边框宽度也可以达到显示的效果

正确答案: C D

答案解析

C:当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；
D:定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。

30、创建带有 ID 属性的 DOM 元素有什么副作用？（不定项选择题）

A.会造成 DOM 树分支过多
B.会增加内存负担
C.会创建同名的全局变量

正确答案: B C

答案解析：暂无

31、以下（）不属于把 CSS 样式表与 HTML 网页关联的方法

A.在 HTML 文档的标签内定义 CSS 样式
B.用标签链接网上可访问的 CSS 样式表文件
C.在 HTML 文档的标签内定义 CSS 样式
D.用 @import 引入样式表文件

正确答案: C

32、问 123 的颜色是？

    .main{
        color:blue
    }
    span{
        color:green
    }
</style>
<div style="color:red !important" class=""main"">
    <span>123</span>
</div>

A.red
B.blud
C.green
D.white

正确答案：C

答案解析：div是span的父级，继承的样式权重小于给自身设置样式的权重。
大佬详解：首先，优先级顺序：
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
在这道题目：
对于span有两种种影响样式的方式，
(1)继承自父div的color
而对于color而言，它受到类选择器和一个内联样式的影响，并且在这个内联样式中又有一个！important，最为最高级影响 (！important>内联>类选择器)，这就使得div的颜色为red,而作为其子元素的span也应该继承自父元素的color
(2)标签选择器span
但比较这两种影响，（1）作为样式继承的优先级为0,（2）作为标签选择器的优先级为1，所以（2）的优先级以微弱优势高于（1），所以最终采用标签选择器定义的green
来自：https://www.nowcoder.com/test/question/done?tid=59167703&qid=369930#summary