HTML5 的一些新标签

IE 浏览器的版本小于 IE9 时将读取 html5.js 文件

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

HTML5全新语义化标签

script中新增属性：

<scriptasyncsrc="js/jquery.js"></script> async 异步执行,加载完后立即执行，但不影响文档加载。

<section>

用来定义文档或应用程序中的区域。

<nav>

用来定义文档的主导航区域。

<article>

用来包裹独立的内容片段。（复制粘贴到另外一个完全不同的站且能保持完整的意义）

<aside>

与主页面内容松散的内容。一般用作侧边栏。sidebar

<hgroup>

页面中有一组h1,h2,h3等标签时，则可以考虑使用<hgroup>将包裹起来。

eg:

<h2>All about what I do</h2>

</hgroup>

<h1>A post about something</h1>

<h2>Trust me this is a great read</h2>

<h3>No, not really</h3>

</hgroup>

</header>

</article>

<header>

不计入大纲结构，一般作为头部区域标签。

<footer>

不计入大纲结构，一般作为尾部区域标签。

<address>

用于明确地标离其最近的<article> or <body>祖先元素的联系信息。

一般不放具体的邮箱地址，及可能会改变的联系信息。

<figure>

表示一段独立的流内容。表示，文档主体流内容中的一个独产单元。<figcaption>添加标题。

eg:

</figure>

*** 一般情况下，一个页面中<header><nav><footer>使用次数受限制。

当页面中有 <article>和<section>都可以有<header><nav><footer>。

-----------------------------------------------------------------------------------

<video>

自定义视频

eg:

<video src="movie.ogg" controls="controls">video</video>

<audio>

自定义音频

eg:<audio src="xxx.wav">audio</audio>

<embed>

用来插入各种多媒体，Mide,wav,aiff,au,mp3等格式都可以。

eg:<embed src="xxx.wav">

<mark>

突出显示或高亮显示的文字。多用于搜索结果中向用户高亮显示关键词。

<progress>

正在运行中的进程。

eg: <progress value="22" max="100"></progress>

<time>

日期或时间，也可以同时表示两者。

<ruby>
- <rt>
- <rp>

ruby注释（拼音注意或字符）

eg:

<ruby>

汉<rt>hˋan</rt>

</ruby>

<wbr>

表示软换行。与<br/>的区别：<br/>表示必须换行。<wbr>则表示窗口父级元素宽度不够时，主动换行。宽度够了，可以不换行。

<canvas>

自定义图形，画面。

<command>

表示命令按钮。单选按钮、复选框或按钮。

eg:<command onclick = "cut()" label = "cut">

<details>
- <summary>

关于文档的细节。与summary配合使用。summary作为标题or图例。

标题可见，点击标题，会显示细节信息。summary应该是details的第一个子元素。

eg:

<summary>Title HTML5</summary>

<p>This document teaches you everything you have to learn about HTML5.</p>

</details>

<datalist>

表示可选数据的列表，可以与input配合使用。可以作出输入值的下拉列表。

eg:

</datalist>

<datagrid> ?????

同上<datalist>,是以树形列表的形式显示输入值。

<keygen>

表示生成密钥

<output> ???

不同类型的输出。比如：脚本的输出。

<source>

拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件。

eg:

Your browser does not support the audio element.

</audio>

新增 input 元素类型

email 必须输入E-mail地址的文本输入框

url 必须输入URL地址的文本输入框

number 必须输入数值的文本输入框

range 必须输入一定范围内数字值的文本输入框

Date Pickers HTML5拥有多个可供选取日期和时间的新型输入文本框。

- date 选取日、月、年

- month 选取月、年

- week 选取周、年

- time 选取小时、分钟

- datetime 选取时间、日、月、年（UTC时间）

- datetime-local 选取时间、日、月、年（本地时间）

HTML5的结构

主体结构元素

article 是页面、文档中相对独立的，完整的内容。每一个都允许有自己的标题与脚注。

section 是对页面中的内容进行分块。

nav 可以做为页面导航的链接组。

1）传统导航。 2）侧边栏导航。 3）页内导航。 4）翻页操作。

aside 当前页面，文章的附属信息部分。

1）在article元素内，作为主要内容的附属信息部分。如，有关的参考资料。

2）在article元素外，作为全局的附属信息部分。如，侧边栏，友情链接等等。

微格式

利用HTML的Class属性对页面添加附加信息。如，新闻发生的日期，时间，个人电话，企业邮箱等。

time 可以定义很多格式的日期及时间.<time datetime = "2015-8-4">2015年8月4日</time>

pubdate属性 time元素代表了文章或页面的发布日期。

非主体结构元素

header 具有引导和导航作用。一个header中至少一个h1-h6。

hgroup 标题及子标题进行分组元素。

footer 与header语义相反。

address 在文档中呈现联系信息，包括文档作者或维护者的名字。电子邮箱，真实地址等。

HTML5结构 --> 显示编排与隐式编排

表单与文件

新增form属性

eg:

</form>

formaction属性

<input type = "submit" name = "s1" value = "v1" formaction = "s1.jsp" >提交到s1

<input type = "submit" name = "s2" value = "v2"formaction = "s2.jsp" >提交到s2

<input type = "submit" name = "s3" value = "v3"formaction = "s3.jsp" >提交到s3

</form>

formmethod属性

<inputtype = "submit"name = "s1" value = "v1"formmethod = "psot">提交到s1

<inputtype = "submit"name = "s2" value = "v2"formmethod = "get">提交到s2

</form>

placeholder属性

<input type="text"> <textarea>处于未输入状态时文本框中显示的输入提示。

eg:

autofocus属性

自动获得光标焦点。需要使用JavaScript配合。

list属性

<input type = "text">增加list属性。

autocomplete属性

辅助输入所用的自动完成功能。

eg:

只有Opera 10支持autocomplete属性

增加与改良了input元素的种类

search 与text文本框类似，但是它用于搜索。

tel 与text文本框类似，但是它用于电话。

file 可以通过指定multiple属性，一次选择多个文件。value用逗号分割

本地储存 Web Storage

cookies:

大小 4KB

带宽会浪费一部分发送cookies时使用的宽带

复杂性操纵cookies困难

web storage:

1)sessionStorage

将数据保存在session 对象中。所谓session，就是用户浏览这个网站反花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

保存数据: sessionStorage.setItem(key,value);

读取数据: 变量 = sessionStorage.getItem(key);

sessionStorage.getItem(key)	获取指定key本地存储的值
sessionStorage.setItem(key,value)	将value存储到key字段
sessionStorage.removeItem(key)	删除指定key本地存储的值
sessionStorage.length	sessionStorage的项目数

2)localStorage

将数据保存在客户端本地硬件设备中，下次打开浏览器访问网站时，仍然可以继续使用。

保存数据: localStorage.setItem(key,value);

读取数据: 变量 = localStorage.getItem(key);

两者区别在于，sessionStorage为临时保存，localStorage为永久保存。

通信 API

1）跨文档消息传输

首先，要想接受从其他的窗口发过来的消息，就必须对窗口对象的message事件进行监视。

window.addEventListener('message',function (){...},false);

使用window对象的postMessage方法向其他窗口发送消息，

otherWindow.postMessage(message,targetOrigin);

postMessage方法中的两个参数

message为所发送的消息文本，也可以是JS对象（通过JSON转换为文本）

targetOrigin为接收消息的对象窗口的URL（可能使用"*",指定所有地址）

补充说明：

(1)通过对window对象的message事件进行监听，可以接收消息。

(2)通过访问message事件的origin属性,可以获取消息的发送源。 [发送源只包括域名与端口号]

(3)通过访问message事件的data属性,可以取得消息内容。 [可以是任何JavaScript对象]

(4)使用psotMessage方法发送消息。

(5)通过访问message事件的source属性,可以获取发送源的窗口对象(窗口的代理对象).

2）Web Sockets API

将URL字符串作为参数，然后调用WebSocket对象的构造器来建立与服务器之间的通信连接。

var webSocket = new WebSocket('ws://localhost:8005/socket');

URL字符串必须以'ws'或'wss'文字作为开头。

使用WebSocket对像的send方法对服务器发送数据（只能发送文本数据）.

webSocket.send('data');

通过获取onmessage事件来接收服务器传来的数据,

webSocket.onmessage= function (event){

var data = event.data;

};

通过获取onopen事件来监听socket的打开事件,

webSocket.onopen= function (event){

// 开始通信时的处理

};

通过获取onclose事件来监听socket的关闭事件,

webSocket.onclose = function (event){

// 通信结束时的处理

};

通过close方法关闭socket,切断通信连接,

webSocket.close();

另外，通过读取readyState属性值来获取WebSocket对象的状态，

(1)CONNECTING （数字值为0）表示正在连接。

(2)OPEN （数字值为1）表示已建立连接。

(3)CLOSING （数字值为2）表示正在关闭连接。

(4)CLOSED （数字值为2）表示已关闭连接。

获取地理位置信息

Geolocation API基本知识

在HTML5中，window.navigator新增了一个geolocation属性。使用Geolocation API 来对该属性进行访问。

1）获取当前地理位置

void getCurrentPosition(onSuccess,onError,options);

onSuccess成功时所执行的回调函数

onError失败时所执行的回调函数

options 可先属性的列表

navigator.geolocation.getCurrentPosition (function (position) {

// 获取成功时的处理

});

eg:

获取地理位置信息

navigator.getolocation.getCurrentPosition (function (position) {

var coords = position.coords;

showMap (coords.latitude, coords.longitude, coords.accuracy);

// 捕获错误信息

function (error) {

var errorTypes = {

1:'位置服务被拒绝',

2:'获取不到位置信息',

3:'获取信息超时'

};

alert(errorTypes[error.code] + ": 不能确定你的当前地理位置");

}

);

持续监视当前地理位置的信息

int watchCurrentPosition (onSuccess, onError, options);

停止获取当前地理信息

void clearWatch (watchId);

获取地理位置信息成功，则可以在成功的回调函数中访问 position 对象的属性

latitude 当前地理位置的纬度

longitude 当前地理位置的精度

altitude 当前地理位置的海拔

accuracy 获取到的纬度或经度的精度

altitudeAccancy海拔高度的精度

heading 设备的前进方向｛用面朝正北方向的顺时针旋转角度来表示｝

speed 设备的前进速度

timestamp 获取地理位置时的时间

HTML5 的一些新标签相关推荐

html5 基本布局+新标签+新选择器 + 线性渐变
html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
【HTML5】H5新标签大实例
以下是测试Html5新标签性能的大实例: 首先是效果: 代码: <html> <head> <title>Test</title> </head& ...
html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签标签是 HTML 5 中的新标签. 定义和用法标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例通过 canvas 元素 ...
【前端系列教程之HTML5】06_HTML5新标签
一.HTML5新布局标签许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header"> ...
html5定义页脚标签,使用 HTML5 中的新标签和新属性
新标签主要分成三个部分:语义化标签.功能性标签及新的输入控件类型语义化标签 .. . ....... 这些新的语义化标签目前得到了大部分主流浏览器的支持,建议直接使用:如果是在IE 8及以下版本,无 ...
HTML5的一些新标签
1.HTML5的新的块标签: <nav></nav> 导航栏 <header></header> 头部 <footer></foote ...
html5中的新标签
header <header> 标签定义文档的页眉(介绍信息). nva 根据W3C的定义规范: nav元素是一个可以用来作为页面导航的链接组: <nav> <ul> ...
H5新标签 figcaption 定义图文并茂的html5新标签-figure、figcaption
本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题或者 ...
【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下 ...

HTML5 的一些新标签

HTML5 的一些新标签相关推荐

最新文章

热门文章