前端基础面试题

1.什么是web语义化,有什么好处

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。

HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构

css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义

2.为什么需要语义化：

去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面，有利于收录
便团队项目的可持续运作及维护

简述一下src与href的区别

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

3.请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

4.div+css与table布局的有何区别？

答: div+css:布局简洁明了，使用方便，相对于表格来说更容易搜索的到！优化程度高点。不易出现错误或者不可控！样式繁多，易控易修改。
Table: 表格布局不建议使用，这个算是快要被淘汰的一种布局方式。布局不容易调整和规划。容易失控。大部分都不能使用太多样式。

5.如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽
#div1{
    background-color:#6699FF;
    200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
    }
 
//方法二:未知元素的高宽
 
  #div1{
     200px;
    height: 200px;
    background-color: #6699FF;
 
    margin:auto;
    position: absolute;        //父元素需要相对定位
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }

6.行内元素有哪些，块级元素有哪些，空元素（单标签）有哪些，请举例说明，每种至少3个？

行内元素：<a>,<span>,<i>,<em>,<strong>,<label>,<code>,<img>,<input>,<select>,<textarea>,<button>

块级元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<form>

空元素（单标签）：<br>,<hr>,<img>,<input>,<link>,<meta>

7.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

8.css清除浮动的几种方式？

1、父级div定义 height
2、结尾处加空div标签 clear:both
3、父级div定义伪类:after 和 zoom
4、父级div定义 overflow:hidden
5、父级div定义 overflow:auto
6、父级div 也一起浮动
7、父级div定义 display:table

9.计算一个数组arr所有元素的和
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
   if (typeof arr1[i]=="number") {
   sum1+=arr1[i];
   }
}
document.write(sum1);
//====================================

function sum2(arr){
   var all=0;
   for (var i=0;i<arr.length;i++) {
       if (typeof arr[i]=="number") {
       all+=arr[i];
       }
   }
       return all;
}
document.write(sum2([1,2,3,4]));

10.使用正则表达式验证邮箱格式

var reg = /^(w)+(.w+)*@(w)+((.w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email));  // true

11.写出一个方法，可以数组去重

方法一：构建一个新的数组存放结果;for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比;若结果数组中没有该元素，则存到结果数组中.

<script>
               function unique(arr){
                   var result=[];//用来存放查找的元素
                   for(var i=0;i<arr.length;i++){//外层循环遍历arr[i]
                       for(var j=0;j<result.length;j++){//内层循环遍历新的数组
                           if(arr[i]==result[j]){//如果相等 表示arr[i]在新的数组中已经存在不继续执行
                               break;
                           }
                       }
                       if (j==result.length) {//如果j==新数组的长度，表示遍历新数组后没有找到一样的
                           result[result.length]=arr[i];
                       }
                   }
                   return result;
               }
               function testunique(){
                   arr[i] = [1,2,3,4,3,5,6,4,3,2,3];
                   var result=unique();
                   console.log(result);
               }
       </script>

方法二：

　　先将数组进行排序，排序之后重复数组会在相邻的位置，然后检查数组第一个和最后一个元素是否相同，如果不相同，就把元素放进新的数组中去。

　　这种方案改变了元素本来的顺序，是排序过后的数组。

function unique(){
          var arr= [1,2,3,4,3,5,6,4,3,2,3];
          var result = [];//存放结果数组
          arr = arr.sort();
          // console.log(arr);
          for(var i=0;i<arr.length;i++){
              if(arr[i]!= result[result.length-1]){
                  result.push(arr[i]);
              }
          }
          console.log(result);
      }

第三种方法（推荐方法）

function unique(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
    for (var j = i+1; j < arr.length; j++) {
      if(arr[i]===arr[j]){
        ++i;
      }
    }
      hash.push(arr[i]);
  }
  return hash;
}

for循环嵌套，利用splice去重

function newArr(arr){
    for(var i=0;i<arr.length;i++){
        for(var j=i+1;j<arr.length;j++)
            if(arr[i]==arr[j]){ 
            //如果第一个等于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
            }
        }
    }
    return arr;
}
 
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
 
console.log(newArr(arr))

ES6中利用Set去重

function newArr(arr){
    return Array.from(new Set(arr))
}
 
var arr = [1,1,2,9,6,9,6,3,1,4,5];
 
console.log(newArr(arr))