html/introduction-to-html/document-and-website-structure/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>二次元俱乐部</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe&amp;subset=chinese-simplified" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <!--以下三行修复了使用旧版本 Internet Explorer 时 HTML5 语义元素运行不正常的问题-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- 以下是本站所有网页的统一主标题 -->

    <header>
      <h1>聆听电子天籁之音</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">作品</a></li>
        <li><a href="#">项目</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>

      <!-- 搜索栏是站点内导航的一个非线性的方式。 -->

      <form>
        <input type="search" name="q" placeholder="要搜索的内容">
        <input type="submit" value="搜索">
      </form>
    </nav>

    <!-- 以下是网页主体内容 -->
    <main>

      <!-- 包含一个 article（一篇文章） -->
      <article>
        <h2>火星演唱会火热售票中</h2>

        <p>洛天依是上海禾念推出的一套采用Vocaloid语音合成技术的数据库及虚构角色。歌声样本取自中国配音演员山新和日本歌手鹿乃，ideolo为“Vocaloid™ China Project”设计出该角色。</p>

        <h3>九九八十一</h3>

        <p>世尊如来佛 诘问着我的执着 当年我瑶池刻 闹得痛快并未想过太多 状罪责 拿捏了我的业果 可顽心不服错 不思过 齐天大圣地上行者</p>

        <p>那传说 忘却了我的寂寞 英雄名不堪得 何必较我混沌徒费口沫 这人间 毕竟我真正走过 一途平九百波 九千错 凌云渡成正果但我 有九九八十一种不舍</p>

        <h3>达拉崩吧</h3>

        <p>龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚砍向㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥，然后㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥咬了龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚。最后龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚他战胜了㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥，救出了公主䥸䝟䳮䟑䎘䫱䉷䰯䕈䟐䬝，回到了䥰龘䰕䘋㽌䇁䵄䵻䬛蟿䆉㖀城。国王听说龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚他打败了㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥，就把公主䥸䝟䳮䟑䎘䫱䉷䰯䕈䟐䬝嫁给龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚。</p>

        <p>龘䶛䨻䎱、公主䥸䝟幸福地像个童话，他们生下一个孩子也在天天渐渐长大，为了避免以后麻烦，孩子称作王浩然，他的全名十分难念，我不想说一遍……</p>
      </article>

      <!-- 侧边栏在主内容右侧 -->
      <aside>
        <h2>相关链接</h2>

        <ul>
          <li><a href="#">言和</a></li>
          <li><a href="#">乐正绫</a></li>
          <li><a href="#">初音未来</a></li>
          <li><a href="#">三无 Marblue</a></li>
          <li><a href="#">二次元欢迎你</a></li>
        </ul>
      </aside>

    </main>

    <!-- 以下是本站所有网页的统一页脚 -->

    <footer>
      <p>© 2050 保留所有权利 | 宇 PPP 备 0054444944 号</p>
    </footer>

  </body>
</html>