不朽情缘500倍大奖

書名： Web編程基礎：HTML5、CSS3、JavaScript（第2版）
作者名：任平紅陳矗編著
本章字數： 4344字
更新時間： 2019-07-01 10:09:03

1.5 HTML5常用標簽

1.5.1 <meta>

1．http-equiv屬性

http-equiv類似于HTTP的頭部協議，可以利用其設定瀏覽器的一些信息，以正確地顯示網頁。http-equiv屬性指定協議頭類型，content屬性指定協議頭類型的值。其中，常用的http-equiv類型有：

● content-type——用于定義用戶的瀏覽器或相關設備以何種方式加載數據，或者以何種應用程序打開資源，例如，<meta http-equiv="content-type" content="text/html;charset=utf-8"/>，其中，content值指定以普通網頁打開資源，網頁的編碼方式為utf-8。

● refresh——指定頁面的刷新或跳轉的間隔時間和跳轉的資源。例如，<meta http-equiv="refresh" content="3;url=target.html"/>，指定當前頁面3秒后跳轉到target.html頁面。例如，<meta http-equiv="refresh" content="3"/>，沒有指定url值，則3秒后刷新當前頁面。

● expires——用于指定網頁緩存的過期時間。緩存一旦過期，當有客戶端請求網頁時，必須從服務器上重新下載網頁。

● set-cookie——用于設置Cookie，瀏覽器訪問某個頁面時會將Cookie保存在客戶端的緩存中，下次訪問時可以從緩存中讀取，以提高訪問速度。必須使用GMT格式指定Cookie的過期時間。例如，<meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Mon,12 May 2019 00:20:00 GMT"/>

2．name屬性

頁面描述信息由name屬性和content屬性指定。name屬性指定要描述的頁面信息的類型，content用來描述頁面信息的值。常見的頁面信息的類型有：

● keywords——為搜索引擎提供的關鍵字列表，例如，<meta name="keywords"content="key1, key2, key3…"/> 。

● description——為搜索引擎提供網頁主要內容的描述，例如，<meta name="description"content="網頁描述信息"/>。

● author——標明網頁的制作者。

● robots——用以提示搜索機器人哪些頁面需要索引，哪些頁面不需要索引。content的參數有all、none、index等值，默認值為index。各參數值的含義如表1-2所示。

表1-2 搜索參數值

1.5.2 標題

標題可用來分隔大段文字，概括大段文字的內容，從而吸引讀者的注意，起到提示的作用。HTML5中提供了6級標題，分別為<h1>～<h6>。其中，<h1>字體最大，<h6>字體最小。標題屬于塊級元素，瀏覽器會自動在標題前后加上空行。使用標題標簽不僅可以使文字突出顯示，更重要的是搜索引擎可以使用標題為網頁的結構和內容編制索引。用戶可以通過標題來快速地瀏覽網頁。例如，heading.html。

heading.html：

heading.html的顯示結果如圖1-4所示。

圖1-4 heading.html的顯示結果

1.5.3 換行元素

換行標簽是<br />。<br />標簽是空標簽，沒有閉合標簽。注意使用<br />標簽來輸入空行，而不是分隔段落。例如，br.html。

br.html：

br.html的顯示結果如圖1-5所示。

圖1-5 br.html的顯示結果

1.5.4 分隔線

分隔線標簽<hr>定義內容中的主題變化，并顯示為一條水平線。在HTML4.01中，不推薦使用align、noshade、size以及width屬性，在HTML5中不再支持這些屬性。例如，hr.tml。

hr.html：

hr.html的顯示結果如圖1-6所示。

圖1-6 hr.html的顯示結果

1.5.5 段落

段落標簽<p>可以使文字排列更加整齊、清晰。<p>標簽既可以成對使用，也可以單獨使用。<p>標簽是塊級元素，瀏覽器會自動在<p>標簽的前后加上一定的空白。<p>標簽的屬性align用來指定文本顯示時的對齊方式，可取center、left、right 3個值。但不推薦使用屬性設置<p>標簽的顯示樣式，推薦使用樣式表，讀者可參照本書后面的內容。<p>標簽的使用示例如p.html。

p.html：

p.html的顯示結果如圖1-7所示。

圖1-7 p.html的顯示結果

1.5.6 特殊字符

在HTML中，有些符號是有特殊含義的，例如“<”和“>”用于表示標簽，“&”用于表示轉義符號，如果要在網頁上顯示以上特殊符號，不可以直接使用，必須使用轉義字符。在HTML中定義轉義字符有兩個原因：第一是某些符號有特殊含義，例如前面提到的“<”等，第二是某些符號在ASCII字符集中沒有定義，需要使用轉義字符來表示。

轉義字符由3部分組成，第一部分是“&”符號；第二部分是實體名字或者是“#”加上實體編號；第三部分是分號，表示轉義字符結束。同一個符號，既可以使用實體名稱，例如“&lt”，也可以使用實體編號，例如“&#60”，這兩種方式都表示符號“<”。實體名稱比較好理解，但是某些瀏覽器對最新的實體名稱的支持可能并不是特別好。實體編號雖然可讀性差，但是各種瀏覽器都可以識別。常見的轉義字符如表1-3所示。

表1-3 常用的轉義字符

注意：

● 轉義字符各字符間不能出現空格；

● 轉義字符必須以“;”結束；

● 單獨的“&”不被認為是轉義字符的開始；

● 轉義字符區分大小寫。

例如，specialChar.html。

specialChar.html：

specialChar.html的顯示結果如圖1-8所示。

圖1-8 specialChar.html的顯示結果

1.5.7 列表

HTML5代碼支持將若干列表項組織成無序列表、有序列表以及定義列表。

1．無序列表

無序列表僅僅用于表示列表項之間存在并列關系，也就是分為多個子項，但是子項之前沒有相應的編號，只是使用圓點或者其他的符號進行標記。無序列表使用標簽<ul>定義，列表項使用<li>標簽定義，列表項的內容位于一對<li>標簽之內。<li>標簽的type屬性可以定義列表項的標記符。主要的取值有：

● disc是默認值，為實心圓；

● circle為空心圓；

● square為實心方塊。

在HTML4.01中一般不推薦直接在<li>標簽中使用type屬性，最好使用CSS來定義列表項的標記樣式。但是在HTML5中不再反對使用<li>標簽的type屬性。例如，ul.html。

ul.html：

ul.html的顯示結果如圖1-9所示。

圖1-9 ul.html的顯示結果

2．有序列表

如果要對列表中的列表項進行排序，則使用有序列表標簽<ol>。<ol>標簽的type屬性可以指定有序列表的項目符號的類型，type屬性各個取值的含義如表1-4所示。

表1-4 type各值的含義

與無序列表類似，在HTML5中不再反對使用<ol>標簽的type屬性。另外，還可以通過指定標簽的start屬性值來指定排列的初始值，start屬性的默認值為1。有序列表和無序列表都可以嵌套使用。例如，ol.html。

ol.html：

ol.html的顯示結果如圖1-10所示。

圖1-10 ol.html的顯示結果

3．定義列表

定義列表使用<dl>標簽設置，也稱為描述性列表。<dl>標簽通常與<dt>標簽和<dd>標簽配套使用。<dt>標簽定義列表項，<dd>標簽用于描述列表項。例如，dl.html。

dl.html：

dl.html的顯示結果如圖1-11所示。

圖1-11 dl.html的顯示結果

1.5.8 錨元素

超級鏈接也是網頁的重要元素之一，本質上是屬于網頁的一部分。文本、圖像、超級鏈接是網頁的3種基本元素。通過超級鏈接可以從一個網頁跳轉到其他的目標資源。目標資源可以是圖片、電子郵件地址、應用程序等。可以鏈接到當前Web站點的其他資源，也可以是其他Web站點的資源，甚至可以是網頁上的不同位置。而在網頁上用來完成超級鏈接的，既可以是一段文字，一個圖片，也可以是圖片的一部分（一般稱為熱區）。互聯網上的各個資源正是通過超級鏈接相互連接起來的。

根據創建鏈接的對象的不同，超級鏈接分為文本鏈接、圖像鏈接、表單鏈接等。

● 文本鏈接：指的是在文本上創建的超級鏈接，是最常用的超級鏈接。默認的文本超級鏈接下方會出現下畫線。

● 圖像鏈接：指的是在圖像、Flash對象或者圖像熱區上創建的鏈接。圖像鏈接比較美觀。

● 表單鏈接：通過表單的action屬性指定目標頁面，一般目標頁面是動態處理程序，例如JSP、PHP、ASP、Java Servlet等。當用戶單擊表單中的提交按鈕時，會跳轉到目標頁面。

根據目標文件的類型和位置的不同，可以將超級鏈接分為外部鏈接、內部鏈接、錨鏈接、電子郵件鏈接以及其他鏈接等。

● 外部鏈接：鏈接的目標資源是當前Web站點之外的資源。

● 內部鏈接：鏈接的目標資源是當前Web站點內的資源，一般使用相對路徑來表示。

● 錨鏈接：鏈接的目標是網頁的某一個特定的位置。

● 電子郵件鏈接：當單擊電子郵件鏈接后，系統會自動啟動電子郵件程序，并將電子郵件的接收人設置成電子郵件鏈接中指定的信息。

1．文本鏈接

創建文本鏈接使用一對<a>標簽，其格式如下：

     <a href="…" target="…">文本</a>

其中，href指文本鏈接的目標資源的地址，target指在何處打開目標資源。target的可取值及其含義如表1-5所示。

表1-5 target的取值

注意：由于在HTML5中不再支持frame和frameset，但保留了內聯框架iframe，因此不允許把框架名稱設定為目標，_self、_parent以及_top這3個值大多數與iframe一起使用。超級鏈接的使用示例可參照href.html。

href.html：

href.html的顯示結果如圖1-12所示，單擊鏈接，會打開相應的網站。

圖1-12 href.html的顯示結果

2．錨鏈接

當網頁的內容比較長時，有時需要鏈接到網頁的某一個位置上，此時需要使用錨鏈接。使用錨鏈接需要先定義錨點，將希望鏈接到的網頁的位置定義為錨點，并為其取名。然后將錨點前加“#”作為超級鏈接的href值即可，使用<a name="…"></a>定義錨點。例如，anchor.html。

anchor.html：

anchor.html的顯示結果如圖1-13所示。

圖1-13 anchor.html的顯示結果

單擊“至頁尾”，顯示的結果如圖1-14所示；再單擊“至頁首”，顯示結果如圖1-13所示。

圖1-14 單擊“至頁尾”的顯示結果

錨鏈接的用法類似于書簽，如果要鏈接到其他頁面中的錨點，則需要在錨點之前加上文件的路徑及名稱，例如和anchor.html在同一目錄下的其他網頁如果訪問anchor.html中的top錨點，那么href的值應為"anchor.html#top"。

3．電子郵件鏈接

電子郵件鏈接也使用<a>標簽來實現，要發送電子郵件的郵箱地址由mailto指定，表示發送電子郵件的文本鏈接由<a>標簽內的文字指定。例如：

     <a href="mailto:wangmingming@163.com">給王明明發郵件</a>

要正確地使用電子郵件鏈接，需要設置好發送電子郵件的應用程序，例如Outlook、Foxmail等。

4．其他鏈接

其他鏈接包括下載鏈接、空鏈接以及腳本鏈接等。下載鏈接指的是超級鏈接的href指定的目標資源既不是網頁，也不是錨點或者電子郵件的地址，而是普通的文件。此時單擊超級鏈接時，會出現保存文件或打開文件的窗口，選擇保存文件即可將文件下載到本地硬盤；選擇打開文件會打開目標資源。

空鏈接是未指派的鏈接，即沒有指定鏈接對象的鏈接。空鏈接可用于向頁面上的對象或文本附加行為。例如，可以向空鏈接附加一個行為，以便在指針滑過該鏈接時執行相應的操作，一般需要和JavaScript腳本結合使用。可以使用<a href="#">來實現空鏈接，但是對于這種空鏈接來說，如果用戶單擊了空鏈接，頁面會自動重置到頁首，從而影響用戶的正常瀏覽。還可以通過指定<a>標簽的href屬性值為javascript:;（javascript后帶一個冒號和分號）來實現空鏈接，這種空鏈接不存在重置頁面至頁首的問題。

腳本鏈接指的是直接將超級鏈接的href屬性值設置成JavaScript腳本或者JavaScript函數。當單擊超級鏈接時，即執行相應的腳本或函數。腳本鏈接非常實用，能夠在不離開當前頁面的情況下為訪問者提供有關項的附加信息。腳本鏈接還可用于在訪問者單擊特定項時，執行計算、驗證表單或其他的處理任務。例如，scriptLink.html。

scriptLink.html：

scriptLink.html的顯示結果如圖1-15所示，單擊“彈出警告框”，會顯示警告窗口。

圖1-15 scriptLink.html的顯示結果

1.5.9 表格

使用表格可以使網頁上顯示的信息更有條理性，在HTML5中可以使用表格來組織結構化的信息。另外，在HTML5中也可以使用表格來進行頁面布局。一個完整的表格由一對<table>標簽來定義。每個表格均有若干個單元行（由一對<tr>標簽定義）組成，每個單元行由若干個單元格（由一對<td>標簽定義）組成。表格內的具體信息放置在單元格中。單元格可以包含文本、圖像、列表、段落、表單、水平線以及表格等。表格的定義格式如下：

在HTML4.01中，可以使用<table>標簽的屬性設置表格的顯示樣式，例如border、cellpadding、cellspacing等。但是在HTML5中僅支持<table>標簽的border屬性，并且只允許屬性值" "或"1"，" "表示表格單元周圍沒有邊框，不允許用于布局目的，"1"表示在表格單元周圍添加邊框，允許用于布局目的。

從結構上來看，表格可以分成表頭、主體和表尾3個部分，分別使用<thead><tbody><tfoot>標簽來表示。可以用<caption>定義表格的標題。一張表格只能有一個表頭和表尾，但可以有多個主體。對于大型的表格來說，應該使<tfoot>出現在<tbody>的前面，這樣瀏覽器在顯示數據時，有利于加快表格的顯示速度。另外在<thead><tbody><tfoot>標簽內部都必須使用<tr>標簽。使用<thead><tbody><tfoot>對表格進行結構劃分的好處是可以先顯示<tbody>的內容，而不必等整個表格下載完成后才能顯示。無論<thead><tbody><tfoot>的順序如何改變，<thead>的內容總是在表格的最前面，<tfoot>的內容總是在表格的最后面。例如，table1.html。

table1.html：

table1.html的顯示結果如圖1-16所示。

圖1-16 table1.html的顯示結果

如果表格中只有一個<tbody>，則可以省略對表格結構的劃分，例如，table2.html。

table2.html：

table2.html的顯示結果如圖1-16所示。與表格相關的元素或標簽如表1-6所示。

表1-6 表格相關的元素

對于不規則的單元格來說，有的單元格需要跨越多行或跨越多列，<td>以及<th>標簽具有colspan和rowspan兩個屬性。colspan指當前單元格水平方向跨越的單元格數，取值為正整數，代表此單元格水平延伸的單元格數或跨越的列數。rowspan指的是當前單元格垂直方向跨越的單元格，取值為正整數，代表此單元格垂直延伸的單元格數或跨行數。例如，table3.html。

table3.html：

table3.html的顯示結果如圖1-17所示。

圖1-17 table3.html的顯示結果

在HTML4.01中，<th>和<td>標簽除了colspan和rowspan屬性之外，還有一些其他的屬性，但在HTML5中只支持colspan和rowspan屬性。

如果單元格的內容為空，可能會影響到單元格的顯示。要想使空的單元格正常顯示，可以為空單元格添加一個空格（ ）。

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

Web編程基礎：HTML5、CSS3、JavaScript（第2版）