2025/3/28?
向全棧工程師邁進！
一、網頁基本的組成部分?
網頁的外觀多種多樣，但是除了全屏視頻或游戲，或藝術作品頁面，或只是結構不當的頁面以外，都傾向于使用類似的標準組件。
1.1頁眉
通常橫跨于整個頁面頂部有一個大標題 和/或 一個標志。這是網站的主要一般信息，通常存在于所有網頁。
1.2導航欄
指向網站各個主要區段的超鏈接。通常用菜單按鈕、鏈接或標簽頁表示。類似于標題欄，導航欄通常應在所有網頁之間保持一致，否則會讓用戶感到疑惑，甚至無所適從。許多 web 設計人員認為導航欄是標題欄的一部分，而不是獨立的組件，但這并非絕對；還有人認為，兩者獨立可以提供更好的無障礙訪問特性，因為屏幕閱讀器可以更清晰地分辨二者。
1.3 主內容
中心的大部分區域是當前網頁大多數的獨有內容，例如視頻、文章、地圖、新聞等。這些內容是網站的一部分，且會因頁面而異。
1.4 頁腳
橫跨頁面底部的狹長區域。和標題一樣，頁腳放置公共信息（比如版權聲明或聯系方式）的，一般使用較小字體，且通常為次要內容。還可以通過提供快速訪問鏈接來進行
一個比較典型的web網頁布局如下：
二、區域段的專用標簽?
?為了實現語義化標記，在HTML中提供了明確的區域段的專用標記，如下
- <header> 頁眉
- <nav> 導航欄
- <main> 主體內容?主內容中還可以有各種子內容區段，可用<article>、<section>?和 <div> 等元素表示。
- <aside> 側邊欄
- <footer> 頁腳
三、編寫一個較為規范的網頁
視覺效果并不是一切，敬畏語義！全球約9.4億人存在視力問題。
<!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" rel="stylesheet" /><link href="style.css" rel="stylesheet" />
</head><body><header><!-- 本站所有網頁的統一主標題 --><h1>聆聽電子天籟之音</h1></header><nav><!-- 本站統一的導航欄 --><ul><li><a href="#">主頁</a></li><li><a href="#">音樂</a></li><li><a href="#">歌手</a></li><!-- 共 n 個導航欄項目，省略…… --></ul><form><!-- 搜索欄是站點內導航的一個非線性的方式。 --><input type="search" name="q" placeholder="要搜索的內容" /><input type="submit" value="搜索" /></form></nav><main><!-- 網頁主體內容 --><article><!-- 此處包含一個 article（一篇文章），內容略…… --></article><aside><!-- 側邊欄在主內容右側 --><h2>相關鏈接</h2><ul><li><a href="#">這是一個超鏈接</a></li><!-- 側邊欄有 n 個超鏈接，略略略…… --></ul></aside></main><footer><!-- 本站所有網頁的統一頁腳 --><p>? 2050 某某保留所有權利</p></footer>
</body></html>四、其他規范?
4.1 標記聯系方式
<address><p>Chris Mills<br />Manchester<br />The Grim North<br />UK</p><ul><li>Tel: 01234 567 890</li><li>Email: me@grim-north.co.uk</li></ul>
</address>
4.2 上標和下標
- <sub> 下標
- <sup> 上標
<p>我的生日是在 2021 年 5 月 25 日（譯者注：英文原文為 25<sup>th</sup>）</p>
<p>咖啡因的化學方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值為 9，那么 x 的值必為 3 或 -3。</p>
?
4.3 標記時間和日期
<time datetime="2016-01-20">2016 年 1 月 20 日</time>
為什么需要這樣做？因為世界上有許多種書寫日期的格式，上邊的日期可能被寫成：
- 20 January 2016
- 20th January 2016
- Jan 20 2016
- 20/06/16
- 等等
但是這些不同的格式不容易被電腦識別——假如你想自動抓取頁面上所有事件的日期并將它們插入到日歷中，<time>元素允許你附上清晰的、可被機器識別的時間或日期來實現這種需求。
標準如下：
<!-- 標準簡單日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含時間，小時和分鐘數 -->
<time datetime="19:30">19:30</time>
<!-- 還可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和時間 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有時區偏移值的日期時間 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>
慢下來，慢下來，慢下來，慢下來 ......
2025/3/28 12:02?
?
