HTML5网页html代码示例

Posted

我尝试写的一个HTML5页面代码，你可以保存为一个html文件用支持HTML5的浏览器（比如chrome, safari5, firefox3等）运行看看效果。：

<!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的结构。

转载：dafi

Comments are closed.