J.J.'s Blogs

J.J. Huang   2019-05-16   Web   瀏覽次數：次   {{moment(1558021800000).fromNow()}}

Web - 第七章 | HTML 文件和網站結構

📑 目錄
  1. 文件的基本部分
  2. 用於構造內容的HTML
  3. HTML 佈局元素細節
    1. 無語義元素
    2. 換行與水平分割線
  4. 規劃一個簡單的網站

除了定義頁面的各個部分（例如“段落”或“圖像”）之外，HTML還擁有許多用於定義網站區域的塊級元素（例如“標題”，“導航” 菜單“，”主要內容欄“）。 本文探討如何規劃基本網站結構，並編寫HTML來表示此結構。

文件的基本部分

網頁的外觀多種多樣，但是除了全屏視頻或遊戲，或藝術作品頁面，或只是結構不當的頁面以外，都傾向於使用類似的標準組件：

  • 標題欄(header)
    通常橫跨於整個頁面頂部有一個大標題和/或一個標誌。這是網站的主要一般訊息，通常存在於所有網頁。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

  • 導航欄(navigation bar)
    指向網站各個主要區段的超連結。通常用菜單按鈕、連結或標籤頁表示。類似於標題欄，導航欄通常應在所有網頁之間保持一致，否則會讓用戶感到疑惑，甚至無所適從。許多web設計人員認為導航欄是標題欄的一部分，而不是獨立的組件，但這並非決對；還有人認為，兩者獨立可以提供更好的無障礙訪問特性，因為屏幕閱讀器可以更清晰地分辨二者。

  • 主內容(main content)
    中心的大部分區域是當前網頁大多數的獨有內容，例如視頻、文章、地圖、新聞等。這些內容是網站的一部分，且會因頁面而異。

  • 側邊欄(sidebar)
    一些外圍訊息、連結、引用、廣告等。通常與主內容相關（例如一個新聞頁面上，側邊欄可能包含作者訊息或相關文章連結），還可能存在其他的重複元素，如輔助導航系統。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

  • 頁腳(footer)
    橫跨頁面底部的狹長區域。和標題一樣，頁腳是放置公共訊息（比如版權聲明或聯繫方式）的，一般使用較小字體，且通常為次要內容。還可以通過提供快速訪問連結來進行SEO(搜尋引擎最佳化)。

一般常見的典型的網站設計，可以參考 三種典型的網站首頁設計模式

Web - 第七章 - 圖 1 (sample website)​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

<br/ >

用於構造內容的HTML

以上簡單示例不是很精美，但是足夠說明網站的典型佈局方式了。一些站點擁有更多列，其中一些遠比這複雜，但一切在你掌握之中，通過CSS你幾乎使用任何元素按自己的思路裝飾不同的區段，但如前所述，我們要敬畏語義，做到正確選用元素。

這是因為視覺效果並不是一切。我們可以修改最重要內容（例如導航菜單和相關連結）的顏色、字體大小來吸引用戶的注意，但是這對視障人士是無效的，“粉紅色”和“大字體”對他們並不奏效。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

注：全球色盲患者比例為4%，換句話說，每12名男性就有一位色盲，每200名女性就有一位色盲。全盲和視障人士約佔世界人口（約70億）的13％（2015年全球約有9.4億人口存在視力問題）。

HTML代碼中可根據功能來為區段添加標記。可使用元素來無歧義地表示上文所講的內容區段，屏幕閱讀器等輔助技術可以識別這些元素，並幫助執行“找到主導航“或”找到主內容“等任務。

為了實現語義化標記，HTML 提供了明確這些區段的專用標籤，例如：​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

  • <header>：標題欄。
  • <nav>：導航欄。
  • <main>：主內容。主內容中還可以有各種子內容區段，可用<article>、<section>和<div>等元素表示。
  • <aside>：側邊欄，經常嵌套在<main>中。
  • <footer>：頁腳。
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>My page title</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Here is our main header that is used across all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

       <!-- A Search form is another commmon non-linear way to navigate through a website. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- Here is our page's main content -->
    <main>

      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>Subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h3>Another subsection</h3>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>

尚未套用CSS的呈現畫面：
Web - 第七章 - 圖 2 (01)

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
127
128
129
130
131
132
133
/* || General setup */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  margin: 0 auto;
}

/* || typography */

h1, h2, h3 {
  font-family: 'Sonsie One', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

nav, article, aside, footer {
  background-color: white;
  padding: 1%;
}

nav {
  height: 50px;
  background-color: #ff80ff;
  display: flex;
  margin-bottom: 10px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a {
  display: inline-block;
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

nav form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2em;
}

input {
  font-size: 1.6rem;
  height: 32px;
}

input[type="search"] {
  flex: 3;
}

input[type="submit"] {
  flex: 1;
  margin-left: 1rem;
  background: #333;
  border: 0;
  color: white;
}

/* || main layout */

main {
  display: flex;
}

article {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  background-color: #ff80ff;
}

aside li {
  padding-bottom: 10px;
}

footer {
  margin-top: 10px;
}

套用CSS的呈現畫面：

Web - 第七章 - 圖 3 (02)​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌


HTML 佈局元素細節

理解所有HTML區段元素具體含義是很有益處的，這一點將隨著個人web開發經驗的逐漸豐富日趨顯現。更多細節請查閱HTML元素參考。現在，你只需要理解以下主要元素的意義：

  • <main>存放每個頁面獨有的內容。每個頁面上只能用一次<main>，且直接位於<body>中。最好不要把它嵌套進其它元素。
  • <article> 包圍的內容即一篇文章，與頁面其它部分無關（比如一篇博文）。
  • <section>與<article>類似，但<section>更適用於組織頁面使其按功能（比如迷你地圖、一組文章標題和摘要）分塊。一般的最佳用法是：以標題作為開頭；也可以把一篇<article>分成若干部分並分別置於不同的<section>中，也可以把一個區段<section>分成若干部分並分別置於不同的<article>中，取決於上下文。
  • <aside> 包含一些間接訊息（術語條目、作者簡介、相關連結，等等）。
  • <header>是簡介形式的內容。如果它是<body>的子元素，那麼就是網站的全局頁眉。如果它是<article>或<section>的子元素，那麼它是這些部分特有的頁眉（此<header>非彼標題）。
  • <nav>包含頁面主導航功能。其中不應包含二級連結等內容。
  • <footer> 包含了頁面的頁腳部分。

無語義元素

有時你會發現，對於一些要組織的項目或要包裝的內容，現有的語義元素均不能很好對應。有時候你可能只想將一組元素作為一個單獨的實體來修飾來響應單一的用CSS或JavaScript。為了應對這種情況，HTML提供了<div>和<span>元素。應配合使用class屬性提供一些標籤，使這些元素能易於查詢。

<span>是一個內聯的（inline）無語義元素，最好只用於無法找到更好的語義元素來包含內容時，或者不想增加特定的含義時。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

1
<p>國王喝得酩酊大醉，在凌晨 1 點時才回到自己的房間，踉蹌地走過門口。 <span class="editor-note">[編輯批註：此刻舞檯燈光應變暗]</span>.</p>
1
2
3
.editor-note {
  color:red;
}

Web - 第七章 - 圖 4 (03)

<div>是一個塊級無語義元素，應僅用於找不到更好的塊級元素時，或者不想增加特定的意義時。例如，一個電子商務網站頁面上有一個一直顯示的購物車組件。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="shopping-cart">
  <h2>購物車</h2>
  <ul>
    <li>
      <p><a href=""><strong>銀耳環</strong></a>：$99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>售價：$237.89</p>
</div>

這裡不應使用<aside>，因為它和主內容並沒有必要的聯繫（你想在任何地方都能看到它）。甚至不能用<section>，因為它也不是頁面上主內容的一部分。所以在這種情況下就應使用<div>，為滿足無障礙使用特徵，還應為購物車的標題設置一個可讀標籤。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

警告：<div>非常便利但容易被濫用。由於它們沒有語義值，會使HTML代碼變得混亂。要小心使用，只有在沒有更好的語義方案時才選擇它，而且要盡可能少用，否則文件的升級和維護工作會非常困難。

換行與水平分割線

有時會用到<br>和<hr>兩個元素，需要介紹一下。

<br>可在段落中進行換行；<br>是唯一能夠生成多個短行結構（例如郵寄地址或詩歌）的元素。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

1
2
3
4
<p>從前有個人叫小高<br>
他說寫 HTML 感覺最好<br>
但他寫的代碼結構語義一團糟<br>
他寫的標籤誰也懂不了。 </p>

沒有<br>元素，這段會直接顯示在長長的一行中（如前文所講，HTML會忽略大部分空格）；使用<br>元素，才使得詩看上去像詩：

Web - 第七章 - 圖 5 (04)

<hr>元素在文件中生成一條水平分割線，表示文本中主題的變化（例如話題或場景的改變）。一般就是一條水平的直線。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

1
2
3
<p>原來這唐僧是個慈憫的聖僧。他見行者哀告，卻也回心轉意道：“既如此說，且饒你這一次。再休無禮。如若仍前作惡，這咒語顛倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”卻才伏侍唐僧上馬，又將摘來桃子奉上。唐僧在馬上也吃了幾個，權且充飢。 </p>
<hr>
<p>卻說那妖精，脫命升空。原來行者那一棒不曾打殺妖精，妖精出神去了。他在那雲端裡，咬牙切齒，暗恨行者道：“幾年只聞得講他手段，今日果然話不虛傳。那唐僧已此不認得我，將要吃飯。若低頭聞一聞兒，我就一把撈住，卻不是我的人了。不期被他走來，弄破我這勾當，又幾乎被他打了一棒。若饒了這個和尚，誠然是勞而無功也。我還下去戲他一戲。”</p>

Web - 第七章 - 圖 6 (05)


規劃一個簡單的網站

這邊可以參考 規劃一個簡單的網站，這邊就不再特別轉載。

這邊轉載了大量的文章和內容，但是每個部分我都有實際去做過，並了解過。這邊轉載主要是做筆記記錄。​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌​‌‌​‌​‌‌​‌​​​​‌‌‌​‌​​​‌‌​‌‌​‌​‌‌​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​‌​​‌‌‌​​‌​​‌‌​​​​​​‌‌​‌​‌​​‌‌​​​‌​​‌‌​‌‌​​​‌​‌‌​‌​‌‌‌​‌‌‌​‌‌​​‌​‌​‌‌​​​‌​​​‌‌​‌‌‌

註：以上參考了
MDN web docs 的 Document and website structure 文章。

📚 相關文章

📄 公開段落採 CC BY 3.0 TW 授權，可自由轉載引用，需署名出處。
🔒 付費 / 會員段落 © J.J. Huang，保留所有權利，禁止轉載。