基本介紹
一個標準的 HTML 文件應該以<html>開始標簽開始文檔,中間包含<head>與<body> 等元素,其中<head>部分中可以定義頁面的標題、簡介、編碼格式等內容,<body>部分為 在瀏覽器中顯示的頁面正文。下面的代碼為一個不包含內容的標準 HTML 文檔結構:
<html>
<head>
</head>
<body>
</body>
</html>
通過<title>元素可以指定頁面的標題,標題會出現(xiàn)在瀏覽器的標題欄中,如果通過瀏 覽器收藏本頁面,頁面標題也會作為收藏夾中頁面的名稱。文檔的內容是通過<body>元素 來指定的,在<body>元素的開始標簽<body>和結束標簽</body>之間放置文檔的內容。如 果需要在頁面上添加注釋,可以使用符號包含注釋內容,下面是一段設置了標題 和內容的 HTML 文件代碼:
<html>
<head>
<title>頁面標題</title> </head>
<body>
<!-- 這是一段注釋 -->
這是在 HTML 中顯示的文本。 注意:瀏覽器遇到連續(xù)的空格或換行時只會在頁面上顯示一個空格
</body>
</html>
字符引用和實體引用都是以一個和號(&)開始并以一個分號(;)結束。如果使用的 是字符引用,需要在和號(&)之后加上一個井號(#),之后是所需字符的十進制代碼或 十六進制代碼(ISO10646 字符集中字符的編碼)。如果使用的是實體引用,在和號(&) 之后寫上字符的助記符。常用特殊字符的字符引用和實體引用如表 1-1 所示。
<html>
<head>
<title>頁面標題</title> </head>
<body>
HTML 中標題元素為<title> 所有的轉義字符都以&符號作為開始
</body>
</html>
基本元素介紹
1.頁面信息元素meta
頁面信息元素可提供有關頁面的元信息(Meta-Information),比如針對搜索引擎提供 的頁面描述和關鍵詞、指定頁面編碼等。該元素應該出現(xiàn)在<head>元素內部。
頁面信息元素常用屬性如下。
- http-equiv:設置本頁面有關的信息,需要與 content 屬性配合使用,常見的設置如下:
? 指定頁面的文本編碼格式:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
? 頁面顯示 5 秒鐘后瀏覽器跳轉到 www.google.com 頁面:
<meta http-equiv="Refresh" content="5; Url=http://www.google.com">
瀏覽器可以緩存本頁面直至 2011 年 2 月 23 日 18 點,超過此時間后瀏覽器必須重 新從服務器上取得此網(wǎng)頁內容:
<meta http-equiv="Expires" content="Wed, 23 Feb 2011 18:00:00 GMT">
- name:描述網(wǎng)頁內容,供搜索引擎收錄,需要與 content 屬性配合使用,常見的設置 如下:
設置本網(wǎng)頁的關鍵詞,多個關鍵詞用英文逗號分割,為網(wǎng)頁提供合適的關鍵詞有利于提高網(wǎng)頁在搜索引擎中的排名:
<meta name="Description" content="網(wǎng)頁簡述">
設置本網(wǎng)頁的簡述,告訴搜索引擎本網(wǎng)頁的主要內容:
<meta name="Description" content="網(wǎng)頁簡述">
設置本網(wǎng)頁的作者,可以是個人或公司名稱:
<meta name="Author" content="張三">
2.段落元素p
段落元素用來表示一段文本,該元素會自動進行換行。
例 01_3.html
<p>普通段落</p>
<p align="left">左對齊段落</p>
<p align="center">居中段落</p>
<p align="right">靠右對齊段落</p>
其中,align 屬性用于設置文字對齊方式,可選值有“l(fā)eft”、“center”、“right”,默認為 左對齊。
3.換行元素
換行元素用于同一段落內文字的換行顯示,該元素沒有屬性,也不包含內容。
<p>
<br>元素可用于段落中文字的換行<br/> 因為瀏覽器對 HTML 中的換行符并不敏感, 所以這段話在瀏覽器中會連續(xù)顯示
</p>
<p>段落間的留白比<br>元素更明顯</p>
4.標題元素
標題元素用于將文字變?yōu)闃祟}顯示。
例 01_5.html
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
5.文字修飾元素b、i、u
b、i、u元素用于修飾文字,作用分別為使文字變粗體、變斜體、加下畫線。
例 01_6.html
<p><b>元素使文字變?yōu)?lt;b>粗體</b></p>
<p><i>元素使文字變?yōu)?lt;i>斜體</i></p>
<p><u>元素為文字添加<u>下畫線</u></p>
<p><b>這些<u>元素<i>可以</i>組合</u>使用</b></p>
注意:還可以用strong元素取代b元素,用em元素取代i元素。
6.文字修飾元素font
font元素可用于修飾文字的顏色、大小和字體。
例 01_7.html
<p>
<font>元素可以修飾文字的<font color="gray">顏色</font>,
<font size="5">大小</font>和<font face="黑體">字體</font>
</p>
<p>也可以<font color="#B0B0B0" size="6" face="黑體">組合</font>使用</p>
<font>元素常用屬性如下。
- ? color:設置文字的顏色,顏色可以使用英文單詞或十六進制的數(shù)字指定。
- size:設置文字的大小,可選值為 1~7。
- ? face:設置文字的字體。
7.原樣顯示元素pre
原樣顯示元素用于原樣顯示文本,包括其中的換行符與連續(xù)的空格。
例 01_8.html
<pre>
用于原樣顯示文本,
包含換行符
</pre>
<pre>以及連續(xù) 的空格。</pre>
8.分割線元素
分割線元素用于顯示分割線,可以通過屬性設置分割線的外觀。
例 01_9.html
<p><hr>元素用于顯示分割線</p>
<hr color="red" noshade="noshade" width="400px" align="right" size="1"/>
分割線元素常用屬性如下。
- ? color:設置分割線的顏色。
- ? noshade:設置是否顯示陰影,無此屬性則顯示陰影。
- ? width:設置線的寬度,可以使用百分比或像素作為單位。
- ? align:分隔線的對齊方式,可選值有“l(fā)eft”、“center”、“right”,默認為居中對齊。
- ? size:線的粗細,單位為像素。
