10分钟读懂html5 多了啥？

   <p><strong>更加语义化标签</strong>(开发者可以更加优雅，浏览器也可以更好的理解)</p>    <p>搜索引擎检索，为什么会检索标题，不会检索“简介” ? 这是因为结构的不同。但是结构每个人的class命名习惯都会不一样，无法做到规范，于是不如出新的标签。</p>    <p>在有一些低版本的浏览器中，h5标签不兼容，会被认为是div，并不会影响我们的功能。也可以在 script 中新加一行代码 document.createElement("header") ,但是用了多少标签，就要写多少行的 document.createElement("") ，于是有一个第三方的插件 html5shiv.js</p>    <p>使用方法：</p>    <pre>  <code class="language-javascript"><!--[if lt IE 9]>  <script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>  <![endif]--></code></pre>    <p>注意：在页面中调用Html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。</p>    <p><strong>应用程序标签</strong></p>    <p>DataList</p>    <p>progress</p>    <p>属性<br> <strong>链接关系描述</strong></p>    <p>链接到的地方和当前文档的关系是什么</p>    <pre>  <code class="language-javascript"><a href="01-sementic-tags.html" rel="pre"></a>  <a href="02-application-tags.html" rel="next"></a></code></pre>    <p>rel还出现在其他地方，</p>    <pre>  <code class="language-javascript"><link rel="stylesheet" href="css.css"></code></pre>    <p>link本身不会请求文件，而是rel="stylesheet"才会请求文件</p>    <p><em>目前国内不流行</em></p>    <p><strong>结构数据标记</strong></p>    <pre>  <code class="language-javascript"><div itemscope itemtype="www.baidu.com">          <div itemprop="主人">主人</div>          <div itemprop="小狗">小狗一</div>          <div itemprop="小狗">小狗二</div>      </div></code></pre>    <p>可以方便搜索引擎重点抓取</p>    <p><em>很高级，但是只有google支持</em></p>    <p><strong>ARIA</strong></p>    <p>无障碍富互联网应用程序</p>    <pre>  <code class="language-javascript"><label for="myinput">请输入您的名字</label>  <input type="text" id="myinput"></code></pre>    <p>为什么上面一定要label for呢？</p>    <p>是为了搜索引擎的理解</p>    <p><strong>自定义属性</strong></p>    <p>也就是 data-* 之类的属性，他们没有功能性，只是为了保存dom节点的强相关的数据。</p>    <pre>  <code class="language-javascript"><ul id="list"></ul>      <div id="info"></div>      <script>          var data={              01:{                  name:"张三",                  age:18              },              02:{                  name:"李四",                  age:19              },              03:{                  name:"王五",                  age:20              }          };          for (var X in data) {              var item=data[X];              var oli=document.createElement("li");              var olist=document.getElementById("list");              oli.appendChild(document.createTextNode(item.name));              olist.appendChild(oli);              oli.setAttribute("data-name",item.name);              oli.setAttribute("data-age",item.age );              oli.addEventListener("click", function () {                  var name=this.getAttribute("data-name");                  var age=this.getAttribute("data-age");                  alert(age+name)              })          }      </script></code></pre>    <p>上面的代码用 setattribue 方法来定义了自定义属性，然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是 dataset['string'] ,使用这个api可以代替 getAttribute 的方法：</p>    <pre>  <code class="language-javascript">oli.addEventListener("click",function(){      console.log(this.dataset["name"]);  })</code></pre>    <p>智能表单<br> <strong>新的表单类型</strong></p>    <pre>  <code class="language-javascript"><input type="date">  <input type="color">  <input type="range"></code></pre>    <p>但是尽量不要在pc端使用，用户体验较差，不能自定义样式。主要适配在移动端。</p>    <p>虚拟键盘适配</p>    <pre>  <code class="language-javascript"><input type="text" name="txt_text" id="txt_text">  <input type="number" name="txt_number" id="txt_number">  <input type="email" name="txt_email" id="txt_email">  <input type="tel" name="txt_tel" id="txt_tel">  <input type="url" name="txt_url" id="txt_url"></code></pre>    <p>上面的代码在pc端上没有用处，主要是用在移动端可以根据不同的input的 type 来唤出不同的键盘。</p>    <p>虽然 input type="email" 看似可以验证表单，但是真是太弱了，只是验证有没有 @ ，真的要验证的话，还是要自己写正则表达式</p>    <p>页面多媒体</p>    <p><strong>音频</strong></p>    <pre>  <code class="language-javascript"><audio src="A Moment of Reflection.mp3" controls="controls"></audio></code></pre>    <p>但是默认的播放器太丑了，我们一般是自己写一个button，然后为这个button添加一个事件：</p>    <pre>  <code class="language-javascript"><script>          var btn=document.getElementById("btn");          var btn1=document.getElementById("btn1");          var audio=document.getElementsByTagName("audio")[0];          btn.addEventListener("click", function () {              audio.play();          })          btn1.addEventListener("click",function (argument) {              audio.pause();          })  </script></code></pre>    <p><strong>视频</strong></p>    <pre>  <code class="language-javascript"><video src="A Moment of Reflection.mp4" controls="controls"></video></code></pre>    <p>但是我们一般不是这样用的，因为视频有版权，有些浏览器只能支持一两个，我们一般是source：</p>    <pre>  <code class="language-javascript"><video controls="controls">  <source src="下午03-网页多媒体.web.mp4">  <source src="下午03-网页多媒体.web.ogg">  <p>您的浏览器不支持</p>  </video></code></pre>    <p>还有一个插件，是可以帮我们做兼容的，是https://html5media.info/的组件，ie7以上都可以兼容。</p>    <p>以下是多媒体的属性;</p>    <p>[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]</p>    <p><strong>字幕</strong></p>    <p>兼容性不是很好，现在还没有人用</p>    <p>canvas</p>    <ol>     <li>2d</li>     <li>3d</li>    </ol>    <p>svg<br> 优势：体积小，质量高，效果好，可控程度高。</p>    <p> </p>    <p>来自：http://www.cnblogs.com/dujuncheng/p/6139580.html</p>    <p> </p>