HTML5新特性知识个人记录

新特性：

1. 取消了过时的显示效果标记: <font></font> 和 <center></center>

2. 新表单元素引入. （calendar、date、time、email、url、search）

3. 新语义标签的引入 （ article、footer、header、nav、section）

4. canvas绘图（通过JavaScript 来绘制2D图形）

5. SVG绘图 （是一种使用XML描述2D图形的语言）

6. 视频和音频，  （audio）

7. 本地数据库（本地存储） （HTML5中内置了两种本地数据库，一种为SQLLite,一种为indexedDB。）

8. 一些API如： （拖放API）

 

好处：

1. 跨平台: 比如开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台，Fackbook的应用平台等。

缺点：

1. pc端浏览器支持不是特别友好，造成用户体验不佳。

 

对上述部分新特性详细记录：

（1）

1.用于绘画的canvas标签；

2.用于媒介回放的video和audio元素；

3.对本地离线存储有更好的支持，

新的特殊元素： article、footer、header、nav、section

新的表单控件： calendar、date、time、email、url、search

 

（2）

html中 vlink 属性 用于定义超链接被鼠标点击后所显示的颜色。

nav元素是一个可以用作页面导航的连接组，其中的导航元素

连接到其他页面或当前页面的其他部分。并不是所有的连接组都放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。

nav 元素应用场景：

1.传统导航条； 2.侧边栏导航; 3. 页内导航； 4.翻页操作；

 

HTML5 canvas：

canvas 是HTML5中新增一个HTML5标签与操作canvas的JavaScript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和SVG以及VML之间的一个重要的不同是，有一个基于JavaScript的绘图API，而SVG和VML使用一个XML文档来描述绘图，SVG绘图容易编辑与生成，但功能明显要弱一些，canvas可以完成动画、游戏、图表处理等原来需要Flash完成的一些功能。

 

 

HTML5  中的API：

1. document.querySelector("选择器");

--> 选择器可以是css中的任意一种选择器，通过该选择器只能选中第一个元素。

2. document.querySelectorAll("选择器");

--> 与document.querySelector的区别是： 可以选中所有符合选择器规则的元素， 返回的是一个列表； querySelector返回的只是单独的一个元素。

3. classList.add("类名" ); --》 给当前dom元素添加样式

4. classList.remove("类名"); --》 给当前dom元素移除样式

5. classList.contains("类名"); --》 检测是否包含样式

6. classList.toggle("active"); --》 切换类样式（有就删除，没有就添加）

 

获取自定义属性：  

在标签中，以data-自定义名称，

1. 获取自定义属性 Dom.dataset 返回的是一个对象

Dom.dataset.属性名 或者 Dom.dataset（属性名）

2. 设置自定义属性 Dom.dataset. 自定义属性名 值 Dom.dataset[自定义属性名] 值

 

文件读取：

FileReader

FileReader 接口有3个用来读取文件方法返回结果在result中

readAsBinaryString --- 将文件读取为二进制编码

readAsText --- 将文件读取为文本

readAsDataURL --- 将文件读取为DataURL

 

FileReader 提供的事件模型

onabort 中断时触发

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 读取完成触发，无论成功或失败

onloadstart 读取开始时触发

onprogress 读取中

 

获取当前网络状态：

window.navigator.onLine 返回一个布尔值

网络状态事件：

1. window.ononline

2. window.onoffline

 

获取地理定位：

获取一次当前位置： window.navigator.geolocation.getCurrentPosition

1. coords.latitude 纬度

2. coords.longitude 经度

 

实时获取当前位置： window.navigator.geolocation.watchPosition(success, error);

实例：

      <script type="text/javascript">

            //实时获取地理位置
            window.navigator.geolocation.watchPosition(success, error);

            function success(msg, position) {
                console.log(msg);
                console.dir(position);
            }

            function error(msg, position) {
                console.log(msg);
                console.dir(position);
            }

       </script>

截图：