KabunBot.github.io/index.html at main · KabunBot/KabunBot.github.io · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--這裡是註解文字，只會在 HTML code 裡看到，不會出現在畫面-->
	  <!--
	    這裡是多行註解
      這裡是多行註解
      這裡是多行註解
	  -->
    <p><strong>This</strong> is some content</p>
    <h1>This is heading</h1>
    <h2>This is heading</h2>
    <h3>This is heading</h3>
    <!-- 我是備註，標題和<p>會自己換行不用加 br -->
    <p><strong>This</strong> is some content</p>
    <p><strong>This</strong> <i>is</i> some content</p>
    <font size="1">文字</font></br>
    <font size="2">文字</font></br>
    <font size="3">文字</font></br>
    <!-- 不加 br 是呈現一行文字，是文字所以要自己加 br 換行 -->
    <div>
        <h1>111</h1>
        <p>222</p>
    </div>
    <span></span>

    <!-- 以下是語意標籤 nav -->
    <nav class="menu">
        <ul>
          <li><a href="http://www.google.com">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <ul>
            <li><a href="http://www.google.com">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
    </nav>

      <h1>The Daily News</h1>

    <!-- 以下是語意標籤 article -->
    <article>
      <h2>News 1</h2>
      <!-- article content -->
    </article>

    <article>
      <h2>News 2</h2>
      <!-- article content -->
    </article>

    <article class="forecast">
      <h1>Weather forecast for Seattle</h1>

      <article class="day-forecast">
        <h2>08 August 2022</h2>
        <p>Rain.</p>
      </article>

      <article class="day-forecast">
        <h2>09 August 2022</h2>
        <p>Periods of rain.</p>
      </article>

      <article class="day-forecast">
        <h2>10 August 2022</h2>
        <p>Heavy rain.</p>
      </article>
    </article>

    <!-- 以下是語意標籤 section 群組區塊 -->
    <section>
      <h1>Heading</h1>
      <p>Bunch of awesome content</p>
    </section>

    <!-- 以下是語意標籤 section 群組區塊 + article -->
    <article>
      <section id="intro">
          <!-- 介紹 -->
      </section>

      <section id="main_content">
          <!-- 主內容 -->
      </section>

      <section id="related">
          <ul>
            <li><a href="that.html">相關文章</a></li>
            <li><a href="that.html">相關文章</a></li>
          </ul>
      </section>
    </article>

      <p>
        The Disney movie <cite>The Little Mermaid</cite> was
        first released to theatres in 1989.
      </p>
      <aside>
        <p>
          The movie earned $87 million during its initial release.
        </p>
      </aside>
      <p>
        More info about the movie...
      </p>

        <section>
          <!-- stuff -->
          <footer>
            <!-- A footer for the section. -->
          </footer>
        </section>

        <footer>
          <p>© 2020 Fooish</p>
          <!-- A footer for the page. -->
        </footer>
</body>
</html>