前端基础面试题（带答案）

最新推荐文章于 2024-03-21 20:53:45 发布

阿啦ala

最新推荐文章于 2024-03-21 20:53:45 发布

阅读量1.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_39152200/article/details/106919055

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML

1、 Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
答：<!DOCTYPE>声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式(严格模式)的排版和JS运作模式都是以该浏览器支持的最高标准运行，统一兼容性
混杂模式又叫怪异模式或者是兼容模式; 是指浏览器用自己的方式解析代码.

如果只有标准模式,那么以前的网站一定会受到影响，无法正常显示
如果只有混杂模式,那么每个浏览器的解析都不一样，兼容性很难保持平衡

2、 HTML5为什么只需要写？
答：在html4.01中，声明引用DTD,因为HTML4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。html5不基于SGMl,所以不需要引用DTD。

3、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
答：行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

4、页面导入样式时，使用link和@import有什么区别？
答： 1.link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于与加载CSS。
2.页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
3.import是CSS2.1提出的，只有IE5以上才能被识别，而link是XHTML标签，无兼容性问题。

5、介绍一下你对浏览器内核的理解？
答：主要分成两个部分：渲染引擎(Render Engine)和JS引擎。
渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

6、常见的浏览器内核有哪些？
答： Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7、 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
答：绘画canvas；
用于媒介回放的video和audio元素；
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除；
语义化更好的元素，比如article，footer，header，nav，section；
表单控件：calender，date，time，email，url，search
新的技术：webworker，websockt，Geolocation

移除的元素：
纯表现的元素：basefont，big，center，font，s，strike，tt，u
对可用性产生负面影响的元素：frame，frameset，noframes；

处理兼容性问题：

<!--[if it IE9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

8、如何区分HTML和HTML5？
答： 1、在文档类型声明上：
HTML声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5声明：

<!DOCTYPE html>

2、在结构语义上
特殊的语义化标签：article，footer，header，nav，section等

9、简述一下你对HTML语义化的理解？
答：⒈用正确的标签做正确的事情
⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
⒊及时在没有样式CSS情况下也以一种文档格式显示，并且是任意阅读的；
⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
⒌阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

10、 HTML5的离线储存怎么使用，工作原理能不能解释一下？
答：怎么使用

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

书写cache.manifest文件：
CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

工作原理：
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

CSS

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
答： CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
　　标准的css盒子模型宽高就是内容区宽高；
　　低端IE css盒子模型宽高内边距﹢边界﹢内容区；
　　
2、 CSS选择符有哪些？哪些属性可以继承？
答： 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, UL LI DL DD DT

3、 CSS优先级算法如何计算？
答：同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比内联优先级高

4、 CSS3新增伪类有那些？
答：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

#wrap{ /* 已知宽高 */
	width: 200px;
	height: 200px;
	background: orange;
	position: absolute;
	top:50%;
	left: 50%;
	margin-top:-100px;
	margin-left: -100px;
}
#wrap{ /* 不知道宽高 */
	width: 200px;
	height: 200px;
	background: orange;
	position: absolute/fixed;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
	margin:auto;
}
div{ /* 不知道宽高, 给外层元素添加样式 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.out {  /* 浮动外层元素*/
	float: left;
	position: relative;
	left: 50%;
}
.in{  /* 浮动内层元素*/
	float: left;
	position: relative;
	right: 50%;
}
#wrap{  /*绝对定位的元素*/
    position: absolute; /*绝对定位*/
    width: 500px;
    height:300px;
    background: red;
    margin: 0 auto; /*水平居中*/
    left: 0; /*此处不能省略，且为0*/
    right: 0; /*此处不能省略，且为0*/
}

6、 display有哪些值？说明他们的作用。
答：none：此元素不显示。
block：将元素显示为块级元素，前后会带换行符。
inline:默认值，元素会被显示为内联元素，前后没有换行符。
inline-block:行内块级元素。

7、 position的值relative和absolute定位原点是？
答：relative（相对定位）：定位原点是元素本身所在位置；
absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的

8、 CSS3有哪些新特性？
答： CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

9、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
答： Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; / Safari /
display: flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

10、 用纯CSS创建一个三角形的原理是什么？
答：采用的是均分原理,把矩形分为4等份,这4等份其实都是边框
核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;

阿啦ala

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
前端基础面试题（带答案）

HTML1、 Doctype作用？严格模式与混杂模式如何区分？它们有何意义？答：<!DOCTYPE>声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)的排版和JS运作模式都是以该浏览器支持的最高标准运行，统一兼容性混杂模式又叫怪异模式或者是兼容模式; 是指浏览器用自己的方式解析代码.如果只有标准模式,那么以前的网站一定会受到影响，无法正常显示如果只有混杂
复制链接

扫一扫