Perfect-HTML-Semantic/index.html at master · ordinarycas/Perfect-HTML-Semantic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="zh-Hant-TW" dir="auto">
<head>
  <base href="https://ordinarycas.github.io/Perfect-HTML-Semantic/" target="_self">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="default-style" content="text/css">
  <meta name="description" content="HTML5 的規格中，提供了一系列語意標籤（Semantic Elements）">
  <meta name="keywords" content="HTML,HTML5,語義化,完美HTML,Semanti">
  <meta name="author" content="Omar Cai">
  <meta name="copyright" content="Cai Ci-Jhan">
  <!-- Facebook OG 開始 -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://ordinarycas.github.io/Perfect-HTML-Semantic/">
  <meta property="og:title" content="完美的 HTML5 語義化">
  <meta property="og:image" content="./assets/image/favicon.ico">
  <meta property="og:description" content="正在執行完美的 HTML5 語義化">
  <meta property="og:site_name" content="完美的 HTML 語義化">
  <meta property="og:locale" content="zh_TW">
  <!-- Facebook OG 結束 -->
  <meta name="viewport" con`tent="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>完美的 HTML5 語義化</title>
  <link rel="shortcut icon" type="image/ico" href="./assets/image/favicon.ico">
  <link rel="stylesheet" type="text/css" href="./css/main.min.css">
  <link rel="help" type="text/markdown" href="./README.md">
</head>
<body>
  <header class="body-header">
    <h1>做一個完美的<abbr title="HyperText Markup Language">HTML</abbr>語義化</h1>
    <p>這個區塊使用<strong>header</strong>是為了表示，一整份文件的頭部，<strong>strong</strong>標籤是有意義的表示所以這邊就不使用<b>b</b>標籤了</p>
  </header>
  <nav class="body-nav">
    <p>這是一整份文件的主導覽列</p>
    <ul>
      <li><a href="#">首頁</a></li>
      <li><a href="#">表單</a></li>
      <li><a href="#">表格</a></li>
    </ul>
  </nav>
  <main id="main">
    <nav>
      <p>這是主內容的導覽</p>
      <ul>
        <li><a href="#">第一節標題</a></li>
        <li><a href="#">第二節標題</a></li>
        <li><a href="#">第三節標題</a></li>
      </ul>
    </nav>
    <article>
      <header>
        <h2>一整份文章需要有標題</h2>
        <p>文章內有可能會有敘述文稿，並分章節做說明</p>
      </header>
      <section>
        <h3>第一節、每個章節會有自己的標題</h3>
        <p>章節也有敘述文字</p>
      </section>
      <section>
        <h3>第二節、每個章節會有自己的標題</h3>
        <p>章節也有敘述文字</p>
      </section>
      <section>
        <h3>第三節、每個章節也有可能有獨立的文章</h3>
        <p>某某學術研究文稿如下：</p>
        <article>
          <h4>該學術研究的標題</h4>
          <p>敘述.....</p>
        </article>
      </section>
      <footer><p>一個好文章也要有尾巴</p></footer>
    </article>
    <aside>
      <h2>對於本篇敘述的相關文章</h2>
      <p>實務上可能會使用無序清單來做編排</p>
      <ul>
        <li><a href="#" target="_blank">相關文章一</a></li>
        <li><a href="#" target="_parent">相關文章二</a></li>
        <li><a href="#" target="_top">相關文章三</a></li>
      </ul>
    </aside>
  </main>
  <aside class="body-aside">
    <h2>對於本網站的相關文章</h2>
    <p>實務上可能會使用無序清單來做編排</p>
    <ul>
      <li><a href="#" target="_blank">相關文章一</a></li>
      <li><a href="#" target="_parent">相關文章二</a></li>
      <li><a href="#" target="_top">相關文章三</a></li>
    </ul>
  </aside>
  <footer class="body-footer"><p><small>Copyright © 2018 Omar Cai<sup>®</sup></small></p></footer>
  <script src="./js/main.js"></script>
</body>
</html>