html5的学习笔记

从今天开始终于有空闲时间了，计划接下来的两周每天都学一部分html5的内容。

Html5嘛，比Html4高一个版本，肯定是比Html4牛B的，可世间所有事物的发展都需要一个过程，Html5也不例外。对于现在2017的中国，Html5基本上已经覆盖了移动端，而在PC端，由于IE678等一群老油箱的阻碍，Html5至今未能在PC端中完全表现自己。然而，as we know，Html5会在不久的将来统治PC端。作为一个怀揣着梦想的未来web前端工程师，这辈子是不可能不学Html5的。

好了，说完感想，进入笔记环节。

一、在HTML5的学习中，首先接触的是一些新的标签。

语义标签方面，以前写是的例如： <div class="header">、<div class="footer">这样的带类名的div标签，而在HTML5中我们可以使用许多非常方便的语义标签，上面说到的两个标签可以用<header>和<footer>来取代。在HTML5中，网页的结构大概可以用下图来表示

这些标签的兼容性都是比较好的。在一些低级的浏览器中，一些它不认识的标签会被当成的<div>来处理，我们可以用如 document.creatElement('header') 这样的语句来告诉浏览器这是一个标签

语义化标签具有重大的意义，一是可以让我们程序员写的代码更方便，更容易理解；二是可以让网络爬虫或者浏览器更好的解析我们的网页，及分析其内容。

应用程序标签方面，我着重学习了<datalist>和<progress>这两个标签，像<menu><meter><details>这些兼容性比较差的标签只做了基本的理解。

<datalist>标签的使用方法与格式如下，注意里面的文字要写在value中，此外，<datalist>标签还有匹配英文字母的功能。

但是，据一些大神说由于<datalist>的样式是不能修改的，所以在实际中基本不会见到它。做下拉栏一般是用JQuery的插件实现。

<progress>标签的使用方法与格式如下

value值为进度条当前值，默认最大值为1.0，当然，可以通过修改<progress>的max属性来修改它的最大值。

对于<progress>这个东西呢，直接修改它的样式是不会起作用的

二、ARIA，这是一个专门对于盲人用户的功能，但现在中国人对它不太重视，或许以后需要挖掘盲人用户的时候会广泛的用到它，不过现在淘宝已经用到它了。

三、data-*功能，这个功能可以给DOM元素增加一个属性，例如<div data-type=“food” >，这个功能在js里面非常非常非常有用。

x.dataset[ ‘ example ’ ]；获取某个DOM元素的data-example属性里面的内容

四、html5新的一些常用表单，如 <input type="image">  <input type="color">  <input type="datatime">，不过由于这些元素不能修改样式，而且部分有虚拟键盘适配的功能，所以基本上都是在移动端上使用。

五、网页多媒体，不借助Flash等插件就可实现视频和音频的播放。

音频的格式如下图：

语句中的controls="controls"用于显示播放控件

但是由于音频的播放控件样式是不可修改的，所以一般不像上图那样写，而是这样

又由于各大浏览器兼容的音频格式不一样，所以上面的写法并不具备良好的兼容性，兼容性比较好的写法应该是下面这样的

视频与音频大致格式是一样的，下面是标准的视频写法：

六、SVG文件的使用

可缩放矢量图形（SVG）是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。（这句话来自百度百科）

通俗的说，这种文件不管怎么放大，都不会出现锯齿，而且体积也相对比较小，多用于一些网站的LOGO。

使用方法如图：

从兼容性考虑，推荐使用<iframe>，除了上面讲到的三种方法外，还可以用Ajax技术，用这种技术就可以直接在css中修改svg图像的样式。

 七、Javascript基础API的提升

1、新选择器querySelector  （下面括号中的selector可以为#id名，标签名，.class名）

document.querySelector(selector); 返回第一个满足条件的元素

document.querySelectorAll(selector);返回所有满足该条件的元素（返回一个数组，且该数组的每一个成员不能像JQuery一样直接注册，必须分别给每个元素注册）

2、Element.classList，该语句的功能主要是实现对DOM元素的类名的一些基本操作。

console.log(this.classList)返回this的含有的类名

classList.length 返回类名的数量

classList.add(class1, class2, ...)添加类名

classList.contains(class)判断是否存在某类名，返回true 或 false

classList.item(index)返回索引值

classList.remove(class1, class2, ...) 移除元素中一个或多个类名（移除不存在的类名不会报错）

classList.toggle(class)让元素切换一个类名，一般可以配合鼠标点击事件使用，例如点一下给某个DOM元素添加特定的类名，再点一下类名就消失

八、访问历史API

九、全屏API

        function launchFullScreen(element) {
            if(element.requestFullScreen) {
                element.requestFullScreen();
            }else if(element.mozRequestFullScreen) { //兼容moz
                element.mozRequestFullScreen();
            }else if(element.webkitRequestFullScreen) { //兼容webkit
                element.webkitRequestFullScreen();
            }
直接复制就可用

十、web存储

包括localStorage 和 sessionStorage 
其中，
localStorage - 没有时间限制的数据存储
sessionStorage - 关闭浏览器后会清空的的数据存储

例程如下：

未完待续！