HTML5新增标签

新增语义元素

HTML5定义了很多新的语义元素，分别有：<article>、<header>、<aside>、<footer>、<section>、<nav>、<figure>、<figcation>等元素，接下来分别介绍新增的语义元素。

<article>

<article>一般用于博客、论坛、新闻等。具体事例：

     
   
      
粉色天气
 
      
 从粉色的茶水开始，粉红色的玫瑰，花瓣凋零过半，将一片片花瓣夹入淡绿色的笔记本中。 便是粉色的天气粉色的一天了。 
 
     

<header>

<header>一般用于定义文档或section的页眉

代码实例：

     
   
      
        
       
金牛座季节
 
       
4月末，金牛座的季节
 
      
 
      
周边的金牛座陆续的过了生日
 
     

<footer>

<footer>一般用于定义文档或section的页脚

代码实例：

     
     
      
       
       
开心明天
 
       
明天又是美好的一天
 
      
 
      
 最近情绪上天入地，时时安慰自己： 又是充满希望的一周，明天又是美好的一天，明天应该是美好的，因为还没开始， 还可以有激情有勇气去过好。 
 
      
 
       
北京二吊子程序媛所码
 
      
 
     

<section>

<section>定义一个节

代码示例：

     
    
      
章节一
 
     
 
     
 
      
章节二
 
     

<nav>

<nav>定义导航链接集合

代码示例：

     
     
      百度一下 | 
      北邮人论坛 | 
      爱奇艺 | 
     

HTML5图像

canvas

HTML5 的 canvas 元素是使用 JavaScript 在网页上绘制图像，canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实现方法步骤

1.在页面中创建canvas元素，

<canvas id="myCanvas" width = "200" height = "150" ></canvas>

2.通过JavaScript来绘制：

3.通过javascript绘制图像

SVG

SVG指可伸缩矢量图形，SVG图像具有可通过文本编辑器来创建修改，也可被搜索、索引、压缩等优点。

代码示例：

HTML5媒体

媒体元素主要为音频元素和视频元素，HTML5通过<object>来加载，进而播放音频或视频。

代码示意：直接在页面body部分通过<object>标签来添加音频或视频文件

HTML5API

HTML5新增了诸多API 接口，包括地理定位、拖放、WEB存储、应用存储等接口。

HTML5 定位

HTML5 Geolocation API 可用于获得用户的地理位置，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

1： navigator.geolocation，可用于检测设备是否支持HTML5定位

2：getCurrentPosition() 方法可用户获取当前设备的经纬度位置

利用HTML5定位获取定位示例：

HTML5 拖放

HTML5增加了新的属性draggable,当某元素的draggable属性设置为true时，表示该属性可以被拖动。

HTML5同时还新增了鼠标事件ondrag、ondrop、ondragstart、ondragover等事件来运行和拖放有关的脚本；每个事件的具体意义可参考。

HTML5拖放代码示例

1. 在页面中添加可拖放的元素

2. 确定拖放元素与拖放目标元素的事件与对应的脚本

1. 拖放元素与拖放目标元素的事件

2. 事件所触发的脚本

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }

3. 在页面中进行拖放元素

WEB存储

web存储也称为本地存储，通过本地存储，web 应用程序能够在用户浏览器中对数据进行本地的存储。

与cookie相比，本地存储更安全，且不影响浏览器性能，并且信息不会被传到服务器

HTML本地存储提供了两个在客户端存储数据的对象

window.localStorage - 存储没有截止日期的数据

window.sessionStorage - 当关闭浏览器标签页时数据会丢失

使用本地缓存时，应先检测是否支持本地缓存

if (typeof(Storage) !== "undefined") {    // 针对 localStorage/sessionStorage 的代码 } else { // 抱歉！不支持 Web Storage .. }

代码示例

// 存储localStorage.setItem("lastname", "Gates");// 取回 document.getElementById("result").innerHTML = localStorage.getItem("lastname");

应用程序缓存

应用程序缓存即可对web应用进行本地缓存，保证用户在离线时也可以使用应用，加载速度更快，且能够减少服务器负载，浏览器只从服务器下载更新或更改过的资源。

代码示例

  文档内容 ......  

作者：二吊子程序媛

链接：https://www.jianshu.com/p/7aa390f49eda

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。