web 前端開發(fā)5.2 HTML標(biāo)記_第1頁
web 前端開發(fā)5.2 HTML標(biāo)記_第2頁
web 前端開發(fā)5.2 HTML標(biāo)記_第3頁
web 前端開發(fā)5.2 HTML標(biāo)記_第4頁
web 前端開發(fā)5.2 HTML標(biāo)記_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

5.2HTML標(biāo)記web前端開發(fā)5.2.1HTML標(biāo)記

在HTML頁面中，帶有“<>”符號的元素被稱為HTML標(biāo)記，如上面提到的<html>、<head>、<body>都是HTML標(biāo)記。所謂標(biāo)記就是放在“<>”標(biāo)記符中表示某個功能的編碼命令，也稱為HTML標(biāo)簽或HTML元素，本書統(tǒng)一稱作HTML標(biāo)記。1．單標(biāo)記和雙標(biāo)記

為了方便學(xué)習(xí)和理解，通常將HTML標(biāo)記分為兩大類，分別是“雙標(biāo)記”與“單標(biāo)記”。對它們的具體介紹如下。（1）雙標(biāo)記

雙標(biāo)記是指由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。其基本語法格式為：<標(biāo)記名>內(nèi)容<／標(biāo)記名>

該語法中“<標(biāo)記名>”表示該標(biāo)記的作用開始，一般稱為“開始標(biāo)記”，“<／標(biāo)記名>”表示該標(biāo)記的作用結(jié)束，一般稱為“結(jié)束標(biāo)記”。和開始標(biāo)記相比，結(jié)束標(biāo)記只是在前面加了一個關(guān)閉符“／”。例如：5.2.1HTML標(biāo)記

<h2>傳智播客網(wǎng)頁平面設(shè)計免費公開課<／h2>

其中<h2>表示一個標(biāo)題標(biāo)記的開始，而<／h2>表示一個標(biāo)題標(biāo)記的結(jié)束，在它們之間是標(biāo)題內(nèi)容。（2）單標(biāo)記

單標(biāo)記也稱空標(biāo)記，是指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。其基本語法格式為：<標(biāo)記名／>

例如：<hr/>

其中<hr／>為單標(biāo)記，用于定義一條水平線。5.2.1HTML標(biāo)記

通過上面的學(xué)習(xí)，已經(jīng)了解HTML文檔中的單標(biāo)記和雙標(biāo)記。下面通過一個案例進一步演示HTML標(biāo)記的使用，具體代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>綠色寵物醫(yī)院網(wǎng)站</title></head><body><h2>綠色寵物醫(yī)院網(wǎng)站</h2><p>更行時間：2021年09月28日14時08分來源：綠色寵物醫(yī)院網(wǎng)站</p><hr/><p>規(guī)定設(shè)立從事動物診療活動的機構(gòu)，應(yīng)當(dāng)向縣級以上地方人民政府獸醫(yī)主管部門申請動物診療許可證。國家實行執(zhí)業(yè)獸醫(yī)資格考試制度。</p></body></html>5.2.1HTML標(biāo)記

在例1-2中，使用了不同的標(biāo)記來定義網(wǎng)頁，如標(biāo)題標(biāo)記<h2>、水平線標(biāo)記<hr／>、段落標(biāo)記<p>。運行例1-2，效果如圖：5.2.1HTML標(biāo)記2．注釋標(biāo)記

在HTML中還有一種特殊的標(biāo)記-注釋標(biāo)記。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)記。其基本語法格式為：<！--注釋語句-->

例如，下面為<p>標(biāo)記添加一段注釋：

注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部可以被下載到用戶的計算機上，查看源代碼時就可以看到。5.2.2標(biāo)記的屬性

使用

HTML制作網(wǎng)頁時，如果想讓HTML標(biāo)記提供更多的信息，例如，希望標(biāo)題文的字體為“微軟雅黑”且居中顯示，段落文本中的某些名詞顯示為其他顏色加以突出。此僅僅依靠HTML標(biāo)記的默認顯示樣式已經(jīng)不能滿足要求，需要使用HTML標(biāo)記的屬性加設(shè)置。其基本語法格式為：<標(biāo)記名屬性1＝＂屬性值1”屬性2＝＂屬性值2＂···>內(nèi)容<／標(biāo)記名>

在上面的語法中，標(biāo)記可以擁有多個屬性，必須寫在開始標(biāo)記中，位于標(biāo)記名后面。性之間不分先后順序，標(biāo)記名與屬性、屬性與屬性之間均以空格分開。任何標(biāo)記的屬性都默認值，省略該屬性則取默認值。例如：<h1align＝＂center＂>標(biāo)題文本<h1>

其中align為屬性名，center為屬性值，表示標(biāo)題文本居中對齊，對于標(biāo)題標(biāo)記還可以置文本左對齊或右對齊，對應(yīng)的屬性值分別為left和right。如果省略align屬性，標(biāo)題文本按默認值左對齊顯示。5.2.2標(biāo)記的屬性

了解了標(biāo)記的屬性，下面在例1-2的基礎(chǔ)上通過標(biāo)記的屬性對網(wǎng)頁進一步修飾，具體代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>綠色寵物醫(yī)院網(wǎng)站</title></head><body><h2align="center"><fontface="微軟雅黑">綠色寵物醫(yī)院網(wǎng)站</font></h2><palign="center"><fontcolor="#979797"size="2">更行時間：2021年09月28日14時08分來源：<fontcolor="blue">綠色寵物醫(yī)院網(wǎng)站</font></font></p><hrsize="2"color="#CCCCCC"/><p>規(guī)定設(shè)立從事動物診療活動的機構(gòu)，應(yīng)當(dāng)向<fontcolor="blue">縣級以上地方人民政府獸醫(yī)主管部門</font>申請動物診療許可證。國家實行執(zhí)業(yè)獸醫(yī)資格考試制度。</p></body></html>5.2.2標(biāo)記的屬性

在例1-3的第8行代碼，將標(biāo)題標(biāo)記<h2>的align屬性設(shè)置為center，使標(biāo)題文本居中對齊，第9行代碼中同樣使用align屬性使段落文本居中對齊。另外，第10行代碼使用水平線標(biāo)記的size和color屬性設(shè)置水平線為特定的粗細和顏色。運行例example03.html，效果如圖所示：

通過例example03.html可以看出，在頁面中使用標(biāo)記時，想控制哪部分內(nèi)容，就用相應(yīng)的標(biāo)記選擇它，然后利用標(biāo)記的屬性進行設(shè)置。5.2.3HTML文檔頭部相關(guān)標(biāo)記

制作網(wǎng)頁時，經(jīng)常需要設(shè)置頁面的基本信息，如頁面的標(biāo)題、作者和其他文檔的關(guān)系為此HTML提供了一系列的標(biāo)記，這些標(biāo)記通常都寫在head標(biāo)記內(nèi)，因此被稱為頭部相記。接下來將具體介紹常用的頭部相關(guān)標(biāo)記。1．設(shè)置頁面標(biāo)題標(biāo)記<title><title>標(biāo)記用于定義HTML頁面的標(biāo)題，即給網(wǎng)頁取一個名字，必須位于<head>標(biāo)i內(nèi)。一個HTML文檔只能包含一對<title><／title>標(biāo)記，<title><／title>之間的內(nèi)容將顯示覽器窗口的標(biāo)題欄中。其基本語法格式為：<title>網(wǎng)頁標(biāo)題名稱<／title> 了解了頁面標(biāo)題標(biāo)記<title>，下面通過一個簡單的案例來演示<title>標(biāo)記的用法，具體代碼如下：<!DOCTYPEhtml><html><head><metacharset="{CHARSET}"><title>一個簡單的HTML網(wǎng)頁</title></head><body>這是我第一次做主頁</body></html>在例example04.html的第5行代碼中，使用<title>標(biāo)記設(shè)置HTML5頁面的標(biāo)題。運行例example04.html，效果如圖所示。5.2.3HTML文檔頭部相關(guān)標(biāo)記2．定義頁面元信息標(biāo)記<meta/><meta／>標(biāo)記用于定義頁面的元信息，可重復(fù)出現(xiàn)在<head>頭部標(biāo)記中，在HTML中是一個單標(biāo)記。<meta／>標(biāo)記本身不包含任何內(nèi)容，通過“名稱／值”的形式成對的使用其屬性可定義頁面的相關(guān)參數(shù)，如為搜索引擎提供網(wǎng)頁的關(guān)鍵字、作者姓名、內(nèi)容描述，以及定義網(wǎng)頁的刷新時間等。

下面介紹<meta／>標(biāo)記常用的幾組設(shè)置，具體如下。

（1）<metaname＝＂名稱＂content＝＂值＂／>

在<meta>標(biāo)記中使用name／content屬性可以為搜索引擎提供信息，其中name屬性提供搜索內(nèi)容名稱，content屬性提供對應(yīng)的搜索內(nèi)容值。具體應(yīng)用如下。

網(wǎng)頁關(guān)鍵字，如傳智播客官網(wǎng)關(guān)鍵字的設(shè)置：<metaname＝＂keywords＂content＝＂寵物醫(yī)院，綠色寵物醫(yī)院，小動物醫(yī)院／>

其中

name屬性的值為keywords，用于定義搜索內(nèi)容名稱為網(wǎng)頁關(guān)鍵字，content屬性的值用于定義關(guān)鍵字的具體內(nèi)容，多個關(guān)鍵字內(nèi)容之間可以用“，”分隔。

設(shè)置網(wǎng)頁描述，如綠色寵物醫(yī)院網(wǎng)站描述信息的設(shè)置：<metaname＝＂description＂content＝＂寵物醫(yī)院龍頭老大，口碑最好的寵物醫(yī)院，綠色寵物醫(yī)院／>

其中name屬性的值為description，用于定義搜索內(nèi)容名稱為網(wǎng)頁描述，content屬性的值用于定義描述的具體內(nèi)容。需要注意的是網(wǎng)頁描述的文字不必過多。

其中

name屬性的值為author，用于定義搜索內(nèi)容名稱為網(wǎng)頁作者，content屬性的值用于定義具體的作者信息。5.2.3HTML文檔頭部相關(guān)標(biāo)記（2）<metahttp-equiv＝＂名稱＂content＝＂值＂／>

在<meta>標(biāo)記中使用http-equiv／content屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關(guān)的參數(shù)。其中，http-equiv屬性提供參數(shù)類型，content屬性提供對應(yīng)的參數(shù)值。默認會發(fā)送<metahttp-equiv＝＂Content-Type＂content＝＂text／html＂／>，通知瀏覽器發(fā)送的文件類型是HTML，具體應(yīng)用如下。

設(shè)置字符集，如綠色寵物醫(yī)院官網(wǎng)字符集的設(shè)置：<metahttp-equiv="Content-Type"content="text/html; charset:ur-8"/>

其中http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset:ur-8中間用“：”隔開，用于說明當(dāng)前文檔類型為HTML，字符集為uf-8（國際化編碼）。utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有g(shù)bk和gb2312。

設(shè)置頁面自動刷新與跳轉(zhuǎn)，如定義某個頁面10秒后跳轉(zhuǎn)至綠色寵物醫(yī)院官網(wǎng)：<metahttp-equiv="refresh"content="10;ur1="/>

其中http-equiv屬性的值為refresh，content屬性的值為數(shù)值和url地址，中間用“：”隔開，用于指定在特定的時間后跳轉(zhuǎn)至目標(biāo)頁面，該時間默認以秒為單位。5.2.3HTML文檔頭部相關(guān)標(biāo)記3．引用外部文件標(biāo)記<link>

一個頁面往往需要多個外部文件的配合，在<head>中使用<link>標(biāo)記可引用外部文件，一個頁面允許使用多個<link>標(biāo)記引用多個外部文件。其基本語法格式為：<link屬性＝＂屬性值＂／>

該語法中，<link>標(biāo)記的幾個常用屬性如表5-1所示。

表5-1<link>標(biāo)記的幾個常用屬性

例如，使用<link標(biāo)記引用外部CSS樣式表：<linkrel="stylesheet"type="text/css"href="style.css"/>

上面的代碼，表示引用當(dāng)前HTML頁面所在文件夾中，文件名為“style.css”的CSS樣式表文件。屬性名常用屬性值描述hrefURL指定引用外部文檔的地址relstylesheet指定當(dāng)前文檔與引用外部文檔的關(guān)系，該屬性值通常為stylesheet，表示定義一個外部樣式表typetext/css引用外部文檔的類型為CSS樣式表text/javascript引用外部文檔的類型為JavaScript腳本5.2.4的標(biāo)題和段落元素

在一個網(wǎng)頁中文字往往占有較大的篇幅，為了讓文字能夠排版整齊、結(jié)構(gòu)清晰，HTML提供了一系列的文本控制標(biāo)記，如標(biāo)題標(biāo)記<h1>～<h6>、段落標(biāo)記<p>等。本節(jié)將對這些標(biāo)記進行詳細講解。1．標(biāo)題標(biāo)記

為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)記，HTML提供了6個等級的標(biāo)題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<hl>到<h6>重要性遞減。其基本語法格式為：<h1align＝＂對齊方式＂>標(biāo)題文本<／h1>

align屬性為可選屬性，用于指定標(biāo)題的對齊方式。下面通過一個案例說明標(biāo)題標(biāo)記的使用，具體代碼如下：<body><h1>1級標(biāo)題</h1><h2>2級標(biāo)題</h2><h3>3級標(biāo)題</h3><h4>4級標(biāo)題</h4><h5>5級標(biāo)題</h5><h6>6級標(biāo)題</h6></body>

在例example05.html中，使用<h1>到<h6>標(biāo)記設(shè)置6種不同級別的標(biāo)題，運行例example05.html，效果如圖5-9所示。5.2.4的標(biāo)題和段落元素

從圖5-9可以看出，默認情況下標(biāo)題文字是加粗左對齊的，并且從<h1>到<h6>字號遞減。如果想讓標(biāo)題文字右對齊或居中對齊，就需要使用align屬性設(shè)置對齊方式，其取值如下。left：設(shè)置標(biāo)題文字左對齊（默認值）。center:設(shè)置標(biāo)題文字居中對齊。right：設(shè)置標(biāo)題文字右對齊。5.2.4的標(biāo)題和段落元素2、段落標(biāo)記

在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)記，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標(biāo)記就是<p>。默認情況下，文本在段落中會根據(jù)瀏覽器窗口的大小自動換行。<p>是HTML文檔中最常見的標(biāo)記，其基本語法格式為：<palign＝＂對齊方式＂>段落文本<／p>

該語法中align屬性為<p>標(biāo)記的可選屬性，和標(biāo)題標(biāo)記<h1>-<h6>一樣，同樣可以使用align屬性設(shè)置段落文本的對齊方式。

下面通過一個案例來演示段落標(biāo)記<p>的用法和其對齊方式，代碼如下：<body><p>規(guī)定設(shè)立從事動物診療活動的機構(gòu)，應(yīng)當(dāng)向縣級以上地方人民政府獸醫(yī)主管部門申請動物診療許可證。國家實行執(zhí)業(yè)獸醫(yī)資格考試制度。具有獸醫(yī)相關(guān)專業(yè)大學(xué)?？埔陨蠈W(xué)歷，經(jīng)考試合格的，方可獲得執(zhí)業(yè)獸醫(yī)資格證書。從事動物診療的，還應(yīng)向當(dāng)?shù)乜h級以上地方人民政府獸醫(yī)主管部門申請注冊。</p><palign="left">寵物醫(yī)院</p><palign="center">綠色寵物醫(yī)院</p><palign="right">動物診療</p></body>

在例example06.html中第一個<p>標(biāo)記為段落標(biāo)記的默認對齊方式，第二、三、四個<p>標(biāo)記分別使用align＝＂left＂、align＝＂center＂與align＝＂right＂設(shè)置了段落左對齊、居中對齊和右對齊。運行例example05.html，效果如圖5-10所示。

從圖5-10可以看出，通過使用<p>標(biāo)記，每個段落都會獨占一行，并且段落之間拉開了一定的間隔距離。5.2.4的標(biāo)題和段落元素3．水平線標(biāo)記<hr／>

在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標(biāo)記來完成，<hr／>就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)記。其基本語法格式為：<hr屬性＝＂屬性值＂／>

<hr／>是單標(biāo)記，在網(wǎng)頁中輸入一個<hr／>，就添加了一條默認樣式的水平線，<hr／>標(biāo)記幾個常用的屬性如表5-2所示。

通過使用水平線分割段落文本來演示<hr/>標(biāo)記的用法和屬性，具體代碼如下：<body><p>規(guī)定設(shè)立從事動物診療活動的機構(gòu)，應(yīng)當(dāng)向縣級以上地方人民政府獸醫(yī)主管部門申請動物診療許可證。國家實行執(zhí)業(yè)獸醫(yī)資格考試制度。具有獸醫(yī)相關(guān)專業(yè)大學(xué)?？埔陨蠈W(xué)歷，經(jīng)考試合格的，方可獲得執(zhí)業(yè)獸醫(yī)資格證書。從事動物診療的，還應(yīng)向當(dāng)?shù)乜h級以上地方人民政府獸醫(yī)主管部門申請注冊。</p><hr/><palign="left">寵物醫(yī)院</p><hrcolor="red"align="left"size="6"width="500"/>屬性名含義屬性值A(chǔ)lign設(shè)置水平線的對齊方式可選擇left、right、center三種值，默認為center，居中對齊Size設(shè)置水平線的粗細以像素為單位，默認為2個像素Color設(shè)置水平線的顏色顏色名稱、十六進制#RGBwidth設(shè)置水平線的寬度可以是像素值，也可以是百分比5.2.4的標(biāo)題和段落元素<palign="center">綠色寵物醫(yī)院</p><hrcolor="#0660FF"align="right"size="3"width="50%"/><palign="right">動物診療</p></body>

在例example07.html中，第一個<hr／>標(biāo)記為水平線的默認樣式，第二、三個<hr／>標(biāo)記分別設(shè)置了不同的顏色、對齊方式、粗細和寬度值。運行例example07.html，效果如圖所示。5.2.4的標(biāo)題和段落元素4．換行標(biāo)記<br／>

在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標(biāo)記<br／>，這時如果還像在Word中直接敲回車鍵換行就不起作用了。具體代碼如下：<body><p>使用HTML制作網(wǎng)頁時通過br標(biāo)記<br/>可以實現(xiàn)換行效果</p><p>如果像在word中一樣敲回車換行就不起作用了</p></body>在例example08.html中，分別使用換行標(biāo)記<br／>和回車鍵兩種方式進行換行。運行例example08.html，效果如圖所示。

在使用回車鍵換行的段落在瀏覽器中并沒有換行顯示文字，只是多出了一個字符的空白，而使用換行標(biāo)記<br／>的段落卻實現(xiàn)了強制換行的效果。5.2.5文本修飾標(biāo)記

對網(wǎng)頁上的文本可設(shè)置加粗、傾斜、添加下畫線等修飾效果，設(shè)置文本加粗的標(biāo)記分<b><／b>或<strong><／strong>，傾斜標(biāo)記為<i></i>或<em><／em>，下畫線標(biāo)記為<u><／u>或<ins><／ins>。以上這些標(biāo)記為純式標(biāo)記，現(xiàn)在一般都使用CSS來代替，此處做適當(dāng)了解。

1.設(shè)置文本加粗

使用<b><／b>和<strong><／strong>這三組標(biāo)記均可設(shè)置文字的加粗效果基本語法如下：<body><b>放在此標(biāo)記中文本有加粗效果<／b><strong>放在此標(biāo)記中文本有加粗效果<／strong></body>

這二組標(biāo)記都為雙標(biāo)記，放在這二組標(biāo)記中的文本在瀏覽器中顯示為加粗效果。建議使用<strong>

2.設(shè)置文本傾斜

使用<i><／i>和<em><／em>標(biāo)記添加文字傾斜效果，基本語法如下：<body><i>放在此標(biāo)記中的文本有傾斜效果<／i><em>放在此標(biāo)記中的文本有傾斜效果</em></body>

此標(biāo)記為雙標(biāo)記，放入此標(biāo)記中的文本在瀏覽器中顯示時有傾斜效果,建議使用<em>。5.2.5文本修飾標(biāo)記3.設(shè)置下畫線

使用<u><／u>和<ins><／ins>標(biāo)記設(shè)置文字下畫線，基本語法如下：<body><u>放在此標(biāo)記中的文本加下畫線效果<／u><ins>放在此標(biāo)記中的文本加下畫線效果<／ins></body>

此標(biāo)記為雙標(biāo)記，放入此標(biāo)記中的文本在瀏覽器中顯示有下畫線，但不建議使用。案例example09.html使用文本修飾標(biāo)記，設(shè)置文本加粗、傾斜的效果，并添加下畫線。具體代碼如下：<body><p>我是正常顯示的文本</p><p><b>我是使用b標(biāo)記加粗的文本</b>，<strong>推薦使用strong加粗</strong></p><p><i>我是使用i標(biāo)記傾斜的文本</i>，<em>推薦使用em斜體文本</em></p><p><u>我是u帶下劃線文本</u>，不建議使用</p></body>網(wǎng)頁運行效果如圖所示。5.2.6特殊字符標(biāo)記

瀏覽網(wǎng)頁經(jīng)常會看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。如何在網(wǎng)頁上顯示這些包含特殊字符的文本呢？HTML早就想到了這點，而且為他們準備了專門的替代代碼、如表5-3所示。

表5-3常用特殊字符的表示特殊字符描述字符的代碼

空格符

&和號&:天人民幣¥?版權(quán)©?注冊商標(biāo)®5.2.7 圖像標(biāo)記1常用圖像格式

網(wǎng)頁中圖像太大會造成加載速度慢，太小又會影響圖像的清晰度，有沒有哪種圖像格式能夠讓圖像更小，卻擁有更好的清晰度呢？接下來將為大家介紹幾種常用的圖像格式。

目前網(wǎng)頁上常用的圖像格式主要有GIF、JPG和PNG三種，具體區(qū)別如下。1、JPEGJPEG是目前最常見的圖片格式，全稱為JointPhotographicExpertGroup（聯(lián)合照片專家組），它只支持有損壓縮，是可以把文件壓縮到最小的格式，壓縮算法可以精確控制壓縮比。JPEG格式壓縮的主要是高頻信息，對色彩的信息保留較好，適合應(yīng)用于互聯(lián)網(wǎng)，可減少圖像的傳輸時間。

不過它的缺點也很明顯，編輯和重新保存JPEG文件時，JPEG會混合原始圖片數(shù)據(jù)的質(zhì)量下降，而且這種下降是累積性的。

比如你在網(wǎng)絡(luò)上看到的許多模糊甚至泛綠色的表情包都是由于此原因造成的。2、PNG

全稱為PortableNetworkGraphics（可移植網(wǎng)絡(luò)圖形），誕生在1995年，比JPEG晚幾年。它本身的設(shè)計目的是替代GIF格式，同時增加一些GIF文件格式所不具備的特性。PNG

只支持無損壓縮，所以它的壓縮比是有上限的，但相對于JPEG和GIF來說，它最大的優(yōu)勢在于支持完整的透明通道，能夠相容半透明/透明圖像。

缺點：圖片文件體積比JPEG格式的大，不能用于專業(yè)印刷。5.2.7 圖像標(biāo)記3、GIF

全稱為GraphicsInterchangeFormat（圖形交換格式），誕生于1987年，隨著初代互聯(lián)網(wǎng)流行開來。GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，最多支持256種色彩的圖像。GIF格式的另一個特點是其在一個GIF文件中可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的動畫。憑借這個特性，它得以從Windows1.0時代流行至今，而且仍然大受歡迎。5.2.7 圖像標(biāo)記2圖像標(biāo)記<img／>HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標(biāo)記，要想在網(wǎng)頁中顯示圖像就需要使圖像標(biāo)記，接下來將詳細介紹圖像標(biāo)記<img／>及和它相關(guān)的屬性。其基本語法格式為：<imgsrc＝＂圖像url＂alt=“”title=“”／>

該語法中src屬性用于指定圖像文件的路徑和文件名，它是img標(biāo)記的必需屬性。當(dāng)然還為<img／>標(biāo)記準備了很多其他的屬性具體如表5-4所示。

表5-4<img／>標(biāo)記的屬性屬性屬性值描述srcurl圖像的路徑alt文本圖像不能顯示時的替換文本title文本鼠標(biāo)懸停時顯示的內(nèi)容width像素設(shè)置圖像的寬度height像素設(shè)置圖像的高度border數(shù)字設(shè)置圖像邊框的寬度vspace像素設(shè)置圖像頂部和底部的空白（垂直邊距）hspace像素設(shè)置圖像左側(cè)和右側(cè)的空白（水平邊距）alignleft將圖像對齊到左邊right將圖像對齊到右邊top將圖像的頂端和文本的第一行文字對齊，其他文字居圖像下方middle將圖像的水平中線和文本的第一行文字對齊，其他文字居圖像下方bottom將圖像的底部和文本的第一行文字對齊，其他文字居圖像下方5.2.7 圖像標(biāo)記1．圖像的替換文本屬性alt

由于一些原因圖像可能無法正常顯示,顯示設(shè)置alt屬性中的文本，在圖像無法顯示時告訴用戶該圖片的信息。圖像標(biāo)記<img／>有一個和alt屬性十分類似的屬性title，title屬性用于設(shè)置鼠標(biāo)懸停時圖像的提示文字。

下面通過一個案例來演示alt屬性的用法，具體代碼如下：<body><imgsrc="img/inn.jpg"alt="綠色寵物醫(yī)院寵物治療"title="綠色寵物醫(yī)院-螞蟻"/></body>

當(dāng)圖片正常顯示時，運行效果如圖5-14所示，圖片無法正常顯示時，運行效果如圖5-15所示。在圖片正常顯示的情況下，鼠標(biāo)指針懸停在圖片上時顯示設(shè)置在“title”屬性中的文字，該文本為圖片添加描述性文字，運行效果如圖5-16所示。圖5-14

圖5-15

圖5-165.2.7 圖像標(biāo)記2．圖像的寬度、高度屬性width、height

正常情況下，要是不給<img／>標(biāo)記設(shè)置寬和高，圖片就會按照原始尺寸顯示，也可以手動更改圖片的大小。width和height屬性用來定義圖片的寬度和高度。3．圖像的邊框?qū)傩詁order

默認情況下圖像是沒有邊框的，通過border屬性可以為圖像添加邊框。下面使用圖像的寬度、高度以及邊框這些屬性對圖像進行一些修飾，具體代碼如下：<body><imgsrc="img/in.jpg"alt="綠色寵物醫(yī)院寵物治療"title="綠色寵物醫(yī)院-螞蟻"border="2"/><imgsrc="img/in.jpg"alt="綠色寵物醫(yī)院寵物治療"title="綠色寵物醫(yī)院-螞蟻"width="120"/><imgsrc="img/in.jpg"alt="綠色寵物醫(yī)院寵物治療"title="綠色寵物醫(yī)院-螞蟻"width="120"height="100"/></body>運行案例example11.html效果如圖所示5.2.7 圖像標(biāo)記4．圖像的邊距屬性vspace和hspace

在網(wǎng)頁中，由于排版需要，有時候還需要調(diào)整圖像的邊距。HTML中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。5．圖像的對齊屬性align

圖文混排是網(wǎng)頁中很常見的效果，默認情況下圖像的底部會相對于文本的第一行文字對齊。但是在制作網(wǎng)頁時經(jīng)常需要實現(xiàn)其他的圖像和文字環(huán)繞效果，如圖像居左文字居右等，這就需要使用圖像的對齊屬性align。

下面來實現(xiàn)網(wǎng)頁中常見的圖像居左文字居右的效果，如例example12.html所示，具體代碼如下：<body><imgsrc="img/in.jpg"alt="綠色寵物醫(yī)院寵物治療"border="1"hspace="50"vspace="20"align="left"/>規(guī)定設(shè)立從事動物診療活動的機構(gòu)，應(yīng)當(dāng)向縣級以上地方人民政府獸醫(yī)主管部門申請動物診療許可證。國家實行執(zhí)業(yè)獸醫(yī)資格考試制度。具有獸醫(yī)相關(guān)專業(yè)大學(xué)?？埔陨蠈W(xué)歷，經(jīng)考試合格的，方可獲得執(zhí)業(yè)獸醫(yī)資格證書。從事動物診療的，還應(yīng)向當(dāng)?shù)乜h級以上地方人民政府獸醫(yī)主管部門申請注冊。</body>運行例example12.html，效果如圖

5.2.8絕對路徑和相對路徑

在編輯圖片和超鏈接時，需要知道文件的位置；而表示文件的方式就是路徑。網(wǎng)頁中的路徑通常分為絕對路徑和相對路徑兩種。具體介紹如下。1．絕對路徑

絕對路徑就是網(wǎng)頁上的文件或目錄在硬盤上的真正位置，如“D：＼HTML＋CSS＼logo.gif”，或完整的網(wǎng)絡(luò)地址，如“http：//／img／in.gif”。2．相對路徑

相對路徑就是相對于當(dāng)前編輯文件的位置，相對路徑不帶有盤符，通常是以HTML網(wǎng)賦為起點，通過層級關(guān)系描述目標(biāo)圖像的位置。總結(jié)起來，相對路徑的設(shè)置分為以下3種。

（1）圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可。如src="in.gif"/>。

（2）圖像文件位于hml文件的下一級文件夾：輸入文件夾名和文件名，之間用”單如<imgsrc＝＂img／in.gif＂／>。

（3）圖像文件位于hmml文件的上一級文件夾：在文件名之前加入“．．／”，如果是上兩級，網(wǎng)頁中不推薦使用絕對路徑，因為網(wǎng)頁制作完成之后我們需要將所有的文件上傳服務(wù)器。這時圖像文件可能在服務(wù)器的C盤，也有可能在D盤、E盤，可能在web文件夾中，可能在index文件夾中。也就是說，很有可能不存在“D：＼HTML＋CSS＼logo．gif＂這樣一個路徑。

5.2.9HTML的超鏈接元素1.超鏈接標(biāo)記

瀏覽網(wǎng)頁時，可以通過超鏈接實現(xiàn)單擊一張圖片或者一段文字即可鏈接到其他網(wǎng)頁，它同其他網(wǎng)頁或站點之間進行連接的元素。將相關(guān)網(wǎng)頁鏈接在一起后，才能構(gòu)成一個所謂的網(wǎng)站。定義超鏈接的基本語法：<ahref＝＂跳轉(zhuǎn)目標(biāo)＂target＝＂目標(biāo)窗口的彈出方式＂>文本或圖像<／a>

在上面的語法中，<a>標(biāo)記用于定義超鏈接，href和target為其常用屬性，具體用法如下。

（1）href：用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)記應(yīng)用href屬性時，它就具有了超鏈接的功能。

（2）target：用于指定鏈接頁面的打開方式，取值有＿self和＿blank兩種，其中＿self為默認值，在原窗口中打開，＿blank為在新窗口中打開。

下面來創(chuàng)建一個帶有超鏈接功能的簡單頁面，如例example12.html所示。具體代碼如下：<body><ahref="/"target="_self">新浪</a>target="_self"原窗口打開<br/><ahref="/"target="_blank">百度</a>target="_blank"新窗口打開</body>

5.2.9HTML的超鏈接元素

在例example13.html中，創(chuàng)建了兩個超鏈接，效果如圖5-19。通過href屬性將他們的鏈接目標(biāo)指定為新浪和百度，通過target屬性定義第一個鏈接頁面在原窗口打開，效果如圖5-20，第二個鏈接頁面在新窗口打開，效果如圖5-21。圖5-19

圖5-20圖5-21

5.2.9HTML的超鏈接元素2錨點鏈接有些網(wǎng)頁內(nèi)容較多，頁面過長，瀏覽網(wǎng)頁時就需要不斷地拖動滾動條，來查看所需要的內(nèi)容。為了提高信息的檢索速度，HTML語言提供了一種特殊的鏈接——錨點鏈接

通過創(chuàng)建錨點鏈接，瀏覽者能夠快速定位到目標(biāo)內(nèi)容。通過一個具體的案例來演示頁面中創(chuàng)建錨點鏈接的方法，具體代碼如下：<body>課程介紹:<ul><li><ahref="#one">哺乳類寵物</a></li><li><ahref="#two">爬行類寵物</a></li><li><ahref="#three">鳥類寵物</a></li><li><ahref="#four">魚類寵物</a></li><li><ahref="#five">昆蟲類寵物</a></li></ul><p>寵物的種包羅萬象，按照動物學(xué)分類可以分為：哺乳類寵物、爬行類寵物、鳥類寵物、魚類寵物和昆蟲類寵物。</p><h3id="one">哺乳類寵物</h3><p>哺乳類動物是恒溫胎生的脊椎動物，幾乎遍布全球。哺乳類寵物種類非常多，在寵物中占有很大的數(shù)量和比例。哺乳類寵物的代表有狗、貓、鼠、兔、馬、牛、羊等，分為草食、肉食和雜食三種類型。</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h3id="two">爬行類寵物</h3><p>爬行類動物被認為是兩棲類動物進化到哺乳類動物的過渡，比兩棲類動物更容易適應(yīng)陸地環(huán)境，種類有蜥蜴、蛇、龜和鱷魚等。爬行類寵物骨骼較發(fā)達，不是胎生而是卵生，卵外有著堅硬的外殼，就是我們俗稱的“蛋”。</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

5.2.9HTML的超鏈接元素<h3id="three">鳥類寵物</h3><p>也是十分受歡迎的寵物種類，自古至今就受到許多人的喜愛。據(jù)統(tǒng)計全世界人們所知的鳥類就有近9000種。鳥類寵物通常長有兩只腳而不是四肢，基本都帶有羽毛，長有兩翼、擁有氣囊、骨骼中空，所以大多非洲灰鸚鵡數(shù)都能飛翔，絕大多數(shù)都習(xí)慣于樹棲生活。</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h3id="four">魚類寵物</h3><p>魚類是最古老的脊椎動物，它們主要棲息在水中。一般魚類寵物游姿百態(tài)、色彩斑斕、體型各異，十分具有觀賞價值。它們擁有鱗片和流線型的鰭，還有可以在水底呼吸的腮，有的還可以用皮膚呼吸。</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h3id="five">昆蟲類寵物</h3><p>昆蟲類寵物一般是節(jié)肢動物中的成員，目前已知的約有100萬種，它們的身體內(nèi)部并沒有堅硬的骨骼，身體外部一般擁有殼，其特點是由頭部、胸部、腹部三個部分組成。一般常見的昆蟲類寵物有螞蟻、蟋蟀、蝴蝶、蜻蜓、桑蠶和蟈蟈等。</p></body>

運行例example14.html，效果如圖

5.2.10HTML的列表元素

列表可以使得網(wǎng)頁上呈現(xiàn)的信息整齊直觀，便于用戶理解。列表是網(wǎng)頁上的常見元素，這些元素使文檔更加清晰明確，1、列表類型

常用的列表種類有定義列表、有序列表和無序列表，如表5-5所示，創(chuàng)建常用列表使用的標(biāo)記。下面將詳細介紹有序列表和無序列表的創(chuàng)建。

表5-5 列表類型標(biāo)

記描述<ol>定義有序列表

<ul>定義無序列表<li>定義列表項<dl>定義定義列表<dt>定義定義項目<dd>定義定義的描述

5.2.10HTML的列表元素2、無序列表

無序列表是一套組合標(biāo)記，由<ul>和<li>兩種不同的標(biāo)記組成?；菊Z法：<u1><1i>第一個列表項內(nèi)容<／1i><1i>第二個列表項內(nèi)容<／1i><1i>第三個列表項內(nèi)容<／1i></u1>

在HTML文件中，利用成對<ul><／ul>標(biāo)記可以插入無序列表，但<ul>標(biāo)記之間必須使用成對<li><li>標(biāo)記添加列表項值。這兩種標(biāo)記都不能單獨使用。

例example15.html建立三個列表項的無序列表，默認的無序列表項為實心圓點。網(wǎng)頁代碼如下：

5.2.10HTML的列表元素<body><h2>衣服</h2><ultype="circle"><!--對ul應(yīng)用type=circle--><li>T恤</li><li>連衣裙</li><li>褲子</li></ul><h2>寵物</h2><ul><li>貓</li><!--不定義type屬性--><litype="square">狗</li><!--對li應(yīng)用type=square--><litype="disc">鳥</li><!--對li應(yīng)用type=disc--></ul></body>網(wǎng)頁運行效果如圖所示：

5.2.10HTML的列表元素

無序列表的項目符號可以自行定義，需要設(shè)置<ul>標(biāo)記的type屬性，該屬性的取值如表5-6所示。

表5-6無序列表type屬性取值值描

述disc默認值，實心圓circle空心圓square實心方塊none無列表符號

5.2.10HTML的列表元素3有序列表

有序列表除了列表項目符號與無序列表不同外，顯示效果基本一致。很多情況下，兩者可以相互代替使用。基本語法：<o1><1i>第一個列表項內(nèi)容<／1i><1i>第二個列表項內(nèi)容<／1i><1i>第三個列表項內(nèi)容<／1i></o1>

在HTML文件中，利用成對<o1></ol>標(biāo)記可以插入有序列表，但<ol>標(biāo)記之間必須使用成對<li><／li

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論