- Python高效開發(fā)實(shí)戰(zhàn)：Django、Tornado、Flask、Twisted（第3版）
- 劉長(zhǎng)龍
- 3125字
- 2021-10-15 17:52:55
3.1 HTML
HTML（HyperText Markup Language，超文本標(biāo)記語(yǔ)言）是Internet上網(wǎng)頁(yè)最主要的表現(xiàn)技術(shù)。超文本標(biāo)記語(yǔ)言的文檔制作并不復(fù)雜，但功能強(qiáng)大，在本身提供經(jīng)典的UI標(biāo)簽呈現(xiàn)網(wǎng)頁(yè)內(nèi)容的同時(shí)，還支持不同數(shù)據(jù)格式的文件嵌入，這使得HTML在Internet上盛行。最新的HTML 5標(biāo)準(zhǔn)增加了更多的強(qiáng)大呈現(xiàn)功能。
3.1.1 HTML介紹
因?yàn)镠TML是文本語(yǔ)言，所以可以用任何編輯器對(duì)其進(jìn)行編輯，只需將文件以*.html或*.htm命名即可。HTML的第1個(gè)版本由Internet工程工作小組（Internet Engineering Task Force，IETF）發(fā)布于1993年6月，當(dāng)前最常見的4.01版本由W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟）發(fā)布于1999年12月，目前不同的操作系統(tǒng)和瀏覽器都對(duì)4.01版本完全支持。最新的HTML 5于2008年1月形成第1份正式草案，該版本對(duì)4.01版本有較大改進(jìn)。目前HTML 5已獲得大多數(shù)瀏覽器的支持，但不同的瀏覽器對(duì)一些特性的支持程度并不一致。
HTML的框架格式如下：
HTML語(yǔ)言的特點(diǎn)如下。
? HTML本身由尖括號(hào)表達(dá)的標(biāo)簽組成，如<html>、<br/>等。
? 一般標(biāo)簽成對(duì)出現(xiàn)，如<html></html>、<body> </body>，在成對(duì)標(biāo)簽之間放入標(biāo)簽內(nèi)容。
? 個(gè)別標(biāo)簽沒有內(nèi)容時(shí)，則可以用單個(gè)標(biāo)簽組成，如<br />。注意尖括號(hào)等特殊標(biāo)簽一定要寫成半角形式，不能是中文全角形式。
? 標(biāo)簽對(duì)<!-- -->用于表達(dá)注釋，注釋只在查看HTML代碼時(shí)出現(xiàn)，在瀏覽器解析時(shí)將不顯示其中的內(nèi)容。
? 標(biāo)簽之間可以嵌套，但不可以交錯(cuò)，例如，下面的代碼不正確：
注意：雖然一般標(biāo)簽可以嵌套使用，但不可以在注釋標(biāo)簽 中嵌套另外一個(gè)注釋標(biāo)簽。
? 有些標(biāo)簽有屬性字段，在尖括號(hào)中通過(guò)鍵值對(duì)的方式設(shè)置，例如，超鏈接標(biāo)簽的href屬性的設(shè)置方法如下：
? 標(biāo)簽本身不區(qū)分大小寫，例如，可以這樣寫：
注意：雖然本例語(yǔ)法正確，但建議開發(fā)者遵循所有標(biāo)簽都小寫的慣用做法。
? 超文本標(biāo)記語(yǔ)言的文件有一個(gè)基本的整體結(jié)構(gòu)：<html>是整個(gè)文件的頂層標(biāo)簽，包含文件中的所有內(nèi)容；<html>的內(nèi)容由頭和實(shí)體兩部分組成，即<head></head>和<body></body>。頭和實(shí)體的內(nèi)容則由網(wǎng)頁(yè)設(shè)計(jì)者通過(guò)其他HTML標(biāo)簽進(jìn)行開發(fā)。
注意：HTML頭與HTTP頭是兩個(gè)完全不同的概念，讀者應(yīng)該注意區(qū)分。
? 瀏覽器一般忽略文件中的回車符，對(duì)文件中的空格通常也不按源程序中的效果顯示。對(duì)于確實(shí)需要顯示空格和回車符的地方，HTML通過(guò)特殊的符號(hào)來(lái)表達(dá)。例如，HTML源文件如下：
在瀏覽器解析后，很多空格將被忽略，只顯示一個(gè)空格，如圖3.1所示。
圖3.1 瀏覽器解析后會(huì)忽略多余的空格
【示例3-1】如果開發(fā)者確實(shí)希望在瀏覽器中顯示空格，則需用特殊字符“ ”進(jìn)行表示。例如，把源文件改為：
瀏覽器的顯示效果如圖3.2所示。
圖3.2 瀏覽器對(duì)特殊字符的顯示效果
除“ ”外，HTML還有很多其他特殊字符，常用的如表3.1所示。
表3.1 常用的HTML特殊字符
3.1.2 HTML基本標(biāo)簽
我們已經(jīng)掌握了HTML的基本語(yǔ)法，本節(jié)開始講解HTML的常用標(biāo)簽，建議讀者通過(guò)邊看書、邊實(shí)踐的方式學(xué)習(xí)，這樣能夠快速掌握HTML的基本技巧。
注意：本節(jié)只列出了常用標(biāo)簽的普通使用方法，能夠幫助讀者迅速上手HTML語(yǔ)言。但本書不是HTML的參考手冊(cè)，關(guān)于HTML的全面知識(shí)還需讀者查閱其他文獻(xiàn)。
1. 段落
HTML會(huì)忽略源文件中的回車符和換行符，所以需要用特別的標(biāo)簽來(lái)表示段落。段落的標(biāo)簽是<p>，比如：
【示例3-2】<hr/>標(biāo)簽表示單行橫線顯示，<br/>標(biāo)簽表示換行，比如：
上述HTML代碼的顯示效果如圖3.3所示。
圖3.3 顯示效果
注意：嵌在<head>中的<meta charset="utf-8"/>標(biāo)簽是為了讓瀏覽器以UTF-8方式解析文件內(nèi)容，以便在不同的操作系統(tǒng)和語(yǔ)言環(huán)境中能正常顯示漢字。本章的所有帶漢字頁(yè)面中都加入該標(biāo)簽，后續(xù)不再重復(fù)說(shuō)明。
2. 標(biāo)題
HTML有特殊的標(biāo)簽用于顯示標(biāo)題，瀏覽器會(huì)根據(jù)顯示器的分辨率自動(dòng)設(shè)置標(biāo)題的字號(hào)。標(biāo)題由大到小分別有6個(gè)標(biāo)簽：從<h1>到<h6>。
【示例3-3】如下示例用于比較標(biāo)題字體和普通字體：
顯示效果如圖3.4所示。
圖3.4 HTML標(biāo)題字體的顯示效果
3. 字體格式
除了標(biāo)題字體，HTML還允許對(duì)顯示格式進(jìn)行更多風(fēng)格的控制。例如，<b>定義粗體字、<i>定義斜體字、<del>定義刪除字等：
顯示效果如圖3.5所示。
圖3.5 HTML字體風(fēng)格控制的顯示效果
HTML還有很多控制顯示字體格式的標(biāo)簽，常用的如表3.2所示。
表3.2 常用的字體格式的標(biāo)簽
4. 鏈接和圖像
網(wǎng)頁(yè)之間的鏈接是HTML的重要功能，鏈接功能用<a>標(biāo)簽實(shí)現(xiàn)，比如：
上述代碼中的<a>標(biāo)簽定義了兩個(gè)屬性，href設(shè)置被跳轉(zhuǎn)的URL，target設(shè)置在什么窗口中打開鏈接。
鏈接除了可以是上述文字（“單擊進(jìn)入百度”），還可以是圖片。圖片用標(biāo)簽<img>表達(dá)，比如：
標(biāo)簽<img>有兩個(gè)常用的屬性：src設(shè)置圖片文件名，可以是絕對(duì)路徑或相對(duì)路徑；alt設(shè)置圖片顯示失敗時(shí)替換的顯示文字。用圖片實(shí)現(xiàn)超鏈接的示例代碼如下：
5. 表格
HTML中的表格有兩種作用：一種是顯示真實(shí)的表結(jié)構(gòu)及數(shù)據(jù)，另一種是控制網(wǎng)頁(yè)布局。兩種方式都通過(guò)<table>、<tr>、<td>、<th> 4個(gè)標(biāo)簽分別聲明表格、表行、表單元、表頭。顯示表結(jié)構(gòu)及數(shù)據(jù)時(shí)通常需要為表格設(shè)置邊框；而控制網(wǎng)頁(yè)布局時(shí)通常需要用到表格嵌套，即在一個(gè)表格的標(biāo)簽<td>中設(shè)置另外一個(gè)表格。
【示例3-4】表格的示例如下：
表格常用的屬性有border、colspan、rowspan等，分別設(shè)置邊框?qū)挾取⒖缌袉卧⒖缧袉卧取Ｉ鲜鍪纠娘@示效果如圖3.6所示。
圖3.6 HTML表格的顯示效果
6. 列表
列表是常用的顯示方式，HTML中的列表有以下3種。
? 無(wú)序列表：用標(biāo)簽<ul>表示列表，用<li>表示表項(xiàng)。
? 有序列表：用標(biāo)簽<ol>表示列表，用<li>表示表項(xiàng)。
? 定義列表：用標(biāo)簽<dl>表示列表，用<dt>表示被定義詞，用<dd>表示定義描述。
【示例3-5】列表的示例如下：
HTML列表的顯示效果如圖3.7所示。
圖3.7 HTML列表的顯示效果
7. 顏色及背景
HTML的顏色有3種表達(dá)方式：十六進(jìn)制數(shù)字、RGB值或者顏色名稱。顏色可以用于設(shè)置字體、網(wǎng)頁(yè)背景等。例如，通過(guò)如下3種方式都可以設(shè)置頁(yè)面背景為紅色：
8. Flash及音視頻播放
除了上述基本頁(yè)面呈現(xiàn)方式，HTML還支持聲音、視頻、Flash集成，這才使得當(dāng)今的網(wǎng)頁(yè)豐富多彩。可以用<object>標(biāo)簽播放嵌入式Flash，舉例如下：
<object>標(biāo)簽中的classid、codebase等屬性用于指明客戶端播放插件，開發(fā)者在使用中無(wú)須修改這部分內(nèi)容，只需修改<embed>標(biāo)簽的相關(guān)屬性就可以設(shè)置不同的Flash文件、播放窗口的大小等。
音頻及視頻可以通過(guò)<audio>及<video>標(biāo)簽嵌入HTML中，瀏覽器遇到它們時(shí)會(huì)將本地可用的音頻及視頻播放器嵌入頁(yè)面中，比如：
HTML可以識(shí)別的音頻格式包括*.mid、*.midi、*.rm、*.wav、*.wma、*.mp3等，視頻格式包括*.avi、*.wmv、*.mpg、*.mpeg、*.mov、*.rm、*.ram、*.swf、*.flv、*.mp4等。
3.1.3 HTML表單
HTML表單用于從客戶端收集用戶在瀏覽器中的輸入，是HTML實(shí)現(xiàn)客戶端與服務(wù)器交互的核心方法。作為連接客戶端與服務(wù)器的紐帶，HTML表單也是Python中各Web框架編程都要用到的技術(shù)。HTML表單用<form>標(biāo)簽表達(dá)，其內(nèi)容由輸入控件和提交控件組成，表單的基本工作方式如下。
? 用戶在瀏覽器中輸入數(shù)據(jù)并提交，輸入數(shù)據(jù)的方式可以是文本、單選、多選等。
? 瀏覽器將輸入的數(shù)據(jù)封裝到HTTP Body中并以POST方式提交給服務(wù)器。
? 服務(wù)器收到請(qǐng)求后將結(jié)果Response給瀏覽器。
1. 文本輸入
HTML表單中的文本輸入有單行文本、多行文本、密碼框等，分別用標(biāo)簽<input type="text">、<textarea>、<input type="password">表示，示例如下：
需要給每個(gè)輸入控件設(shè)置一個(gè)不同的“name”屬性，該屬性用于在表單被提交到服務(wù)器后，使服務(wù)器識(shí)別各個(gè)輸入控件。還可以通過(guò)設(shè)置rows和cols屬性控制輸入框的大小。
2. 單項(xiàng)選擇
單項(xiàng)選擇有兩種表達(dá)方式：?jiǎn)芜x按鈕或者下拉列表，它們分別用標(biāo)簽<input type="radio">、<select>/<option>表達(dá)，示例如下：
通過(guò)在<input type="radio">中設(shè)置check屬性可以標(biāo)識(shí)哪一項(xiàng)默認(rèn)被選擇，<option>標(biāo)簽的selected屬性有同樣的作用。此外，需要給每一個(gè)選項(xiàng)設(shè)置value屬性，該屬性用于在服務(wù)器端檢查哪一個(gè)選項(xiàng)被選擇，例如，當(dāng)本例中的“學(xué)歷”下拉列表被選為“研究生及以上”時(shí)，服務(wù)器端在檢查Post消息體時(shí)將可以收到“grade: master”的輸入。
3. 多項(xiàng)選擇
多項(xiàng)選擇用復(fù)選框表達(dá)，相應(yīng)的HTML標(biāo)簽是<input type="checkbox">，示例如下：
4. 文件上傳
HTML定義了標(biāo)準(zhǔn)的文件上傳控件，相應(yīng)的HTML標(biāo)簽是<input type="file">，示例如下：
標(biāo)簽雖然簡(jiǎn)單，但在瀏覽器中的功能十分強(qiáng)大。如圖3.8所示，標(biāo)簽提供了一個(gè)文件名輸入框，并且有一個(gè)瀏覽按鈕通過(guò)操作系統(tǒng)的文件選擇框進(jìn)行文件選擇，通過(guò)accept屬性可以設(shè)置文件選擇框中的文件篩選器。
圖3.8 HTML文件選擇
5. 邊框及提交
HTML提供了邊框控件，可以將所有其他控件包含在一起，以形成較好的視覺效果，邊框控件的標(biāo)簽為<fieldset>。完成前面的所有操作后，只需添加提交按鈕控件即可，標(biāo)簽為<submit>。表單的整體結(jié)構(gòu)示例如下：
集成本節(jié)學(xué)習(xí)的所有控件，顯示效果如圖3.9所示。
圖3.9 集成HTML表單控件的顯示效果
- 現(xiàn)代C++編程：從入門到實(shí)踐
- HTML5+CSS3王者歸來(lái)
- Mastering Entity Framework Core 2.0
- Nginx實(shí)戰(zhàn)：基于Lua語(yǔ)言的配置、開發(fā)與架構(gòu)詳解
- Python忍者秘籍
- Java高并發(fā)核心編程（卷1）：NIO、Netty、Redis、ZooKeeper
- 智能搜索和推薦系統(tǒng)：原理、算法與應(yīng)用
- Clojure for Java Developers
- 自學(xué)Python：編程基礎(chǔ)、科學(xué)計(jì)算及數(shù)據(jù)分析（第2版）
- 區(qū)塊鏈架構(gòu)之美：從比特幣、以太坊、超級(jí)賬本看區(qū)塊鏈架構(gòu)設(shè)計(jì)
- Django Design Patterns and Best Practices
- .NET 4.0面向?qū)ο缶幊搪劊簯?yīng)用篇
- 大學(xué)計(jì)算機(jī)應(yīng)用基礎(chǔ)（Windows 7+Office 2010）（IC3）
- ANSYS FLUENT 16.0超級(jí)學(xué)習(xí)手冊(cè)
- Android熱門應(yīng)用開發(fā)詳解