2022年前端面试题
1.
html中DOCTYPE标签的作用是什么？
答：用于声明当前HTML版本，用来告知web浏览器该文档使用是哪种 HTML 或者 XHTML 规范来解析页面，以便浏览器更加准确的理解页面内容，更加良好地展现内容效果！
2.
meta标签的作用是什么？
答：meta是用来在HTML文档中模拟HTTP协议的响应头报文,常用属性有以下两种。①name属性：用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。
<meta name="description" contect="xxxxx"> 告诉搜索引擎你的站点的主要内容
<meta name="keywords" contect="xxxxxx">向搜索引擎说明你的网页的关键词
②viewpoint属性：为 viewport（视口）的初始大小提供指示，目前仅用于移动设备。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码
3.
html中常见的行内块元素有哪些？常见的块元素有哪些？
答：①块（block）级元素（独占一行，可设宽高）：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等
②行内（inline）元素（一行多个，不可设宽高）：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）
③行内块（inline-block）元素（可设宽高，综合）：img 、input 、td
4.
a标签除了超链接作用使用外，还可以怎么用?给出关键代码？
答：①超链接作用（跳转页面可点击）：
<a href="http://www.baidu.com">百度</a>
②锚点跳转作用：
<h3 id="a">标题1<h3>
<h3 id="b">标题2<h3>
<h3 id="c">标题3<h3>
<h3 id="d">标题4<h3>
.
.
.
<h3 id="e">标题5<h3>
<a herf="#a">点我跳到标题1哟</a>
5.
html中引入js文件有哪几种方式？试给出关键代码？
答：3种 行内式 内嵌式 外部引入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js三种引入</title>
<!-- 3.外部引入js -->
<script src="js/js.js"></script>
<script>
// 2,内嵌js
alert("你好呀!")
</script>
</head>
<body>
<!-- js嵌入页面引入方式 -->
<!-- 1,行内js(主要用于事件) -->
<input type="button" value="点击一下" onclick="alert('你好世界!')">
<!-- 整个程序的执行流程是从上到下的所以我们会先看到弹窗中的你好呀!然后才会看到按钮,点击之后会出现弹窗你好世界! -->
</body>
</html>
6.
js中常用的字符串方法有哪些？（最少写出5中，并说明起作用）
| 方法 | 描述 |
|---|---|
| anchor() | 创建 HTML 锚 |
| big() | 用大号字体显示字符串 |
| blink() | 显示闪动字符串 |
| blod() | 使用粗体显示字符串 |
| charAt() | 返回在指定位置的字符 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码 |
| concat() | 连接字符串 |
| fixed() | 以打字机文本显示字符串 |
| fontcolor() | 使用指定的颜色来显示字符串 |
| fontsize() | 使用指定的尺寸来显示字符串 |
| fromCharCode() | 从字符编码创建一个字符串 |
indexOf() |
检索字符串 |
| italics() | 使用斜体显示字符串 |
| lastIndexOf() | 从后向前检索字符串 |
| link() | 将字符串显示为链接 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
replace() |
替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式匹配的值 |
| slice() | 提取字符串的片段，并在新的字符串中返回被提取的部分 |
| small() | 使用小字号显示字符串 |
split() |
把字符串分割为字符串数组 |
| strike() | 使用删除线显示字符串 |
sub() |
把字符串显示为下标 |
substr() |
从起始索引号提取字符串中指定数目的字符 |
substring() |
提取字符串中两个指定的索引号之间的字符 |
| sup() | 把字符串显示为上标 |
| toLocaleLowerCase() | 把字符串转换为小写 |
| toLocaleUpperCase() | 把字符串转换为大写 |
| toLowerCase() | 把字符串转换为小写 |
| toUpperCase() | 把字符串转换为大写 |
| toSource() | 代表对象的源代码 |
| toString() | 返回字符串 |
valueOf() |
返回某个字符串对象的原始值 |
7.
js中八种数据类型是什么？、
答：简单数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt
复杂数据类型（引用数据类型）：Object
8.
js中怎么添加监听事件?
答：
①addEventListener()方法：
1.element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。
2.addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。
3.addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。4.注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法，可以采用以下方法。
5.可以使用 removeEventListener() 来移除之前绑定过的事件。
②attachEvent()方法(IE6-8)
1.attachEvent是 IE 有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。
2.attachEvent()是 后绑定先执行。
3.绑定时间时，attachEvent必须带 on，如 onclick，onmouseover 等
9.
html中怎么引入css文件?
答：
①行内式
<div style="border:1px solid red">888</div>
②style标签式
<style>
div{
width:200px;
height:200px;
}
</style>
③link标签外部引用式`
<head>
<link href="./mystyle.css" rel="stylesheet" type="text/css"/>
</head>
10.利用
css中transparent属性画出一个三角形？
<style>
.box{
width: 0px;
height: 0px;
border: 30px solid transparent;
border-top-color: pink;
// 这两个是设置兼容低版本浏览器的，有需要的话可以加上，高版本的可以不加
line-height: 0px;
font-size: 0px;
}
</style>
11.写出
opcity五大兼容性代码？
答：
<style>
.opacity{
filter:alpha(opacity=50); /* IE */ 或者使用rgba（0，0，0，.5）
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
-webkit-opacity: 0.5;/*支持webkit内核浏览器*/
opcity:.5 /* IE9 + etc...modern browsers */
}
</style>
12.
css中有几种实现渐变的方式？写出关键代码？
答：
线性渐变（ Linear Gradients ）- 向下/向上/向左/向右/对角方向
<style>
上下方向
background-image: linear-gradient(red, blue)
左右
background-image: linear-gradient(to right, red , blue);
</style>
径向渐变（ Radial Gradients ）- 由它们的中心定义
<style>
background-image: radial-gradient(red, green, blue)
</style>
13.
css中有哪几种定位？写出关键代码
14使得元素水平垂直居中的方式有哪几种？
15.写出清楚浮动的6种方式？