首页 > 代码库 > html5新特性

html5新特性

2024-09-17 10:23:41 219人阅读

3.视频与音频

3.1Video

Ogg是带有Theora视频编码和Vorbis音频编码的文件；

MPEG4是带有H.264视频编码和AAC音频编码的MPEG4文件；

WebM是VP8视频编码和Vorbis音频编码的文件；

HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。

Safari和IE9预期支持H.264格式的视频，Firefox和Opera坚持开源的Theora和Vorbis格式，所以需要提供两种格式。

Video支持三种视频格式：Ogg，MPEG4，WebM。

例：

//此属性表示视频在页面加载时进行加载，预备播放。如果设置为”autoplay”，就忽略该属性。

//controls用于显示如播放按钮的控件

<source src=http://www.mamicode.com/”cohagenPhoneCall.mp4”

type=”vide0/mp4; codecs=’avc1.42E01E,mp4a.40.2’”/>

<p>你的浏览器太旧了。<a href=http://www.mamicode.com/”cohagenPhoneCall.mp4”>下载这个视频。

</video>

注：

· 技术上是不需要设置type属性的，但是不这样做的话，浏览器就会自己去寻找类型，为了节省一些带宽，最好还是声明下。

· 不是所有的浏览器都支持Html5，所以在资源元素的下面，可以提供一个下载链接或者嵌入视频的flash版本替代，这取决于个人。

· 如果想要所有的浏览器都支持HTML5标签，只要链接一个js文件就可以。在页面的头部或底部写上：
<script src=http://www.mamicode.com/”http://html5media.googlecode.com/svn/trunk/src/html5media.min.js”>
</script>

对于HTML部分，使用：

</video>

3.2Audio

无需再依赖第三方产检区渲染音频了，因为HTML5提供了<audio>元素。

以MOozilla核心的Firefox浏览器只支持.ogg文件，webkit核心的浏览器支持.mp3扩展，safari不承认.ogg,它会跳过并移到MP3版本。所以需要创建两个版本的音频。

Audio支持三种音频格式：Ogg Vorbis，MP3，Wav。

例：

</audio>

//标签的属性与video相同。没有height与width。

4.Web存储

4.1localStorage

localStorage可以长期存储数据而没有时间限制。

4.2sessionStorage

SessionStorage不能长期存储数据，数据会随着浏览器的关闭而删除。

5.HTML5的特征

5.1.1新的Doctype

<!DOCTYPE html>

5.1.2图形元素

<p>Image of Mars</p>

文字裹在p的标签中，与img标签各行其道，让人很难联想到这就是标题。HTML5通过采用figure元素进行改正。当和figcaption组合使用时，就能够语义化的联想到这就是图片相对应的标题。

<p>This is an image of somethinginteresting</p>

</figcaption>

</figure>

5.1.3<small>重新定义

<small>元素不再被用来创建靠近logo且相关的副标题。在html5中，<small>被重新定义，指小字。

5.1.4脚本（scripts）和链接（links）无需type

在html5中：

5.1.5引号问题

Html5不是XHTML，所以可以不需要引号。

<p class="myclass" id=someID>Startthe reactor

但是如果倾向结构化，还是需要把引号加上的。

5.1.6内容可以编辑

contenteditable元素顾名思义就是允许用户可以编辑元素内容包含的任意文本。

[html] view plain copy

<ul contenteditable=”true”>
<li>hello</li>
<li>Beijing</li>
<li>trs</li>
</ul>

5.1.7email输入（input）

在表单输入框应用名为”email”的type属性可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。但是较旧的浏览器不识别，它们会简单的退回到普通文本框。

[html] view plain copy

<form action=”” method=”get”>
<label for=”email”>邮箱：</label><input id=”email”name=”email” type=”email”/>
<button type=”submit”>确定</button>
</form>

5.1.8占位符（placeholders）

placeholders意为文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字就会消失；失去焦点时如果内容为空，提示文字又出现。在表单控件里面显示的提示性文字就是占位符。

如果是以前需要一些javascript代码实现占位符的操作，而html5却使得其非常轻松：

一般webkit核心的浏览器支持此特性，如chrome、safari。

5.1.9本地存储（localStorage）

传统的HTML使用的是众所周知的cookie，各种浏览器都支持，直接用js就可以调用，很方便。但是传统的cookie也有它本身的缺陷和不足。比如存储空间小，每个站点大小限制在4kb左右，又有时间期限，而且在请求网页的时候cookie会被附在每个HTTP请求的header中，所以无形中增加了流量。HTTP请求中cookie是明文传递的，所以存有安全性问题，入股用SSL（Secure Sockets Layer 安全套接层；是为网络通信提供安全及数据完整性的一种安全协议）通道另当别论。cookie也很容易受到跨站较稳的攻击。在一个链接后面加上”?cookie=document.cookie”就可以轻易获得用户的cookie信息。HTML5的本地存储也可能会有跨站脚本攻击XSS（cross site script,跨站脚本攻击。恶意攻击者往Web中插入恶意html代码，当用户浏览该页时，嵌入其中web里面的html代码会被执行。）的问题。

HTML5的本地存储可以存储5M大小的数据，甚至还多。它主要有四种：localStorage,sessionStorage,webSQL,indexDB

例子：

[html] view plain copy

<ul id="edit" contenteditable="true">
<li><li>
</ul>
<script language="javascript">
<!--
var edit=document.getElementById(edit);
edit.onblur=function(){
localStorage.setItem("tododata",this.innerHtml);
};
if(localStorage.getItem("tododata")){
Edit.innerHTML = localStorage.getItem("tododata");
}
//-->
</script>

5.2.0语义的Header和Footer

以往：

…

</div>

…

</div>

有了HTML5，可直接替换成;

…

</header.

…

</footer>

5.2.1IE和HTML5

所有元素有个默认的inline的display。为了确保所有新的元素都以block正确的渲染，需要这样定义：

header,footer,article,section,nav,menu,hgroup{

display:block;

}

但是由于IE不识别某些标签，如header，就会忽略这些样式，所以需要创建元素：

document.creatElement(“artical”);

document.creatElement(“footer”);

document.creatElement(“header”);

document.creatElement(“nav”);

document.creatElement(“menu”);

document.creatElement(“hgroup”);

另解：

<!—[if IE]>

<![endif]-->

5.2.2文档某一部分的信息（hgroup）

使用hgroup元素可以将标题组合在一起。

<h1>recall fan page</h1>

<h2>only for people whowant the memory of a lifetime.</h2>

</hgroup>

</header>

5.2.3必要的属性（required attribute）

或者使用更结构化的方法:

如果”someInput”文本框是空白，表单就不会被提交。

</form>

如果input里面内容是空白，在表单提交的时候，文本框的框会高亮显示，但是好像只是在chrome里有此效果。

5.2.4autocomplete属性

autocomplete属性规定form或者input域应该拥有自动完成的功能。

它使用于<form>标签，以及以下类型的<input>标签：text，search,url,telephone,email,password,datapickers,range以及color。

</form>

5.2.5正则表达式

使用正则表达式能够轻松的验证一个特定的文本。

<input id=”username ” name=”username” type=”text”placeholder=”4-10个英文字母”

Pattern=”[A-Za-z]{4,10}”required=”required” autofocus/>

</form>

在[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。此特性好像只在chrome浏览器中支持。

5.2.6属性支持检测

利用优秀的Modernizr库（http://www.modernizr.com/）可以检测浏览器是否支持某些属性。

只要创建和分析这些元素，就可以确定浏览器的能力。事实上，这是一种确定浏览器兼容的常用方法。比如确定pattern属性，在javascrip中添加一小段代码：

alert(‘pattern’ in document.creatElement(‘input’));//Boolean

//创建了一个新的input元素，并确定了里面的pattern属性浏览器是否支持。

也可以：

If(!’pattern’ in document.creatElement(‘input’)){

//做操作

}

</script>

5.2.7mark元素（Mark Element）

<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。

5.2.8div

div应该用在没有更好的元素的时候。比如需要包裹一段代码块在对内容定位处理的包装单元内。但是如果是文章，最好用<artical>，如果是链接列表，就用<nav>。

5.2.9小知识

· SVG（scalable vector graphics）不是HTML5，它是基于可扩展标记语言（XML），用于描述二维矢量图的一种图形格式。

· Geolocation不是HTML5，它意味地理位置，通过HTML5能够使web应用程序确定位置并提供更多相关信息。

· 检索自定义属性的价值：

5.3.0data属性

Html代码部分：<div id=”myDiv”data-custom-attr=”My Value”>lady嘎嘎</div>

检索：

var theDiv = document.getElementById(“myDiv”);

var attr = theDiv.getAttribute(“data-custom-attr”);

alert(attr);//My Value

· 此属性在CSS中的应用

CSS代码:

.data_custom{display:inline-block;position:relative;}

.data_custom:hover{color:ransparent;}

.data_custom:hover:after{

content:attr(data-hover-response);

color:black;

position:absolute;

left:0;

}

HTML代码：

<a class=”data_custom”data-hover-response=”我说过不要碰我！”href=http://www.mamicode.com/”#”>不要碰我，嘎嘎

注：浏览器支持伪类after一季content的attr的前提下。

5.3.1使用区域input创建滑块

HTML5引进了range类型的input。

<input type=”range”>,它可以接收min，max，step和value属性等。

· 标签
<form method=”post”>
<h4>音量控制</h4>
<input type=”range” name=”range” min=”0” max=”10” step=”1”value=http://www.mamicode.com/””/>
<output name=”result”></output>
</form>

· CSS

使用:before和:after告知用户指定的最大值和最小值

input {font-size:14px;font-weight:bold;}

input[type=range]:before{content:attr(min):padding-right:5px;}

input[type=range]:after{content:attr(max):padding-left:5px}

output{

display:block;

font-size:5.5em;

font-weight:bold;

}

· JavaScript

l 检测浏览器是否能够识别rangeinput，如果不识别就显示提示信息；

l 当用户移动滑块的时候，动态的改变output的值；

l 监听，当用户离开滑块的时候，就插入值，同时本地存储；

l 然后当刷新页面的时候，选择的区域和值会自动地设置成最后一次的选择。

(function(){

var f =document.forms[0],//返回对象中对所有文档的引用

range=f[‘range’],

result=f[‘result’],

cachedRangeValue=http://www.mamicode.com/localStorage.rangeValue?localStorage.rangeValue:5;

//检测浏览器是否足够酷

//识别range input

var o =document.creatElement(‘input’);

o.type=’range’;

if(o.type==’text’)

alert(‘不好意思，你的浏览器还不够酷，试试最新的chrome浏览器吧！’);

//设置初始值

//无论是否本地存储了，都设置为5

range.value=http://www.mamicode.com/cachedRangeValue;

result.value=http://www.mamicode.com/cachedRangeValue;

//当用户选择了一个值，更新本地存储

range.addEventListener(“mouseup”,function(){

alert(“你的选择是：”+range.value+”我现在正在用本地存储保存此值。在浏览器上刷新验证。”);

localStorage?(localStorage.rangeValue=http://www.mamicode.com/range.value):alert(“数据保存到了数据库或是其它地方。”);

}，false);

//滑动显示选择的值

range.addEventListner(“change”,function(){

result.value=http://www.mamicode.com/range.value;

},false);

})();

html5新特性

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > html5新特性

html5新特性

3.视频与音频

3.1Video

3.2Audio

4.Web存储

4.1localStorage

4.2sessionStorage

5.HTML5的特征

5.1.1新的Doctype

5.1.2图形元素

5.1.3<small>重新定义

5.1.4脚本（scripts）和链接（links）无需type

5.1.5引号问题

5.1.6内容可以编辑

5.1.7email输入（input）

5.1.8占位符（placeholders）

5.1.9本地存储（localStorage）

5.2.0语义的Header和Footer

5.2.1IE和HTML5

5.2.2文档某一部分的信息（hgroup）

5.2.3必要的属性（required attribute）

5.2.4autocomplete属性

5.2.5正则表达式

5.2.6属性支持检测

5.2.7mark元素（Mark Element）

5.2.8div

5.2.9小知识

5.3.0data属性

5.3.1使用区域input创建滑块

看完仍有疑问？有类似问题直接问程序猿