1、復(fù)習(xí)HTML英文全稱？中文名稱？JSP英文全稱？JSP與JavaScript一樣嗎？JSP與ASP差異在哪里？第第2 2講講 HTML HTML語言語言2.1 什么是HTML2.2 HTML語法2.3 HTML文件結(jié)構(gòu)2.4 幾個小實驗 2.1 2.1 什么是什么是HTMLHTMLHTML是用來制作網(wǎng)頁的標(biāo)記語言. HTML是Hypertext Markup Language的英文縮寫,即超文本標(biāo)記語言. HTML語言是一種標(biāo)記語言,不需要編譯,直接由瀏覽器執(zhí)行. HTML文件是一個文本文件,包含了一些HTML元素,標(biāo)簽等.HTML文件必須使用html或htm為文件名后綴. HTML是大小寫不

2、敏感的,HTML與html是一樣的. HTML是由W3C的維護的.HTML第一個例子 歡迎來到球迷之家歡迎來到球迷之家 這是我的第一個網(wǎng)頁這是我的第一個網(wǎng)頁, ,在這里在這里 盡情享受足球吧盡情享受足球吧! ! 例例2.1例例2.12.1續(xù)續(xù) 可以嘗試編輯可以嘗試編輯在網(wǎng)頁中添加文字在網(wǎng)頁中添加文字 定義段落定義段落 在一個段落中換行在一個段落中換行 為網(wǎng)頁加上水平分割線為網(wǎng)頁加上水平分割線 例例2.12.1續(xù)）續(xù)） 可以嘗試編輯可以嘗試編輯定義文字的顏色方法定義文字的顏色方法1 1） font color=定義文字的顏色方法定義文字的顏色方法2 2）style type=text/css m

3、edia=allp p color:red;color:red; Stype 標(biāo)簽：HTML文檔的樣式設(shè)置定義和用法定義和用法 標(biāo)簽用于為標(biāo)簽用于為 HTML HTML 文檔定義樣式信息。文檔定義樣式信息。在在 style style 中，您可以規(guī)定在瀏覽器中如何呈現(xiàn)中，您可以規(guī)定在瀏覽器中如何呈現(xiàn) HTML HTML 文檔。文檔。type type 屬性是必需的，定義屬性是必需的，定義 style style 元素的內(nèi)容。唯元素的內(nèi)容。唯一可能的值是一可能的值是 text/css text/css。style style 元素位于元素位于 head head 部分中。部分中。h1 color

4、:redp color:blueHeader 1A paragraph.例例2.12.1續(xù)）續(xù)） 可以嘗試編輯可以嘗試編輯定義網(wǎng)頁的背景顏色方法定義網(wǎng)頁的背景顏色方法1 1）body bgcolor=定義網(wǎng)頁的背景顏色方法定義網(wǎng)頁的背景顏色方法2 2） style type=text/css media=allbody body background-color:blue;background-color:blue;例例2.12.1續(xù)）續(xù)） 可以嘗試編輯可以嘗試編輯嘗試鏈接到海事大學(xué)和嘗試鏈接到海事大學(xué)和Google Google 鏈接到鏈接到a href= 海事大學(xué)主頁海事大學(xué)主頁鏈接到鏈接

5、到a href=GoogleGoogle主頁主頁點擊圖片就可以鏈接到你想去的地方點擊圖片就可以鏈接到你想去的地方鏈接到鏈接到a href=/ /鏈接到鏈接到a href=google/ /2.2 HTML語法HTMLHTML語法非常簡單語法非常簡單, ,組成組成HTMLHTML語法的元素語法的元素只有只有HTMLHTML標(biāo)簽標(biāo)簽HTMLHTML屬性屬性2.2.1 HTML標(biāo)簽HTMLHTML標(biāo)簽是標(biāo)簽是HTMLHTML語言中最基本的單位語言中最基本的單位,HTML,HTML標(biāo)簽標(biāo)簽是是HTMLHTML語言最重要的組成部分語言最重要的組成部分. .通常要用兩個角括號括起來，例如：

6、通常要用兩個角括號括起來，例如：. . 都是閉合的閉合是指要有一個斜杠來標(biāo)示結(jié)束都是閉合的閉合是指要有一個斜杠來標(biāo)示結(jié)束），但不一定是成對出現(xiàn)的），但不一定是成對出現(xiàn)的和和一對標(biāo)簽一對標(biāo)簽, , 是開始標(biāo)簽是開始標(biāo)簽,是結(jié)束標(biāo)簽是結(jié)束標(biāo)簽, ,是單獨的注意要在最后加上是單獨的注意要在最后加上/,/,以標(biāo)示其以標(biāo)示其是獨立的）是獨立的） 標(biāo)簽是大小寫無關(guān)的標(biāo)簽是大小寫無關(guān)的,跟跟表示的意表示的意思是一樣的思是一樣的HTMLHTML標(biāo)簽語法標(biāo)簽語法常用常用HTMLHTML標(biāo)簽標(biāo)簽htmlhtml標(biāo)簽標(biāo)簽 - - 定義定義HTMLHTML文檔文檔. . bodybody標(biāo)簽標(biāo)簽 - - 定義定義HT

7、MLHTML文檔的內(nèi)容文檔的內(nèi)容. . p p標(biāo)簽標(biāo)簽 - - 定義段落定義段落. . h1-h6h1-h6標(biāo)簽標(biāo)簽 - - 定義標(biāo)題定義標(biāo)題. . , , , , , , htmlhtml注釋注釋- - 定義注釋內(nèi)容定義注釋內(nèi)容. .2.2.2 HTML屬性HTMLHTML屬性一般都出現(xiàn)在屬性一般都出現(xiàn)在HTMLHTML標(biāo)簽中標(biāo)簽中,HTML,HTML屬性是屬性是HTMLHTML標(biāo)簽的一部分標(biāo)簽的一部分. .標(biāo)簽可以有屬性，它包含了額外的信息標(biāo)簽可以有屬性，它包含了額外的信息，屬性的值一定要在雙引號中，屬性的值一定要在雙引號中 標(biāo)簽可以擁有多個屬性標(biāo)簽可以擁有多個屬性 屬性由屬性名和值成對出

8、現(xiàn)屬性由屬性名和值成對出現(xiàn)HTMLHTML屬性語法屬性語法2.2.3 HTML元素HTMLHTML元素是構(gòu)建網(wǎng)頁的一種單位元素是構(gòu)建網(wǎng)頁的一種單位, ,是由是由HTMLHTML標(biāo)簽、標(biāo)簽、HTMLHTML屬性和相關(guān)的文本組成的屬性和相關(guān)的文本組成的,HTML,HTML元素是網(wǎng)頁中的一種基元素是網(wǎng)頁中的一種基本單位本單位. .2.2.4 HTML文檔HTML文檔就是HTML頁面,也就是網(wǎng)頁,是由HTML元素組成的互聯(lián)網(wǎng)的所有內(nèi)容都是由一個個HTML文檔體現(xiàn)的2.3 HTML文件結(jié)構(gòu)文檔文檔headhead信息信息頭信息頭信息headhead可以容納文檔的可以容納文檔的HTMLHTML相相關(guān)信息，

9、比如標(biāo)題關(guān)信息，比如標(biāo)題titletitle，頁面的語，頁面的語言與文字類型，言與文字類型，CSSCSS樣式，樣式，JavaScriptJavaScript代碼，簡短描述，關(guān)鍵代碼，簡短描述，關(guān)鍵詞等內(nèi)容，是用戶無法直接看到的詞等內(nèi)容，是用戶無法直接看到的文檔文檔bodybody信息信息內(nèi)容信息內(nèi)容信息bodybody包括用戶可以看到的全部包括用戶可以看到的全部內(nèi)容，比如段落，鏈接，表格等內(nèi)容，比如段落，鏈接，表格等編寫代碼時一定要有層次感編寫代碼時一定要有層次感主要的主要的HTMLHTML元素多數(shù)在元素多數(shù)在bodybody元素中，還元素中，還有一少部分在有一少部分在headhead元素中元

10、素中2.4 幾個小實驗例例2.2 HTML2.2 HTML分段顯示分段顯示在文本編輯器里編輯的代碼無論怎樣給在文本編輯器里編輯的代碼無論怎樣給文字換行，在瀏覽器里顯示的都是一行文字換行，在瀏覽器里顯示的都是一行文本編輯器中的代碼雖然換行了，但是文本編輯器中的代碼雖然換行了，但是實際頁面并沒有換行，這是因為瀏覽器實際頁面并沒有換行，這是因為瀏覽器并不認(rèn)識記事本里的空格與回車并不認(rèn)識記事本里的空格與回車p p標(biāo)簽是標(biāo)簽是paragraphparagraph的縮寫，是的縮寫，是“段落段落的意思，由的意思，由與與組成的元素可以顯組成的元素可以顯示成一個段落示成一個段落預(yù)格式化標(biāo)簽 pre 是 Pref

11、ormatted text預(yù)格式化文本） 的縮寫。使用此標(biāo)簽可以把代碼中的空格和換行直接顯示到頁面上。但是 和 & 等特殊文字需要用 < 、 > 和 & 的方式記述。PRE標(biāo)簽測試文檔1992JanuaryOn 15th, the first line mode browser was available by anonymous FTP.1992JanuaryOn 15th, the first line mode browser was available by anonymous FTP.例如：結(jié)果顯示如下例例2.3 2.3 強調(diào)與斜體強調(diào)與斜體強調(diào)強調(diào) 斜體斜體 e

12、mem是是emphasisemphasis的縮寫的縮寫 PRE標(biāo)簽測試文檔 1992 January On 15th, the first line mode browser was available by anonymous FTP. 例例2.4 HTML2.4 HTML空格空格如何在網(wǎng)頁中插入如何在網(wǎng)頁中插入HTMLHTML空格？空格？通常在網(wǎng)頁中插入一個空格的時候可以通常在網(wǎng)頁中插入一個空格的時候可以使用普通的空格。使用普通的空格。但是如果有多個空格在網(wǎng)頁中將顯示為但是如果有多個空格在網(wǎng)頁中將顯示為一個一個可以使用可以使用  表示一個空格。表示一個空格。2.5 HT

13、ML鏈接a a 標(biāo)簽標(biāo)簽 - - 代表代表HTMLHTML鏈接鏈接a a標(biāo)簽是成對出現(xiàn)的標(biāo)簽是成對出現(xiàn)的, ,以以開場開場, , 完畢完畢 a,a,是是anchor(anchor(錨錨) )的第一個字母的第一個字母屬性屬性href - href - 代表一個鏈接源代表一個鏈接源( (就是鏈接到什就是鏈接到什么地方么地方) ) target - target - 用來指出哪個窗口或框架應(yīng)用來指出哪個窗口或框架應(yīng)該被此鏈接打開該被此鏈接打開 2.5.1 指定位置的鏈接所謂指定位置的鏈接，就是直接鏈接到文檔中所謂指定位置的鏈接，就是直接鏈接到文檔中一個定義好的位置。例如：一個定義好的位置。例如：在在

14、HTMLHTML文檔的頂部給一個標(biāo)簽加一個文檔的頂部給一個標(biāo)簽加一個idid屬性屬性, ,如如頂部頂部再在再在HTMLHTML文檔的底部加一個鏈接文檔的底部加一個鏈接a 回到頂部回到頂部，只要點擊這個，只要點擊這個標(biāo)簽就可以直接轉(zhuǎn)到具有標(biāo)簽就可以直接轉(zhuǎn)到具有id=topid=top的標(biāo)簽的位的標(biāo)簽的位置置( (也就是頂部也就是頂部).).例例2.6 2.6 指定位置的鏈接指定位置的鏈接頁面上部頁面上部 鏈接到頁面下部鏈接到頁面下部 鏈接到頁面上部鏈接到頁面上部 頁面下部頁面下部 2.5.2 郵件鏈接使用郵件鏈接可以直接打開默認(rèn)的郵件使用郵件鏈接可以直接打開默認(rèn)的郵件客戶端系統(tǒng)客戶端系統(tǒng)例例2.

15、72.7a href=mailto:給我寫郵件給我寫郵件2.5.3 圖像鏈接可以為一個圖像指定鏈接可以為一個圖像指定鏈接.HTML.HTML圖像通常使用圖像通常使用imgimg標(biāo)簽標(biāo)簽例例2.82.8a href= / title= img / 2.6 圖像img img 標(biāo)簽標(biāo)簽 - - 代表代表HTMLHTML圖像圖像 imgimg標(biāo)簽是單獨出現(xiàn)的標(biāo)簽是單獨出現(xiàn)的, , 屬性屬性: : Common - Common - 一般屬性一般屬性 alt - alt - 代表圖像的替代文字代表圖像的替代文字 src - src - 代表一個圖像源代表一

16、個圖像源( (就是圖像的位置就是圖像的位置) ) height - height - 代表一個圖像的高度代表一個圖像的高度 width - width - 代表一個圖像的寬度代表一個圖像的寬度 img,img,是是image(image(圖像圖像) )的縮寫的縮寫2.7 列表常用的列表分為常用的列表分為3 3種種無序列表無序列表( (使用使用標(biāo)簽標(biāo)簽) )有序列表有序列表( (使用使用標(biāo)簽標(biāo)簽) )自定義列表自定義列表( (使用使用標(biāo)簽標(biāo)簽).).HTMLHTML列表可以逐行顯示信息列表可以逐行顯示信息, ,是是HTMLHTML非常非常重要的組成部分重要的組成部分. .ul ul 標(biāo)簽標(biāo)簽 -

17、 - 代表代表HTMLHTML無序列表無序列表 ulul標(biāo)簽是成對出現(xiàn)的標(biāo)簽是成對出現(xiàn)的, ,以以開場開場,完畢完畢 每一列使用每一列使用標(biāo)簽定義標(biāo)簽定義, ,每一列使用一個點作為每一列使用一個點作為開頭開頭 屬性屬性: : Common - Common - 一般屬性一般屬性 ulul是是unordered listsunordered lists的縮寫的縮寫lili是是list itemlist item的縮寫的縮寫例例2.9 ul2.9 ul標(biāo)簽標(biāo)簽 Beckham Beckham Henry Henry Messi Messi ol ol 標(biāo)簽標(biāo)簽 - - 代表代表HTMLHTML有序

18、列表有序列表 olol標(biāo)簽是成對出現(xiàn)的標(biāo)簽是成對出現(xiàn)的, ,以以開場開場,完完畢畢 每一列使用每一列使用標(biāo)簽標(biāo)簽( (與無序列表相同與無序列表相同) )定義定義, ,每列使用數(shù)字或字母開頭每列使用數(shù)字或字母開頭. . 屬性屬性: : Common - Common - 一般屬性一般屬性 olol是是ordered listsordered lists的縮寫的縮寫 例例2.10 ol2.10 ol標(biāo)簽標(biāo)簽 Beckham Beckham Henry Henry Messi Messi dl dl 標(biāo)簽標(biāo)簽 - - 代表代表HTMLHTML自定義列表自定義列表 dldl標(biāo)簽是成對出現(xiàn)的標(biāo)簽是成對出現(xiàn)的, ,以以開場開場,完完畢畢 自定義列表的開始使用自定義列表的開