HTML代碼編輯與優(yōu)化課件

1、第六章 HTML代碼編輯與優(yōu)化第1頁，共55頁。6.1 HTML語言基礎(chǔ)HTML是目前網(wǎng)頁制作中應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。常見的靜態(tài)網(wǎng)頁實際上就是用HTML語言編寫的命令代碼文檔第2頁，共55頁。6.1.1 HTML簡介HTML語言通過標(biāo)簽定義了網(wǎng)頁內(nèi)容的顯示格式。在文本文件的基礎(chǔ)上增加一系列描述文本格式、顏色等的標(biāo)簽，再加上聲音、動畫和視頻等，形成精彩的網(wǎng)頁文檔。通過瀏覽器瀏覽網(wǎng)頁上的信息時，服務(wù)器會將相關(guān)的HTML文檔發(fā)送到瀏覽器上，瀏覽器按順序讀取HTML文檔的標(biāo)簽，然后解釋HTML標(biāo)簽，同時顯示相應(yīng)的格式和內(nèi)容。HTML文檔由一系列的元素和標(biāo)簽組成。元素是HTML

2、文檔的重要組成部分，通過HTML標(biāo)簽進(jìn)行定義。第3頁，共55頁。6.1.2 HTML基本語法和結(jié)構(gòu)HTML用標(biāo)簽來規(guī)定元素的屬性和它在文檔中的位置。HTML的標(biāo)簽分為單獨出現(xiàn)的標(biāo)簽和成對出現(xiàn)的標(biāo)簽兩種。大多數(shù)標(biāo)簽是成對出現(xiàn)的，由起始標(biāo)簽和終止標(biāo)簽組成。起始標(biāo)簽的格式為，終止標(biāo)簽的格式為。元素內(nèi)容位于起始標(biāo)簽和終止標(biāo)簽之間。第4頁，共55頁。HTML文檔的結(jié)構(gòu)如下 頭部 主體部分第5頁，共55頁。表示開始標(biāo)簽和結(jié)束標(biāo)簽。用于定義頭部信息，可以包含標(biāo)題（title）、媒體環(huán)境（meta）等說明信息，客戶端腳本也可放在這一部分。用于定義網(wǎng)頁主體部分。它也有一些屬性，形式為：其中，bgcolor表示背

3、景顏色，text表示非鏈接文字的顏色，link表示鏈接文字的顏色，alink表示正被單擊的鏈接文字的顏色，vlink表示已經(jīng)單擊（訪問）過的鏈接文字的顏色。使用背景圖像的語法為： 說明如下：第6頁，共55頁。在編輯HTML文檔的標(biāo)簽時，需要注意以下幾點：“”是所有HTML標(biāo)簽的開始和結(jié)束，標(biāo)簽要用尖括號括起來，結(jié)束標(biāo)簽是在開始標(biāo)簽前加“/”，如。HTML標(biāo)簽之間可以相互嵌套。在源代碼中HTML標(biāo)簽不區(qū)英文字母的大小寫，例如，、和都正確。在源代碼中回車符不起作用，為使代碼易于維護(hù)，建議不同的HTML標(biāo)簽獨占一行，使用縮進(jìn)風(fēng)格。HTML標(biāo)簽中可以設(shè)置相應(yīng)屬性，對于標(biāo)簽中的屬性值，一般可以不加引號（

4、），只有當(dāng)屬性值中包含空格或一些其他符號時，引號才是必須的。第7頁，共55頁。6.1.3HTML常用標(biāo)簽通常把HTML文檔分為文檔頭部和文檔主體兩部分。文檔主體部分是指在Web瀏覽器窗口中顯示的內(nèi)容，而文檔頭部用來規(guī)定該文檔的標(biāo)題以及文檔的相關(guān)信息。 第8頁，共55頁。由標(biāo)簽所定義的元素，并不放置網(wǎng)頁的任何內(nèi)容，而是放置關(guān)于這個HTML文檔的信息，它描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在Web中的位置以及與其他文檔的關(guān)系等。這些信息大部分是用于提供索引、辨認(rèn)或其他應(yīng)用。頭部標(biāo)簽的語法格式如下：頭部標(biāo)簽內(nèi)容可用在頭部的標(biāo)簽有、和。如果HTML文檔并不需要提供文檔相關(guān)信息時，可以省略標(biāo)簽。

5、標(biāo)簽用于定義文檔的頭部。第9頁，共55頁。實例程序源代碼如下：頭部包含的內(nèi)容不會顯示在文檔區(qū)這段文本會顯示出來。第10頁，共55頁。第11頁，共55頁。標(biāo)題標(biāo)簽用于設(shè)置HTML網(wǎng)頁的標(biāo)題，標(biāo)題將顯示于瀏覽器的標(biāo)題欄中，其語法格式如下：網(wǎng)頁的標(biāo)題標(biāo)簽必須定義在之間，一個HTML文檔只有一個標(biāo)題。 第12頁，共55頁。HTML標(biāo)題標(biāo)簽實例程序源代碼如下：網(wǎng)頁標(biāo)題第13頁，共55頁。第14頁，共55頁。元信息標(biāo)簽元信息標(biāo)簽的作用是提供文檔的元信息。常用于提供與瀏覽器或搜索引擎相關(guān)的信息，例如，描述文檔的內(nèi)容、關(guān)鍵字以及作者信息等。位于文檔的頭部，屬于單獨標(biāo)簽，不包含任何內(nèi)容，可以在頭部標(biāo)簽中使用多次

6、。標(biāo)簽有http-equiv和name等可選屬性。第15頁，共55頁。1name屬性name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性content中的內(nèi)容主要是便于搜索引擎查找和分類的信息。標(biāo)簽的name屬性的語法格式如下：其中，name屬性主要有以下幾個參數(shù)：keywords（關(guān)鍵字）：用來告訴搜索引擎網(wǎng)頁的關(guān)鍵字。description（網(wǎng)站內(nèi)容描述）：用來告訴搜索引擎網(wǎng)站的主要內(nèi)容。author（作者）：標(biāo)注網(wǎng)頁的作者。 第16頁，共55頁。2http-equiv屬性標(biāo)簽的http-equiv屬性相當(dāng)于http的文件頭，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對

7、應(yīng)的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值。使用標(biāo)簽的http-equiv屬性的語法格式如下：meta http-equiv=參數(shù) content=參數(shù)變量值 第17頁，共55頁。其中，http-equiv屬性主要有以下幾個參數(shù)：（1）Expires（期限）：可以用于設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，就需要重新將網(wǎng)頁上傳到服務(wù)器。必須使用GMT的時間格式。例如：meta http-equiv=expires content=Fri, 15 Jan 2010 08:08:18 GMT（2）Pragma（cache模式）：禁止瀏覽器從本地計算機(jī)的緩存中訪問頁面內(nèi)容。

8、這樣設(shè)定以后，訪問者將無法脫機(jī)瀏覽。例如：meta http-equiv=Pragma content=no-cache（3）Refresh（刷新）：自動刷新并指向新頁面。例如：其中，10是指停留10秒鐘后自動刷新到指定的URL網(wǎng)址。（4）content-Type（顯示字符集的設(shè)定）：設(shè)定頁面使用的字符集。例如： meta http-equiv=content-Type content=text/html; charset=gb2312第18頁，共55頁。 HTML主體標(biāo)簽在HTML中，和之間的內(nèi)容是整個頁面文檔的主體部分。標(biāo)簽是成對出現(xiàn)的?？梢酝ㄟ^設(shè)置標(biāo)簽的屬性對網(wǎng)頁進(jìn)行適當(dāng)美化。標(biāo)簽有te

9、xt、bgcolor、background和topmargin/leftmargin等可選屬性。標(biāo)簽的語法格式如下：網(wǎng)頁主體內(nèi)容 第19頁，共55頁。1標(biāo)簽標(biāo)簽用于設(shè)置網(wǎng)頁中的標(biāo)題文字，被設(shè)置的文字將以黑體、粗體的方式顯示。標(biāo)題標(biāo)簽的語法格式如下： 標(biāo)題文字第20頁，共55頁。標(biāo)簽是成對出現(xiàn)的。標(biāo)簽共分6級，其中由和標(biāo)簽括起來的文字是一級標(biāo)題，字號最大，由和標(biāo)簽括起來的文字是二級標(biāo)題。以此類推，由和標(biāo)簽括起來的文字是最后一級標(biāo)題，字號最小。 標(biāo)簽的align屬性用于設(shè)置標(biāo)題的位置。align屬性的參數(shù)值有l(wèi)eft、center和right，分別表示標(biāo)題位于瀏覽器窗口的左側(cè)、中間和右側(cè)。第21頁

10、，共55頁。程序源代碼如下： 使用標(biāo)題標(biāo)簽hn 這是一級標(biāo)題 這是二級標(biāo)題 這是三級標(biāo)題 這是四級標(biāo)題 這是五級標(biāo)題 這是六級標(biāo)題 請將標(biāo)題標(biāo)簽僅用于標(biāo)題文本。不要僅僅為了設(shè)置粗體而使用它們。如要設(shè)置粗體請使用其他標(biāo)簽或CSS代替。 第22頁，共55頁。特殊字符在HTML文檔中，有些字符無法直接顯示出來，如“”。使用特殊字符可以將鍵盤上沒有的字符表達(dá)出來，而有些字符在鍵盤上雖然可以看到，但在HTML中有特殊的含義，如“”等，這些字符也必須用相應(yīng)的代碼表示，以免發(fā)生混淆。第23頁，共55頁。程序源代碼如下： 特殊字符實例特殊字符實例： & 第24頁，共55頁。第25頁，共55頁。注釋標(biāo)簽HTML

11、代碼中的注釋標(biāo)簽用來標(biāo)識那些作為文檔內(nèi)容但不會被顯示或者處理的信息。作為注釋的文本不會在瀏覽器中顯示，只能在頁面的源代碼中看到。在源代碼中可以添加說明性的注釋語句，以便于將來對代碼進(jìn)行檢查和維護(hù)，也可以使其他閱讀者更易于理解編寫者的意圖。注釋是由特殊的注釋限制符來標(biāo)識的。注釋標(biāo)簽的語法格式如下： 第26頁，共55頁。設(shè)置文字的字體、字號和顏色在HTML語句中，使用標(biāo)簽可以設(shè)置文字的字體、字號和顏色。標(biāo)簽的語法格式如下： 文字 第27頁，共55頁。1）設(shè)置字體 標(biāo)簽的face屬性用來設(shè)置字體。中文網(wǎng)頁中的文字一般用常規(guī)字體，如宋體、黑體和隸書等。第28頁，共55頁。2）設(shè)置字號的size屬性用于

12、設(shè)置文字字號，即字體的大小。size屬性的取值范圍為17。同時，也可以在前面加上加號“+”或者減號“-”來設(shè)置字號的相對大小。HTML頁面的默認(rèn)字號是3，所以將size屬性設(shè)置為+1時的真實字號為4（3+1）。size屬性值越大，字號就越大。 第29頁，共55頁。3）設(shè)置文字顏色 標(biāo)簽的color屬性用于設(shè)置文字顏色。color屬性值的設(shè)置方式有兩種，一種是利用RGB顏色值。RGB顏色值是一個由“#”號引導(dǎo)的6位十六進(jìn)制數(shù)。color屬性值的另外一種設(shè)置方法是將color屬性值設(shè)置為預(yù)先定義好的標(biāo)準(zhǔn)顏色名稱，如black（黑色）、gray（灰色）、red（紅色）和silver（銀白色）等。使用

13、color屬性的語法格式如下： 或 第30頁，共55頁。段落排布 一篇文章是由不同的段落組合而成的。如果文章中的段落排列整齊、清晰，不僅便于閱讀，而且會給讀者一個好的印象，能吸引讀者進(jìn)一步深入閱讀。相反，如果段落排版混亂，將大大地降低文章對讀者的吸引力。在段落排版中，常用的HTML標(biāo)簽有段落標(biāo)簽、換行標(biāo)簽、居中標(biāo)簽和預(yù)編排標(biāo)簽等。 第31頁，共55頁。1段落標(biāo)簽由標(biāo)簽所標(biāo)識的文字，為同一個段落的文字。在瀏覽器中，不同段落文字間除了換行外，還會增加一個空白行，以便區(qū)別于不同的段落。標(biāo)簽可以單獨使用，也可以成對使用。段落標(biāo)簽的語法格式如下：段落文字 第32頁，共55頁。在HTML文檔源代碼中，按E

14、nter鍵所產(chǎn)生的換行符，并不被視為換行標(biāo)簽，瀏覽器會自動忽略原代碼中的空白和換行的部分。如果源代碼中有多個連續(xù)空格，則不管空格有多少個，瀏覽器只顯示一個空格，其他的空格全部忽略。段落標(biāo)簽的align屬性用來設(shè)置段落文字的水平對齊方式。align屬性的值有l(wèi)eft、center和right，分別表示把段落文字的水平對齊方式設(shè)為左對齊、居中對齊和右對齊。第33頁，共55頁。第34頁，共55頁。程序源代碼如下： 段落設(shè)置實例這是段落。段落元素由標(biāo)簽定義。第35頁，共55頁。在這個段落源代碼中包含許多行，但是瀏覽器忽略了它們。段落對齊方式設(shè)置為：right（右對齊）。段落對齊方式設(shè)置為：center

15、（居中對齊）。段落對齊方式設(shè)置為：left（左對齊）。 第36頁，共55頁。、和標(biāo)簽1、2、3、標(biāo)簽第37頁，共55頁。1）為換行標(biāo)簽，它是單獨出現(xiàn)的標(biāo)簽，位于該標(biāo)簽之后的文字將顯示在下一行。在HTML文檔中，由Enter鍵所產(chǎn)生的換行符，在瀏覽器中并不會被視為換行符。因此，若要將某位置后的文字顯示在下一行，只有在該位置使用標(biāo)簽，才能達(dá)到換行的效果。 第38頁，共55頁。2）HTML除了使用標(biāo)簽進(jìn)行換行以外，還可以使用標(biāo)簽把語句強行放在一行中。標(biāo)簽中包含的文本不管有多長，總是放在一行中進(jìn)行顯示。主要用于把那些不適于分開的詞和短語放在一行中，如數(shù)學(xué)公式、一長串號碼等。但是，如果文本的長度超過一定

16、的限度，可能會突破右邊界使其在屏幕中顯示不完整，這會給閱讀帶來困難，所以在使用標(biāo)簽時要格外注意。第39頁，共55頁。3）在HTML中，標(biāo)簽也是一個換行標(biāo)簽，但它不同于和，標(biāo)簽規(guī)定了文本在該處強制換行，是把語句強制放在一行中，則是根據(jù)屏幕的寬度，選擇適當(dāng)?shù)牡胤綋Q行，把其余的文本放到下一行進(jìn)行顯示。如果一行內(nèi)容能夠在屏幕上顯示完整，就不起作用了，它將被忽略掉。 第40頁，共55頁。超鏈接超鏈接是實現(xiàn)不同網(wǎng)頁之間或者不同網(wǎng)站之間信息瀏覽的主要手段。超鏈接可以從當(dāng)前網(wǎng)頁的某個位置跳轉(zhuǎn)到另一個位置，可以是當(dāng)前頁的另一位置、本地磁盤或者Internet上某臺主機(jī)上的某個文件第41頁，共55頁。超鏈接的建立

17、超鏈接指向了萬維網(wǎng)中的各種資源，如一個網(wǎng)頁、一個聲音文件、網(wǎng)頁的另一個段落或者是萬維網(wǎng)中的其他資源等。在瀏覽網(wǎng)頁時，單擊超鏈接，就可以跳轉(zhuǎn)到超鏈接所指向的資源。超鏈接可以分為內(nèi)部鏈接、外部鏈接、錨點鏈接和郵箱鏈接等。 第42頁，共55頁。1創(chuàng)建超鏈接HTML使用（錨）標(biāo)簽來創(chuàng)建超鏈接。創(chuàng)建超鏈接的語法結(jié)構(gòu)如下： 超鏈接名稱第43頁，共55頁。其中，標(biāo)簽用來創(chuàng)建超鏈接。href屬性用于定位需要鏈接的目標(biāo)，開始標(biāo)簽和結(jié)束標(biāo)簽之間的網(wǎng)頁元素作為超鏈接的源點。當(dāng)鼠標(biāo)指針移動到超鏈接的源點處時會變成手形。此時單擊就可以打開鏈接的目標(biāo)位置。鏈接位置就是超鏈接的目標(biāo)，可使用URL指定。URL的格式由通信協(xié)議

18、、鏈接地址與文件位置所組成，語法格式如下：通信協(xié)議:/鏈接地址/文件位置/文件名稱target用于指定打開超鏈接的目標(biāo)窗口。target屬性的默認(rèn)值是原窗口。設(shè)置為_blank時，將在新窗口中打開鏈接。第44頁，共55頁。在HTML文檔中使用超鏈接實例程序源代碼如下：超鏈接在HTML頁面中建立一個簡單的超鏈接：單擊這里打開一個文檔：這是一個文字鏈接。第45頁，共55頁。第46頁，共55頁。圖片的添加與設(shè)置在HTML中使用插入圖片標(biāo)簽可以將圖片文件導(dǎo)入HTML文檔中顯示。標(biāo)簽單獨出現(xiàn)，當(dāng)瀏覽器讀取標(biāo)簽時，會直接顯示此標(biāo)簽所代表的圖片。標(biāo)簽有src、alt、height、width、border和align等可選屬性。標(biāo)簽的語法格式如下：其中，src屬性用于設(shè)置圖片文件的路徑。第47頁，共55頁。如果在同一個網(wǎng)頁文件中需要反復(fù)使用同一個圖片，最好在標(biāo)簽中使用相對路徑，而不是使用絕對路徑。因為使用相對路徑，瀏覽器只需將圖片文件下載一次，再次使用這個圖片時，只要重新顯示一遍即可。如果使用絕對路徑，則每次顯示圖片時，都要重新下載，這會大大降低圖片的顯示速度。 第48頁，共55頁。1設(shè)置圖像的替代文字標(biāo)簽的alt屬性用