html小知识点浏览器在执行HTML的时候如果遇到<script>时会停止页面的渲染,去下载和执行js的文件直接遇见</

一、`<script>、<script defer> 以及 <script async>`的区别，以及适用场景

浏览器在执行HTML的时候如果遇到<script>时会停止页面的渲染,去下载和执行js的文件直接遇见</scirpt>会继续渲染页面。故浏览器在执行js文件的时候浏览器表现为一片空白,为了解决这个问题ECMAScript定义了defer和async两个属性用于控制JS的下载和执行

defer

这个属性的用途是表面脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script> 元素中设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。

HTML5规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded时间触发前执行，因此最好只包含一个延迟脚本。

对于defer，我们可以认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照原本的js的顺序执行.

async

这个属性与defer类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照他们的先后顺序执行。

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。

和defer一样，会等待的资源不会阻塞其余资源的加载，也不会影响页面的加载。但是有一点需要注意下，在有async的情况下，js一旦下载好了就会执行,也就是如果有多个js，谁先加载完就先执行谁，所以很有可能不是按照原本的顺序来执行的。如果js前后有依赖性，用async，就很有可能出错。

总结：

这两个属性都会使script标签异步加载，然而执行的时机是不一样的。

也就是说async是乱序的，而defer是顺序执行的，这也就决定了async比较适用于百度分析或者谷歌分析这类不依赖其他脚本的库。从图中可以看到一个普通的<script>标签的加载和解析都是同步的，会阻塞DOM的渲染，这也就是我们经常会把<script>写在 <body>底部的原因之一，为了防止加载资源而导致的长时间白屏，另一个原因是js可能会进行DOM操作，所以要在DOM全部渲染完后再执行。

async比较适用于百度分析或者谷歌分析这类不依赖其他脚本的库,如下：

    <!-- Global site tag (gtag.js) - AdWords: xxxxxx -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-xxxxxx"></script>
    <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-xxxxxx');</script>
    <!-- Global site tag (gtag.js) - AdWords: xxxxxx -->

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-{( $pageGlobal.GTMID )}');</script>
    <!-- End Google Tag Manager -->

《WebKit技术内幕》：
1. 当用于输入网页URL的时候，WebKit调用其资源加载器加载该URL对应的网页。
2. 加载器依赖网络模板建立连接，发送请求并接受答复。
3. WebKit接收到各种网页或者资源的数据，其中某些资源可能是同步或异步获取的。
4. 网页被交给HTML解释器转变成一系列的词语（Token）。
5. 解释器根据词语构建节点（Node）,形成DOM树。
6. 如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
7. JavaScript代码可能会修改DOM树的结构。
8. 如果节点需要依赖其他资源，如图片、css、视频等。调用资源加载器来加载他们，但是他们是异步的，不会阻碍当前DOM树的继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。

所以，通俗来讲，chrome浏览器首先会请求HTML文档，然后对其中的各种资源调用相应的资源加载器进行异步网络请求，同时进行DOM渲染，直到遇到<script>标签的时候，主进程才会停止渲染等待此资源加载完毕然后调用V8引擎对js解析，继而继续进行DOM解析。我的理解如果加了async属性就相当于单独开了一个进程去独立加载和执行，而defer是和将<script>放到<body>底部一样的效果。

最稳妥的办法还是把<script>写在<body>底部，没有兼容性问题，没有白屏问题，没有执行顺序问题。参考

可以看一下目前的smarty项目，项目中的script标签应该是插入在了所有scprit标签的最下边。

二、 `title`与 `h1`的区别、 `b`与 `strong`的区别、 `i`与 `em`的区别

title与 h1的区别

title 是网站 header 部分的内容，是网站的标题，而 h 表示 body内的标题

b与 strong的区别

从视觉效果上看是没有区别的 <b>是一个格式，bold，格式本身为粗体文本，是一个字体加粗标签，没有语义强调的意思。 <strong>是强调语气，强调部分重要的语句以及字体，默认效果是通过字体加粗来表示语义强调。 3. i与 em的区别

em单纯斜体，i没有实际意义搜索引擎更好抓取。都是在网页中以斜体显示的，但em的目的是出自强调。

<em>是单词emphasis(强调)的缩写，<i>是italic(斜体字)的缩写，推荐使用<em>标签。

从视觉效果上看，b与strong、i与em是没有区别的，唯一的区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

三、data- 属性的用法（如何设置，如何获取），有何优势

设置方法

a.直接在标签内书写，格式如下

<div id="test" data-age="24">
    Click Here
</div>

b.用js设置

方法一
var test = document.getElementById('test');
test.dataset.my = 'fruit'

方法二
test.setAttribute('data-name','bro')

推荐使用dataset
貌似setAttribute性能更好，但在处理少量data数据时，基本没有区别。切dataset更具有可读性。因此dataset操作是上选。

效果

<div id="test" data-age="24" data-my="fruit" data-name="bro">
    Click Here
</div>

2.获取方法

var test = document.getElementById('test')
test.dataset.my = 'Byron'
test.setAttribute('data-name','fruit')
test.onclick = function () {
    alert(this.dataset.my + ' '+ this.getAttribute('data-name') + ' ' + this.dateset.age )
}

四、`<noscript>` 标签

noscript 用来定义在脚本未被执行时的替代内容（文本）。

此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。

<body>
  <script type="text/javascript">
    document.write("Hello World!")
  </script>
  <noscript>Your browser does not support JavaScript!</noscript>
</body>

以上代码，当浏览器不支持脚本，则会显示Your browser does not support JavaScript!

此功能也可用于统计浏览器对脚本的支持情况。如下:

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src='https://www.googletagmanager.com/ns.html?id=GTM-******'
          height='0' width='0' style='display:none; visibility:hidden;'>
  </iframe>
</noscript>

五、`HTML` 发展史及基础知识

HTML （Hypertext Markup Language）即超文本标记语言

1993年IETF（互联网工程工作小组）发布HTML1.0

1995年W3C(万维网联盟)发布HTML2.0

之后...不断完善HTML

2000年W3C发布XHTML1.0，并不断完善和标准化

2014年HTML5定稿

HTML特点：

HTML不需要编译，直接由浏览器运行。
HTML是一个文本文件
HTML文件必须使用html或htm为文件名后缀
HTML大小写不敏感，HTML与html一样

HTML基础语法：

HTML基础语法
HTML标签
HTML元素
HTML属性
注释

HTML基本结构：头部信息网页内容 html、head、body。body中为在网页中能看到的内容。
文档声明和META标签：当网页显示出乱码时，在head标签之间添加<meta http-equiv="Content-Type" content="text/html;chartset=utf-8" />为单标签

http-equiv="Content-Type": 文档类型

content="text/html;chartset=utf-8"：内容为html文件，编码形式为utf-8

meta的含义：网页的内容使用什么语言，使用什么编码形式。国内用的比较多的为utf-8、GB2312、gbk等编码。

<!DOCTYPE HTML>: 定义文档类型。在创建html文件之前，用DOCTYPE来声明文档类型。且必须放在文档的第一行。DOCTYPE声明不是HTML标签。

  在文档中输入空格

<pre></pre>:用于预定义格式显示文本，即文本在浏览器中显示时遵循在HTML源文档中定义的格式。

列表标签：

无序列表：<ul></ul>

有序列表：<ol></ol>

定义列表：<dl></dl> <dt></dt> <dd></dd>要组合使用。

图像和超链接标签：

图像标签： <img src="" alt="" width="" height=""/>

文字和段落标签

文字斜体：<i></i>、<em></em>

加粗：<b></b> 、<strong></strong>

下标：<sub>

上标：<sup>

特殊符号：

属性	显示结果	描述
`<`	<	小于号或显示标记
`>`	>	大于号或显示标记
`®`	®	已注册
`©`	©	版权
`™`	™	商标
` `	Space	不断行的空白

表格基本结构

<tabel>: 表格

<th>: 表头

<tr>: 行标签

<td>: 单元格。有几个就代表一行里有几个单元格。

colspan: 表格跨列属性

rowspan: 表格跨行属性

带标头的表格

<tabel>
  <tr>
    <th></th><th></th><th></th>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</tabel>

带标题的表格

<tabel>
  <caption></caption> // 标题
  <tr>
    <th></th><th></th><th></th>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</tabel>

带结构的表格

<tabel>
  <caption></caption> // 标题
  <thead>
    <tr>
      <th>表头</th><th></th><th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>主体</td><td></td><td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>脚注</td><td></td><td></td>
    </tr>
  </tfoot>
</tabel>

表单基本结构

<input>: 表单输入标签。<input>的type属性值:1、text文字域2、password密码域 3、file文件域 4、checkbox复选框 5、radio单选框 6、button按钮 7、submit提交按钮 8、reset重置按钮 9、hidden隐藏域 10、image图像域

<select>: 菜单和列表标签

<option>: 菜单和列表项目标签

<textarea>: 文字域标签

<optgroup>: 菜单和列表项目分组标签

<form action="url" method="post" target="" enctype="">
  表单元素
</form>

分组下拉菜单和列表标签

<form>
  <select>
      <optgroup label="组1">
          <option></option>
          <option></option>
      </optgroup>
      <optgroup label="组2">
          <option></option>
          <option></option>
      </optgroup>
  </select>
</form>

get与post的区别：

GET: 使用URL传递参数,对所发送信息的数量也有限制,一般用于信息获取

POST: 表单数据作为HTTP请求体的一部分，对所发送信息的数量无限制，一般用于修改服务器上的资源

enctype：在发送表单数据之前如何对其进行编码application/x-www-form-urlencoded、multipart/form-data、text/plain

搭建网页结构

<div>标签：是一个区块容器标记，可以包含段落、表格、图片等各种HTML元素。块级标签，占据一行，换行。

<span>标签：没有实际意义，为了应用样式。行内标签，在一行，不换行。

块级标签和行内标签：

块级标签：块级标签，占据一行，换行。包含：<div> <ul> <ol> <li> <dl> <dt> <dd> <h1>~<h6> <p> <form> <hr>等

行内标签：行内标签，在一行，不换行。包含：<b> <em> <img> <input> <a> <sup> <sub> <textarea> <span>等

标签嵌套规则：<ul><li></li></ul> <dl><dt></dt><dd></dd></dl>

块级元素可以包含行内元素和某些块级元素。
行内元素不能包含块元素，只能包含其他行内元素。
块级元素不能放在<p>标签内。
特殊块级元素只能包含行内元素，不能再包含块级元素。如h1~h6、 p 、dt
块级标签与块级元素并列，行内元素与行内元素并列。

先写大框架，再一点点细化。

html小知识点

一、<script>、<script defer> 以及 <script async>的区别，以及适用场景

二、 title与 h1的区别、 b与 strong的区别、 i与 em的区别

三、data- 属性的用法（如何设置，如何获取），有何优势

四、<noscript> 标签

五、HTML 发展史及基础知识

一、`<script>、<script defer> 以及 <script async>`的区别，以及适用场景

二、 `title`与 `h1`的区别、 `b`与 `strong`的区别、 `i`与 `em`的区别

四、`<noscript>` 标签

五、`HTML` 发展史及基础知识