第一天面试题

最新推荐文章于 2022-12-08 20:53:13 发布

哲子君

最新推荐文章于 2022-12-08 20:53:13 发布

阅读量225

点赞数

分类专栏： css属性 js html 文章标签： html5 css css3 javascript

本文链接：https://blog.csdn.net/zhzijun/article/details/112549069

版权

js 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

css属性

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

第一天面试题

面试题

面试题

html部分

第一题：

问：

页面引入样式时，使用link和@import有什么区别？

答：

从属关系的区别：link 是 HTML 标签，@import 是 CSS 提供的语法规则，link除了加载CSS ，还可以定义RSS，定义 rel 链接属性等，@import 就只能加载CSS
加载顺序的区别：link引入的样式页面加载时是同时加载，@import 引入样式需要等待页面加载完成后再加载
兼容性的区别：link 没有兼容性问题，@import 不兼容 ie5 一下
DOM 可控性区别：link 可以通过js操作DOM动态引入样式表改变样式，而@import不可以
权重区别(争议)：可参考：https://www.cnblogs.com/my–sunshine/p/6872224.html

在此补充css引入的四种方式

方式一：内联样式

内联样式，也叫行内样式，指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例：

<div style="display: none;background:red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div>添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

方式二：嵌入样式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
示例：

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

方式三：链接样式

链接方式指的是使用 HTML 头部的标签引入外部的 CSS 文件。
示例：

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

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

方式四：导入样式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：

<style>
    @import url(style.css);
</style>

或者写在css样式中

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}

第二题：

问：

html的元素有哪些（包含H5）？区分出行内元素、块级元素、空元素并在后面简要标注下作用。如：行内元素：br - 换行

答：

块级元素：

article - 文章标签
aside - 定义页面之外的内容
address - 标签定义文档作者/所有者的联系信息
blockquote - 引用块
body - 文本内容
dl - 定义列表
dt - 标签定义一个描述列表的项目/名字
dd - 对一个描述列表中的项目/名字进行描述
div - 为HTML文档内大块的内容提供结构和背景的元素
form - 表单
head - 头部标签
hr - 下划线
h1-h6 描述标题
meat - 申明页面的诸多属性
title - 窗口标题
table - 表格
theader - 表格的表头
tbody - 表格主体
tr - 表格中的一行
th - 表头
style - 样式
header - 头部块
section - 内容块
footer - 底部块
nav - 定义导航链接
menu - 定义一个菜单列表
p - 文本块
pre - 保留您需要的文本格式
ul - 无序列表
li - 定义列表
ol - 有序列表
textarea - 文本域

行内元素

label - 两个输入字段和相关标记的简单 HTML 表单
a - 超链接
audio - 音频
video - 视频
b - 定义粗体
button - 按钮
canvas - 定义图形
em - 强调内容
td - 表格数据
input - 输入框
i - 斜体
span - 超文本标记语言
strong - 加粗
sub - 下标
sup - 上标
select 下拉菜单
radio 单选按钮

行内块

img - 图片标签

去除的元素

font

注意几个补充知识点

定义

什么是HTML元素？

使用HTML标签描述的内容叫HTML元素。HTML 标签的目的是向文档传递含义，也叫HTML Semantic。使用合适的HTML标签能够使你的页面更规范和更具有语义性。
至于块级元素还是行内元素，更容易区分，块级元素用来组织页面的结构，内联元素旨在区分文本的一部分，以赋予特定的功能和含义。
内联元素通常包含一个或几个单词。

HTML元素大致可以分成以下几种类别

定义页面结构（Structure elements）

head, body, h1-h6, footer(h5), header(h5), section(h5), article(h5), aside(h5), nav(h5)

定义内容（Text elements）

p, ul, ol, li, blockquote, table, form

区分内容，行内元素允许区分文本的一部分(Inline elements）

strong, em , a, small, abbr

通用元素（generic elements）

div, span

其他元素

audio, video, canvas

css部分

第一题

问：

圣杯布局和双飞翼布局的理解和区别，并用代码实现

答：

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，

中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.header {
				height: 50px;
				background-color: #0000FF;
				text-align: center;
			}

			.content {
				/* 左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置 */
				padding: 0 200px 0 180px;
				height: 500px;
			}

			.middle {
				float: left;
				width: 100%;
				height: 500px;
				/*左栏上去到第一行*/
				background-color: #005C9C;
			}

			.left {
				float: left;
				width: 180px;
				height: 500px;
				margin-left: -100%;
				background-color: #008000;
				/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
				position: relative;
				left: -180px;
			}

			.right {
				float: left;
				width: 200px;
				height: 500px;
				margin-left: -200px;
				background: #0c9;
				/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
				position: relative;
				right: -200px;
			}

			.footer {
				height: 50px;
				background: #666;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="header">header</div>
		<div class="content">
			<div class="middle">middle</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>
	</body>

</html>

呈现效果：

双飞翼代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.header {
				height: 50px;
				background-color: #0000FF;
				text-align: center;
			}

			.content {
				float: left;
				width: 100%; /*左栏上去到第一行*/ 
				height: 100%;
				background-color: #A05416;
			}
			.left {
				float: left;
				width: 180px;
				height: 500px;
				margin-left: -100%;
				background-color: #008000;
			}

			.right {
				float: left;
				width: 200px;
				height: 500px;
				margin-left: -200px;
				background: #0c9;
			}
			/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
			.middle{
			    margin:0 200px 0 180px;
			    height:500px;
			}
			.footer {
				clear: both; /*记得清楚浮动*/  
				height: 50px;
				background: #F45030;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="header">header</div>
		<div class="content">
			<div class="middle">middle</div>
		</div>	
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="footer">footer</div>
	</body>

</html>

实现效果：

简单粗暴点，就是说左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化，总结：固比固
有的人根据float来实现类这样的布局，出现的结果是固固固或者比比比，而不是我们所说的固比固，这个需要注意

第二题：

问：

CSS3有哪些新增的特性？

答：

边框(borders):

border-radius 圆角
box-shadow 盒阴影
border-image 边框图像

背景:

background-size 背景图片的尺寸
background_origin 背景图片的定位区域
background-clip 背景图片的绘制区域

渐变：

linear-gradient 线性渐变
radial-gradient 径向渐变

文本效果;

word-break
word-wrap
text-overflow
text-shadow
text-wrap
text-outline
text-justify

转换：

2D转换属性
transform
transform-origin
2D转换方法
translate(x,y)
translateX(n)
translateY(n)
rotate(angle)
scale(n)
scaleX(n)
scaleY(n)
rotate(angle)
matrix(n,n,n,n,n,n)

3D转换：

*3D转换属性：

transform
transform-origin
transform-style
3D转换方法
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x,y,z,angle)
rotateX(x)
rotateY(y)
rotateZ(z)
perspective(n)

过渡

transition

动画

@Keyframes规则
animation

弹性盒子(flexbox)

flex

多媒体查询@media

伪类

:after 在元素之前添加内容，也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 选择可用的表单元素。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

文字

1.换行

word-break: normal|break-all|keep-all;

2. 超出省略号

text-overflow:ellipsis;

3. 多行超出省略号

-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

4. text-shadow文字阴影

JavaScript部分

第一题

问：

用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

答：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			/**
			 * 这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
			 * a) 生成一个长度为5的空数组arr。
			 * b) 生成一个（2－32）之间的随机整数rand。
			 * c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
			 * d) 最终输出一个长度为5，且内容不重复的数组arr。
			 * */
			 var arr = new Array(5);
			 var num = randomNumber();
			 var i = 0;
			 randomArr(arr,num);
			 function randomArr(arr,num){
				 if(arr.indexOf(num) < 0){
					 arr[i] = num;
					 i++;
				 }
				 else{
					 num = randomNumber();
				 }
				 if(i>=arr.length){
					 console.log(arr);
					 return;
				 }
				 else{
					 randomArr(arr,num)
				 }
			 }
			 function randomNumber(){
				 return Math.floor(Math.random()*31 + 2)
			 }
		</script>
	</body>
</html>

实现效果：

补充：

js递归定义：

递归函数就是在函数体内调用本函数
递归函数的使用要注意函数终止条件，避免进入死循环

递归的两个必要因素：

递归方程
递归结束条件

算法核心：

在有限次可预见性结果中，找到结果与上一次结果之间的关系。
f(n)与f(n-1)的关系有时候很简单，如同走楼梯，状态单一；又有时如同细胞分裂，多种状态组合影响结果。
关键在于梳理清楚本次结果和上一次结果的关系有哪些方面或是因素。
在草稿纸上写出前几次的结果，或者画图，这样更容易找到规律，这种规律实际上就是递归方程。
在算法的分析中，当一个算法中包含递归调用时，其时间复杂度的分析会转化成为一个递归方程的求解。

关于递归的概念和应用请见这篇文章：https://zhuanlan.zhihu.com/p/60643630

第二题：

问：

写一个方法去掉字符串中的空格

答：

1. 使用 js 正则进行替换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var str = "  dadasdas  dsadasd  adsasdas  "
			var trim = function(str){
				return str.replace(/\s*/g,"");
			}
			var a = str.replace(/\s*/g,""); //去除字符串内所有的空格
			document.write(a)
			document.write('<br>')
			var b = str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
			document.write(b)
			document.write('<br>')
			var c = str.replace(/^\s*/,""); //去除字符串内左侧的空格
			document.write(c)
			document.write('<br>')
			var d = str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格
			document.write(d)
		</script>
	</body>
</html>

实现效果：

2. js提供字符串的方式

除此之外我们还可以使用js提供字符串的方式，但是他在简洁程度上远远不如js正则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// js提供的字符串方法
			let str = ' dasdsdas  sddasda  fdwefwef  ';
			let delBlank = (str, type) => {
				let count = 0,
					_str = str.split(''),
					arr = [];
				_str.map((r, i) => {
					if (r !== " ") { // 主要是为了取第一个，最后一个不是" "的下标
						!count ? (arr[0] = i, count++) : arr[1] = i + 1
					}
				})
				switch (type) {
					case 'all':
						return str.split(' ').join('')
						break
					case 'left':
						return str.slice(arr[0])
						break
					case 'right':
						return str.slice(0, arr[1])
						break
					case 'centre':
						// 字符串拼接：左边的空格 + 去除前后空格后的字符串，然后再删除所有的空格 + 尾部的空格
						return str.slice(0, arr[0]) + str.slice(arr[0], arr[1]).split(' ').join('') + str.slice(arr[1], _str.length)
						break
					default:
						return str;
						break
				}
			}
			document.write(delBlank(str, 'centre'))
		</script>
	</body>
</html>

效果如图：

哲子君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一天面试题

这里写目录标题面试题html部分第一题：问：页面引入样式时，使用link和@import有什么区别？答：在此补充css引入的四种方式方式一：内联样式方式二：嵌入样式方式三：链接样式方式四：导入样式第二题：问：html的元素有哪些（包含H5）？区分出行内元素、块级元素、空元素并在后面简要标注下作用。如：**行内元素：**br - 换行答：**块级元素：****行内元素**行内块去除的元素注意几个补充知识点定义HTML元素大致可以分成以下几种类别定义页面结构（Structure elements）定义内容（Te
复制链接

扫一扫