HTML5 <address>

Address元素(<address>)是用来存放地址信息的,它可以和[<article>](<http://know.webhek.com/html5/html5-address>)元素配对来提供文章作者的联系信息。对它的使用需要注意以下几点:
  • 如果行文中出现了一些随意的地址,你就不应该使用<address>元素,而应该使用普通的<p>元素就行了。
  • <address>元素里应该只存放地址信息,不要放置其它跟地址不相关的信息,比如出版时间,你应该把它放到<time>元素里。
  • 一个好的习惯是,我们应该把<address>放到<footer>元素里。当然了,如果没有<footer>元素也就不用参考这个规则了。

<address>元素使用实例

<address\\> 你可以到<a href\\="<http://know.webhek.com/html5/contact>"\\>www.webhek.com</a\\>这个网站和作者取得联系。<br\\> 如果你发现了任何bug,请联系<a href\\="<mailto:webmaster@webhek.com>"\\>网站管理员</a\\>。<br\\> 你也可以访问我们的公司,地址是:<br\\> 中国<br\\> 北京<br\\> 朝阳门外大街101号<br\\> WEB骇客<br\\> </address\\>
上面的HTML输出效果是:
notion image
尽管<address>元素缺省的显示样式和<i><em>等元素的样式相同,但当遇到涉及地址的联系信息时,使用<address>元素更合适,因为它体现了更明确的语义信息。

HTML5 <article>

Article元素(<article>)故名思议,可以表示论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。它的主要语义为表示自己是一个独立的内容结构。每一个_<article>_元素内部结构都应该是相似的,比如都应该包含一个头标题(h1-h6元素)等。
<article>元素用法:
  • <article>元素嵌套使用时,则该元素代表与父元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
  • <article>元素中文章作者的信息可通过<address>元素表示,但是不适用于嵌套的<article>元素。
  • <article>元素中文章的发布日期和时间可通过<time>元素的[pubdate](<http://know.webhek.com/html5/html5-time#attr-pubdate>)属性表示。

代码样例

<article class\\="film\\_review"\\> <header\\> <h2\\>侏罗纪公园</h2\\> </header\\> <section class\\="main\\_review"\\> <p\\>Dinos were great!</p\\> </section\\> <section class\\="user\\_reviews"\\> <article class\\="user\\_review"\\> <p\\>Way too scary for me.</p\\> <footer\\> <p\\> Posted on <time datetime\\="2015-05-16 19:00"\\>May 16</time\\> by Lisa. </p\\> </footer\\> </article\\> <article class\\="user\\_review"\\> <p\\>I agree, dinos are my favorite.</p\\> <footer\\> <p\\> Posted on <time datetime\\="2015-05-17 19:00"\\>May 17</time\\> by Tom. </p\\> </footer\\> </article\\> </section\\> <footer\\> <p\\> Posted on <time datetime\\="2015-05-15 19:00"\\>May 15</time\\> by Staff. </p\\> </footer\\> </article\\>

HTML5 <aside>

_HTML<aside>元素_表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在。<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义,比如目录、索引、术语表等;也可以用来显示相关的广告宣传,作者的介绍,Web应用,相关链接,当前页内容简介等。
<aside>元素使用注意事项:
  • 不要使用<aside>元素标记括号中的文字,因为这种类型的文本被认为是主内容的一部分。

使用例子:

<article\\> <p\\> The Disney movie <em\\>The Little Mermaid</em\\> was first released to theatres in 1989. </p\\> <aside\\> The movie earned $87 million during its initial release. </aside\\> <p\\> More info about the movie... </p\\> </article\\>

HTML5 <footer>

HTML Footer 元素 (<footer>)用来表示整个文档或与其相应的某个区域内容的页脚。一个footer通常包含的内容有:作者信息,版权信息或相关连接。
使用注意事项:
  • <footer>元素中的作者信息信息应该放到一个<address>元素里。
  • <footer>元素自己不能成为一个段落内容,因此它不应在文档目录里体现出来。

例子

<footer\\> 版权信息,或文章的作者信息。 </footer\\>

HTML5 <figure>

HTML <figure> 元素是一个自我独立的内容元素,通常会包含一个标题说明(<figcaption>),,内容通常会是一个图片,图表,代码片段或跟主内容相关的图解,它可以放到主内容布局里,也可以放到另外一个页面,或主内容框架之外的附录里。
用法说明:
  • <figure> 元素的内容目录(如果有),不要和主内容目录混合到一起。
  • <figure> 元素的顶部或尾部插入<figcaption>元素来表示标题说明。

使用例子

例 1

<!-- 表示图片 --> <figure\\> <img src\\="<http://know.webhek.com/html5/media/img/mdn-logo-sm.png>" alt\\="An awesome picture"\\> </figure\\> <p\\></p\\> <!-- 有标题的图片 --> <figure\\> <img src\\="<http://know.webhek.com/html5/media/img/mdn-logo-sm.png>" alt\\="An awesome picture"\\> <figcaption\\>Fig1. MDN Logo</figcaption\\> </figure\\> <p\\></p\\>

例 2

<figure\\> <figcaption\\>Get browser details using navigator</figcaption\\> <pre\\> function NavigatorExample() { var txt; txt = "Browser CodeName: " + navigator.appCodeName; txt+= "Browser Name: " + navigator.appName; txt+= "Browser Version: " + navigator.appVersion ; txt+= "Cookies Enabled: " + navigator.cookieEnabled; txt+= "Platform: " + navigator.platform; txt+= "User-agent header: " + navigator.userAgent; } </pre\\> </figure\\>

例 3

<figure\\> <figcaption\\><cite\\>Edsger Dijkstra :-</cite\\></figcaption\\> <p\\>"If debugging is the process of removing software bugs, <br /> then programming must be the process of putting them in"</p\\> </figure\\>

HTML5 <header>

HTML <header> 元素用来表示一些前言性质或导航类的内容。它可以包含一些标题性质元素,也可以放置一些比如logo,搜索框,或其它的<header>元素等。
使用说明:
  • <header>元素并不是一个可以形成段落内容的元素,所以,不需要在内容目录里体现出来。

用法例子

<header\\> a logo </header\\>

HTML5 <nav>

HTML (<nav>)元素用来表示一个含有多个超链接的区域,这个区域的连接可以连接到其他页面,也可以连接到本页面内部其他部分。
用法说明:
  • 并不是所有的链接都必须使用<nav>元素,它只用来将一些热门的链接放入导航栏,例如<footer>元素就常用来在页面底部包含一个不常用到,没必要加入<nav>的链接列表.
  • 一个网页也可能含有多个<nav>元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表.
  • 对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容.

示例

<nav\\> <ul\\> <li\\><a href\\="#"\\>首页</a\\></li\\> <li\\><a href\\="#"\\>关于</a\\></li\\> <li\\><a href\\="#"\\>联系方式</a\\></li\\> </ul\\> </nav\\>

HTML5 <section>

HTML Section 元素 (<section>) 表示文档中的一个区块(或章节),比如,内容中的一个专题组,一般来说会有包含一个标题。 每个<section>的结构应该是相似的,通常会将一个标题元素(<h1><h6> 元素)作为子元素。
用法说明 :
  • 如果<section>元素的内容感觉是相互分离但可以合在一起的内容,那么,应该用<article>元素来替换它。
  • 不要把 <section> 元素作为一个普通的容器来使用;这种情况是 <div>的适用范围,特别是当它的目标只是美化样式的情况。 通常来说一个 <section> 应该只被当做文档结构框架来使用。

用法说明:

<section\\> <h1\\>Heading</h1\\> <p\\>Bunch of awesome content</p\\> </section\\>

例 2

主体前

<div\\> <h2\\>Heading</h2\\> <img\\>some image</img\\> </div\\>

主体后

<section\\> <h2\\>Heading</h2\\> <img\\>some image</img\\> </section\\>

HTML5 <datalist>

<datalist>标记很很像<select>标记,它里面可以放置很多个<option>元素,而且也呈现出下拉列表的样子,但它显示的地方不一样。它只是一个数据容器,需要使用它的<input>元素使用list属性引用<datalist>列表。于是这个<input>不仅可以直接输入数据,而且可以从下拉列表中选择数据。
<label\\>从列表中选择一种浏览器: <input list\\="browsers" name\\="myBrowser" /></label\\> <datalist id\\="browsers"\\> <option value\\="谷歌浏览器"\\> <option value\\="火狐浏览器"\\> <option value\\="IE浏览器"\\> <option value\\="Opera浏览器"\\> <option value\\="Safari浏览器"\\> </datalist\\>

HTML5 <output>

这个<output>标记是用来输出计算结果或用户动作的结果。

<output>元素的几个属性:

for
用来指明参与计算的元素的ID,用空格分割多个ID
form
这个元素相对应的表单的ID,如果这个元素放在一个表单内,这不用指明这个值。当它位于表单外时,需要指明是属于哪个表单。
name
这个元素的名称。
例1
<form oninput\\="result.value\\=parseInt(a.value)+parseInt(b.value)"\\> <input type\\="range" name\\="b" value\\="50" /> + <input type\\="number" name\\="a" value\\="10" /> = <output name\\="result"\\></output\\> </form\\>
例2
<form onsubmit\\="return false" oninput\\="o.value \\= parseInt(a.value) + parseInt(b.value)"\\> <input name\\="a" type\\="number" step\\="any"\\> + <input name\\="b" type\\="number" step\\="any"\\> = <output name\\="o"\\></output\\> </form\\>

HTML5 <progress>

<progress>标记,顾名思义,就是显示进度条。

<progress>标记的几个属性:

max
进度条的最大值,必须是大于零的值,可以是浮点数。缺省值为1
value
进度条的完成进度,必须是小于max的值。
例1
<progress value\\="70" max\\="100"\\>70 %</progress\\>

HTML5视频<video>/音频<audio>的用法介绍

HTML5里引入的新标记 <audio><video> 实现了HTML对视频播放和音频播放的原生支持,有了这种原生的HTML5视频播放器/音频播放器,我们不再需要flash技术,而直接能将视频/音频嵌入到了网页中。

如何嵌入视频和音频

在网页里嵌入HTML5音频播放器和视频播放器的方法非常简单:
<video src\\="<http://www.webhek.com/~j/theora\\_testsuite/320x240.ogg>" controls autoplay loop\\> Your browser does not support the <code\\>video</code\\> element. </video\\>
上面这个例子显示了如何播放一个视频文件,并露出视频播放控制按钮。
下面这个例子是在HTML网页里嵌入音频 audio 的方法:
<audio controls autoplay loop src\\="/test/audio.ogg"\\> <p\\>Your browser does not support the <code\\>audio</code\\> element.</p\\> </audio\\>
这里的 src 属性里可以填入一个音频/视频的URL,也可以是一个本地的文件。
<audio src\\="audio.ogg" controls autoplay loop\\> <p\\>Your browser does not support the <code\\>audio</code\\> element </p\\> </audio\\>
下面是<audio><video> 两个标记上控制属性的含义:
  • controls : 显示标准的 HTML5 视频/音频播放器控制条、控制按钮。
  • autoplay : 让文件自动播放。
  • loop : 让文件循环播放。
<audio src\\="audio.mp3" preload\\="auto" controls\\></audio\\>
这里的 preload 属性是用来缓存大体积文件的。它有三个可选值:
  • "none" 不缓存
  • "auto" 缓存
  • "metadata" 只缓存文件元信息
为了能够兼容各种浏览器对不同媒体类型的支持,我们可以用多个 <source> 元素来提供多个不同的媒体类型。例如:
<video controls\\> <source src\\="foo.ogg" type\\="video/ogg"\\> <source src\\="foo.mp4" type\\="video/mp4"\\> Your browser does not support the <code\\>video</code\\> element. </video\\>
支持Ogg格式视频流的浏览器可以播放 Ogg 文件。如果不支持,可以播放 MPEG-4 文件。查看各种浏览器对各种媒体类型的支持情况,请查看这里
我们还可以指定播放使用的解码器(codecs); 这样就可以更精确的让浏览器如何播放提供的视频:
<video controls\\> <source src\\="foo.ogg" type\\="video/ogg; codecs\\=dirac, speex"\\> Your browser does not support the <code\\>video</code\\> element. </video\\>
上面,我们指定了这个视频需要使用 Dirac 和 Speex 解码器。如果浏览器支持 Ogg 格式,但没有指定的解码器,那么,视频将不会被加载。
如果没有提供 type 属性,则浏览器会向服务器询问媒体类型,看看是否支持;如果不支持,浏览器将会去检查下一个 source 属性。

用JavaScript控制视频/音频播放

一旦视频文件正确的嵌入到了HTML网页里,我们就可以使用JavaScript里控制它的部分,获取它的播放信息。比如,用JavaScript启动视频播放:
var v \\= document.getElementsByTagName("video")\\[0\\]; v.play();
用JavaScript可控制HTML5视频播放器实现播放、暂停、快进,快退、音量等。
<audio id\\="demo" src\\="audio.mp3"\\></audio\\> <div\\> <button onclick\\="document.getElementById('demo').play()"\\>播放</button\\> <button onclick\\="document.getElementById('demo').pause()"\\>暂停</button\\> <button onclick\\="document.getElementById('demo').volume+\\=0.1"\\>降低音量</button\\> <button onclick\\="document.getElementById('demo').volume-\\=0.1"\\>提高音量</button\\> </div\\>

停止下载视频文件

虽然我们可以使用pause()方法里让视频文件停止播放,但浏览器并未停止下载媒体文件,除非它达到了一定的缓存量。
下面是让浏览器如何停止下载视频文件的方法:
var mediaElement \\= document.getElementById("myMediaElementID"); mediaElement.pause(); mediaElement.src\\=''; //或 mediaElement.removeAttribute("src");
通过删除 src 属性(或者设置为空值),这样就能停止文件的网络下载。

设定播放的时间点定位

我们可以指定视频从某时某分某秒开始播放,这是通过设置 currentTime 属性来实现。
我们可以通过 seekable 属性来获得视频有效的播放时间范围。它会返回一个 TimeRanges 对象,能够告诉你有效的开始时间和结束时间。
var mediaElement \\= document.getElementById('mediaElementID'); mediaElement.seekable.start(0); // 返回开始时间 (秒) mediaElement.seekable.end(0); // 返回结束时间 (秒) mediaElement.currentTime \\= 122; // 定位到第 122 秒播放 mediaElement.played.end(0); // 返回已经播放的时间长度(秒)

设定播放范围

当在网页里嵌入视频/音频文件时, <audio><video> 元素允许我们提供一些额外的信息来指定播放哪一时间段。实现的方法是在媒体文件后面跟随(“#”)格式的信息。
它的具体语法是这样的:
#t=\\[开始时间\\]\\[,结束时间\\]
时间的表示方法可以使用秒数,也可以提供一个 ”时:分:秒“ 格式的时间(例如 2:05:01 )。/p>
举例:
指定视频从10秒开始播放,到20秒处结束。
指定视频从头开始播放到 10.5 秒处。
指定视频播放2小时。
指定视频从第60秒开始播放,播放到结束。

<dl>、<dt>和<dd>标记的用法

<dl>、<dt>、<dd>这三个html标记是一个组合,它们很很像<ul><li>这个标签组合,但<dl>、<dt>、<dd>通常是用来描述一些术语定义,比如附录里的词汇表,或用来显示key-value这样成对的键和值。
<dl>、<dt>、<dd>通常被称为定义性列表。
例一:一个术语对应一条解释或定义
<dl\\> <dt\\>Firefox</dt\\> <dd\\>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd\\> <!-- other terms and definitions --> </dl\\>
例二:多个术语对应一条解释或定义
<dl\\> <dt\\>Firefox</dt\\> <dt\\>Mozilla Firefox</dt\\> <dt\\>Fx</dt\\> <dd\\>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd\\> <!-- other terms and definitions --> </dl\\>
例二:一个术语对应多条解释或定义
<dl\\> <dt\\>Firefox</dt\\> <dd\\>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd\\> <dd\\>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</dd\\> <!-- other terms and definitions --> </dl\\>
例二:多术语和解释或定义
<dl\\> <dt\\>Name</dt\\> <dd\\>Godzilla</dd\\> <dt\\>Born</dt\\> <dd\\>1952</dd\\> <dt\\>Birthplace</dt\\> <dd\\>Japan</dd\\> <dt\\>Color</dt\\> <dd\\>Green</dd\\> </dl\\>
badge