笔试笔试面试题 1. css选择器有哪些？哪些样式可以继承？选择器：标签选择器类选择器 ID选择器通配符选择器

笔试面试题

1. css选择器有哪些？哪些样式可以继承？

选择器：标签选择器类选择器 ID选择器通配符选择器后代选择器子代选择器伪类选择器

案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
</head>
<body>
   <!-- 标签 -->
   <span>哈哈</span>
   <!-- 类 -->
   <p class='title'>文字</p>
   <!-- ID -->
   <p id='box'>ID文字
     <!-- 后代 -->
     <span>子类</span>
     <b>子类B</b>
   </p>
</body>
</html>

// 标签选择器
span{
  color:red;
}
// 类选择器
.title{
  color:red;
}
// ID选择器
#box{
  color:red
}
// 通配符选择器  (全局)
*{
    margin:0;
    padding:0；
}
// 后代选择器
#box span{
  font-size:14px;
}
// 子代选择器
#box>b{
  color:#ff6;
}

// 伪类选择器  滑过盒子加颜色+宽高
#box:hover{
 width:100px;
 height:100px;
 background:skyblue;
}

继承：

字体

font-family(字体样式) font-weight(字体加粗) font-size(字体大小) font-variant(显示文本)

文本

text-align(水平对齐) line-height(行高) word-spacing(字间距) text-transform(动画)

不常用

visibility(垂直对齐) border-collapse(边界塌陷) border-spacing(边界间距) list-style(列表样式)

2.css选择器优先级顺序？

！important 10000权重
行内样式/内联样式(style="") 1000权重
id选择器(#id) 100权重
class选择器(类选择器class、属性选择器a[href]、伪类选择器：hover) 10权重
通配符选择器* 0权重
浏览器的自定义属性和继承

3.html5的新特性有哪些？写出不低于5种？

语义化标签: header main section nav footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签</title>
</head>
<body>
     <header>头部</header> 
     <main>主体
       <nav>导航</nav>
     </main> 
     <section>中间</section> 
     <footer>底部</footer> 
</body>
</html>

视频音频： video audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频</title>
</head>
<body>
        <!-- 音乐标签 -->
        <audio src="../mp3/黑月光.mp3" autoplay ></audio>
        <!-- 视频标签 -->
        <video src="../mp5/海绵宝宝.mp5" autoplay ></video>
</body>
</html>

数据存储： localStorage sessionStorage

// 存值  关闭浏览器数据不会删除
localStorage.setItem('name'，13213)
// 存值  关闭浏览器数据删除
sessionStorage.setItem('name','nii')

地理位置： getLocation

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>getLocation</title> 
</head>
<body>
        <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
        <button onclick="getLocation()">点我</button>
        <div id="mapholder"></div>
</body>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

<script>
    var x=document.getElementById("demo");
    function getLocation(){
        if (navigator.geolocation){
           navigator.geolocation.getCurrentPosition(showPosition,showError);
        }else{
           x.innerHTML="该浏览器不支持获取地理位置。";
        }
    }
</script>
</html>

表单控件： date time email url search

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input</title>
</head>
<body>
       <!--input新增属性 -->
        <input type='date' />
        <input type='time' />
        <input type='email' />
        <input type='url' />
        <input type='search' />
</body>
</html>

4.html中行内元素和块级元素有什么区别？每种写出不少于5个?

1.行内元素在一条水平线上排列块级元素独占一行

2.行内元素不可以设置宽高，块级元素可以设置宽高

3.行内不能包含块级元素 a元素例外，它可以包含块级元素，例如div 只能容纳文本和其他行内元素块级可以包含行内和块级元素也可以容纳内联和其他元素

4.行内设置margin上下无效 padding上下无效只有左右有效块级元素外边距内填充都可随意控制

5.js的数据类型有哪些？如何判断是否为此类型？

基础类型
String(字符串) Undefined(未定义) Null(空) Number(数字) boolean(布尔) Symbol(ES6新增，独一无二) BigInt(ES6新增，数字类型)
引用类型
array(数组) function(函数) object(对象) 普通对象数组对象正则对象日期对象 Math数学函数对象
检测数据类型
typeof(检测基础类型) instanceof(检测引用类型) constructor(除了null和undefined其他都能检测) object.prototype.tostring.call(使用Object对象原型方法toString来判断数据类型)

6.forEach、for in、for of的区别

对象

for in可以枚举对象，循环打印出来的是对象的key值
for of 不可以对对象进行循环，会报错，具有iterator接口的，才可以用for of 遍历它的成员，如果想循环对象，就必须在其 Symbol.iterator 的属性上部署遍历器生成方法(或者原型链上的对象具有该方法)
forEach 报错不能对对象进行遍历

数组

for…of…是输出数组值
for…in…是输出索引值

原型对象

for of不会输出数组的原型对象
for in 不仅返回的是数组的下标，而且将数组的原型对象以及数组对象本身属性值都会返回
使用forEach可以输出索引值和数组值，而且不会输出数组的原型对象

是否可以break

forEach不能中断执行
for of、for in 可以使用break

7.==和===的区别？

两者都是判断等式两边是否相等，最大的区别就是==会进行类型的转换之后再判断两者是否相等，而===不会进行数据类型的转换，先判断两边的数据类型是否相等，如果数据类型相等的话才会进行接下来的判断，再进行等式两边值得判断，可以理解为只有等式两边是全等（数据类型相同，值相同）的时候结果才会是true，否则全为false

8.v-show和v-if指令的共同点和不同点？

共同点

都可以通过条件动态控制元素的显示或隐藏。
都需要提供一个条件表达式。

不同点

v-if 是完全删除或插入元素，如果元素不需要显示，那么它不会在 DOM 中存在，对于频繁切换的元素性能更好；
v-show 是通过控制元素的 display 样式来控制元素的显示或隐藏，性能比 v-if 稍差，但更适合不频繁切换的元素。

9.vue中为何 v-for要用key？如果不用会产生什么影响？

key可以标识组件的唯一性，为了更好区别各个组件 key的作用主要是为了高效的更新虚拟dom保持数据的唯一

不绑定会导致所有列表DOM重新渲染

10.let,const,var 有什么区别？

var 声明的范围是函数作用域，let 和 const 声明的范围是块作用域
var 声明的变量会被提升到函数作用域的顶部，let 和 const 声明的变量不存在提升，且具有暂时性死区特征
var 允许在同一个作用域中重复声明同一个变量，let 和 const 不允许
在全局作用域中使用 var 声明的变量会成为 window 对象的属性，let 和 const 声明的变量则不会
const 的行为与 let 基本相同，唯一一个重要的区别是，使用 const 声明的变量必须进行初始化，且不能被修改