H5新增标签学习与简单应用

注:本站相关内容均来自w3c和其它相关网站。(本站相关内容仅供参考,如使用导致你的项目出问题,本站概不负责)
<!DOCTYPE html>这是最新h5文档类型声明,有了文档类型声明,h5新增的标签才有效果,下面跟着我学习一下最新h5标签吧!

   HTML5 提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。

一些过时的 HTML4 标记将被取消。其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 css 取代。

  用于绘画的canvas元素;用于媒体播放的video和audio标签;新增的特殊内容元素如article、 footer 、header、 nav 、section、 filedset、time、summary、source、progress、menu、menuitem、dialog、datalist、command、aside、svg 等;新的表单控件如calendar、date、time、email、url、search。

下面我们来一个个介绍每个标签的意义跟用法:
1.<article>标签
定义和用法:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章、或者来自 blog 的文本、或用户评论、或者是来自论坛的文本。亦或是来自其他外部源内容。
实例:
<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac……
</article>
2.< footer>标签
定义跟用法: 标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。(IE 9+, Firefox, Opera, Chrome, and Safari 支持 <footer> 标签。)
实例:
<footer>
<p>发表于: W3School</p>
<p>联系信息: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
3.<header>标签
定义跟用法: 标签定义文档的页眉(介绍信息)。(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <header> 标签。)
实例:
<header>
<h1>欢迎来到我的课堂</h1>
<p>我叫XXX</p>
</header>
<p>这是个测试代码…</p>
4.<nav>标签
定义跟用法:标签定义导航链接的部分。(IE 9, Firefox, Opera, Chrome 以及 Safari 支持 <nav> 标签。)
实例:
<nav>
<a href="index.asp">首页</a>
<a href="html5_meter.asp">上一页</a>
<a href="html5_noscript.asp">下一页</a>
</nav>
5.<section>标签
定义跟用法:<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
6.<canvas>标签
定义跟用法: 标签定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 标签。)
实例:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById(‘myCanvas’);
var ctx=canvas.getContext(‘2d’);
ctx.fillStyle=’#FF0000′;
ctx.fillRect(0,0,80,100);
</script>
其中canvas.getContext()定义和用法
getContext() 方法返回一个用于在画布上绘图的环境。
语法
Canvas.getContext(contextID)
参数
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
7.<video>标签
定义和用法:<video> 标签定义视频,比如电影片段或其他视频流。(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。)
属性:

video-attr
视频支持的格式:

video-ges
实例:
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
8.<audio>标签
定义和用法:<audio> 标签定义声音,比如音乐或其他音频流。
属性:

audio-attr
音频格式:

audio-ges
实例:
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
9.<svg>标签
定义和用法:(IE 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。)
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
实例:
<svg height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
10.表单 类型
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
浏览器支持:

input-lei
提示:由于有很大部分浏览器不兼容问题,所以不详细介绍表单类型,如感兴趣请自寻资料。
11.<aside>标签
定义跟用法:<aside> 标签定义其所处内容之外的内容。(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <aside> 标签。)
实例:
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
12.<bdi>标签
定义跟用法:<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。(目前只有 Firefox 和 Chrome 支持 <bdi> 标签。)
提示:由于有很大部分浏览器不兼容,所以不详细介绍,如感兴趣请自寻资料。
13.<datalist>标签
定义跟用法:(所有主流浏览器都支持 <datalist> 标签,除了 Internet Explorer 和 Safari。)
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
实例:
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
14.<dialog>标签
定义跟用法:<dialog> 标签定义对话框或窗口。(目前只有 Chrome 和 Safari 6 支持 <dialog> 标签。)
提示:由于有很大部分浏览器不兼容,所以不详细介绍,如感兴趣请自寻资料。
15.<embed>标签
定义跟用法:<embed> 标签定义嵌入的内容,比如插件。
属性:

H5新增标签学习与简单应用
实例:
<embed src="helloworld.swf" />
16.<figcaption>标签
定义跟用法:(IE 9, Firefox, Opera, Chrome 以及 Safari 支持 <figcaption> 标签。)
<figcaption> 标签定义 figure 元素的标题(caption)。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
实例:
<figure>
<figcaption>风景</figcaption>
<img src="fenjin.jpg" width="400" height="200" />
</figure>
17.<figure>标签
定义跟用法:(IE 9, Firefox, Opera, Chrome 以及 Safari 支持 <figure> 标签。)
<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
实例:
<figure>
<p>风景</p>
<img src=fenjin.jpg" width="400" height="200" />
</figure>
18.<keygen>标签
定义跟用法:(Firefox, Chrome, Opera 以及 Safari 6 支持 <keygen> 标签。)
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时,私钥存储在本地,公钥发送到服务器。
属性:

H5新增标签学习与简单应用
实例:
<form action="xxxxx" method="get">
用户名:<input type="text" name="name" />
加密:<keygen name="sws" />
<input type="submit" />
</form>
19.<mark>标签
定义跟用法:<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <mark> 标签。)
实例:
<p>你好!<mark>milk</mark>先生</p>
20.<meter>标签
定义跟用法:<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。(Firefox, Chrome, Opera 以及 Safari 6 支持 <meter> 标签。)
注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。
属性:

H5新增标签学习与简单应用
实例:
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
21.<output>标签
定义跟用法:<output> 标签定义不同类型的输出,比如脚本的输出。(Firefox, Chrome, Safari 以及 Opera 支持 <output> 标签。)
属性:

H5新增标签学习与简单应用
实例:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100+
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
22.<progress>标签
定义跟用法:<progress> 标签标示任务的进度(进程)。(IE 10, Firefox, Opera, Chrome 以及 Safari 6 支持 <progress> 标签。)
注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。
属性:
max="number":规定任务一共需要多少工作。
value="number":规定已经完成多少任务。
实例:
<progress value="22" max="100"></progress>
23.<rp>标签
定义跟用法:(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <rp> 标签。)
<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
ruby 注释是中文注音或字符。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
实例:
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
24.<ruby>标签
定义跟用法:(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <ruby> 标签。)
<ruby> 标签定义 ruby 注释(中文注音或字符)。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
实例:
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
25.<source>标签
定义跟用法:(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 标签。)
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
属性:

source-attr
实例:
<audio controls>
<source src="XX/1.ogg" type="audio/ogg">
<source src="XX/1.mp3" type="audio/mpeg">
你的浏览器不支持该视频
</audio>
26.<rt>标签
定义跟用法:(IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <rt> 标签。)
<rt> 标签定义字符(中文注音或字符)的解释或发音。
ruby 注释是中文注音或字符。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
实例:
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
27.<summary>标签
定义跟用法:<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。(只有 Chrome 以及 Safari 6 支持 <summary> 标签。)
提示:由于有很大部分浏览器不兼容,所以不详细介绍,如感兴趣请自寻资料。
28.<time>标签
定义跟用法:(<time> 标签不会在任何浏览器中呈现任何特殊效果。目前所有主流浏览器都不支持 <time> 标签。)
<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
属性:
datetime=“datetime”:规定日期 / 时间。否则,由元素的内容给定日期 / 时间。
pubdate=“pubdate”:指示 <time> 元素中的日期 / 时间是文档(或 <article> 元素)的发布日期。
实例:
<p>我们在每个工作日早上 <time>9:00</time> 开始上班。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>
29.<track>标签
定义跟用法:(IE 10, Chrome 以及 Opera 支持 <track> 标签。)
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
属性:

track
实例:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
30.<wbr>标签
定义跟用法:Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。(所有浏览器都支持 <wbr> 标签,除了 Internet Explorer。)
提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。
实例:
<p>
如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>

总结:

目前HTML5提供了这些标签语义化程度高,会被经常使用,但是要注意它兼容问题哦,大家在使用这些标签的时候请按自己项目要求来选择合适的标签,这样可以减少项目出现的问题,不过可以用js插件解决这一问题,excanvas.js是Google为IE6支持canvas元素写的脚本,
html5shiv可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行:
<!–if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script&gt;
<![endif]–>
另外还要在你的css文件中加上以下代码,不然有可能会出现些的问题。
header,nav,article,section,aside,footer{display:block;}
还有很多方法可以解决,在这里我就不一个个介绍了,有兴趣的可以自寻资料。

» 本文来自:前端开发者 » 《H5新增标签学习与简单应用》
» 本文链接地址:https://www.rokub.com/8827.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!