HTML5的五大优秀功能

 

HTML 方面的变化

作者:RobertMcArdle,趋势科技资深威胁研究员
 

一、标签

这篇文章是HTML5系列文章中的第一篇。
 

1.更语义化标签

  • header、nav、section、aside、article、footer
  • 作用
  • html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析
  • 即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解

HTML5是网站运作所使用语言的第五次改版,我们随后会提供一份报告,详细介绍针对这种新的技术会产生怎样的新攻击方式。接着,我们还会仔细介绍HTML5对于网络世界以及网络犯罪份子来说,会有哪些好处、坏处,以及丑陋面。
 

2.应用程序标签

  • DataList(数据列表)

<!--数据列表呈现需要载体 input-->
<input type="text" list="input_list"/>
<datalist id="input_list">
    <option value="aa"></option>
    <option value="bb"></option>
</datalist>
  • Progress(进度条)

<!--状态指示器-->
<progress></progress>
<!--进度条默认最大值 1-->
<progress value="0.5" max="100" class="my-p"></progress>

/*去除默认样式*/
.my-p {
    -webkit-appearance: none;
}
/*自定义内部样式*/
.my-p::-webkit-progress-bar {
}
  • Meter(数值显示器)

<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
  • Menu(右键菜单)
  • Detail(明细)

首先,HTML5(以及相关的API)并不像我们平时所熟悉的软件升级。这种技术实际上提供了很多新功能,每种功能都需要浏览器软件专门支持。这里有一篇详细的维基百科文章,介绍了目前有哪些功能已经实现。对我来说,HTML5带来了许多很棒的功能,而其中有五个是特别赞的,我认为这五个功能可以真正改变我们与网站之间的互动。
 

二、属性

1.        新的图形库:HTML5引入了Canvas和WebGL函数库,可以让网站内容变得更加丰富。特别是WebGL函数库,几乎可以改变这一领域的整个游戏规则,只要看看这个著名的雷神之锤II游戏场景的画面,这可完全是用HTML5来开发的。对我来说,这代表了新的时代,让人可以想象未来的游戏是怎么玩的。
 

1.链接关系描述

<!--通过链接关系属性声明连入的链接和当前文档之间的关系-->
<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
<link rel="shortcut icon" href="favicon.ico">
<link rel="pingback" href="http://myblog.com/xmlrpc.php">
<link rel="prefetch" href="http://myblog.com/main.php"> ...

<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>

2.        更方便的多媒体内容:如果曾经设计过需要包含许多影音内容的网站,你就会了解那种笨重的感觉。常常需要用一堆Flash加上<object>和<embed>标记才能获得想要的效果。但是以后再也不用这么麻烦了,HTML5引入了容易使用的<video>和<audio>标记,所以要在网站上加入多媒体内容变得比以往更加容易。也正因为有这样的功能,所以很多在线视频网站已经开始转移到HTML5了。
 

2.结构数据标记(基本不用)

<div itemscope itemtype="http://test.com/hello">
    <p>我叫XXX。</p>
    <p>
        养了一条叫
        AAA的
        BBB犬。
    </p>
</div>

3.        地理定位:人们越来越少通过台式机甚至笔记本电脑来使用网络了。在今天,有很多人通过手持可移动设备浏览网络,例如智能手机和平板电脑。目前这种移动化的网络访问特征,再加上HTML5中新的地理定位功能,结合在一起开创了无数新的可能性。当用户访问你的网站时,可以知道他们的精确位置,让你能够提供个性化内容,以配合用户所在的环境。例如,当访问一个与郊游有关的网站时,如果发现你处于闹市区,就可以提供行程规划相关的信息;但如果你是在郊区位置访问该网站,则默认会显示互动式地图功能。

3.ARIA(无障碍富互联网应用程序)

威尼斯人线上娱乐 1

4.自定义属性

  • data-

<div data-score="100" data-name="aaa" data-high="185">student</div>

4.        拖放功能:这是个细微的变动,但却非常重要。拖放功能可以让你将浏览器的内容直接拖拉到电脑上,也可以将内容从电脑拖拉到浏览器上。真的是很划时代的改变,不是吗?来看看这个展示,想想看,如果社交网站有这样的功能,当你度假回来后,就可以很容易选好你的假期照片,然后拖拉到浏览器,就可以马上和网上的朋友分享。这才
是我想要的网站互动方式!
 

三、智能表单

5.        桌面通知:桌面通知是出现在浏览器之外的小弹窗,即使在用户没有浏览网站时,也可以和网站进行互动。目前这个功能只有Google
Chrome浏览器可以使用,你可以在这里看到展示。这些通知很适合用来做电子邮件通知、社交网络更新、微博信息,还有其他服务中使用。再配合拖放功能后,就真的弱化了在线和本地应用程序之间的区别。
 

1.新的表单类型

<input type="text" required>
<input type="email" value="some@email.com">
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
<input type="range" min="0" max="50" value="10">
<input type="search" results="10" placeholder="Search...">
<input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
<input type="color" placeholder="e.g. #bbbbbb">
<input type="number" step="1" min="-5" max="10" value="0">

这些只是HTML5各种神奇功能的一小部分,网上还有很多其他展示值得一看。然而就像超级英雄电影里的强大能力一样,这些功能也可能会是把双刃剑。在这系列的第二篇文章里,我们将介绍HTML5所带来不好的一面。
 

2.虚拟键盘适配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

@原文出处:HTML5 – The Good

四、网页多媒体

http://www.bkjia.com/HTML5/477692.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/477692.htmlTechArticle作者:RobertMcArdle,趋势科技资深威胁研究员威尼斯人线上娱乐,
这篇文章是HTML5系列文章中的第一篇。
HTML5是网站运作所使用语言的第五次改版,我们随后会提…

1.音频

<!--方式一-->
<audio src="a.mp3" controls="controls"></audio>

<!--方式二-->
<audio src="a.mp3" id="audio"></audio>
<button id="btn">播放</button>
<button id="btn_pause">暂停</button>

<script type="text/javascript">
    var btn = document.getElementById('btn');
    var pause = document.getElementById('btn_pause');
    var audio = document.getElementById('audio');
    btn.addEventListener('click', function() {
        audio.play();
    });
    pause.addEventListener('click', function() {
        audio.pause();
    });
</script>

2.视频

<video controls="controls">
    <source src="myvideo.mp4" type="video/mp4"></source>
    <source src="myvideo.ogv" type="video/ogg"></source>
    <source src="myvideo.webm" type="video/webm"></source>
    <!--上述格式都不支持,使用传统方式播放-->
    <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
        <param name="movie" value="myvideo.swf" />
        <param name="flashvars" value="autostart=true&file=myvideo.swf" />
    </object>
    当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>

3.字幕

五、Canvas

1.2D

2.3D (WebGL)

六、SVG(可缩放矢量图形)

  • 优点:体积小、质量高、效果好、可控程度高

<!--方式一-->
<iframe src="demo.svg"></iframe>
<!--方式二-->
<object data="demo.svg"></object>
<!--方式三-->
<embed src="demo.svg"/>

JavaScript 方面的变化

一、核心平台提升

1.新的选择器

  • 通过类名查找元素

document.getElementById('section1'); 
document.getElementsByTagName('div'); 
document.getElementsByClassName('section');
  • 通过CSS语法查找元素

//document.querySelectorAll() 返回所有满足条件的元素
document.querySelectorAll('ul');
document.querySelectorAll('.container');

//document.querySelector() 返回第一个满足条件的元素
document.querySelector('div.container > .inner');
网站地图xml地图