HTML5新特性知识个人记录

Myth丶恋晨 2021-12-14 18:15 199阅读 0赞

# 新特性： #

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);

实例：

截图：

![20190703194814424.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

[20190703194814424.png]: /images/20211214/5acaf78a2bff41e5ac730150b88e24c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: /images/20211214/045d4cbe0c9248cdbc9b50aca421a195.png