- 貫通Java Web開發三劍客
- 希賽IT發展研究中心組編
- 2781字
- 2018-12-27 18:23:50
1.4 HTML
HTTP 協議規定了如何在客戶機瀏覽器和服務器 Web 應用之間交換信息和傳送數據,但是并沒有定義交換數據的格式以及瀏覽器在獲取數據后如何按照數據創建者的意愿有效地顯示數據。假如所有交換的數據都只是二進制數的文件,那么HTTP就和文件傳輸沒什么區別了,而且現在的Web也就不會如此絢麗多彩了。正是HTML的出現,才使得Web逐漸發展得像現在這樣的豐富多彩。
HTML的全稱是HyperText Markup Language,即超文本標記語言。它是一種規范,這個規范定義了一系列標記以及這些標記的結構。瀏覽器可以將任何符合該規范的文檔(通常為HTML或HTML文檔)進行解析并且按照HTML文檔的結構進行格式化展示。客戶機瀏覽器和Web服務器可以通過互相交換HTML文檔實現具有豐富格式信息的數據傳送。如下是一個HTML文檔的簡單框架:
示例1.1
<html> <head> <title>這是HTML標題</title> </head> <body> 這是HTML內容 </body> </html>
HTML 文檔使用一系列標簽將文本組織成特定的結構,并且可以通過特定的標簽使得文檔在瀏覽器中展示時可以引入豐富的顏色、圖片、字體等信息。HTML 文檔的結構是由標簽包含關系標示的一種層次結構,頂層標簽是<html>。
讀者可以將編寫的HTML文檔保存到本地硬盤(后綴名為.htm或者.html),然后使用瀏覽器打開就可以看到HTML展示出來的效果。對于示例1.1中所示的HTML文檔,讀者可以將其保存為test.htm,然后用瀏覽器打開該文件,就可以看到如圖1.6所示的效果:

圖1.6 test.htm頁面效果
1.4.1 標簽和屬性
HTML文檔的內容通過一系列標簽進行格式化,如示例1.1所示,<html>、<head>、</head>、</body>等都是HTML標簽。HTML標簽分為開始標簽和結束標簽,開始標簽由一對尖括號括起來,尖括號中的文字是標簽的名稱,結束標簽與開始標簽有相同的名稱,并且在左尖括號和標簽名稱之間加了一個/ ;HTML 中的大部分標簽都是成對的,例如<html>和</html>、<head>和</head>;一對標簽之間可以包含文字也可以包含其他標簽。另外,有一種特殊的寫法<tag/>,就是將 / 寫在右尖括號的前面,這是<tag></tag>的簡寫形式,它表示<tag>標簽中不包含任何內容。
HTML標簽除了可以組織內容之外,大多數的HTML標簽還可以定義一系列的屬性用于補充說明標簽的一些附加信息,屬性都寫在開始標簽中,例如:
<body bgcolor="red"> ... </body>
表示將該HTML頁面的背景色設置為紅色。
1.4.2 常用標簽
HTML 規范中定義了許多標簽以及標簽所能夠定義的屬性,有些標簽用于說明一種格式信息,比如<br>、<p>等;有些標簽用于說明一定的動作信息,比如<a>等;另一些標簽用于插入指定的對象,比如<img>等。下面將對HTML中一些常用的標簽及其常用的屬性進行介紹。
1.頁面標簽
示例1.1給出了一個HTML文檔的基本結構,其中用<html>、<head>、<title>和<body>規定了文檔的整體結構,<head>標簽中是頭部信息,其中可以定義一些輔助信息,這些信息不會顯示在瀏覽器頁面的正文中,例如<title>定義了頁面的標題,它顯示在瀏覽器的標題欄上。<body>標簽中的內容是HTML文檔的主體,需要顯示在瀏覽器頁面正文中的內容全部寫在該標簽中。
<head>中除了可以包含<title>外,還可以包含其他的標簽,其中常見的有以下兩種。
● link:可以用于鏈接一些其他文檔,最常見的是使用該標簽鏈接樣式表(Style Sheet),例如:
<link rel="stylesheet" type="text/css" href="theme.css" />
● 表示鏈接theme.css,用它定義的樣式作為本頁的格式。樣式表中定義了一系列文檔中使用的樣式格式,例如文字的顏色、字體、大小,頁面的寬度等。
● meta:用于定義頁面的一些元數據信息,最常見的是使用該標簽定義頁面的媒體格式和字符編碼方式,例如:
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
表示該頁面的類型是text/html,字符編碼格式是ISO—8859—1。
<body>標簽的內容包含了html文檔所要顯示的絕大多數內容,所有需要在瀏覽器頁面正文中顯示的內容都必須定義在該標簽中;而且,<body>標簽的屬性也可以用于規定整個頁面的展示方式。<body>標簽常見的屬性如表1.1所示。
表1.1 body標簽屬性

2.格式標簽
在HTML文件中文字的位置、文字之間的回車換行和空格等都不會被最終顯示到瀏覽器上,要控制HTML文檔中的文字最終如何在瀏覽器中布局,需要使用HTML的格式標簽。HTML定義了豐富的用于定義格式的標簽,例如,<p>、<br>等。
(1)文字的控制
文字有很多屬性可以設置,例如大小、顏色、字體、是否加粗、是否斜體等。HTML 中提供了一個通用的標簽用于設置文字的屬性,即<font>,也有一些標簽可以方便地設置文字的一種屬性,例如<hx>(一系列標簽<h1>、<h2>、<h3>、…的總稱)可以方便地定義不同大小的文字。
<font>標簽是一個用于設置文字字體的通用方法,它通過不同屬性來設置文字的不同方面:size屬性用于設置文字的大小、face屬性用于設置字體、color屬性用于設置文字的顏色;
<hx>標簽是一組標簽的總稱,x可以是1、2、3、…它們都表示頁面的標題,不同的x表示的標題級別不一樣,x越大級別越低,所包含文字的字體也會越小;每個標題占一行。
<b>和<strong>標簽表示將文字加粗;
<i>和<em>標簽表示將文字變成斜體;
<u>標簽表示給文字加下畫線;
<s>和<strike>標簽都表示給文字加一個中畫線;
<sup>標簽表示將文字作為上角標;
<sub>標簽表示將文字作為下角標。
各種控制文字的標簽示例如表1.2所示。
表1.2 各種控制文字的標簽示例

(2)行的控制
<p>表示在該標簽中的文字形成一個單獨的段落,通常段落與段落之間有一個空行;
<br>表示換行,即該標簽之前是一行,該標簽之后是另外一行,如表1.3所示
表1.3 控制行的標簽示例

(3)布局的控制
假如只能控制行,那得到的頁面將只能像文本文件一樣非常枯燥,HTML 提供了更多的標簽以及標簽的屬性用于定義豐富的布局格式。
align 屬性通常用于規定標簽內容的對齊方式,<hx>、<p>、<div>標簽都有該屬性,可以通過將該屬性的值指定為center、left或right以用于將內容居中、居左或居右對齊。
列表是一種經常使用的布局方式,HTML的<ul>標簽用于定義無序的列表,<ol>標簽用于定義有序的列表。<li>表示列表的一項,而且可以通過定義<li>標簽的start屬性指定有序列表的起始序號,定義<li> 標簽的type屬性指定序號的形狀。
除此之外,HTML還有一個標簽<pre>可以定義預格式化的文本,即該標簽內的文字將不按HTML規范進行解析,而是將其中的內容原封不動、保持格式顯示在瀏覽器中,如表1.4所示。
表1.4 控制布局的標簽示例

3.表格
表格是HTML中使用最多也是最重要的一種技巧,通常大部分網頁設計師用表格控制頁面內容在整個頁面中的分布,并且可以通過使用嵌套的表格將頁面進行任意的劃分。表格都用頂層標簽<table>進行定義,<th>標簽用于定義表頭,<tr>標簽用于定義一行,<td>標簽用于定義一行中的一列,如表1.5所示。
表1.5 控制表格的標簽示例

4.表單
表單在HTML中是非常重要的,它提供了一系列可以展現在瀏覽器中并且能夠提供交互的功能組件,例如:文本框、密碼框、文本域、按鈕等。可以使用表格來組織表單中的組件,如表1.6所示。
表1.6 表單示例

Form 標簽的 action 屬性指向一個鏈接,當表單被提交時就會鏈接到該鏈接所指向的地址。button類型、reset類型和submit類型的input組件都是按鈕,button按鈕是普通的按鈕,reset按鈕可以將表單中的內容清空,submit按鈕可以提交表單。
5.其他
除了以上介紹的這些標簽外,HTML還有許多很重要和很常用的標簽,例如:
<a>標簽主要用于定義一個超鏈接,其href屬性用于指定超鏈接的地址;
<img>標簽用于在網頁中以鏈接的方式加入一個圖片,其src屬性用于指定待鏈接圖片的位置;
<hr>標簽可以在頁面上加一個水平的分隔線,如表1.7所示。
表1.7 其他標簽示例

HTML有很多的標簽,大部分標簽也都定義了很多的屬性,熟悉掌握它們對于Web應用開發是非常重要的。本章由于篇幅有限只能介紹非常有限的內容,希望讀者在學習完本節后自己再收集一些資料自行學習。
- 課課通計算機原理
- Word 2003、Excel 2003、PowerPoint 2003上機指導與練習
- Ansible Configuration Management
- 構建高質量的C#代碼
- WOW!Illustrator CS6完全自學寶典
- 來吧!帶你玩轉Excel VBA
- MicroPython Projects
- 大數據處理平臺
- 大數據平臺異常檢測分析系統的若干關鍵技術研究
- 網絡安全技術及應用
- 在實戰中成長:Windows Forms開發之路
- 水晶石影視動畫精粹:After Effects & Nuke 影視后期合成
- 手機游戲策劃設計
- Photoshop CS4數碼攝影處理50例
- Mastering OpenStack(Second Edition)