2020年前端HTML+CSS+JS+VUE面试题考试题
- HTML面试题
- （一）HTML5中的新标记
- （二）HTML如何实现单选
- （三）HTML多种本地存储的区别
- （四）HTML5页面缓存
- demo.appcache文件
- index.html文件
- （五）meta标记常用属性
- 1、http-equiv 属性的 Content-Type 值（设置字符集）
- 2、http-equiv 属性的 Refresh 值（设置自动刷新｜跳转）
- 3、name 属性的 viewport 值（移动屏幕的缩放）
- 4、name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）
- 5、name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）
- 6、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）
- 7、name 属性设置作者姓名及联系方式
- 8、name 属性设置搜索引擎关键词
- 9、name 属性设置搜索引擎网页描述
- CSS面试题
- JS面试题
HTML面试题
（一）HTML5中的新标记
1、HTML5中新的语义元素
什么是语义元素
语义元素清楚地向浏览器和开发者描述其意义。
例如div和span元素，无法表达其内容相关信息，属于非语意化元素；
而像form、table、img等元素，能够通过元素名清晰地表达其内容，这种就属于语意化元素。
HTML中常用的语意化标记有
| 标记 | 描述 |
|---|---|
| article | 文档内的文章 |
| aside | 页面内容之外的内容 |
| details | 用户可查看或隐藏的额外细节。 |
| dialog | 对话框或窗口。 |
| figcaption | figure 元素的标题。 |
| figure | 自包含内容，比如图示、图表、照片、代码清单等等。 |
| footer | 文档或节的页脚。 |
| header | 文档或节的页眉。 |
| main | 文档的主内容。 |
| mark | 重要或强调的内容。 |
| section | 文档中的节。 |
| summary | details 元素的可见标题。 |
| time | 日期/时间。 |
这些语意化的标记并非一定要用，完全可以使用div + class来表示。
2、HTML中新的表单元素
| 标记 | 描述 |
|---|---|
| datalist | 输入框的预定义选项。 |
| keygen | 键对生成器字段（用于表单）。 |
| output | 计算结果。 |
3、HTML5中新的输入类型
HTML5中新的输入类型大多数在网页上没什么区别，比较直观的区别就是输入时弹出的键盘的类型不同
| 新的输入类型 | 说明 |
|---|---|
| color | 颜色 |
| date | 日期 |
| datetime | 日期和时间 |
| datetime-local | 本地化的日期和时间 |
| 电子邮件 | |
| month | 月份 |
| number | 数字 |
| range | 数字取值范围 |
| search | 搜索 |
| tel | 电话号码 |
| time | 时间 |
| week | 星期 |
4、HTML5中新的输入属性
HTML5中新的输入属性中，一些用于限制的属性功能有限，并不能满足开发需求，所以大多数情况下都是使用JS来实现输入限制的
| 新的输入属性 | 说明 |
|---|---|
| autocomplete | 表单或输入字段是否应该自动完成，浏览器会基于用户之前的输入值自动填写值 |
| autofocus | 自动聚焦，打开就显示输入光标 |
| form | 规定input元素所属的一个或多个表单 |
| formaction | 规定当提交表单时处理该输入控件的文件的 URL |
| formenctype | 规定当把表单数据提交至服务器时如何对其进行编码 |
| formmethod | 规定提交方式 |
| formnovalidate | 规定在提交表单时不对input元素进行验证 |
| formtarget | 规定的名称或关键词指示提交表单后在何处显示接收到的响应 |
| height 和 width | 规定input元素的高度和宽度 |
| list | 引用的datalist元素中包含了input元素的预定义选项 |
| min 和 max | 规定input元素的最小值和最大值 |
| multiple | 规定允许用户在input_file元素中输入一个以上的值 |
| pattern (regexp) | 规定用于检查input元素值的正则表达式 |
| placeholder | 规定用以描述输入字段预期值的提示 |
| required | 规定在提交表单之前必须填写输入字段 |
| step | 如果 step=“3”，则合法数字应该是 -3、0、3、6、等等 |
5、HTML5中新的图像属性
| 标签 | 描述 |
|---|---|
| canvas | 定义使用 JavaScript 的图像绘制。 |
| svg | 定义使用 SVG 的图像绘制。 |
6、HTML5中新的媒体元素
| 标签 | 描述 |
|---|---|
| audio | 播放声音或音乐，没有画面 |
| embed | 外部应用程序的容器（比如插件），也可以播放音视频 |
| source | 为video和audio指定媒体的资料来源 |
| track | 为ideo和audio的添加轨道 |
| video | 播放视频或影片，有画面 |
（二）HTML如何实现单选
单选框默认不能单选，实现单选的多个单选框的name属性必须相同，相当于分组，属于同一组多个单选元素才能选一个
<input type="radio" name="a" /><label>选项1</label>
<input type="radio" name="a" /><label>选项2</label>
<input type="radio" name="a" /><label>选项3</label>
<input type="radio" name="a" /><label>选项4</label>
（三）HTML多种本地存储的区别
HTML中主要有3中本地存储方式：
- cookie - HTML5之前，数据只能存储在 cookie 中，包括每一个服务器的请求数据
- window.localStorage - 存储没有截止日期的数据（当关闭整个浏览器时数据也不会消失）
- window.sessionStorage - 针对一个session来存储数据（当关闭浏览器标签页时数据会丢失）
（四）HTML5页面缓存
HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。
第一步：先创建缓存配置文件
文件有三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
demo.appcache文件
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
NETWORK:
mine.html
FALLBACK:
/html/offline.html
第二步：在html标记中添加配置文件
index.html文件
如需启用应用程序缓存，请在文档的html标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
</html>
（五）meta标记常用属性
1、http-equiv 属性的 Content-Type 值（设置字符集）
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
2、http-equiv 属性的 Refresh 值（设置自动刷新｜跳转）
<meta http-equiv="Refresh" content="3;url=http://blog.csdn.net/xxx" />
3、name 属性的 viewport 值（移动屏幕的缩放）
/*
width – viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height – viewport 的高度 （范围从 223 到 10,000 ）
initial-scale – 初始的缩放比例 （范围从 > 0 到 10，默认 1.0）
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no，yes)
*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
4、name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）
/*
使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
*/
<meta name="format-detection" content="telephone=no" />
5、name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）
/*
网站开启对 web app 程序的支持。
该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。
*/
<meta name="apple-mobile-web-app-capable" content="yes" />
6、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）
/*
在 web app 应用下状态条（屏幕顶部条）的颜色
默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px）
*/
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
7、name 属性设置作者姓名及联系方式
<meta name="author" contect="liudanyun, liudy1024@163.com" />
8、name 属性设置搜索引擎关键词
<meta name="keywords" contect="视频,直播" />
9、name 属性设置搜索引擎网页描述
<meta name="description" contect="一个流行的视频网站" />
CSS面试题
（一）区块元素&内联元素
HTML中的元素可分为区块元素、内联元素两类
div元素是最典型的区块元素，
span元素是最典型的内联元素
区块元素和内联元素的特征：
| 元素 | 宽度 | 高度 | 显示 | 可控 |
|---|---|---|---|---|
| 区块元素 | 多数为100%，少数为内容的宽度 | 内容的高度 | 独占一行，换行显示 | 宽高内外边距设置有效 |
| 内联元素 | 内容的宽度 | 内容的高度 | 同行显示 | 宽高内外边距设置无效 |
（二）元素显示方式
元素的显示方式有很多，常用的有
| 值 | 描述 |
|---|---|
| none | 元素不会被显示。 |
| block | 元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素（CSS2.1 新增的值）具有行内显示及宽高内外边距可控的特征 |
| list-item | 元素会作为列表显示。 |
| run-in | 元素会根据上下文作为块级元素或内联元素显示。 |
| flex | 元素会作为弹性盒子显示。 |
| grid | 元素会作为网格布局显示 |
（三）CSS选择器类型
CSS选择器有很多种类型，灵活运用可以大大提高效率
| 选择器 | 举例 |
|---|---|
| 通用选择器 | *{…} |
| 元素选择器 | p{…} |
| 分组选择器 | a,p,h1{…} |
| 类选择器详解 | .abc{…} |
| ID选择器详解 | #aaa{…} |
| 兼并选择器 | #a.b.c{…} |
| 属性选择器详解 | [name]{…}或[name「*｜^ |
| 后代选择器 | ul li{…} |
| 直接子元素选择器 | ul>li{…} |
| 相邻兄弟选择器 | p+div{…} |
| 后续兄弟选择器 | p~div{…} |
| 伪类 | li:hover{…} |
| 伪元素 | li:before{…} |
(四)CSS颜色的表示方法
CSS中可以通过多种方式来表示颜色
- RGB - 指的是三原色 red（红色）、green（绿色）、blue（蓝色）
- HSL - 指的是坐标值 hue（色调）、saturation（饱和度）、lightness（亮度）
- H从 0 到 360 - 0 (或 360) 是红色，120 是绿色，240 是蓝色。
- S是百分比值；0% 意味着灰色，而 100% 是全彩。
- L同样是百分比值；0% 是黑色，100% 是白色
| 表示方法 | 举例 |
|---|---|
| 单词 | red、green、blue |
| 3位十六进制色 | #aaa、#FFF、#000 |
| 6位十六进制 | #FF0000、#00FF00、#000000 |
| RGB 函数颜色 | rgb(255,10,0)、rgb(0,0,255) |
| RGBA 函数颜色 | rgb(255,10,0,0.2)、rgb(0,0,255,1) |
| HSL 颜色 | hsl(120,65%,75%)、hsl(240,65%,75%) |
| HSLA 颜色 | hsl(0,65%,75%,0.5)、hsl(240,65%,75%,1) |
(五)CSS外边距合并的问题
CSS中顶部外边距和底部外边距经常会出现合并的情况，尤其是顶部外边距合并的时候必须想办法解决合并的问题，不然会影响页面的正常排版。
顶部外边距合并的情况是：给子元素添加的顶部外边距时，子元素的顶部外边距合并后变成了父元素的顶部外边距。
合并原因是：自元素和父元素的顶部之间是重合在一起的，系统自动合并外边距。
解决思路是：让子元素和父元素的顶部不重合
决绝方案是：
- 给父元素添加顶部的内边距，哪怕0.1个像素，让父元素和子元素的顶部不再重合
- 使用父元素的内边距代替子元素的外边距
- 在子元素前面添加一个任意有高度的元素，将父元素和子元素分开不重合
(六)CSS中3种定位方式
所有定位的元素都可以使用left、right、top、bottom属性设置元素的位置
| 定位方式 | 说明 |
|---|---|
| relative | 相对定位，常用于微调和绝对定位的参照物 |
| absolute | 绝对定位，参照已定位的父元素中调整位置 |
| fixed | 固定定位，参照整个页面做定位，不随页面而滚动 |
(七)CSS中BFC的概念
BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念。
一个BFC元素就是一个独立的模块，与其他模块之间没有任何关系，所以不会出现外边距合并问题，并且计算BFC的高度时，浮动子元素也计算在内，所以也不会出现浮动影响的问题。
什么情况下会出发BFC呢？
- 元素浮动后
- 绝对定位或者相对定位后
- 改变overflow的值后，即不为默认的visible
- 设置display的值为table系列、inline-block、flex、list-item
（八）元素水平排版方法
1、子元素设置display:inline-block;属性水平排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display: inline-block;水平排版</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
font-size: 0;/* 去除内联子元素默认的间距 */
}
li{
display: inline-block;
width: 33.33%;
font-size: 16px;/*g给内联子元素重新设置字体大小*/
}
li:nth-of-type(1){
background-color: red;
}
li:nth-of-type(2){
background-color: green;
}
li:nth-of-type(3){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>水平排版元素1</li>
<li>水平排版元素2</li>
<li>水平排版元素3</li>
</ul>
</body>
</html>
2、子元素设置float属性水平排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display: inline-block;水平排版</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;/*内联块元素宽度为内容宽度，需要手动设置一下*/
display: inline-block;/*利用BFC原理解决子元素浮动后父元素高度为0的问题*/
}
li{
float: left;
width: 33.33%;
}
li:nth-of-type(1){
background-color: red;
}
li:nth-of-type(2){
background-color: green;
}
li:nth-of-type(3){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>水平排版元素1</li>
<li>水平排版元素2</li>
<li>水平排版元素3</li>
</ul>
</body>
</html>
使用display:flex;弹性盒子水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display: inline-block;水平排版</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style-type: none;
display: flex;/*默认子元素会自动生长和收缩*/
}
li{
width: 33.33%;
}
li:nth-of-type(1){
background-color: red;
}
li:nth-of-type(2){
background-color: green;
}
li:nth-of-type(3){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>水平排版元素1</li>
<li>水平排版元素2</li>
<li>水平排版元素3</li>
</ul>
</body>
</html>
（九）弹性盒子常用属性
弹性盒子是 CSS3 的一种新的布局模式。
| 属性 | 说明 |
|---|---|
| display:flex、inline-flex; | 对上级父容器使用，使其子元素成为弹性子元素 |
| flex: auto、initial、none、[ flex-grow ]、[ flex-shrink ]、[ flex-basis ] | 对弹性子元素使用，设置弹性子元素的生长、收缩、比例等属性 |
| flex-direction: row、row-reverse、column、column-reverse | 对上级父容器使用，指定弹性子元素水平排版还是垂直排版 |
| justify-content: flex-start、flex-end、center、space-between、space-around | 对上级父容器使用，设置弹性子元素水平分布 |
| align-content: flex-start、flex-end、center、space-between、space-around、stretch | 对上级父容器使用，设置弹性子元素垂直分布 |
（十）css预编译器scss、less、stylus
都是css预处理器。进行Web页面样式设计，然后再编译成正常的CSS文件，无需考虑浏览器的兼容性问题。
（十一）css中link与@import区别
link是HTML标记，在HTML文档中使用，可以引入包括CSS的多种样式和脚本，当解析到link时，页面会同步加载所引的css。
@import是CSS属性，在CSS样式表中使用，只能引入其他CSS样式表，@import所引用的css会等到页面加载完才被加载。
JS面试题
（一）JS中const,var,let的区别
- const定义的变量不可以修改，不可以重复定义同一个变量，而且必须初始化
- var定义的变量可以修改，可以重复定义同一个变量，如果不初始化会输出undefined，不会报错
- let是块级作用域，函数内部使用let定义后，对函数外部无影响，不可以重复定义同一个变量
（二）JS中Object.defineProperty()方法
参考资料Object.defineProperty() - JavaScript | MDN
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的
注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。
Object.defineProperty(obj, prop, descriptor)
参数
- obj - 被定义或修改属性的对象。
- prop - 要定义或修改的属性的名称或Symbol 。
- descriptor - 要定义或修改的属性描述符。
- 有两种描述符：数据描述符和存取描述符
描述符
- 数据描述符 - 使用value属性设置值
- 存取描述符 - 使用getter 函数和 setter 函数设置值
两种描述符都是对象。它们共享以下可选参数
| 参数 | 描述 |
|---|---|
| configurable | 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。 |
| enumerable | 当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。 |
| value | 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。 |
| writable | 当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。默认为 false。 |
| get | 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。默认为 undefined。 |
| set | 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined。 |
两种描述符可拥有的参数
| configurable | enumerable | value | writable | get | set | |
|---|---|---|---|---|---|---|
| 数据描述符 | 可以 | 可以 | 可以 | 可以 | 不可以 | 不可以 |
| 存取描述符 | 可以 | 可以 | 不可以 | 不可以 | 可以 | 可以 |
数据描述符案例
const data = {}; //创建data对象
//数据描述符
Object.defineProperty(data, "value", {
value: 100,
writable: true,//能通过赋值运算符“=”改变值
enumerable: true,//该属性会出现在对象的枚举属性中
configurable: true//表示该属性能被修改和删除
});
console.log(data.value)//100
data.value = 200;//通过赋值运算符“=”改变值
console.log(data.value)//200
存取描述符案例
const data = {}; //创建data对象
//数据描述符
Object.defineProperty(data, "input", {
get(){
return this.value;
},
set(v){
this.value = v;
},
enumerable: true,//该属性会出现在对象的枚举属性中
configurable: true//表示该属性能被修改和删除
});
console.log(data.input) //undefinded
data.input = 200;//通过赋值运算符“=”改变值
console.log(data.input)//200
（三）MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC （Model-View- Controller）的改进版。
两个方向：
- 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
- 二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个方向都实现的，我们称之为数据的双向绑定。
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信。
ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动。
（四）JS中实现简单input双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入框双向绑定</title>
</head>
<body>
<input id="input" />
</body>
<script type="text/javascript">
//const定义的变量不可以修改，而且必须初始化
const input = document.querySelector("#input");
//创建data对象
const data = {};
//数据描述符，设置变量的值的时候更新输入框的值
Object.defineProperty(data, "input", {
get() {
return this.value;
},
set(v) {
this.value = v;
input.value = v;
},
enumerable: true, //该属性会出现在对象的枚举属性中
configurable: true //表示该属性能被修改和删除
});
data.input = 200;
//输入框改变的时候，修改变量的值
input.onkeyup = function(e) {
data.input = e.target.value;
console.log(data.input)
}
</script>
</html>
扫一扫
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
