HTML5详解

1. HTML5版本介绍

HTML 2.0–1951年11月作为RFC1866发布，在RFC2845与2000年6月发布之后被宣布已经过时

HTML 3.2–1997年1月14日，W3C推荐标准

HTML 4.0–1997年12月18日，W3C推荐标准

HTML 4.01(微小改进) – 1999年12月24日，W3C推荐标准

HTML 5 --2014年10月28日，W3C推荐标准

设计HTML 5最主要的目的是为了在移动设备上支持多媒体。例如：
video标签和audio及canvas标记

新特性：

1. 取消了过时的显示效果标记<font></font>和<center></center>…
2. 新表单元素引入
3. 新语义标签引入
4. canvas标签（图形设计）
5. 本地数据库（本地存储）
6. 一些API

---

2. HTML5的优点及缺点

优点：

1. 提高可用性和改进用户的友好体验；
2. 可以给站点带来更多的多媒体元素（视频和音频）；
3. 可以很好的代替FLASH和Sliverlight；
4. 当涉及到网站的抓取和索引的时候，对于SEO很友好；
5. 将被大量应用于移动应用程序和游戏；
6. 可移植性好
   缺点：该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳

跨平台：比如你开发了一款HTML5 的游戏，你可以很轻易的移植到UC的开放频台，Opera的游戏中心，Facebook应用平台。甚至可以通过封装的技术发放到APP Store或Google Play上，所以它的跨平台性非常强大。

HTML 5的漏洞：在浏览网页的时候总是将cookie等小部分文件下载在本地硬盘上，这些文件都不大，控制在5-10KB之间，但是如果你在访问HTML5的网页是下载的文件就会顺便放大1000倍，容量可能是5MB或者以上，一些恶意程序甚至能够通过这个漏洞不断在网页上下载一些无用文件直到填满你的硬盘。你可以访问测试网站http://www.filldisk.com

---

3. HTML5的语法规范

支持大小写混合，但是还是需要有一个良好的代码习惯

4. 语义化及兼容问题

div标签
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

语义化标签是有一定的意义

h5中的语义化标签在ie8中不支持，解决方法：

1. 设置该标签的css中的display：block；然后通过DOM创建该元素即可；
2. 很多语义标签，引入一个外部h5js文件；
3. 浏览器本身支持，没必要请求js文件，不支持再去请求 使用命令 cc:ie---->tab键 然后去请求这个js文件

---

5. 智能表单控件及属性

类型：

    <form action="" method="get">
        邮箱：<input type="email" name="" id="">
        <br>
        数字：<input type="number" name="" id="">
        <br>
        url: <input type="url" name="" id="">
        <br>
        滑块：<input type="range" name="" id="">
        <br>
        颜色：<input type="color" name="" id="">
        <br>
        时间：<input type="time" name="" id="">
        <input type="submit" value="">
    </form>

属性：

<!-- autocomplete:默认是on,开启了智能提示
    novalidate:该属性表示关闭了校验的功能 -->
    <!-- autofocus:页面刷新后自动获取焦点
    placeholder:有默认的提示内容
    required:表示当前的表单验证必须有验证  -->
    <!-- input标签有form属性，填写form表单的id，就可以一起提交 -->
    <!-- datalist标签与list属性配合使用有下拉框的效果 -->
    <form action="" method="get" autocomplete="off" novalidate id="fm">
    
        内容：<input type="text" name="" id="" autofocus placeholder="请输入内容"><br>
        <input type="submit" value="">
        
         <input type="text" list="url_list">
        <datalist id="url_list">
            <option value="11">1</option>
            <option value="11">1</option>
            <option value="11">1</option>
            <option value="11">1</option>
        </datalist> 
    </form>
    <input type="text" form="fm">

常用的api：

    <p>这是第一个p</p>
    <ul>
        <li>这是第一个li</li>
        <li class="cls">
            <p>这是li中的p</p>
        </li>
        <li class="cls">第三个li</li>
    </ul>
    <script>
        // 方式1：
        document.querySelector("选择器"); //获取的就是一个
        // 方式2：
        document.querySelectorAll("选择器"); // 获取的是多个
        // 方式3:
        document.getElementsByClassName("类样式的名字")
    </script>

   <div>
        <input type="button" value="添加样式" id="bth1">
        <input type="button" value="删除样式" id="bth2">
        <input type="button" value="切换样式" id="bth3">
        <input type="button" value="是否包含样式" id="bth4">
        <div id="dv"></div>
    </div>
    <script>
        function my$(id){
            return document.getElementById(id);
        }
        // 添加样式
        my$('bth1').onclick = function(){
            my$("dv").classList.add('cls');
        }
        // 删除样式
        my$('bth2').onclick = function(){
            my$("dv").classList.remove('cls');
        }
        // 切换样式
        my$('bth3').onclick = function(){
            my$("dv").classList.toggle('cls');
        }
        // 是否包含样式
        my$('bth4').onclick = function(){
            var result = my$("dv").classList.contains('cls');
            console.log(result);
            // 存在返回ture，否则返回false
        }
    </script> 
    

---

6. 自定义属性操作

<div id="dv" data-name="zinian" data-age="38" data-user-weiht="65">

    </div>

    <script>
        // 自定义属性：程序员为了方便操作数据自己添加的属性
        // 获取自定义属性的值
        var dt = document.querySelector('#dv').dataset; // 可以看出一个数组
        // 输出有
        console.log(dt);
        console.log(dt.name);
        console.log(dt['age']);
        console.log(dt.userWeight);

        // 设置
        dt.height='80'
        dt.userSex='男';
        
    </script>

---

7. 文件读取及WEB存储

通过FileReader对象可以读取本地存储的文件，使用File对象来指定所要读取的文件或数据。Flie对象可以是来自用户在一个<input type="fil e">元素上选择文件后返回的FileList对象，也可以来自由拖放操作生成的DataTransfer。

<input type="file" name="" id="f1">
    <div></div>
    <script>
        // 读取一个css文件，把css文件的内容设置大页面的div标签上，实现样式操作的效果

        // 获取上传文件的标签对象
        var f1 = document.querySelector('#f1')
        f1.onchange = function(){
            // 可以读取文件
            var file1 = this.files[0];
            // 创建一个读取文件的对象
            var fReader = new FileReader();
            // 开始读取文件，以文本的方式读取
            fReader.readAsText(file1);
            // 读取文件的加载事件
            fReader.onload = function () {
                var result = fReader.result; // 里面是css代码
                // css代码应该在style标签里，style应该在head标签里设置
                var st = document.createElement('style');
                st.innerHTML = result;
                document.querySelector('head').appendChild(st);
            }
        }
    </script>

---

8. 网络状态检测及地里定位

window.navigator.onLine获取的是网络状态

---

9. 多媒体操作

音频

<!--controls:该组件可以在页面中显示出来-->
<!--autoplay:自动播放的 -->
<!--loop:循环播放-->
<audio src="music/1.mp3 controls autoplay></audio>

<!--兼容写法-->
 <audio controls autoplay>
    <source src="music/1.mp3"/> 
    <source src="music/1.wav"/> 
    <source src="music/1.wma"/>
    对不起您呢，您的破浏览器不支持我这么高级的东西，请您更新浏览器
</audio>

视频

<!-- 无法自动播放的时候，可以加一个属性muted这个属性，可以自动播放，主要针对谷歌浏览器，bug是静音效果 -->
<video src="mov/1.mp4" controls autoplay loop></video>

<video controls autoplay loop>
    <source src="mob/1.mp4" />
    <source src="mob/1.ogg" />
    对不起您呢，您的破浏览器不支持我这么高级的东西，请您更新浏览器
</video>

10. Canvas

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等

具体学习看廖雪峰的官网

点击学习