任務1.2　創建空白網頁

?學習目標

①能夠輸入基本的網頁結構標簽。

②能夠表述HTML語言以及基本的標簽語法。

③能夠使用Visual Studio Code新建和保存頁面。

?任務描述

使用Visual Studio Code新建并保存一個簡單的基本頁面。

?知識學習與課堂練習

1.HTML概念

HTML（Hyper Text Mark-up Language，超文本置標語言）是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。

2.HTML文本基本結構

一個網頁對應一個HTML文件，HTML文件以.htm或.html為擴展名。HTML的結構包括頭部（head）、主體（body）兩大部分，其中頭部描述瀏覽器所需的信息，主體部分包含網頁所要說明的具體內容。其完整結構如下：

其中＜！doctype＞聲明位于文檔中最前面的位置，處于＜html＞標簽之前。此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規范。

＜html＞＜/html＞標簽標識了文件的開頭與結尾，表示這對標記間的內容是HTML文檔。

＜head＞＜/head＞標記包含了文件的頭部，標記內的內容不在瀏覽器中顯示，主要用來說明文件的有關信息，如文件標題、作者、編寫時間等。

＜meta＞標簽沒有結束標簽，位于head元素內部，＜meta＞標簽的屬性定義了與文檔相關聯的名稱和值。例如＜meta charset="UTF-8"＞表示使用的字符編碼為國際化編碼，比較常見的還有簡體中文編碼gb2312。

在head標記內最常用的標記是＜title＞＜/title＞，該標記是網頁主題標記，提示網頁內容和功能的文字，它將出現在瀏覽器的標題欄中。

＜body＞＜/body＞標記是HTML文檔的主體部分，網頁正文中的所有內容包括文字、表格、圖像、聲音和動畫等都包含在這對標記對之間。

【課堂練習1.2-1】錄入一個完整的網頁結構標簽。

打開Visual Studio Code，輸入如下標簽：

3.移動設備的HTML基本結構

計算機經過多年的發展，顯示器的屏幕分辨率已經能夠達到1280×1024像素及更高的1280×1024像素，因此移動設備無法將普通網頁全屏顯示在移動設備上，雖然通過屏幕放大和縮小也可訪問傳統的網頁，但由于用戶體驗不佳，很難得到實際的應用。

為了增加對移動設備的友好性，應該將針對移動設備的樣式融合進框架的每個角落，而不是增加一個額外的文件。

為了確保適當的繪制和觸屏縮放，需要在＜head＞之中添加viewport元數據標簽。

＜meta name="viewport" content="width=device-width，initial-scale=1"＞

在移動設備瀏覽器上，通過為視口（viewport）設置meta屬性為user-scalable=no可以禁用其縮放（zooming）功能。禁用縮放功能后，用戶只能滾動屏幕，就能讓網站看上去更像原生應用的。注意，這種方式并不推薦所有網站使用，要視情況而定。

＜meta name="viewport" content="width=device-width，initial-scale=1，

maximum-scale=1，user-scalable=no"＞

【課堂練習1.2-2】錄入一個完整的移動設備網頁結構標簽。

打開Visual Studio Code，輸入如下標簽：

其中＜html lang="zh-CN"＞主要是告知各個瀏覽器所用的字符集，如果沒有該字符集，瀏覽器就按各自默認的字符來顯示，這樣各個瀏覽器的顯示結果就可能不一樣。

4.HTML5新增結構標簽

一個普通的頁面一般會有頭部、導航、文章內容，還有附著的右邊欄、底部等模塊。這些模塊可以使用HTML5新標簽進行布局，如圖1.2-1所示。

（1）header標簽

header標簽定義文檔的頁眉，通常是一些引導和導航信息。header標簽至少包含（但不局限于）一個標題標記（＜h1＞-＜h6＞），還可以包括其他標簽，如表格、列表、表單、nav標簽等。

（2）nav標簽

nav標簽代表頁面的一個部分，是一個可以作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或者當前頁面的其他部分，使html代碼在語義化方面更加精確，同時對于屏幕閱讀器等設備的支持也更好。

（3）article標簽

article標簽代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或其他任何獨立的內容。除了內容部分，一個article標簽通常有它自己的標題（一般放在一個header元素里面），有時還有自己的腳注。

（4）section標簽

section標簽定義文檔中的節，如章節、頁眉、頁腳或文檔中的其他部分。一般用于成節的內容，會在文檔流中開始一個新的節。它用來表現普通的文檔內容或應用區塊，通常由內容及其標題組成。

（5）aside標簽

aside標簽通常用來描述與文檔主體內容不相關的內容。比如，博客文章用article標簽，而博客旁邊的文章信息欄（作者頭像、博文分類、作者等級等和博客正文內容無關的）用aside。

（6）footer標簽

footer標簽定義section或document的頁腳。在典型情況下，該元素會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。它和header標簽的使用基本一樣，可以在一個頁面中多次使用，如果在一個區段的后面加入footer，那么它就相當于該區段的頁腳。

【課堂練習1.2-3】完成圖1.2-1所示網頁布局的結構標簽。

打開Visual Studio Code，輸入如下標簽：

?任務實施

①打開任務1中的index.html文件。

②完成網頁廣告單頁HTML結構的編寫。

?任務回顧

HTML是網頁主要的組成部分，基本上每一個網頁都是由HTML語言組成的，所以要學習如何建設網站，必須從網頁的基本語言學起。

HTML的結構包括頭部（head）、主體（body）兩大部分，其中頭部描述瀏覽器所需的信息，主體部分包含網頁所要說明的具體內容。

?任務拓展

HTML元素的選用原則：

（1）少亦可為多

開發者在使用HMTL元素時容易忘乎所以，文檔中標記密布。標記只能應內容的需要使用。

判斷該用多少標記需要經驗。有條經驗法則是：問問自己打算如何發揮一個元素的語義作用，如果不能馬上答出就不用這個元素。

（2）不要誤用元素

對內容進行標記時，只宜將元素用于它們原定的用途，不要創造自有的語義。如果找不到適合自己所要含義的元素，可以考慮使用通用元素（如span或div），并且用全局屬性class表明其含義。

（3）具體為佳，一以貫之

同一個標記內容的元素應該選擇最為具體的那個元素。如果已有元素能恰當表明內容的類型，就不要使用通用元素。

同樣，同一個元素的使用在整個頁面、網站或Web應用系統上要保持一致。對于作者來說，他們以后修改自己的HTML文檔的工作可以由此更加輕松，對于要處理HTML文檔的其他人也一樣。

（4）對用戶不要想當然

有人可能覺得HTML文檔的用戶關心的只是它在瀏覽器中呈現的結果，所以不用為標記的語義準確性勞神。呈現與語義分離原則的目的完全是為了讓HTML文檔更易于程序化處理，所以隨著HTML5的采用和實現愈加廣泛，HTML內容的這種使用會日益增多。如果不關心標記的準確性和一致性，這樣的HTML文檔處理起來會更為困難，用戶為其找到的用處也很有限。