观音菩萨太平经

書名：動態(tài)網(wǎng)頁設(shè)計與制作（HTML5+CSS3+JavaScript）（第3版）
作者名：吳以欣陳小寧
本章字?jǐn)?shù)： 10125字
更新時間： 2021-01-08 20:53:08

1.2 HTML常用元素

HTML5相對于舊版本新增加了32種元素，去掉了12種元素，一共包含107種元素。本節(jié)將主要介紹其中一些最常用的元素。

1.2.1 基本結(jié)構(gòu)元素

HTML的基本結(jié)構(gòu)元素主要有3種，它們分別是html（HTML文檔）元素、head（頭）元素和body（主體）元素。每個網(wǎng)頁文件中一般都包含這3種元素，而且它們只能出現(xiàn)一次。

1.html元素

html元素是網(wǎng)頁文件中最外圍的、緊接著文檔元素的一對標(biāo)簽，它告訴瀏覽器整個文件是HTML格式，并且從<html>開始，至</html>結(jié)束。

2.head元素

head元素包含的是網(wǎng)頁的頭部信息，它的內(nèi)容被瀏覽器所用，而不會顯示在網(wǎng)頁正文中。head元素中可以包含下述元素。

title元素，它的內(nèi)容將在瀏覽器的標(biāo)題中出現(xiàn)。例如，示例1-1中的title元素內(nèi)容是“我的網(wǎng)頁”，如圖1-3右圖所示，它顯示在瀏覽器的標(biāo)題欄。

link元素和style元素，常用于CSS，將在第2章和第3章中講解。

script元素，常用于JavaScript，將在第4章中講解。

meta元素，特殊元素將在“1.2.8 特殊說明”小節(jié)中講解。

3.body元素

body元素是HTML文件的主體元素，它包含所有要在網(wǎng)頁上顯示的各種元素。下面幾小節(jié)內(nèi)容中討論的元素，都是body元素可以包含的內(nèi)容。

1.2.2 常用塊元素

塊元素的內(nèi)容總是沿網(wǎng)頁垂直方向另起一行顯示。HTML5中的常用塊元素有以下幾種。

1.標(biāo)題塊元素

標(biāo)題塊元素主要有h1、h2、h3、h4、h5和h6。h是header（標(biāo)題）的簡寫，數(shù)字1～6表示標(biāo)題的級別，h1的標(biāo)題級別最大，h6的標(biāo)題級別最小，如圖1-8所示。

圖1-8 標(biāo)題塊元素程序及其網(wǎng)頁顯示效果

2.段落塊元素

最常用的段落塊元素有p（段落）元素和pre（原樣顯示文字）元素。

（1）p元素

p是paragraph（段落）的簡寫，p元素內(nèi)一般包含段落文字，瀏覽器將自動在p元素前后加一行空行，如圖1-6右圖所示。值得注意的是，HTML元素內(nèi)的文字內(nèi)容都不要用空格來排版（pre 元素除外），因為瀏覽器會將標(biāo)簽內(nèi)的所有空格或換行符看作一個空格。下面的示例1-2要說明的就是這個問題。

示例1-2 將李白的詩《靜夜思》顯示在網(wǎng)頁上。

目的：了解p元素及HTML程序中的空格特點(diǎn)。

程序文件名：ch1_02.html。

在瀏覽器中打開ch1_02.html，得到的效果如圖1-9所示，可以看到，雖然在程序中的每行詩句后面都有換行符，但顯示結(jié)果中的所有詩句都在一行中，只是每個句子之間有一個空格。

圖1-9 示例1-2的網(wǎng)頁顯示效果

如果將第9～14行代碼改為如下格式，刷新瀏覽器后，將得到同樣的效果。由此可以看出，在元素內(nèi)容中用空格或換行符進(jìn)行排版都是無效的。

<p>床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。 </p>

（2）pre元素

pre是preformatted的簡寫，pre元素與p元素的作用基本相同，唯一區(qū)別是，該元素中的文字內(nèi)容將保留空格和換行符，并且元素中的英文字符都將統(tǒng)一用等寬字體，以便對齊。例如，將示例1-2中的第9～14行改為如下格式，刷新瀏覽器后，將得到圖1-10所示的效果。

<pre>

床前明月光，

疑是地上霜。

舉頭望明月，

低頭思故鄉(xiāng)。

</pre>

圖1-10 使用pre元素改寫示例1-2中的網(wǎng)頁效果

值得注意的是，pre元素一般只用于在網(wǎng)頁中顯示詩句、計算機(jī)程序等需要使用空格和換行來排版的文字內(nèi)容。根據(jù) HTML5的規(guī)范設(shè)計原則，網(wǎng)頁的排版布局應(yīng)盡可能地使用CSS，詳見“第2章 CSS基礎(chǔ)”和“第3章 CSS實用技巧”。

3.通用塊元素

div元素是最常用的通用塊元素，它用于包住一些元素和文字內(nèi)容，以便進(jìn)一步用CSS進(jìn)行排版處理。下面通過示例1-3介紹div元素的用途。

示例1-3 修改示例1-2的ch1_02.html代碼如下，并保存為ch1_03.html。

目的：了解div元素的用途。

程序文件名：ch1_03.html。

在瀏覽器中打開ch1_03.html，得到的效果如圖1-11左圖所示，第8、17、18及27行的div元素在瀏覽器中看不出什么效果。這時將第8行修改為如下格式。

將第18行修改為如下格式。

然后將文件保存為ch1_03_1.html，在瀏覽器中打開該文件，就會得到圖1-11右圖所示的效果。修改上述兩行代碼的目的是通過CSS語句將div元素所包含的內(nèi)容由縱向排版變?yōu)闄M向排版。

圖1-11 示例1-3及對其修改后的顯示效果

4.語義塊元素

HTML5新增了一系列語義塊元素，也就是說，這些元素的標(biāo)簽名定義了應(yīng)用的意義，例如，header（頂部）元素一般用于一個區(qū)域或整個頁面的頂部，footer（底部）元素一般用于一個區(qū)域或整個頁面的底部，等等。語義塊元素的使用，主要是為了搜索引擎讀取頁面內(nèi)容時更容易根據(jù)標(biāo)簽名分解頁面的內(nèi)容。它們應(yīng)用的效果好像與上述通用塊元素 div一樣，但是，其應(yīng)用原則是不一樣的，div元素主要用于排版，而語義塊元素主要用于網(wǎng)頁內(nèi)容的分類。表1-1中列出了常用語義塊元素的應(yīng)用原則；圖1-12所示為常用語義塊元素的應(yīng)用示意圖，其中左邊是HTML基本程序代碼。

表1-1 常用語義塊元素的應(yīng)用原則

圖1-12 常用語義塊元素的應(yīng)用示意圖

HTML元素的許多屬性不僅可以用于塊元素，而且可以用于大多數(shù)HTML元素，因此稱其為 HTML 元素的“通用屬性”。這里先介紹 id（元素標(biāo)識）屬性和 title（提示）屬性兩種通用屬性，在后面的章節(jié)中，還會繼續(xù)介紹其他通用屬性。

（1）id（元素標(biāo)識）屬性

在HTML文檔中，每個元素都可以有一個標(biāo)識，但是每個標(biāo)識名（即id的屬性值）在整個HTML文檔中必須是唯一的。標(biāo)識名的第一個字母只能是A～Z或a～z，標(biāo)識名可以由A～Z、a～z、0～9、?（減號）、_（下畫線）等組成。例如如下示例代碼。

標(biāo)識名對大小寫是敏感的，即“myId”和“myid”是不一樣的。

HTML的id屬性在CSS和JavaScript的應(yīng)用中起到了很重要的作用，具體將在后續(xù)相關(guān)章節(jié)內(nèi)容中介紹。

（2）title（提示）屬性

元素的title屬性在HTML的網(wǎng)頁中起到了提示的作用。如果元素設(shè)置了title屬性，當(dāng)將鼠標(biāo)指針移動到該內(nèi)容上時，就可以看到title值的內(nèi)容。例如，將ch1_03_1.html中的第8行修改為如下代碼。

保存該文件后在瀏覽器中打開該文件，如果將鼠標(biāo)指針移動到該 div 元素所包含的內(nèi)容上，就可以看到title的屬性值，如圖1-13所示。

圖1-13 title屬性的網(wǎng)頁顯示效果

1.2.3 常用列表元素

常用列表元素有ul元素、ol元素及l(fā)i元素3種。

ul是unordered list（無序列表）的簡寫，因此ul元素所包含的列表項將以粗點(diǎn)的方式顯示。

ol是ordered list（有序列表）的簡寫，因此ol元素所包含的列表項將以順序數(shù)字的方式顯示。

li是list item（列表項）的簡寫，li元素被包括在上述ul元素或ol元素中。

示例1-4 在網(wǎng)頁上顯示圖1-14所示的內(nèi)容。

目的：學(xué)習(xí)列表元素的使用。

程序文件名：ch1_04.html。

圖1-14 示例1-4的網(wǎng)頁顯示效果

操作步驟如下。

① 在瀏覽器中打開ch1_04.html，首先會得到圖1-15所示的初步列表效果。

② 修改ch1_04.html中的第10行為下述程序。

<li>我最喜歡的詩

<ul>

</ul>

</li>

③ 將第11行修改為下述程序，保存文件后刷新瀏覽器就可以得到圖1-14所示的列表元素的嵌套使用效果。

<li>我最想看的電影

<ol>

<li>Just Like Heaven</li>

<li>Vantage Point</li>

<li>I am Legend</li>

<li>Babel</li>

</ol>

</li>

通過CSS設(shè)置還可以改變列表項的符號，如圖1-16所示，可以用小圖像作為列表項符號，應(yīng)用示例代碼詳見“2.2.3 常用的樣式屬性”小節(jié)。

圖1-15 示例1-4的初步網(wǎng)頁顯示效果

圖1-16 用小圖像作為列表項符號

1.2.4 常用表格元素

常用表格元素包括table（表格）元素、tr（表格行）元素、th（表頭）元素和td（表格單元格）元素，它們組成了HTML的基本表格結(jié)構(gòu)。

table元素由tr元素組成，tr元素又由th元素或td元素組成。如圖1-17所示，左側(cè)為基本表格的代碼，右側(cè)為該程序的網(wǎng)頁顯示效果。值得注意的是，HTML的基本表格元素并沒有排版功能，因此在沒有應(yīng)用CSS的情況下，在瀏覽器中是看不到表格線的。

圖1-17 HTML的基本表格元素

tr元素的常用屬性如表1-2所示，th元素和td元素的常用屬性如表1-3所示。這些元素的屬性中都有align和valign屬性，如果在th元素和td元素中都不設(shè)置align和valign屬性，那么默認(rèn)情況下，th元素在水平和垂直方向上都為居中對齊；td元素在水平方向上左對齊，在垂直方向上居中對齊。

表1-2 tr元素的常用屬性

表1-3 th元素和td元素的常用屬性

值得注意的是，如果一個表格的tr元素和th元素或td元素中同時包含相同的屬性名但屬性值不同，則嵌套在內(nèi)部的元素屬性值將起作用，即th元素或td元素中的屬性值將起作用。另外，align屬性和valign屬性是用于表格排版的，因此，按照HTML5設(shè)計原則，表格的排版功能應(yīng)盡量通過CSS來實現(xiàn)，而不是通過元素的屬性設(shè)置來實現(xiàn)。

示例1-5 在網(wǎng)頁上顯示圖1-18所示的表格內(nèi)容。

圖1-18 示例1-5的網(wǎng)頁顯示效果

目的：學(xué)習(xí)表格元素的使用。

程序文件名：ch1_05.html。

操作步驟如下。

① 在瀏覽器中打開 ch1_05.html，得到的初步表格效果如圖1-19所示。其中第5～8行代碼應(yīng)用了CSS語句，目的是在瀏覽器中顯示表格線。第17、22、27行中的行元素都設(shè)置了水平方向為居中對齊，而第18、23、28行的單元格元素都設(shè)置了水平方向左對齊，因此得到了第一列表格內(nèi)容為左對齊的效果。

② 如果將第12～16行改寫為下述程序內(nèi)容，保存文件后刷新瀏覽器，就可以得到圖1-18所示的效果。下述程序?qū)⒈眍^行變?yōu)閮尚校渲小靶彰闭純尚校╮owspan="2"）,“第一學(xué)期”占兩列（colspan="2"）。

<tr>

</tr>

<tr>

</tr>

除上述基本元素外，還有一些表格元素，若與CSS一起使用，可以形成一些特殊的表格顯示效果。例如，thead（表頭）元素、tbody（表主體）元素、tfoot（表尾）元素與CSS一起用于長表格，可以制作固定表頭和表尾、滾動表體內(nèi)容的效果，如圖1-20所示，具體制作方法將在“3.1.3 處理長表格”小節(jié)中講解。

圖1-19 示例1-5的初步表格效果

圖1-20 固定表頭和表尾，滾動表體內(nèi)容的效果

1.2.5 常用行元素

行元素總是與其前后的其他元素保持在同一行中。常用的行元素有圖像圖片元素、a （鏈接）元素、span（通用行）元素和文字格式元素等。

1.圖像圖片元素

（1）img（圖像）元素

img元素用于在網(wǎng)頁中插入圖像，它是“空元素”，即沒有結(jié)束標(biāo)簽。除了HTML的通用屬性外，img元素的其他常用屬性如表1-4所示，其中 src（圖像文件名及其路徑）和alt （替代文字）是必須有的屬性。示例1-6實現(xiàn)了一個最簡單的圖像顯示網(wǎng)頁。

表1-4 img元素通用屬性外的其他常用屬性

示例1-6 在網(wǎng)頁上顯示圖1-21所示的圖像內(nèi)容。

圖1-21 示例1-6的網(wǎng)頁顯示效果

目的：學(xué)習(xí)圖像元素的使用。

程序文件名：ch1_06.html。

在瀏覽器中打開ch1_06.html，就可以得到圖1-21所示的效果。

HTML的圖像文件類型有GIF（Graphics Interchange Format，圖形交換格式）、JPG或JPEG（Joint Photographic Experts Group，聯(lián)合圖像專家組）、PNG（Portable Network Graphics，可移植網(wǎng)絡(luò)圖像）3種。GIF 是圖像和圖片的最佳格式，適用于透明或動畫圖形；而JPEG格式則更適合存放照片；PNG格式擁有許多JPEG與GIF的共同優(yōu)點(diǎn)，如支持?jǐn)?shù)百萬色且壓縮效果好，所以最近越來越流行這種格式。

HTML圖像文件可以通過圖像處理軟件產(chǎn)生，常用的圖像處理軟件有Windows的Paint （畫圖）、Adobe的Photoshop等。圖像文件也可以在版權(quán)許可的情況下從Internet上下載，圖1-22所示為下載示例1-6所用圖像的操作，具體如下如述。

① 在瀏覽器的“地址欄”中輸入示例1-6中第7行的src屬性值，在網(wǎng)頁中打開圖像。

② 右擊網(wǎng)頁中的圖，在打開的快捷菜單中選擇“圖片另存為”命令。

③ 將圖像保存到ch1_06.html文件所在的文件夾中，圖像文件名為harp-seal-baby.jpg，如圖1-23所示，即完成了圖像文件的下載操作。

圖1-22 從網(wǎng)頁下載圖像的操作

圖1-23 圖像文件與HTML文件在同一個文件夾中

圖像文件名的路徑分為絕對路徑和相對路徑兩種。絕對路徑指的是將圖像文件的全部路徑都寫出來，一般用于顯示其他網(wǎng)站上的圖像文件，如示例1-6中第7行的src屬性值就是包含了絕對路徑的圖像文件名。相對路徑就是寫出相對于當(dāng)前HTML文件所在的目錄，一般用于圖像文件在本網(wǎng)站中的情況。相對路徑名的使用規(guī)則如下。

沒有路徑名表示圖像文件與當(dāng)前的 HTML 文件在同一目錄中，如 src="harp-seal-baby.jpg"表示文件harp-seal-baby.jpg與文件ch1_06.html在同一個目錄中。

“路徑名/”表示下一級的目錄名，如 src="images/harp-seal-baby.jpg"表示harp-seal-baby.jpg在ch1_06.html所在目錄的下一級目錄images中。

“../”表示上一級的目錄，如 src="../ harp-seal-baby.jpg"表示 harp-seal-baby.jpg 在ch1_06.html所在目錄的上一級目錄中。

src屬性值以 / 開始，表示從根目錄開始。

因此，在示例1-6中，只要將第7行的src屬性值改寫為如下值，就可以在網(wǎng)頁中顯示已經(jīng)下載了的圖像文件。

又如，在ch1_06.html文件所在的文件夾中創(chuàng)建一個文件夾images，然后將上述圖像文件移動到該文件夾中，如圖1-24所示，這時示例1-6中第7行的src屬性值就可以改寫為如下表述。

另外，通過設(shè)置width屬性和height屬性可以控制圖像的顯示寬度和高度，它們的單位都是像素（px）。值得注意的是，width屬性和height屬性的設(shè)置只是改變了圖像的顯示尺寸，圖像文件的實際大小不會因此而發(fā)生變化。如果width和height的值與圖像實際尺寸不一致，會影響圖像的顯示效果。例如，按下述語句修改示例1-6中第7行的src屬性值，就可以得到圖1-25所示的效果。

圖1-24 圖像文件在HTML文件所在目錄的下一級目錄中

圖1-25 設(shè)置圖像的寬度和高度

所以，圖像的大小應(yīng)該在圖像處理軟件中進(jìn)行調(diào)整。設(shè)置width和height屬性的另一個好處是，它們可以在圖像被完全下載之前讓瀏覽器知道該用多大的空間來顯示圖片，這樣瀏覽器可以更快地顯示出美觀的頁面。

在網(wǎng)頁中顯示圖像還應(yīng)該注意，圖像的顯示相對于文字所占的字節(jié)數(shù)較多，比如一個全屏的圖像，即使經(jīng)過壓縮，也要占去大約50KB的空間，這相當(dāng)于25000字的文本，因此，瀏覽器載入圖像會比較費(fèi)時。當(dāng)一個頁面中包含許多圖像時，就會影響網(wǎng)頁的顯示速度。

（2）picture（圖片）元素

picture 元素與 source（源）元素和 img（圖像）元素一起使用，可以為不同的瀏覽器指定不同尺寸的圖像文件。

以示例1-6為例，在images文件夾中，除了小海豹圖像文件harp-seal-baby.jpg外，還有另外兩個圖像文件harp-seal-baby-1.jpg、harp-seal-baby-2.jpg。如果將示例1-6中的第7行改寫為下述代碼，那么，當(dāng)改變?yōu)g覽器窗口寬度尺寸時，就會顯示不同的圖像效果，如圖1-26所示。修改后的代碼表示，當(dāng)屏幕寬度大于900px 時，顯示圖像文件 harp-seal-baby.jpg；當(dāng)屏幕寬度在600～900px時，顯示圖像文件harp-seal-baby-1.jpg；當(dāng)屏幕寬度小于600px時，顯示圖像文件harp-seal-baby-2.jpg。

</picture>

圖1-26 不同圖像尺寸的圖像文件

2.a元素

a 元素用于產(chǎn)生鏈接，即從一個頁面鏈接到另一個頁面。除了通用屬性外，它所包含的其他常用屬性如表1-5所示。

表1-5 a元素除通用屬性外的其他常用屬性

通過設(shè)置a元素的href屬性值，可以在網(wǎng)頁中產(chǎn)生鏈接，例如網(wǎng)頁、圖片的鏈接和電子郵件的鏈接；如果加上download屬性，也可以直接下載鏈接文件。它們的a元素格式分別如下。

例如如下示例代碼。

<a >Yahoo</a>

<a href="images/harp-seal-baby.jpg" download>請下載小海豹圖片</a>

用a元素產(chǎn)生的鏈接在網(wǎng)頁上一般顯示為藍(lán)色帶有下畫線的格式，如圖1-27所示。通過 CSS 設(shè)置可以改變鏈接的顯示格式，詳見“2.2.4 定義樣式表”中對狀態(tài)對象的介紹。與img元素的src屬性一樣，href屬性也可以設(shè)置鏈接文件名的絕對路徑或相對路徑。在上述示例中，和 href="images/harp-seal-baby.jpg" 則表示的是鏈接至本網(wǎng)站中另一個網(wǎng)頁的相對路徑地址。

示例1-7 在瀏覽器中打開ch1_07.html，得到圖1-27所示的鏈接內(nèi)容。

圖1-27 示例1-7的網(wǎng)頁效果

目的：學(xué)習(xí)a元素的使用。

程序文件名：ch1_07.html。

3.span元素

span元素與div元素類似，也是用于包住一些元素和文字內(nèi)容，以便進(jìn)一步用CSS進(jìn)行排版處理；區(qū)別在于，span元素表示的是行元素，而div元素表示的是塊元素。它的作用在網(wǎng)頁的效果上看不出，好像只是在所需要顯示的文字外面加了一對span標(biāo)簽而已，但是通過id屬性、style屬性、class屬性和JavaScript可以改變span元素內(nèi)容的排版布局。例如，將示例1-7的第15行修改如下，網(wǎng)頁的最后一行就會變?yōu)閳D1-28所示的效果。

<p>

</p>

4.文字格式元素

文字格式元素包括sup元素、sub元素、b元素、i元素、em元素、strong元素、mark元素和br元素等，它們用于網(wǎng)頁中的文字格式效果。其中，b元素和strong元素都是粗體的效果；em元素和i元素都是斜體的效果；mark元素起到突出顯示的效果。通過示例1-8可以看到上述元素的效果，它們一般都可以用CSS替代。另外，br元素是一個空元素，即沒有結(jié)束標(biāo)簽，它雖然可以達(dá)到換行的效果，但不應(yīng)該大量使用它進(jìn)行網(wǎng)頁的格式排版。

示例1-8 在瀏覽器中打開ch1_08.html，得到圖1-29所示的網(wǎng)頁效果。

圖1-28 span元素與style屬性的使用效果

圖1-29 示例1-8的網(wǎng)頁效果

目的：學(xué)習(xí)文字格式元素的使用。

1.2.6 表單元素

HTML 的表單元素 form 用于收集用戶輸入的信息，然后將用戶輸入的信息送到其action屬性所表示的程序文件中進(jìn)行處理。表單元素form中可以包含如下內(nèi)容。

1.表單控件元素

表單控件元素用于收集用戶輸入的信息，包括input元素、select元素、datalist元素、textarea元素。

（1）input（輸入框）元素，根據(jù)type屬性不同，其最多包含22種類型，但是，目前各種瀏覽器都支持的有14種（如表1-6所示），其中“瀏覽器”列包括了IE、Firefox、Chrome、Safari和Opera等瀏覽器的目前最新版本。從表1-6可以看出，Chrome瀏覽器支持除tel類型外的所有type屬性。

input元素的基本格式如下。

其中，××××為表1-6所列的type屬性值。

（2）select（列表框）元素和datalist（預(yù)選列表框）元素，它們都包含option（選項）元素。

（3）textarea（多行文本輸入框）元素。

表1-6 input元素的常用type屬性值

續(xù)表

2.label元素

label（標(biāo)簽）元素與表單控件元素一起使用，其 for 屬性值必須與表單控件元素的 id屬性值相對應(yīng)，詳見示例1-9的說明。

3.fieldset元素

fieldset（表單控件組）元素用于將表單控件元素分組，其中，legend（表單控件組標(biāo)題）元素可以顯示分組的標(biāo)題。

4.通用屬性

“1.2.2 常用塊元素中”小節(jié)中介紹了HTML元素的兩個通用屬性id和title，下面介紹HTML元素的另外兩個通用屬性。

（1）accesskey（快捷鍵）屬性

accesskey 屬性用于指定快捷鍵。在 Windows 系統(tǒng)中，當(dāng)用戶按【Alt】鍵和與這個快捷鍵組合的組合鍵時，光標(biāo)就會定位到該元素上或激活該元素。例如下列代碼，當(dāng)用戶按【Alt+U】組合鍵時，光標(biāo)就會定位到這個文本框元素上。

又如下列代碼，當(dāng)用戶按【Alt+T】組合鍵時，就等于單擊了這個鏈接。

<a accesskey="T">Yahoo</a>

（2）tabindex（按【Tab】鍵的順序值）屬性

tabindex屬性設(shè)置的是按【Tab】鍵的順序值，例如下列代碼，當(dāng)用戶第一次按【Tab】鍵時，光標(biāo)會定位在鏈接2上；第二次按【Tab】鍵時，光標(biāo)會定位在鏈接3上；第三次按【Tab】鍵時，光標(biāo)會定位在鏈接1上。

5.其他常用屬性

除了通用屬性外，表單及其控件元素還有一些用于 JavaScript 的事件屬性，其他常用屬性分別如表1-7、表1-8和表1-9所示。

表1-7 form元素的常用屬性

表1-8 input元素的常用屬性

表1-9 select元素的常用屬性

從這些屬性列表中可以看出，表單控件元素都包含name屬性和value屬性，分別表示變量名和變量值，它們是收集用戶輸入信息必須要有的屬性。值得注意的是，name屬性與標(biāo)簽通用屬性id的作用是不一樣的，前者主要用于form元素中action屬性所表示的服務(wù)器端的程序，而后者主要用于網(wǎng)頁排版的CSS設(shè)置和網(wǎng)頁事件處理的JavaScript程序。

另外，網(wǎng)頁中的列表框包括下拉列表框和選項列表框兩種，在 HTML 文檔中都是用select元素表示的。當(dāng)select元素中沒有size屬性時，就是下拉列表框，如圖1-30（a）所示。如果select元素中含有size屬性，就是選項列表框。在選項列表框的情況下，當(dāng)select元素中沒有 multiple 屬性時，為單選列表框，如圖1-30（b）所示；當(dāng) select 元素中帶有multiple屬性時，就是多選列表框，如圖1-30（c）所示，這時允許用戶按【Ctrl+Shift】組合鍵來同時選擇多個選項。

圖1-30 網(wǎng)頁中的各種列表框

無論是哪一種類型的列表框，select元素中都需要包含標(biāo)記<option>和</option>來指定列表中的選項內(nèi)容。

示例1-9 在網(wǎng)頁上顯示圖1-31左圖所示的表單及其控件元素的內(nèi)容。

目的：學(xué)習(xí)基本表單及input控件元素的使用。

程序文件名：ch1_09.html。

在瀏覽器中打開程序文件ch1_09.html，填寫各個表單項，即可得到圖1-31左圖所示的效果。

說明

（1）程序文件ch1_09.html第8行中form元素的action屬性值為“ch1_09_action.html”，表示該表單提交后將調(diào)用程序文件ch1_09_action.html，如果按圖1-31左圖所示填寫信息后單擊“提交”按鈕，就會得到圖1-31右圖所示的效果。值得注意的是，這里的form元素中沒有設(shè)置method屬性時，默認(rèn)的表單提交方式為get，表示用戶輸入的信息，包括密碼，都將會顯示在地址欄中，如圖1-31右圖地址欄所示。如果要更安全地提交表單，應(yīng)該設(shè)置method屬性值為post。

（2）label元素的作用是，當(dāng)用戶單擊label的內(nèi)容時，光標(biāo)會落到for屬性所表示的元素上，即相當(dāng)于單擊了 for 屬性所指向的元素。例如，在網(wǎng)頁中單擊“用戶名”，光標(biāo)就會落到其右側(cè)的文本框中，這是因為第10行l(wèi)abel元素中的for="username"設(shè)定了這個控件名稱對應(yīng)于id屬性值為“username”的元素，即第11行的input元素。

（3）由于第11行input元素中設(shè)置了autofocus屬性，所以，當(dāng)顯示網(wǎng)頁時，光標(biāo)會自動出現(xiàn)在“用戶名”文本框中。

圖1-31 示例1-9的網(wǎng)頁效果

程序文件名：ch1_09_action.html。

示例1-10 按下述要求修改示例1-9，增加表單校驗功能，以實現(xiàn)圖1-32所示的效果。

圖1-32 示例1-10的網(wǎng)頁效果

（a）3個輸入框必須填寫。

（b）密碼最多為10個字符。

（c）按【Alt+E】組合鍵，使光標(biāo)落到“電子郵件”的輸入框中，并且在“電子郵件”輸入框中顯示樣板文字“user@example.com”。

（d）將“提交”按鈕修改為圖像按鈕。

目的：學(xué)習(xí)表單控件元素的一些屬性設(shè)置。

程序文件名：ch1_10.html。

說明

（1）實現(xiàn)要求（a）的操作如下。

① 復(fù)制ch1_09.html，并另存為ch1_10.html。

② 修改ch1_10.html的第11、15、19行，分別加入required屬性，代碼如下。

（2）實現(xiàn)要求（b）的操作如下。

修改ch1_10.html的第15行，加入maxlength屬性，代碼如下。

（3）實現(xiàn)要求（c）的操作如下。

① 修改ch1_10.html的第18行，代碼如下。

② 修改ch1_10.html的第19行，加入accesskey和placeholder屬性，代碼如下。

（4）實現(xiàn)要求（d）的操作如下。

① 查看images文件夾，找到圖像文件go.jpg。

② 修改ch1_10.html的第22行，代碼如下。

（5）最后保存 ch1_10.html 文件，在瀏覽器中打開 ch1_10.html，如果這時直接單擊圖像按鈕，就會得到圖1-32所示的效果，提示表單檢驗失敗。值得注意的是，從用戶界面上看，email輸入框似乎與text輸入框是一樣的，然而不同的是，使用email輸入框可以更方便地使用表單驗證功能。

示例1-11 在網(wǎng)頁上顯示圖1-33所示的表單及其控件元素的內(nèi)容。

目的：學(xué)習(xí)表單及選項、列表等控件元素的使用。

程序文件名：ch1_11.html。

在瀏覽器中打開程序文件ch1_11.html，填寫各個表單項，即可得到圖1-33所示的效果。

圖1-33 示例1-11的網(wǎng)頁效果

說明

（1）第11行和第13行都表示了name為“gender”的單選按鈕，值得注意的是，這兩行中元素的name值相同，但id值不同。與其類似的是，復(fù)選框的各個選項也是name值相同，id值不同。

（2）當(dāng)在瀏覽器中顯示該網(wǎng)頁后，按【Tab】鍵，光標(biāo)就會定位到“出生日期”輸入框，這是因為第41行設(shè)置了tabindex屬性值為1。

示例1-12 按下述要求修改示例1-11的代碼，以實現(xiàn)圖1-34所示的效果。

（a）將表單分為兩個區(qū)域，分別為“基本信息”區(qū)域和“其他信息”區(qū)域。

（b）“性別”默認(rèn)選項設(shè)置為“男”。

（c）將“愛好”修改為datalist（預(yù)選下拉框）元素。

（d）“出生國家”默認(rèn)選項設(shè)置為“其他國家”，顯示長度為4行。

圖1-34 示例1-12的網(wǎng)頁效果

目的：學(xué)習(xí)表單控件元素的一些屬性設(shè)置。

程序文件名：ch1_12.html。

說明

（1）實現(xiàn)要求（a）的操作如下。

① 復(fù)制ch1_11.html并另存為ch1_12.html。

② 在第8行和第9行之間插入下述語句。

③ 在第38行和第39行之間插入下述語句。

</fieldset>

④ 在第59行和第60行之間插入下述語句。

</fieldset>

（2）實現(xiàn)要求（b）的操作如下。

修改第11行代碼如下。

（3）實現(xiàn)要求（c）的操作如下。

修改第18～25行代碼如下。

</datalist>

（4）實現(xiàn)要求（d）的操作如下。

① 修改第45行代碼如下。

② 修改第50行代碼如下。

最后，保存ch1_12.html文件后，在瀏覽器中打開ch1_12.html文件，就可以得到圖1-34所示的效果。如果在“愛好”列表框中輸入“電”，就會顯示出以“電”開始的選項列表。

1.2.7 多媒體元素及內(nèi)嵌元素

網(wǎng)頁上的多媒體一般指的是視頻、音頻和動畫等。HTML5新增的兩個多媒體元素video （視頻）和audio（音頻）使網(wǎng)頁中播放視頻和音頻的技術(shù)實現(xiàn)了標(biāo)準(zhǔn)化，從而更容易實現(xiàn)。如果網(wǎng)頁中需要嵌入其他文件，例如Flash動畫文件或者PDF文件等，可以使用object（內(nèi)嵌對象）元素、embed（嵌入）元素或iframe（內(nèi)聯(lián)框架）元素。值得注意的是，這些元素都是行元素。

1.video元素和audio元素

HTML5中支持表1-10所示的視頻和音頻文件格式，其中，MP4和MP3是所有瀏覽器都支持的格式。

表1-10 video元素和audio元素的文件格式

無論是video元素還是audio元素，都要和source（源）元素一起使用，才能在網(wǎng)頁中進(jìn)行播放。video元素和audio元素的常用屬性如表1-11所示。

表1-11 video元素和audio元素的常用屬性

續(xù)表

示例1-13 制作圖1-35所示的包含視頻和音頻的網(wǎng)頁。

目的：學(xué)習(xí)video元素、audio元素和source元素的使用。

程序文件名：ch1_13.html。

圖1-35 示例1-13的網(wǎng)頁效果

2.內(nèi)嵌元素

object 元素和 embed 元素的功能非常相似，都可用于嵌入各種格式的文件，而 iframe元素則常用于嵌入另一個HTML網(wǎng)頁文件。它們常用的屬性如表1-12所示。

表1-12 object、embed元素的常用屬性

值得注意的是，如果要在網(wǎng)頁中插入圖像、視頻或音頻文件，應(yīng)該直接使用img元素、video元素和audio元素。

示例1-14 制作圖1-36所示的包含ch1_01.html網(wǎng)頁、Flash動畫文件和PDF文件的網(wǎng)頁。

目的：學(xué)習(xí)iframe元素、embed元素和object元素的使用。

程序文件名：ch1_14.html。

圖1-36 示例1-14的網(wǎng)頁效果

1.2.8 特殊說明

1.注釋元素

HTML的注釋元素用于在HTML文檔中解釋HTML語句，便于讀者更容易地理解這些語句。注釋元素中所包含的注釋內(nèi)容被放在標(biāo)簽之間，它們不會在瀏覽器中顯示。注釋元素的格式如下。

示例1-15 在示例1-1的代碼中加上注釋語句。

目的：學(xué)習(xí)注釋語句的使用。

程序文件名：ch1_15.html

說明

分別在第7行和第9行加上注釋語句后，在瀏覽器中打開該網(wǎng)頁，可以得到與圖1-4所示的同樣的頁面效果。

2.meta（描述網(wǎng)頁信息）元素

meta 元素是嵌套在 head 元素中用于描述網(wǎng)頁信息的元素，這些信息不會顯示在網(wǎng)頁上，但它們常被搜索引擎用于檢索網(wǎng)頁，主要格式如下。

另外，meta 元素的“charset”屬性用于指定網(wǎng)頁內(nèi)容的字符編碼，例如網(wǎng)頁內(nèi)容是中文，屬性設(shè)置如下。

如果網(wǎng)頁內(nèi)容是英文，屬性設(shè)置如下。

HTML5的meta元素新增了viewport屬性，它用于在不同的設(shè)備上顯示時控制網(wǎng)頁的顯示寬度和圖像像素與顯示像素的比例。例如進(jìn)行如下屬性設(shè)置，網(wǎng)頁將以設(shè)備寬度、圖像像素與顯示像素的比例為1∶1的方式顯示，效果如圖1-37所示。

圖1-37 meta的viewport屬性效果設(shè)置對比

3.DOCTYPE（文檔類型的定義）與HTML文檔的檢驗

DOCTYPE并不是HTML的元素，它是對HTML文檔的類型說明，因此，它必須寫在HTML文檔的開始處，即HTML元素之前。對于HTML5,DOCTYPE具有如下固定的格式。

<!DOCTYPE HTML>

它與一般的 HTML 元素稍有不同：以英文模式的感嘆號（!）開始，并且全部是大寫字母。它表示網(wǎng)頁文件中的元素必須全部符合 HTML5的規(guī)范。對于含有 DOCTYPE 的HTML文檔，可以在萬維網(wǎng)聯(lián)盟提供的檢驗網(wǎng)站（https://validator.w3.org）上檢驗其是否“合格”，如果不合格，該網(wǎng)頁會詳細(xì)地羅列出問題語句及出錯原因，如圖1-38所示。

圖1-38 萬維網(wǎng)聯(lián)盟提供的檢驗網(wǎng)站

4.特殊字符

如何在網(wǎng)頁中表現(xiàn)一些特殊的字符呢？例如乘號（×）、除號（÷）、版權(quán)符號（?）及注冊商標(biāo)符號（?）等。在HTML文檔中，這些符號都可以用“字符實體（Character Entity）”來表示。字符實體分成3部分：第1部分是一個&符號，英文叫ampersand；第2部分是實體名字或者是#加上實體編號；第3部分是一個分號。表1-13列舉了一些常用的字符實體。

表1-13 常用的字符實體

官术网_书友最值得收藏!

動態(tài)網(wǎng)頁設(shè)計與制作（HTML5+CSS3+JavaScript）（第3版）