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