第3章HTML語言-2012092109534864

1、第3章 HTML 語言3.1、HTML語言概述lHTML(Hypertext Markup Language)超文本標(biāo)記語言，它是在互聯(lián)網(wǎng)發(fā)布網(wǎng)頁的通用語言。大部分的主頁都是用HTML配合其它語言寫成的。 lHTML標(biāo)記(HTML Markup)是HTML文檔的控制語言，用于指定瀏覽器顯示和打印文檔的方式。它是 用小于號(hào)括起來的短語和符號(hào)， 如、等。3.2、HTML語言基礎(chǔ) 3.2.1 基本的HTML語法 一個(gè)最簡(jiǎn)單的 HTML文檔是這樣:HTML 文件的正文寫在這里. . 每個(gè)HTML文檔都應(yīng)至少有如下成對(duì)標(biāo)記: 。 語法：語法：（1）所有的標(biāo)記都用左 “”括起來。（2）大部分標(biāo)記是成對(duì)出現(xiàn)

2、的，包括開始標(biāo)記和結(jié)束標(biāo)記。結(jié)束標(biāo)記必須用 “/”開頭。例如： 歡迎瀏覽本網(wǎng)頁?。?）所有在標(biāo)記內(nèi)的對(duì)象，都按標(biāo)記定義的格式顯示。（4）少數(shù)標(biāo)記允許只有開始標(biāo)記，而沒有結(jié)束標(biāo)記。 例如：換行標(biāo)記、水平線和段落。（5）標(biāo)記不區(qū)分大小寫，但默認(rèn)情況下，ASP.NET用小寫字母。3.2.2 標(biāo)記的屬性l利用標(biāo)記屬性可以控制標(biāo)記的顯示格式l屬性設(shè)置：“屬性名”=“值”l所有屬性都放置在開始標(biāo)記的尖括號(hào)內(nèi)。例如： 本段落將放置在中間 3.2.3 注釋語句l注釋的內(nèi)容并不會(huì)在瀏覽器窗口中顯示出來，可以把注釋語句當(dāng)作是特殊的標(biāo)記。l注釋語句的格式： 3.3.1 HTML標(biāo)記 HTML標(biāo)記是全部文檔內(nèi)容的容器

3、，分別是網(wǎng)頁中的第一個(gè)標(biāo)記和最后一個(gè)標(biāo)記 。3.3.2 頭部與正文 HTML文檔分為頭部(Head)和正文(Body)兩部分:l 頭部頭部是用成對(duì)標(biāo)記標(biāo)出的部分，它主要包括注釋，說明信息和標(biāo)題。 標(biāo)題標(biāo)題是在瀏覽器標(biāo)題欄中的描述文檔的文字。標(biāo)題是在頭部中由成對(duì)標(biāo)記定義。l 正文正文是文檔的主體，用成對(duì)標(biāo)記標(biāo)出， Web頁面的主要內(nèi)容都在中。正文中的屬性bgcolor指定背景色。 3.3 HTML文檔的基本結(jié)構(gòu)例：臺(tái)州學(xué)院大家好！3.4 文字版面的編輯3.4.1 設(shè)置字符屬性 大小：文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -# 字體：face 顏色：color例：今天天氣

4、真好！ 今天天氣真好！ 今天天氣真好！ 學(xué)校網(wǎng)站設(shè)計(jì)3.4.2 設(shè)置字符樣式和特殊字符 1設(shè)置字符樣式設(shè)置字符樣式 例如粗體、斜體、下劃線、刪除線、上標(biāo)、下標(biāo)等。常用的設(shè)置字符樣式的標(biāo)記如下:粗體斜體刪除線下劃線上標(biāo)下標(biāo)大字體小字體固定寬度字體 2插入特殊字符插入特殊字符l有些字符，如版權(quán)符號(hào)，鍵盤上沒有，可用特殊字符© 表達(dá)。l有些特殊字符在瀏覽器中會(huì)報(bào)錯(cuò)，例如“”等。用<來表示。 3.4.3 設(shè)置段落格式1、段落標(biāo)記 (可以看作是空行) 2、換行標(biāo)記，單獨(dú)使用，沒有配對(duì)的。也可寫成例：你好嗎？ 我很好！他好嗎？他很好！大家都很好！再見！3、水平線標(biāo)記 單獨(dú)使

5、用 例：臺(tái)州學(xué)院我是一條水平線大家好！3.5 建立列表3.5.1 有序列表 1、在各列表項(xiàng)的前面顯示數(shù)字或字母，使用列表標(biāo)記OL和列表項(xiàng)標(biāo)記LI創(chuàng)建，語法格式如下： 列表項(xiàng)1列表項(xiàng)2列表項(xiàng)n 2、OL標(biāo)記兩個(gè)屬性：START表示數(shù)字起始值；TYPE設(shè)置類型，取值： 1：表示阿拉伯?dāng)?shù)字1、2、3等，這是默認(rèn)值。 A：表示大寫字母A、B、C等。 a：表示小寫字母a、b、c等。 I：表示大寫羅馬數(shù)字I、II、III、IV等。 i：表示小寫羅馬數(shù)字i、ii、iii、iv等。 3、當(dāng)LI標(biāo)記位于和標(biāo)記之間時(shí)，有兩個(gè)常用屬性。lTYPE屬性：與OL標(biāo)記中的TYPE屬性相同。lVALUE屬性：指定一個(gè)新的起

6、始值，用來獲得非連續(xù)性的數(shù)字序列。 例： Today Tomorrow 2018年8月8日3.5.2 無序列表 1、在各列表項(xiàng)前面顯示特殊項(xiàng)目符號(hào)，使用無序列表標(biāo)記UL和列表項(xiàng)標(biāo)記LI創(chuàng)建，語法格式如下： 列表項(xiàng)1列表項(xiàng)2列表項(xiàng)n 2、UL標(biāo)記的TYPE屬性用于指定列表項(xiàng)前面顯示的項(xiàng)目符號(hào)，其取值可以是：ldisc：使用實(shí)心圓作為項(xiàng)目符號(hào)（默認(rèn)值）。lcircle：使用空心圓作為項(xiàng)目符號(hào)。lsquare：使用方塊作為項(xiàng)目符號(hào)。 注意：在IE瀏覽器中，TYPE屬性的值是區(qū)分大小寫的。 例： Today Tommorow3.6 TABLE表格l表格標(biāo)記:l行標(biāo)記:一對(duì)標(biāo)記一行l(wèi)列名標(biāo)記:字段名一對(duì)

7、標(biāo)記一列l(wèi)單元格標(biāo)記:數(shù)據(jù)一對(duì)標(biāo)記一單元格 例： 姓名年齡班級(jí)   3.7 建立超鏈接l超鏈接標(biāo)記l基本語法: . URL(統(tǒng)一資源定位器)：可以是本機(jī)的網(wǎng)頁或Internet上的網(wǎng)頁例：個(gè)人愛好 IT技術(shù)社區(qū)超鏈接的形式：l文件超鏈接：這種鏈接的目標(biāo)端點(diǎn)是一個(gè)文件。l錨點(diǎn)超鏈接：這種鏈接的目標(biāo)端點(diǎn)是網(wǎng)頁中的一個(gè)位置，通過這種鏈接可以使網(wǎng)頁跳轉(zhuǎn)到當(dāng)前頁面，或者其他頁面中的指定位置。錨點(diǎn)位置鏈接到錨點(diǎn)lE-mail鏈接：通過這種鏈接，可以啟動(dòng)電子郵件客戶端程序。 l圖像超鏈接：在圖像上建立若干個(gè)區(qū)域，稱為“鏈接區(qū)”。通過它們可以跳轉(zhuǎn)到其他目標(biāo)端點(diǎn)去。 3.8 圖像的處理l網(wǎng)頁上

8、使用的圖像類型：GIF、JPEG 、PNG等l圖像標(biāo)記語法格式： 例： l使用標(biāo)記顯示Flash 動(dòng)畫： 3.9 網(wǎng)頁的動(dòng)態(tài)效果1、MARQUEE標(biāo)記用于移動(dòng)字幕，語法如下： 要滾動(dòng)的信息 其中“direction = right”表示文字從左往右滾動(dòng)2、標(biāo)記屬性：lBGCOLOR：指定字幕的背景顏色。lLOOP：指定字幕的滾動(dòng)次數(shù)。lHEIGHT：指定字幕的高度，以像素或百分比為單位。lALIGN：指定字幕與周圍文本的對(duì)齊方式，其取值可以是top、middle或bottom。lBEHAVIOR：指定文本動(dòng)畫的類型，其取值可以是scroll、slide或alternate。lDIRECTION

9、：指定文本的移動(dòng)方向，其取值可以是down、left、right或up。lHSPACE：整數(shù)，指定字幕的外部邊緣與瀏覽器窗口之間的左右邊距（像素）。lSCROLLAMOUNT：整數(shù)，指定字幕文本每次移動(dòng)的距離，以像素為單位。lSCROLLDELAY：整數(shù)，指定與前段字幕文本延遲多少ms后重新開始移動(dòng)文本。lVSPACE：整數(shù)，指定字幕的外邊緣與瀏覽器窗口之間的上下邊距（像素）。例： 會(huì)移動(dòng)的標(biāo)題欄 3.10 原樣顯示標(biāo)記按照原來鍵入的模樣顯示 大家好！ 文本保持原有模樣嗎？ 3.11 表單標(biāo)記表單(Form)主要用于采集和提交用戶輸入的信息。表單的基本語法 *=text, password,

10、checkbox, radio, image, hidden, submit, reset*=輸入信息的名稱 HTML表單(Form)常用控件表單控件說明input type=text單行文本輸入框input type=submit將表單(Form)里的信息提交給表單里action所指向的文件input type=checkbox復(fù)選框input type=radio單選框select下拉框textArea 多行文本輸入框input type=password密碼輸入框(輸入的文字用*表示)例：您的姓名: 您的主頁的網(wǎng)址: 密碼: 3.12 框架Iframe用可以將Frame置于一個(gè)HTML文

11、件內(nèi)。表單的基本語法什么是XHTML 簡(jiǎn)單點(diǎn)說：簡(jiǎn)單點(diǎn)說：XHTMLXHTML就是嚴(yán)謹(jǐn)而準(zhǔn)確的就是嚴(yán)謹(jǐn)而準(zhǔn)確的HTMLHTML。如果說。如果說HTMLHTML是漢語，那么是漢語，那么XHTMLXHTML就是標(biāo)準(zhǔn)普通話。就是標(biāo)準(zhǔn)普通話。復(fù)雜點(diǎn)說：復(fù)雜點(diǎn)說：XHTMLXHTML是是HTMLHTML的的“升級(jí)規(guī)范升級(jí)規(guī)范”產(chǎn)品，其中產(chǎn)品，其中“X X”是代表可擴(kuò)展的，是單詞是代表可擴(kuò)展的，是單詞“extensibleextensible”的縮寫。的縮寫。它具有更嚴(yán)格的書寫標(biāo)準(zhǔn)、更好的跨平臺(tái)能力。由于某些需要，它具有更嚴(yán)格的書寫標(biāo)準(zhǔn)、更好的跨平臺(tái)能力。由于某些需要，XHTMLXHTML將以前版將以前版

12、本的本的HTMLHTML能夠?qū)崿F(xiàn)的一些功能交給了能夠?qū)崿F(xiàn)的一些功能交給了CSSCSS，這意味著你將需要學(xué)習(xí)兩種技術(shù)。但，這意味著你將需要學(xué)習(xí)兩種技術(shù)。但是這確實(shí)是是這確實(shí)是WebWeb未來發(fā)展的潮流。未來發(fā)展的潮流。XHTML區(qū)別于HTML的規(guī)則 1.XHTML1.XHTML文件的開始要聲明文件的開始要聲明DTD.DTD. XHTML1.0 XHTML1.0提供了三種提供了三種DTDDTD聲明可供選擇：過渡、嚴(yán)格聲明可供選擇：過渡、嚴(yán)格 、框架、框架 2.2.需要為你的需要為你的標(biāo)簽添加一個(gè)命名空間。標(biāo)簽添加一個(gè)命名空間。3.3.所有的標(biāo)簽和標(biāo)簽的屬性都必須小寫，屬性值可以大寫。所有的標(biāo)簽和標(biāo)簽的屬性都必須小寫，屬性值可以大寫。4.4.屬性值必須用引號(hào)括起來。單引號(hào)雙引號(hào)均可。屬性值必須用引號(hào)括起來。單引號(hào)雙引號(hào)均可。5.5.所有的標(biāo)簽都必須被關(guān)閉，方法如下：所有的標(biāo)簽都必須被關(guān)閉，方法如下：HTMLHTML中的中的要寫成要寫成，后面加了一個(gè)空格，后面加了一個(gè)空格“ ”和一個(gè)反斜杠和一個(gè)反斜杠 “/ /” 。6.6.每個(gè)