HTML5 预览HTML/Xhtml网页制作
| 原文：http://www.php.cn/作者：Lachlan Hunt译者：zhaozy in 3user.com概要网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来到我们身边已经差不多有10年了, 发行者们不断的寻求提供 原文：http://www.php.cn/ 作者：Lachlan Hunt 译者：zhaozy in 3user.com 概要 网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来到我们身边已经差不多有10年了, 发行者们不断的寻求提供更强大的功能的新技术, 但是常会因为标记语言和浏览器的约束而路途坎坷. 为了给作者们提供更灵活, 更具互操作性, 能有更多交互性并令人振奋的网站和应用程序, HTML 5 引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs), 多媒体, 结构化和语义化. HTML 5的工作, 开始于2004年, 在 W3C HTML WG 和 WHATWG 的共同努力下现在正在全面贯彻落实. 很多关键角色参与了W3C的努力, 最具代表性的是4大浏览器厂商: Apple, Mozilla, Opera, Microsoft; 还有一系列的有着不同利益和专业技术的其他机构以及个人. 编写详细规范的工作还在进行中, 离完成还有很长的路要走. 同样的, 在这篇文章中讨论的功能不排除在未来有所改动的可能. 这篇文章只是以大纲的形式介绍一些在当前的草案中的主要的特性. 结构 HTML 5 引入了一整套全新的元素来让构建页面变得更加简单. 大多数基于HTML 4的页面的包含多种常用结构, 比如说页首(header), 页脚(footer)和纵列(column). 现阶段我们通常会用p元素标记这些区块, 然后为它们定义一个描述性的id或是class.  图表说明一个典型的用p元素带上id和class属性标记的2栏布局. 其中包括页首(header)和页脚(footer), 在页首下面是一个水平导航条, 主体内容又包含了文章(article)和它右边的侧边栏(sidebar). 大量的使用p元素是因为目前的HTML 4版本缺少更明确的语义描述这些区块所致. HTML 5 为了表现这些不同的区块而引入了新的元素.  那些p元素可以被新的元素代替了: header, nav, section, article, aside以及footer. <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer></body>
<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section></section>
<header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p></header><header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2></header>
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul></nav>
<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul></aside>
<section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...</p></section> (引用自<A Tale of Two Cites>) <article id="comment-2"> <header> <h4> <a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="Jack'>http://www.php.cn/">Jack O'Niell</a> </h4> <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p> </header> <p>That's another great article!</p></article> 视频和音频 <audio src="music.oga" controls> <a href="music.oga">Download song</a></audio> HMTL 5 提供了source 元素, 让浏览器根据媒体类型或编码器的支持来指定视频或音频文件. media属性会根据设备的局限性和被指定的媒体的类型和编码器来指定一个媒体选择查询. 当在使用 source 元素时, 上级元素( video或audio )的src属性需要省略掉, 不然 source 元素中的src属性会被忽略掉. <video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"></video><audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"></audio> 为了那些需要给用户界面更多一点控制来符合页面的总设计的创作者以方便, 广泛的API提供了一些方法和事件让scripts来控制媒体文件. 最简单的方法就是用 play(), pause(), 然后可以通过设置 currentTime 来进行循环. 接下去的例子会解释怎么用. <video src="video.ogg" id="video"></video><script>var video = document.getElementById("video");</script><button type="button" onclick="video.play();">Play</button><button type="button" onclick="video.pause();">Pause</button><button type="button" onclick="video.currentTime = 0;"><< Rewind</button>还有很多这里没有讨论到的属性以及API可以被用到视频音频元素. 如果想知道更多, 你可以参考 current draft specification (http://www.php.cn/). <!DOCTYPE html><html><head><title>An HTML Document</title></head><body> <h1>Example</h1> <p>This is an example HTML document.</body></html> 你会注意到, 这看起来很像是前个版本的HTML, 有些标签会自动闭合. <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p></body></html> 除了间隔和xmls属性, 这两个例子几乎是相同的. |
