2022 front-end interview questions
1. What is the function of the
htmlmiddle label?DOCTYPE
Answer: It is used to declare the current HTML version, which is used to inform the web browser which HTML or XHTML specification is used to parse the page, so that the browser can understand the content of the page more accurately and display the content effect better!
2.
metaWhat is the function of the label?
Answer: meta is used to simulate the response header message of the HTTP protocol in the HTML document. There are two common attributes as follows. ① name属性: Used to describe web pages, corresponding to content (web page content), so that search engine robots can find and classify (almost all search engines use online robots to automatically find meta values to classify web pages) the most important of which is description (the description of the site on the search engine) and keywords (category keywords), so a meta value should be added to each page.
<meta name="description" contect="xxxxx"> 告诉搜索引擎你的站点的主要内容
<meta name="keywords" contect="xxxxxx">向搜索引擎说明你的网页的关键词
② viewpoint属性: Provides an indication of the initial size of the viewport (viewport), currently only used for mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码
3.
htmlWhat are the common inline block elements? What are the common block elements?
Answer: ① 块（block）级元素（独占一行，可设宽高）: div, p, h1~h6, ul, ol, dl, li, dd, table, hr, blockquote, address, table, menu, pre, new header, section, aside, footer, etc. in HTML5
② 行内（inline）元素（一行多个，不可设宽高）: span, img, a, lable, input, abbr (abbreviation), em (emphasis), big, cite (citation), i (italics), q (short citation), textarea, select, small, sub, sup, strong, u (underline), button (default display: inline-block)
③ 行内块（inline-block）元素（可设宽高，综合）: img, input, td
4.
aIn addition to the use of hyperlinks, how can tags be used? Give the key code?
Answer: ① 超链接作用（跳转页面可点击）:
<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. How many ways are
htmlthere to import files?jsTry to give the key code?
Answer: 3 kinds of inline type, embedded type and external introduction type
<!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.
jsWhat are the commonly used string methods in ? (Write at least 5, and explain that it works)
| method | describe |
|---|---|
| anchor() | Create HTML anchors |
| big() | Display strings in large font |
| blink() | show flashing string |
| blood() | Display strings in bold |
| charAt() | returns the character at the specified position |
| charCodeAt() | Returns the Unicode encoding of the character at the specified position |
| concat() | connection string |
| fixed() | Displays a string as typewriter text |
| fontcolor() | Use the specified color to display the string |
| fontsize() | Displays a string using the specified size |
| fromCharCode() | Create a string from a character encoding |
indexOf() |
search string |
| italics() | Display strings in italics |
| lastIndexOf() | Retrieve a string from the back to the front |
| link() | display a string as a link |
| localeCompare() | compares two strings in a locale-specific order |
| match() | find a match of one or more regular expressions |
replace() |
Replace substrings matching regular expressions |
| search() | Retrieves values that match a regular expression |
| slice() | Extracts a segment of a string and returns the extracted portion in a new string |
| small() | Display strings in small font size |
split() |
Split a string into an array of strings |
| strike() | Display strings with strikethrough |
sub() |
display strings as subscripts |
substr() |
Extracts the specified number of characters in a string from the starting index number |
substring() |
Extracts characters between two specified index numbers in a string |
| sup() | display strings as superscripts |
| toLocaleLowerCase() | Convert a string to lowercase |
| toLocaleUpperCase() | Convert a string to uppercase |
| toLowerCase() | Convert a string to lowercase |
| toUpperCase() | Convert a string to uppercase |
| toSource() | source code representing the object |
| toString() | return string |
valueOf() |
Returns the primitive value of a string object |
7.
jsWhat are the eight data types in ? ,
答：简单数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt
复杂数据类型（引用数据类型）：Object
8.
jsHow to add listener events?
answer:
① addEventListener()方法:
1. The third parameter in element.addEventListener(event, function, useCapture) can control whether the specified event is executed in the capture or bubbling phase. true - the event handler is executed during the capture phase. false - default - event handlers are executed in the bubbling phase.
2. addEventListener() can bind multiple events to the same element without overwriting. If multiple events are bound to the same element, the rule of binding first and executing first is adopted.
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种方式？