关注前端开发微信微信号web007007

HTML5 代码结构示例

作者 管理员 发布时间 2012-06-01 14:02 文章分类 HTML5 文章评论 抢沙发 阅读次数

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 代码结构示例</title>
</head>

<body>

<header>
 <h1>HTML5 代码结构示例</h1>
</header>

<nav>
 <menu>
 <li>菜单1</li>
 <li>菜单2</li>
 <li>菜单3</li>
 <li>菜单4</li>
 <li>菜单5</li>
 </menu>
</nav>

<section>
 <article>
 <h2>文章标题</h2>
 <p>
 发表时间:<time datetimt="2010-11-25 11:11:11">2010年11月25日 11:11:11</time>
 文章评分:<meter value="88" min="0" max="100" low="65" high="96" optimum="100">80</meter>
 </p>
 <p>文章文字,<m>不重要的文字</m></p>
 <h3>文章图片:</h3>
 <figure>
 <legend>这是图片说明</legend>
 <img alt="替换文本" src="dafi.png" />
 </figure>
 <h3>文章视频:</h3>
 <video src="dafi.ogg" controls="controls">
 请升级你的浏览器。
 </video>
 <command type="command">点这里了解更多</command>
 </article>
 <div id="comments">
 <dialog>
 <dt>发言者</dt>
 <dd>发言内容</dd><!-- 在HTML5中,dt用于表示发表者,dd表示发表的内容 -->
 <dt>发言者2</dt>
 <dd>发言内容2</dd>
 </dialog>
 </div>
</section>

<sidebar>
 <h2>关于我</h2>
 <我是dafi,我的网站是<a title="dafi's homepage" href="http://www.dafi.cn">www.dafi.cn</a>。>
 <details>
 <legend>了解更多</legend>
 <p>作品有TCMS、TCSS、TStyle等。。。</p>
 </details>
</sidebar>

<footer>
 dafi版权所有
</footer>

</body>
</html>

我这只是一个HTML5结构示例,实际工作中代码结构不会这么简单。
我也没写css,因为本文针对的是HTML5的示例,所以只写HTML的结构。

本文固定链接: http://www.web92.net/173.html | WEB前端开发

该日志由 于2012年06月01日发表在 HTML5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: HTML5 代码结构示例 | WEB前端开发