html面试题answer

1，行内元素和块级元素。

块级元素:
占据父容器宽度整个空间，所以创建一个块。其前后另起新行，只在body。
不接受任何元素并列，可以设置宽，可以容纳内联元素和其他块元素。
行内元素：
display inline，也叫内联元素，只占据对应标签边框的空间。
可以与其他行内元素并排，不可以设置宽高，设置lineheight才可以水平有效。
通过设置inlineblock，融合其优点，通过设置父fontsize0，设置子fontsize消除间隙。

（1）行内元素有：<a> <b> <span> <img> <input> <select> <strong>
（2）块级元素有：<div><ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <h4>…<p>
（3）常见的空元素：<img><input><link><meta><br><hr>
鲜为人知的是： <area><base><col><command><embed><keygen><param><source><track><wbr>

2，img的alt和title

这个其实很简单。
简单来说就是alt是用文字代替图片的内容，必需属性。
而title是对图片的描述和注释，鼠标放上去就可以显示。

3，meta标签

标签永远位于 head 元素内部。

<meta charset='xxx'>：告诉浏览器页面的代码是用的xxx编码方式。
常见的就是UTF-8了。

标签有两个属性name和http-equiv。下面对这两个属性的常见值进行列举：

http-equiv属性：<meta http-equiv='参数' content='参数变量值'>
主要用来设置网页属性。

1.<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”>:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。
2.<meta http-equiv='expires' content='时间' >：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
3.<meta http-equiv=”Refresh” content=”5;URL”>：告诉浏览器在【数字】秒后跳转到【一个网址】
4.<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>：设定页面使用的字符集。
  <meta charset=”utf-8″>：在HTML5中设定字符集的简写写法。
5.<meta http-equiv=”Pragma” content=”no-cache”>：禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。
6.<meta http-equiv=”Window-target” content=”_top”>：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。
7.<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染，如果是双核浏览器就用chrome内核。

name属性：

<meta name='参数' content='具体的参数值'>
主要用来设置搜索引擎的信息。

1.<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>：在移动设备浏览器上，禁用缩放（zooming）功能，用户只能滚动屏幕。
2.<meta name=”description” content=””>：告诉搜索引擎，当前页面的主要内容是xxx。
3.<meta name=”keywords” content=””>：告诉搜索引擎，当前页面的关键字。
4.<meta name=”author” content=””>：告诉搜索引擎，标注网站作者是谁。
5.<meta name=”copyright” content=””>：标注网站的版权信息。

4，DOCTYPE标签：

我们都知道HTML是超文本标记语言，有对应的语法标准。那么
DOCTYPE 即 Document Type，网页文件的文档类型标准。
主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。
DOCTYPE 需要放置在 HTML 文件的 标签之前。
其中的标准模式：standards model和混杂模式Quirks Mode。

!doctype html 的作用就是让浏览器进入标准页面渲染模式，使用W3C的标准解析渲染页面，浏览器以其支持的最高标准呈现页面；
如果不写，浏览器就会进入怪异页面渲染模式，浏览器使用自己的怪异模式解析渲染页面，页面以一种比较宽松的向后兼容的方式显示，我们需要避免此类情况发生。
有什么区别呢?

1，盒子模型：在标准模式下IE盒模型（content（宽高） + 填充padding + 边框border + 边距margin），怪异模式下（content + maring）而content区域包括了（content，padding，border）
而在css3中可以通过 box-sizing来控制盒模型content-box, padding-box, border-box
2，行内元素的高度：标准模式下不生效，怪异模式下会生效
3，margin： 在标准模式下margin: 0 auto; 会水平居中，怪异模式下不会.

5,js延迟加载的6个方式：

js延迟加载就是等页面加载完成之后在加载js文件。
一般有六种方式；defer属性、async属性、动态创建dom方式、使用jquery的getScript方法、使用setTimeout延迟方法、让js最后加载。

其中：
（1）defer属性

HTML 4.01为

其用途是：表明脚本在执行时不会影响页面的构造，浏览器会立即下载，但延迟执行，即脚本会被延迟到整个页面都解析完毕之后再执行。

defer属性只适用于外部脚本文件，只有 Internet Explorer 支持 defer 属性。

并且defer属性解决了async引起的脚本顺序问题，使用defer属性，脚本将按照在页面中出现的顺序加载和运行。

示例1：

//脚本1
<script defer src="js/vendor/jquery.js"></script>
//脚本2
<script defer src="js/script2.js"></script>
//脚本3
<script defer src="js/script3.js"></script>

上述代码添加 defer 属性，脚本将按照在页面中出现的顺序加载，因此可确保脚本1必定加载于脚本2和 脚本3之前，同时脚本2必定加载于脚本3之前。

（2）asys属性
async属性：HTML 5为 <script>标签定义了async属性。
添加此属性后，脚本和HTML将一并加载（异步），代码将顺利运行。

浏览器遇到async脚本时不会阻塞页面渲染，而是直接下载然后运行。但这样的问题是，不同脚本运行次序就无法控制，只是脚本不会阻止剩余页面的显示。

async属性只适用于外部脚本文件。

示例：

//脚本1
<script async src="js/vendor/jquery.js"></script>
//脚本2
<script async src="js/script2.js"></script>
//脚本3
<script async src="js/script3.js"></script>

上述代码添加async 属性，这三者的调用顺序是不确定的，脚本1可以在脚本2和脚本3之前会之后调用，这是完全不确定的。如果脚本2和脚本3需要依赖脚本1中的函数，那么不确定的调用顺序会导致错误。（补充：异步脚本一定会在页面的load事件前执行，但可能会在DOMContenterLoaded事件触发之前或之后执行）

所以，当页面的不同脚本之间彼此独立，且不依赖于本页面的其他任何脚本时，async是最理想的选择。

总结：

总结：defer和async的异同点

相同：

1、加载文件时不会阻塞页面渲染
2、对于内部的js不起作用
3、使用这两个属性的脚本中不能调用document.write方法
区别：
1、如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。也就是每一个async属性的脚本都在它下载结束之后立即执行，同时会在window的load事件之前执行。
2、如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中

（3）动态创建dom

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload(){
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element); 
}
if (window.addEventListener) //添加监听事件
    window.addEventListener("load",downloadJSAtOnload,false);   //事件在冒泡阶段执行
else if (window.attachEvent) 
    window.attachEvent("onload",downloadJSAtOnload);
else 
    window.onload =downloadJSAtOnload;
</script>

（4）使用jquery的getScript方法

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法：jQuery.getScript(url,success(response,status))

url（必写）：将要请求的 URL 字符串

success(response,status)（可选）：规定请求成功后执行的回调函数。

其中的参数

response - 包含来自请求的结果数据

status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

//加载并执行 test.js：
$.getScript("test.js");
//加载并执行 test.js ，成功后显示信息
$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

（5）使用setTimeout延迟方法

<script type="text/javascript">
  function A(){
    $.post("/lord/login",{name:username,pwd:password},function(){
      alert("Hello World!");
    })
  }
  $(function (){
    setTimeout("A()",1000); //延迟1秒
  })
</script>

（6）简单的=>让js最后加载：

将脚本元素放在文档体的底端（标签前面），这样脚本就可以在HTML解析完毕后加载了。但此方案的问题是，只有在所有HTML DOM加载完成后才开始脚本的加载/解析过程。对于有大量js代码的大型网站，可能会带来显著的性能损耗。

6，重排和重绘

重排(reflow)：
当我们更新了元素的几何属性，那么浏览器需要重新计算元素的几何属性，将其放在正确位置，这个过程叫做重排，也称为“回流”。

eg：我们通过JS或CSS修改了元素的宽度和高度，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。

原理:渲染树的节点发生改变，影响了该节点的几何属性，导致该节点位置发生变化，此时就会触发浏览器重排并重新生成渲染树。重排意味着节点的几何属性改变，需重新计算并生成渲染树，导致渲染树的全部或部分发生变化。重排需要更新完整的渲染流水线，所以开销也是最大的。

任何会改变元素的位置和尺寸大小的操作，都会触发重排。常见的例子:

添加或删除可见的DOM元素
元素尺寸改变
内容变化，比如在input框中输入文字
浏览器窗口尺寸改变
计算offsetTop、offsetLeft等布局信息
设置style属性的值
激活CSS伪类，例如 :hover
查询某些属性或调用某些方法

WHY?
大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制清空队列，因为队列中，可能会有影响到这些值的操作，为了给我们最精确的值，浏览器会立即重排+重绘

重绘(repaint):
更新了元素的绘制属性，但没有改变布局，重新把元素外观绘制出来的过程叫做重绘。
eg:更改某些元素的背景颜色。
重绘并没有引起元素几何属性的改变，所以就直接进入绘制阶段，然后执行之后的一系列子阶段。

对比：
和重排相比，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。

重排一定会伴随重绘，重绘却不一定伴随重排。
所以我们应该怎么优化呢？
使用visibility:hidden替换display:none

通过下面四个方面来看看两者有什么区别：

占位表现
display:none：不占据空间
visibility:hidden：占据空间
触发影响
display:none：触发重排重绘
visibility:hidden：触发重绘
过渡影响
display:none：影响过渡不影响动画
visibility:hidden：过渡和动画都不影响
株连效果
display:none：自身及其子节点全都不可见
visibility:hidden：自身及其子节点都不可见，但可声明子节点visibility:visible单独显示

避免使用Table布局

Table布局可能很小的一个改动就会造成整个table重排。

通常可用 ul、li、span等标签取代 table 系列标签生成表格

注意！避免设置多层内联样式
浏览器的CSS解析器解析css文件时，对CSS规则是从右到左匹配查找，样式层级过多会影响重排重绘效率。

<style>
  span {
    color: red;
  }

  div > a > span {
    color: red;
  }
</style>

<div>
  <a href="https://www.baidu.com">
    <span>百度搜索</span>
  </a>
</div>

对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的 span 标签然后设置颜色。
但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的 span 标签，然后找到 span 标签上的 a 标签，最后再去找到 div 标签，然后给符合这种条件的 span 标签设置颜色，这样的递归过程就很复杂。
所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。

7，引入css样式方法区别：

1、直接在div中使用css样式制作div+css网页
（加载速度快，但是不易于维护，复用性差，不利于优化）

2、html中使用style自带式
（加载速度快，但是不易于维护，复用性差，不利于优化）

3、使用@import引用外部CSS文件
（会等到页面全部被下载完再被加载、只有在IE5以上的才能识别、DOM不可控制、只能引入31次css文件）
4、使用link引用外部CSS文件（推荐此方法）
（易于维护、可复用、利于抓取（源代码量少，抓取速度快）、分线程加载（页面打开速度快））

8，href和src定义和区别：

src和href都是用于外部资源的引入，像图片、CSS文件、HTML文件、js文件或其他web页面等。
但是：它们之间的主要区别可以用这样一句话来概括：
*src用于替代这个元素，
而href用于建立这个标签与外部资源之间的关系。

<link href="style.css" rel="stylesheet" />

浏览器知道这是个样式表文件，html的解析和渲染不会暂停，css文件的加载是同时进行的，这不同于在style标签里面的内置样式，用@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。所以我们建议使用link而不是@import。

<script src="script.js"></script>

当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件。这就像是把js文件里的内容全部注入到这个script标签中，类似于img，img标签是一个空标签，它的内容就是由src这个属性定义，浏览器会暂停加载直到这个图片加载完成。这也是为什么要将js文件的加载放在body最后的原因（在前面）。

9，创建dom元素方法

document.createElement(elemengTagName)用来创建一个元素，返回该新建元素的引用。
需要注意参数是标签的名称。在jq中我们可以这样创建一个元素

var node = $('<div>');
var node2 = $('<span id="s"></span>');

使用原生的我们必须传入元素的标签名称，不能像jq中那么灵活。如：

var node = document.createElement('div');

添加新元素有两个方法可以向DOM树中添加新元素，分别是appendChild(newElement)和insertBefore(newElement,beforeWhichElement)。

appendChild（）向一个元素添加子节点，追加在尾部，如在body中追加一个元素：

var node = document.createElement('div');
node.innerHTML = '新添加的节点';
document.body.appendChild(node);

10，双栏布局和三栏布局

flex布局
利用flex属性，左侧固定宽度，右侧自适应

<div className='parent'>
  <div className='child1'></div>
  <div className='child2'></div>
</div>

.parent {
  display: flex;
}
.child1 {
  width: 200px;
  height: 50px;
  background-color: cornflowerblue;
}
.child2 {
  flex: 1;
  height: 50px;
  background-color: cyan;
}

Grid布局
设置父元素display: grid, grid-template-columns指定页面分成两列。
第一列的宽度是minmax(150px, 150px)，即最小宽度为150px，最大宽度为总宽度的150px；
第二列为 1fr，即所有剩余宽度

<div className='grid'>
  <div className='gridLeft'>left</div>
  <div className='gridRight'>right</div>
</div>
.grid {
  display: grid;
  grid-template-columns: minmax(150px, 150px) 1fr;
}
.gridLeft {
  background-color: darkgreen;
}
.gridRight {
  background-color: darkolivegreen;
}

左浮动float + 右float（width: calc(100% - width)）
左侧左浮动；右侧右浮动宽度使用calc()计算

<div style={{overflow: 'hidden'}}>
  <div className='f3'></div>
  <div className='f4'></div>
</div>

.f3 {
  float: left;
  width: 120px;
  height: 40px;
  background-color: darkblue;
}
.f4 {
  float: right;
  width: calc(100% - 120px);
  height: 40px;
  background-color: darkgreen;
}

三栏布局：
//浮动三杯布局 注意：中间模块不要放在两个浮动元素中间，块元素会造成center占据整行，无法实现效果

  <section class="layout float">
    <article class="float-contain">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <span>
          浮动布局-自适应展示模块测试
        </span>
      </div>
    </article>
  </section>
    <style>
      .float-contain div{
        height: 100px;
      }
      .float-contain .left{
        width: 300px;
        float: left;
        background-color: aqua;
      }
      .float-contain .right{
        width: 300px;
        float: right;
        background-color: brown;
      }
      .float-contain .center{
        background-color: cornflowerblue;
      }
      
    </style>

<!-- 网格布局实现 -->
<section class="layout grid">
  <article class="grid-contain">
    <div class="left"></div>
    <div class="center">
      <span>
        grid网格化布局-自适应展示模块测试
      </span>
    </div>
    <div class="right"></div>
  </article>
</section>
  <style>
    .grid-contain{
      margin-top: 20px;
      width: 100%;
    }
    .grid-contain{
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px
    }
    .grid-contain .left{
      background-color: aqua;
    }
    .grid-contain .center{
      background-color: brown;
    }
    .grid-contain .right{
      background-color: cornflowerblue;
    }
  </style>

10，水平居中垂直的方法：

附：只需要设置padding:25% 0;这样就让高度变成了宽度的一半。

<div id="container">
    <div id="box">
    </div>
</div>

flex

/* 1. flex */
#container {
    display:flex;
    justify-content:center;
    align-item:center;
}

absolute + margin auto

/* absolute + margin auto */
#container {
    position:relative;
}
#box {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100px;
    height:100px;
    margin:auto;
}

absolute+负margin
/* absolute+负margin */

#container {
    position:relative;
}
#box {
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    margin-left:-50px;
    height:100px;
    margin-top:-50px;
}

希望对你们有用哦