-
Notifications
You must be signed in to change notification settings - Fork 0
/
1-1-1.html
213 lines (209 loc) · 7.35 KB
/
1-1-1.html
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<meta http-equiv="cache-control" content="no-cache" />
<title></title>
<link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="./hightlight/default.min.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/copybutton.css" />
<link rel="stylesheet" href="./css/hightlight.css" />
<script src="./hightlight/hightlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
<script src="./js/gtag.js"></script>
</head>
<body>
<header>
<nav>
<h1>
<span id="toggle-menu"></span>
<a href="index.html"></a>
</h1>
</nav>
</header>
<main>
<aside>
<nav></nav>
</aside>
<article>
<h2 id="1-1-1">1-1-1 HTML 語意化</h2>
<p>簡單來說,HTML 語義化就是,根據結構化的內容選擇合適的標籤。</p>
<p>
直觀上很好了解,「合適的標籤」是對內容表達的高度概括,這樣在進行瀏覽器爬蟲或任何機器在讀取HTML
時,都能更進一步地了解程式表達的意思,進而獲得更高的解析效率。這樣帶來的好處如下。
</p>
<ul>
<li>有利於 SEO。</li>
<li>開發維護體驗更好。</li>
<li>使用者體驗更好(舉例來說,使用 alt 標籤來解釋圖片資訊)。</li>
<li>更好的可存取性,方便任何裝置(如盲人閱讀器)對程式進行解析。</li>
</ul>
<p>
如何做到語義化呢?這要求我們即時跟進、學習並使用語義化標籤。這裡歸納了一些典型的 HTML
標籤,並進行分類。可以將 HTML 標籤分為 9 大類,每一種都含有語義化的標籤內容,如下表所示。
</p>
<table>
<tr>
<th>Head</th>
<th>Sections</th>
<th>Grouping</th>
<th>Tables</th>
<th>Forms</th>
<th>Interactive</th>
<th>Edits</th>
<th>Embedded</th>
<th>Text-level</th>
</tr>
<tr>
<td>doctype</td>
<td>body</td>
<td>p</td>
<td>table</td>
<td>form</td>
<td>details</td>
<td>del</td>
<td>img</td>
<td>a</td>
</tr>
<tr>
<td>html</td>
<td>article</td>
<td>hr</td>
<td>caption</td>
<td>fieldset</td>
<td>summary</td>
<td>ins</td>
<td>iframe</td>
<td>cm</td>
</tr>
<tr>
<td>head</td>
<td>nav</td>
<td>pre</td>
<td>thead</td>
<td>legend</td>
<td>command</td>
<td></td>
<td>embed</td>
<td>strong</td>
</tr>
<tr>
<td>title</td>
<td>aside</td>
<td>blockquote</td>
<td>tbody</td>
<td>label</td>
<td>menu</td>
<td></td>
<td>object</td>
<td>i,b</td>
</tr>
<tr>
<td>base</td>
<td>section</td>
<td>ol, ul</td>
<td>tfoot</td>
<td>input</td>
<td></td>
<td></td>
<td>param</td>
<td>u,s, small</td>
</tr>
<tr>
<td>link</td>
<td>header</td>
<td>li</td>
<td>tr</td>
<td>button</td>
<td></td>
<td></td>
<td>video</td>
<td>abbr</td>
</tr>
<tr>
<td>meta</td>
<td>footer</td>
<td>dl,dt,dd</td>
<td>th</td>
<td>select</td>
<td></td>
<td></td>
<td>audio</td>
<td>q</td>
</tr>
<tr>
<td>style</td>
<td>h1 - h6</td>
<td>figure</td>
<td>td</td>
<td>textarea</td>
<td></td>
<td></td>
<td>source</td>
<td>cite</td>
</tr>
<tr>
<td>script</td>
<td>main</td>
<td>figcaption</td>
<td>col</td>
<td>option</td>
<td></td>
<td></td>
<td>canvas</td>
<td>dfn</td>
</tr>
<tr>
<td>noscript</td>
<td>address</td>
<td>div</td>
<td>colgroup</td>
<td>progress...</td>
<td></td>
<td></td>
<td>area, map, track...</td>
<td>sub, sup, code, br, var,span...</td>
</tr>
</table>
<p>
了解了這些語義化的標籤,我們就可以接照「標籤語義是否能夠反映開發者想表達的內容」來選擇使用它們了。關於標籤的選取標準也簡單歸納了一下,可以用以下程式表達出來。
</p>
<pre><code class="language-js">
if(導航){
return <nav/>
} else if(文稿內容、部落格內容、評論內容..包含標題元素的內容){
return <article />
} else if(目錄抽象、邊欄、廣告、批註){
return <aside />
} else if(含有附錄、圖片、程式、圖形){
return <figure />
} else if(含有多個標題或內容的區塊){
return <section />
} else if(含有段落、語法意義){
return <p /> || <address /> || <blockquote /> || <pre /> || ...
} else{
return <div/>
}
</code></pre>
<h3>語義化的發展和進階玩法</h3>
<p>
說到語義化的發展,這裡重點提一個概念:Microformats,如果面試官問到語義化的相關問題時,如果能把這個概念搬出來,那麼面試的效果將非常好。那什麼是
Microformats 呢? Microformats ,翻譯過來就是微格式,是 HTML
標記某些實體的小模式,這些費體包含人、組織、事件、地點、部落格、產品、評論、簡歷、食譜等。它們是在
HTML 中巢狀結構語義的簡單協定,且能迅速地提供一套可被搜尋引擎、聚合器等其他工具使用的
API。 除了 hCard 和 bCalendar ,還有好幾個函數庫特別開發了微格式。
是不是看得一臉困惑?其實很簡單, Microformats 的原理就是透過擴充 HTML 元素或屬性,來增強
HTML 的語義表達能力。比如維基百科的 將自定義 vcard class 標記在特定元素上, 使用者在
google 搜尋資料時會看到搜尋結果右側有時會出現維基百科的相關資料卡片,就是如此實作的。
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>