HTML5

小咪咪 2022-06-12 06:18 249阅读 0赞

# HTML5 #

## 了解HTML5 ##

*  HTML5 是 HTML 标记语言的一个**最新版本**
 *  HTML5 制定了web应用开发的一系列标准, 成为第一个将web作为**应用开发平台**的HTML语言
 *  日常所得H5其实是一个泛称, 他指的是由`HTML5 + css3 + javascript`等技术组合而成的**应用开发平台**.
 *  HTML5 新增了一些元素, 如语义化的标签, 智能表单, 多媒体标签等.
 *  HTML5 提供了javascript API: 地理位置, 重力感应, 硬件访问, 结合css3制作动画等等.
 *  HTML5 默认的编码是`utf-8`, 可以大小写混写(**不推荐**)
 *  HTML5 是跨平台的

## 语法规范 ##

> 较之前相比**更简洁**, **更宽松**

*  HTML5 的优点:  
    
    
     *  提高可用性和改进用户的友好体验.
     *  新增的标签有益于开发人员定义重要的内容
     *  可以给站点带来更多的多媒体元素(音频和视频)
     *  可以很好的代替`FLASH`和`silverlight`
     *  涉及到网站抓取和索引的时候, 对SEO友好
     *  将被大量应用于移动应用程序和游戏
     *  可移植性好
 *  HTML5 的缺点  
    低版本的浏览器不支持, 很多标签浏览器支持效果不好, 也有安全漏洞.

### 语义化 ###

*  语义化标签: 语义元素清楚地向浏览器和开发者描述其意义.  
    传统的做法是添加语义化类名, 如`class="header"`, `class="footer"`等.  
    HTML5 则是通过标签语义化来解决这个问题.
 *  常用语义化标签
    
    <table> 
     <thead> 
      <tr> 
       <th align="center">标签</th> 
       <th align="center">语义</th> 
       <th>备注</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="center"><code>&lt;nav&gt;</code></td> 
       <td align="center">导航</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;header&gt;</code></td> 
       <td align="center">页眉</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;footer&gt;</code></td> 
       <td align="center">页脚</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;section&gt;</code></td> 
       <td align="center">区块</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;article&gt;</code></td> 
       <td align="center">文章</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;aside&gt;</code></td> 
       <td align="center">侧边栏</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;progress&gt;</code></td> 
       <td align="center">进度条</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;figure&gt;</code></td> 
       <td align="center">图形</td> 
       <td>与<code>&lt;figcaption&gt;</code>配合使用</td> 
      </tr> 
      <tr> 
       <td align="center"><code>&lt;figcaption&gt;</code></td> 
       <td align="center">元素的标题</td> 
       <td>与<code>&lt;figure&gt;</code>配合使用</td> 
      </tr> 
     </tbody> 
    </table>
    
    本质上与`<div>`, `<span>`没有区别, 但是其**具有语义性**  
    **尽量避免全局使用`header`, `footer`, `aside`等语义标签.**

### 兼容性 ###

*  IE8以及以下版本, HTML5新增的标签会被解析成`inline`, 所以**在 css 中要将其转换为块级元素(`block`)**, 在js代码中创建自定义的标签`document.createElement('tagName')`.
    
        <style> header{ height: 100px; background-color: orangered; /*在低版本的ie中,如果想要显示h5的新语义标签,需要设置为block*/ display: block; } </style>
        <script type="text/javascript"> // 使用代码创建header标签 document.createElement("header"); </script>
 *  在实际开发中, 使用第三方js库 `cc:ie6` (webstrom快捷键)
    
    html5shiv.min.js [下载地址][Link 1]

### 微数据 ###

在span, div等标签内添加属性, 让搜索引擎识别其含义.

> itemscope：声明你所要添加的属性的作用域，加在最外层的元素。  
> itemtype：声明所使用的词汇表，加在最外层的元素中。  
> itemprop：声明属性名，具体的内容要参加所引用的词汇表。  
> `html  <div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="reviewer">猪猪</span> <span itemprop="dtreviewed" datatime="2017-07-17T16:20:21">2017年7月17日16:20:48</span> <span itemprop="description"> 评论内容</span> </div>`  
> WAI-ARIA: 针对残障人士开发应用

## 表单 form ##

表单分组: `fieldset`  
分组名: `legend`

### 输入类型 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">类型</th> 
   <th align="center">使用示例</th> 
   <th align="center">含义</th> 
   <th align="center">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">email</td> 
   <td align="center"><code>&lt;input type="email"&gt;</code></td> 
   <td align="center">输入邮箱格式</td> 
   <td align="center">提交时会验证格式, 但不会验证内容是否为空</td> 
  </tr> 
  <tr> 
   <td align="center">tel</td> 
   <td align="center"><code>&lt;input type="tel"&gt;</code></td> 
   <td align="center">输入手机号码格式</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">url</td> 
   <td align="center"><code>&lt;input type="url"&gt;</code></td> 
   <td align="center">输入url格式</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">number</td> 
   <td align="center"><code>&lt;input type="number"&gt;</code></td> 
   <td align="center">输入数字格式</td> 
   <td align="center">step 步长</td> 
  </tr> 
  <tr> 
   <td align="center">search</td> 
   <td align="center"><code>&lt;input type="search"&gt;</code></td> 
   <td align="center">搜索框（体现语义化）</td> 
   <td align="center">手机端会显示键盘</td> 
  </tr> 
  <tr> 
   <td align="center">range</td> 
   <td align="center"><code>&lt;input type="range"&gt;</code></td> 
   <td align="center">自由拖动滑块</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">color</td> 
   <td align="center"><code>&lt;input type="color"&gt;</code></td> 
   <td align="center">拾色器</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">time</td> 
   <td align="center"><code>&lt;input type="time"&gt;</code></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">date</td> 
   <td align="center"><code>&lt;input type="date"&gt;</code></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">datetime</td> 
   <td align="center"><code>&lt;input type="datetime"&gt;</code></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">month</td> 
   <td align="center"><code>&lt;input type="month"&gt;</code></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">week</td> 
   <td align="center"><code>&lt;input type="week"&gt;</code></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

#### input 表单验证 ####

*  email 标签: 自带格式验证
    
    提交时会验证格式, 做出提示. 但是不会验证空文本
 *  required 属性: 非空验证
    
    直接添加 required 即可, 无需赋值
    
        <input type="tel" required>
 *  pattern 自定义验证规则
    
     *  在需要添加自定义的标签中添加 required
     *  使用 pattern 后的[正则表达式][Link 2]编写验证规则
    
        <input type="tel" required pattern="[0-9]{3}">
 *  自定义验证信息: 系统的提示信息只能够提示格式错误, 如果需要更为详细的提示内容则需要通过 javascript 自定义
    
     *  注册事件
     *  `oninput` 输入时
     *  `oninvalid` 验证失败时
     *  设置提示信息 `setCustomValidity("这里输入提示信息")`
    
        <form action="">
            email:<input type="email" name="userEmail">
            <br/>
            tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
            <br/>
            <input type="submit">
        </form>
        
        <script> var telInput = document.getElementById("telInput"); // 正在输入时 telInput.oninput=function () { this.setCustomValidity("请正确输入您的手机号码"); } // 验证失败时 telInput.oninvalid=function(){ this.setCustomValidity("您输入的手机号码不正确，请重新输入"); }; </script>

### 表单元素 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">元素</th> 
   <th align="center">含义</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>&lt;datalist&gt;</code></td> 
   <td align="center">数据列表</td> 
   <td align="left">datalist的id匹配input的list属性, 子元素是option</td> 
  </tr> 
  <tr> 
   <td align="center"><code>&lt;keygen&gt;</code></td> 
   <td align="center">生成加密字符串</td> 
   <td align="left">表单需要定义name属性</td> 
  </tr> 
  <tr> 
   <td align="center"><code>&lt;output&gt;</code></td> 
   <td align="center">输出结果</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="center"><code>&lt;meter&gt;</code></td> 
   <td align="center">度量器</td> 
   <td align="left">low, high, value, min,max</td> 
  </tr> 
 </tbody> 
</table>

\+ datalist

id 属性, 匹配 input 的list , 即要指定 `input的list=datalist的id`

option:

*  value: 指定具体的值
 *  label: 提示信息
    
    如果 `input` 的 `type` 为 `url` , `option` 中对应的 `value` 需要使用 `http` 开始
    
        网址:<input type="url" list="url_list" name="link"/>
        <datalist id="url_list">
          <option label="W3School" value="http://www.W3School.com.cn"/>
          <option label="Google" value="http://www.google.com"/>
          <option label="Microsoft" value="http://www.microsoft.com"/>
        </datalist>
        
        电话: <input type="tel" list="tel_list">
        <datalist id="tel_list">
          <option value="186xxx" label="移动">移动</option>
          <option value="187xxx" label="联通">联通</option>
          <option value="135xxx" label="天翼">天翼</option>
        </datalist>
    
     *  Keygen: 有兼容问题, 在chrome59 失败
     *

### 表单属性 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">使用示例</th> 
   <th align="center">含义</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">placeholder</td> 
   <td align="center"><code>&lt;input type="text" placeholder="请输入用户名"&gt;</code></td> 
   <td align="center">占位符</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="center">autofocus</td> 
   <td align="center"><code>&lt;input type="text" autofocus&gt;</code></td> 
   <td align="center">自动获得焦点</td> 
   <td align="left">页面中设置多个, 只有最后一个会获取焦点</td> 
  </tr> 
  <tr> 
   <td align="center">multiple</td> 
   <td align="center"><code>&lt;input type="file" multiple&gt;</code></td> 
   <td align="center">多文件上传</td> 
   <td align="left">多选</td> 
  </tr> 
  <tr> 
   <td align="center">autocomplete</td> 
   <td align="center"><code>&lt;input type="text" autocomplete="off"&gt;</code></td> 
   <td align="center">自动完成</td> 
   <td align="left">on/off, 提交过一次后才会出现</td> 
  </tr> 
  <tr> 
   <td align="center">form</td> 
   <td align="center"><code>&lt;input type="text" form="某表单ID"&gt;</code></td> 
   <td align="center"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="center">novalidate</td> 
   <td align="center"><code>&lt;form novalidate&gt;&lt;/form&gt;</code></td> 
   <td align="center">关闭验证</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="center">required</td> 
   <td align="center"><code>&lt;input type="text" required&gt;</code></td> 
   <td align="center">必填项</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="center">pattern</td> 
   <td align="center"><code>&lt;input type="text" pattern="\d"&gt;</code></td> 
   <td align="center">自定义验证</td> 
   <td align="left">正则</td> 
  </tr> 
 </tbody> 
</table>

## 多媒体 ##

*  HTML5 为解决使用 flash 的各种问题推出了多媒体标签
 *  由于格式问题, 不同浏览器对视频的格式支持不同, 需要准备多份视频
 *  无法对视频提供很好的版权保护, 用户可以直接对视频进行另存为

### 音频 ###

<audio [src=""] [autoplay][controls][loop]></audio>

<audio width="300" hight="200" controls autoplay>
      
      <source src="music/1.mp3">
      <source src="music/1.wav">
      <source src="music/1.wma">
      您的浏览器不支持HTML音频播放
    </audio>

### 视频 ###

<video width="300" [hight="200"] controls autoplay>
      
      <source src="mov/cz.mp4">
      <source src="mov/cz.ogg">
      您的浏览器不支持HTML视频播放
    </video>

### 常见多媒体事件 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><strong><code>oncanplay</code> </strong></td> 
   <td align="center">script</td> 
   <td align="left">当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。</td> 
  </tr> 
  <tr> 
   <td align="center"><strong><code>onended</code></strong></td> 
   <td align="center">script</td> 
   <td align="left">当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。</td> 
  </tr> 
  <tr> 
   <td align="center"><code>onerror</code></td> 
   <td align="center">script</td> 
   <td align="left">当在文件加载期间发生错误时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td align="center"><code>onpause</code></td> 
   <td align="center">script</td> 
   <td align="left">当媒介被用户或程序暂停时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td align="center"><code>onplay</code></td> 
   <td align="center">script</td> 
   <td align="left">当媒介已就绪可以开始播放时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td align="center"><code>onplaying</code></td> 
   <td align="center">script</td> 
   <td align="left">当媒介已开始播放时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td align="center"><strong><code>ontimeupdate</code></strong></td> 
   <td align="center">script</td> 
   <td align="left">当播放进度改变时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td align="center"><code>onvolumechange</code></td> 
   <td align="center">script</td> 
   <td align="left">每当音量改变时（包括将音量设置为静音）时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td align="center"><code>onwaiting</code></td> 
   <td align="center">script</td> 
   <td align="left">当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本</td> 
  </tr> 
 </tbody> 
</table>

### 案例 ###

## 进度条 ##

### progress ###

用来显示任务的进度

如果想用来显示 `度量值` 请使用`meter` 标签

*  属性  
    
    
     *  max: 总工作量
     *  value: 已完成工作量

### meter ###

通过属性的值搭配能够显示出多种不同的变化

*  属性  
    
    
     *  high
     *  low
     *  max
     *  min
     *  value

## DOM扩展 ##

### 获取元素 ###

*  `document.getElementsByClassName ('class')`
 *  `document.querySelector('selector')` 通过css选择器获取元素, 返回符合条件的**第一个**元素
 *  `document.querySelectorAll('selector')` 通过css选择器获取元素, 返回符合条件的**伪数组**

### 类名操作 ###

*  `Node.classList.add('class')`添加class
 *  `Node.classList.remove('class')`移除class
 *  `Node.classList.toggle('class')`切换class, 有则删除, 无则添加
 *  `Node.classList.contains('class')` 检测是否含有class

### 自定义属性 ###

**必须以`data-`开头**, 如data-name

//自定义属性的属性名为data-my-name
    box.dataset["myName"]; // 需要遵循驼峰命名

var dvObj=document.getElementById("dv");
    console.log(dvObj.dataset);//所有的自定义属性及值

### 其他API ###

#### 网络状态 ####

属性: `navigator.online`用户当前的网络状况, 返回值: `true`|`false`  
事件: `window.online`用户网络连接时被调用; `window.offline`用户网络断开时被调用  
“\`js  
window.addEventlistener(“online”, function()\{  
alert(“网络已连接”);  
\});  
window.addEventlistener(“offline”, function()\{  
alert(“网络已断开”);  
\});

var online=window.navigator.online;  
if(online)\{  
alert(“发送请求”);  
\}else\{  
alert(“发送失败了”);  
\}  
“\`

#### 全屏 ####

*  开启全屏显示
    
        Node.requestFullScreen()
        Node.webkitRequestFullScreen()
        Node.mozRequestFullScreen()
 *  关闭全屏显示
    
        Node.cancelFullScreen()
        Node.webkitCancelFullScreen()
        Node.mozCancelFullScreen()
 *  检测全屏显示
    
        document.fullScreen
        document.webkitIsFullScreen
        document.mozFullScreen

#### 文件本地读取 ####

通过`FileReader`对象可以读取本地储存的文件, 使用`File`对象来指定要读取的文件或数据.  
`FileReader`是HTML5 内置对象.  
属性: `result` 文件读取的结果.  
事件: `onload` 文件读取结束  
方法: `readAsDataURL()`, `readAsText()`  
“\`js  
var file = document.querySelector(“\#fl”);  
file.onchange = function () \{  
var fl = file.files\[0\];  
var fReader = new FileReader;  
fReader.readAsText(fl);

fReader.onload = function () {

// console.log(fReader.result);  
var result = fReader.result;

var dv = document.createElement("div");
      dv.innerHTML = result;
      document.querySelector("body").appendChild(dv);
    
    };

\};  
“\`

var file = document.querySelector("#fl");
      file.onchange = function () { 
        var fl = file.files[0];
        var fReader = new FileReader;
        fReader.readAsDataURL(fl);
    
        fReader.onload = function () { 
          // console.log(fReader.result);
          var result = fReader.result;
    
          console.log(result);
          var img = document.createElement("img");
          img.src = result;
          document.querySelector("body").appendChild(img);
    
        };
      };

#### 文件拖拽 ####

在`HTML5`的规范中，可以通过为元素增加`draggable="true"`来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

事件:

*  拖拽元素
    
     *  ondrag：整个拖拽过程都会调用。
     *  ondragstart：当拖拽开始时调用。
     *  ondragend：当拖拽结束时调用。
     *  ondragleave：当鼠标离开拖拽元素时调用。
 *  目标元素
    
     *  ondrop：当在目标元素上松开鼠标时调用。
     *  ondragover：当停留在目标元素上时调用
     *  ondragenter：当拖拽元素进入时调用。
     *  ondragleave：当鼠标离开目标元素时调用。
 *  注意事项
    
    如果想要调用ondrop事件，必须在`ondragover`中使用事件参数阻止浏览器的默认行为。
    
        thirdBox.ondragover = function (argument) { 
          // 在 ondragover时 必须阻止默认行为 才能够 看到拖放效果
          argument.preventDefault();
        }
 *  数据传递
    
     *  配合事件对象的`dataTransfor` 可以实现数据的传递。
     *  setData(key,value) 设置数据。
     *  getData(key) 获取数据。
    
        dom1.ondragstart = function (argument) { 
          argument.dataTransfer.setData("fox",this.id);
        }
        
        //dom2为拖放的目标元素
        dom2.ondrop = function (argument) { 
          console.log(argument);
          var fromBoxID =argument.dataTransfer.getData("fox");
        }

#### 地理定位 ####

地理定位: LBS: Location Base Service

*  获取方式: IP地址, 三维坐标, GPS, WIFI, 手机信号等
    
    ![Image 1][]
 *  获取当前地理信息  
    `navigator.geolocation.getCurrentPosition(successCallback, errorCallback)`
 *  获取实时地理位置  
    `navigator.geolocation.watchPosition(successCallback, errorCallback)`获取成功后会调用successCallback, 获取失败后会调用errorCallback
    
    其他参数:
    
        position.coords.latitude  //纬度
        position.coords.longitude  //经度
        position.coords.accuracy  //精度
        position.coords.altitude  //海拔高度
    
        navigator.geolocation.getCurrentPosition(function(){ 
          console.log("可以定位");
        }, function(){ 
          console.log("不可以定位");
        });
        
        navigator.geolocation.getCurrentPosition(function(position){ 
          console.log(position.coords.latitude);
          console.log(position.coords.longitude);
        }, function(error){ 
          console.log(error);
        });
 *  百度地图的调用: [http://lbsyun.baidu.com/][http_lbsyun.baidu.com]
    
        window.navigator.geolocation.getCurrentPosition(function (position) { 
        // position.coords.latitude纬度
        //position.coords.longitude经度
        //纬度
        var latitude=position.coords.latitude;
        //经度
        var longitude=position.coords.longitude;
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(longitude, latitude), 11);
        // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        },function (error) { 
        });

## WEB存储 ##

### cookie ###

以文件的方式进行储存, 储存大小4kb  
`cookie`中的数据是字符串(键值对, 使用`;`隔开)

jQuery对cookie操作做了很好的封装, [https://plugins.jquery.com/cookie/][https_plugins.jquery.com_cookie]  
“\`js  
  
  
  
if (typeof .cookie(“\_name”) != “undefined”) \{ ("\#sp").text(.cookie(“\_name”));    
  \}else \{ (“\#sp”).text(“菜鸟”);  
\}

(“\#btn”).click(function () \{    
    // 设置过期时间.cookie("\_name", $(“\#txt”).val(),\{expires:7\});  
location.reload();  
\});  
  
“\`

### Web Storage ###

*  存储大小5M
 *  仅支持IE8以上版本
 *  只能操作字符串, 所以json对象要进行转换
 *  明文储存, 没有隐私性可言, 不能存储重要信息
 *  会使浏览器加载速度在一定程度上变慢
 *  无法被爬虫程序爬取
 *  判断浏览器对Web Storage的支持性

if(window.localStorage){
       //或者window.sessionStorage
      alert("浏览器支持localStorage")
      //主逻辑业务
    }else{
      alert("浏览不支持localStorage")
      //替代方法
    }

#### localStorage ####

永久储存, 除非手动删除不过期,  
方法: `getItem`读取, `setItem`设置, `removeItem`移除, `key(index)`索引, `clear`清空  
`js window.localStorage.setItem(key, value); window.localStorage.getItem(key); window.localStorage.removeItem(key); window.localStorage.clear(); var k = window.localStorage.key(0);`

#### sessionStorage ####

在重启浏览器, 关闭页面时失效  
方法: `getItem`读取, `setItem`设置, `removeItem`移除, `key`索引, `clear`清空  
`js window.sessionStorage.setItem(key, value); window.sessionStorage.getItem(key); window.sessionStorage.removeItem(key); window.sessionStorage.clear();`

#### json转换字符串 ####

`js JSON.stringify // 序列化->字符串 JSON.parse // 反序列化->对象`

[Link 1]: https://github.com/aFarkas/html5shiv
[Link 2]: https://github.com/lu900618/Front-End/blob/master/00%20%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.md
[Image 1]: 
[http_lbsyun.baidu.com]: http://lbsyun.baidu.com/
[https_plugins.jquery.com_cookie]: https://plugins.jquery.com/cookie/