HTML語言分析

1、第二部分 HTML 語言HTML概念HTML（Hyper Text Markup Language 超文本標識語言）是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔。什么是HTML5 HTML5是一個新的網(wǎng)絡標準,目前仍處于發(fā)展階段,目標是取代現(xiàn)有的HTML4.01和XHTML1.0標準.HTML5時間表HTML文檔的編寫方法1.手工直接編寫記事本等，存成.htm .html格式2.使用可視化HTML編 輯 器Frontpage、Dreamweaver等網(wǎng)頁文件命名1.*.htm或*.html2.無空格3.無特殊符號（例如&符號），只可以有下劃線“_”

2、，只可以為英文、數(shù)字4.區(qū)分大小寫5.首頁文件名默認為：index.htm 或 index.htmlHTML 文件結構. 是網(wǎng)頁文件的最外層標記.頭信息 不會顯示在瀏覽器中，包括基本的描述，整個網(wǎng)頁的公共屬性. 是網(wǎng)頁文件的主體部分正文 ：文字、圖片、鏈接、表單等元素：是HTML語言的基本部分。元素總是成對出現(xiàn)，每一對元素一般都有一個開始的標記（如），也有一個結束的標記（如）。元素的標記要用一對尖括號括起來，并且結束的標記總是在開始的標記前加一個斜杠。HTML 文件結構(Document Structures) 第一張網(wǎng)頁（01.htm） my first page This is my fi

3、rst homepage! 基本組成部分HTML元素屬性HTML元素可以有自己的相關屬性，每一個屬性還可以賦予一定的值。元素屬性出現(xiàn)在元素的內，并且和元素名之間有一個空格分隔；屬性值用“”引起來。第二張網(wǎng)頁（02.htm） my first page This is my first homepage! HTML字符集特殊字符如何顯示?網(wǎng)頁中有其特殊意義的字符，鍵盤上沒有的字符。2種表示方式字符代碼（命名實體）以&符開始，以分號結束，其間是字符名；數(shù)字代碼（編號實體）以&符開始，以分號結束，其間是#號加編號。，<或者< HTML字符集空格 &

4、;nbsp;  大于 > >&符號 & &“雙引號" " 版權 © ©注冊商標® ®乘號× ×除號÷ ÷HTML的有關約定在編輯HTML文件和使用有關標記符時有一些約定或默認的要求。(1) 文件擴展名默認使用htm或html。圖像文件的擴展名為gif和jpg。(2) HTML源程序為文本文件，其列寬可不受限制，即多個標記可寫成一

5、行，甚至整個文件可寫成一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標記指定除外）；對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號“&nbsp；”表示非換行空格；表示文件路徑時使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。HTML的有關約定(3) 標記符中的標記元素用尖括號括起來，如：、，帶斜杠的元素表示該標記說明結束；大多數(shù)標記符必須成對使用，以表示作用的起始和結束；標記元素忽略大小寫，即與作用相同；許多標記元素具有屬性說明，可用參數(shù)對元素作進一步的限定，多個參數(shù)或屬性項說明次序不限，其間用空格分隔即可；一個標記元素的內容可以寫成多行。(4)

6、 標記符號，包括尖括號、標記元素、屬性項等必須使用半角的西文字符，而不能使用全角字符。 (5) HTML注釋由驚嘆號表示，注釋內容由符結束。注釋內容可插入文本中任何位置。任何標記若在其最前插入驚嘆號，即被標識為注釋，不予顯示。 標簽 聲明必須位于 HTML5 文檔中的第一行，也就是位于 標簽之前。該標簽告知瀏覽器文檔所使用的 HTML 規(guī)范。DOCTYPE 聲明不屬于 HTML 標簽； 它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。在所有 HTML 文檔中規(guī)定 DOCTYPE 是非常重要的，這樣瀏覽器就能了解預期的文檔類型。Head中的標記 Title 定義網(wǎng)頁標題，顯示在瀏覽器的標題欄中

7、公司名稱+公司產(chǎn)品有利于搜索引擎（也是在搜索引擎中顯示的標題）Head中的標記 base基底網(wǎng)址標記用于設定瀏覽器中文件的絕對路徑網(wǎng)頁中的文件只需要寫下文件的相對路徑即可，這個路徑就是base中指定下的路徑Head中的標記 link設置外部文件的鏈接標記用于確定本頁面和其它文檔之間的關系Head中的標記 meta兩種用法Name 用于在網(wǎng)頁中加入一些關于網(wǎng)頁的描述信息，網(wǎng)頁的關鍵字，網(wǎng)頁描述信息http-equiv:屬性用于在HTML文檔中模擬HTTP協(xié)議的響應消息頭，它回應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內容。例如，告訴瀏覽器使用什么樣的字符集顯示網(wǎng)頁內容Meta標簽的na

8、me屬性不是自己定義的值：Keywords : 網(wǎng)頁的關鍵字Description：網(wǎng)頁的描述Authormeta 用來標記搜索引擎在搜索你的頁面時所取出的關鍵詞。 用來標記文檔的作者。 (html4.0.1) (html5)用來標記你的頁面的解碼方式。 charset=UTF-8用來自動刷新網(wǎng)頁UTF-8是世界性通用代碼，也完美的支持中文編碼，如果我們做的網(wǎng)站能讓國外用戶正常的訪問，就最好用UTF-8。GB2312屬于中文編碼，主要針對國內用戶使用，如果國外用戶訪問GB2312編碼的網(wǎng)站就會變亂碼。練習（03.htm）編寫一個網(wǎng)頁，要求3秒鐘后自動跳轉到學校的網(wǎng)站。 my first pag

9、e 三秒鐘后本網(wǎng)頁將自動跳轉到東北師范大學 基本組成部分HTML注釋HTML文檔可以插入注釋。注釋內容不會在瀏覽器窗口顯示HTML注釋的格式為：元素及元素屬性1 元素定義文檔的主體。 元素包含文檔的所有內容，比如文本、超鏈接、圖像、表格、列表等等。在它中放置網(wǎng)頁中所有內容TextBgcolorBackgroundLinkAlinkVlinkTopmarginLeftmargin只要是可以用樣式控制的就不用HTML本身屬性元素及元素屬性2元素中有下列元素屬性： (1)bgcolorbgcolor屬性標志HTML文檔的背景顏色。如：bgcolor=“#CCFFCC”。HTML對顏色的控制HTML對

10、顏色的控制也有自己的語法。HTML使用16進制的RGB顏色值對顏色進行控制。16 進制的數(shù)碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.顏色顏色名和RGB值黑色Black=”#000000”銀色Silver=”#c0c0c0”紅色Red=”#ff0000”藍色Blue=”#0000ff”白色White=”#ffffff”黃色Yellow=”ffff00”綠色Green=”#00ff00”海藍色Aqua=”#00ffff”常見顏色的代碼元素及元素屬性3元素中有下列元素屬性： (2)backgroundbackground屬性標志HTML文檔的背景圖片。如：backgro

11、und=“images/bg.gif?？梢允褂玫膱D片格式為GIF，JPG元素及元素屬性4元素中有下列元素屬性： (3)bgproperties=fixedbgproperties=fixed使背景圖片成水印效果，即圖片不隨著滾動條的滾動而滾動。元素及元素屬性5元素中有下列元素屬性： (4)texttext屬性標志HTML文檔的正文文字顏色。如：text=“#FF6666”。Text元素定義的顏色將應用于整篇文檔。元素及元素屬性6元素中有下列元素屬性： (5)超級鏈接顏色link、vlink、alink分別控制普通超級鏈接、訪問過的超級鏈接、當前活動超級鏈接顏色。元素及元素屬性7元素中有下列元素

12、屬性： (6) leftmargin和topmargin設置網(wǎng)頁主體內容距離網(wǎng)頁頂端和左端的距離如：leftmargin=20 topmargin=30“HTML 4.01 HTML 4.01 與與 HTML 5 HTML 5 之間的差異之間的差異在 HTML 5 中，刪除了所有 的特殊屬性。而那些屬性在 HTML 4.01 中是不被贊成使用的。文字標簽屬性文字屬性標記1.文字顏色 指定顏色 . Color:RRGGBB 16 進制數(shù)碼Face:客戶端可獲得的字體Size: 1, 2, 3, 4, 5, 6, 7 or +#, -#HTML 4.01 HTML 4.01 與與 HTML 5 H

13、TML 5 之間的差異之間的差異在 HTML 4.01 中，不贊成使用該元素。在 HTML 5 中，不支持該元素，但是允許由所見即所得的編輯器來插入該元素 。 至至 h6 標簽標簽 - 標簽可定義標題。 定義最大的標題 定義最小的標題。 文字的對齊. (n=1,2,3,4,5,6) . (#=left, center, right)HTML 4.01 HTML 4.01 與與 HTML 5 HTML 5 之間的差異之間的差異在 HTML 4.01 中，h1 - h6 元素的 align 屬性不被贊成使用。在 HTML 5 中，h1 - h6 元素的 align 屬性不被支持。文字布局行的控制

14、段(Paragraph) (可以看作是空行) 空白占位符 文字布局行的控制 HTML的段落與段落之間有一定的空隔。如果不希望出現(xiàn)空隔而只想換行的話，就要用到另一個元素，即元素。元素可以使所在的位置出現(xiàn)換行。這種換行和瀏覽器的自動換行的效果類似。元素不是成對出現(xiàn)的。文字布局HTML文字與段落格式控制 傾斜文本 粗體文本 下劃線文本 刪除線文本 HTML 4.01 HTML 4.01 與與 HTML 5 HTML 5 之間的差異之間的差異沒有區(qū)別在 HTML 5 中不支持 標簽。 標簽標尺線設定線寬, 線長, 對齊方式 ,線的顏色HTML 4.01 HTML 4.01 與與 HT

15、ML 5 HTML 5 之間的差異之間的差異屬性：在 HTML 4.01 中，不贊成使用 align, noshade, size 以及 width 屬性。在 HTML 5 中不再支持這些屬性。在 HTML 5 中， 標簽定義內容中的主題變化，并顯示為一條水平線。在 HTML 4.01 中，它僅僅顯示為一條水平線。3. HTML的段落與分行控制無序列表元素1列表在HTML的文檔里有重要的地位,HTML規(guī)定了多種列表元素。列表所起的主要作用是使特定的文本有序化。3. HTML的段落與分行控制無序列表元素2無序列表是由和元素定義的:sports food drink friends 3. HTML

16、的段落與分行控制無序列表元素3無序列表的默認符號是圓點。 元素有type屬性，通過定義不同的type屬性可以改變列表的項目符號。目前，type屬性的屬性值有：disc(圓)、circle（圓圈）、square（方塊）3. HTML的段落與分行控制有序列表元素1有序列表由和定義: sports drink friends3. HTML的段落與分行控制有序列表元素2元素也有自己的type屬性，type屬性的屬性值有1、A、a、I、i等。例如，我們以A、B、C作為列表的編號元素還可以定義列表的起始編號，如我們希望列表的第一個編號為5，而不是1，則需要定義元素的start屬性4.超級鏈接普通超級鏈接1

17、超級鏈接是整個WWW應用的核心和基礎。如果沒有超級鏈接的概念，那么，我們現(xiàn)在所有的WWW的應用將不復存在。所以，對超級鏈接的掌握具有特殊重要的意義。4.超級鏈接普通超級鏈接2超級鏈接是用錨元素定義的 在元素下，有元素屬性href,href的屬性值為一個URL地址如：指向學院的超級鏈接 如：普通超級鏈接4.超級鏈接E-mail超級鏈接 超級鏈接可以指向E-mail地址如：指向E-mail地址的超級鏈接4.超級鏈接新開鏈接窗口開一個新的(瀏覽器)窗口 (Target Window) . 例：4.超級鏈接去除下劃線去掉超級連接的下劃線：style=“text-decoration: none”4.超

18、級鏈接其他超級鏈接 WWW應用僅僅是Internet應用的一種,Internet還有其他很多應用，如：Ftp等。實際上mailto也屬于非WWW應用。我們可以類似的創(chuàng)建指向Ftp等的超級鏈接;指向其他Internet應用的超級鏈接不是我們掌握的重點。 4.超級鏈接錨點(書簽) 1 指向本頁面錨點aa的超級鏈接指向23頁面的錨點top的超級鏈接練習：手寫代碼實現(xiàn)鏈接（新開窗口與Email）、背景、文字顏色、字體、換行、頁面標題。HTML對圖片的控制-1基本語法:引用圖片必須用元素標志。元素下的基本元素屬性是src屬性，src的屬性值為所引用的圖片的URL地址。src屬性是必須的。Src的URL可

19、以是絕對地址，也可以是相對地址HTML對圖片的控制-2所謂圖片的替代文本，指圖片不能顯示時在圖片所在位置顯示的一段文本或當鼠標移到圖片上時也會顯示替代文本。定義圖片替代文本的方法是：HTML對圖片的控制-3圖片的顯示大小我們可以指定一幅圖片在瀏覽器窗口里的顯示大小。定義圖片的顯示大小的方法是：width指定圖片的寬度，height指定高度。它們的屬性值可以是象素，也可以是%。 HTML對圖片的控制-4圖片的邊框我們可以為一幅圖片加一個邊框以突出顯示： border的屬性值為象素數(shù)HTML對圖片的控制-5圖片的對齊方式圖片可以相對于頁面或單元格有一個對齊方式。定義水平對齊方式的方法是：HTML對

20、圖片的控制-6圖片的對齊方式定義圖片的垂直對齊方式：對于圖片的對齊方式不僅是以上幾種，但是以上的幾種是最常用的。HTML對圖片的控制-7定義圖片與左、右的文本之間的間距圖片在顯示時，與左右的文本之間可以有一定的間距 Hspace(horizontal)定義水平間距； Vspace(vertical)定義垂直間距。單位都是象素數(shù).HTML對圖片的控制-8圖象的超級鏈接 圖象的超級鏈接是指整個圖象的超級鏈接，當點擊圖象的任何部分時，都會打開這個超級鏈接。定義默認超級鏈接的方法是：所以，所謂超級鏈接實際上就是用元素標志一個圖象的引用;例：34.htmHTML對圖片的控制-9圖象映射所謂圖象映射是指一

21、個圖片上的不同位置被指定了不同的超級鏈接；點擊圖片的不同位置會打開不同的超級鏈接目標。這與前面的默認超級鏈把整個圖片作為超級鏈接的元素是很不一樣的。HTML對圖片的控制-10圖象映射（只要求理解標記含義）圖象映射由定義。有一個基本屬性是name。Name給圖象映射命名，這個命名將會被元素用usemap屬性引用。所以，圖象上的圖象映射實際上是對定義的映射的一個引用。在定義圖象映射時，可以定義三種形狀的映射： circle(圓形)、rect(矩形rectangle)、poly(多邊形)HTML對圖片的控制-11圖象映射實例（35.htm） 表格制作表格制作一、創(chuàng)建表格 在HTML中可使用、等標記符

22、來創(chuàng)建和設計表格。1）標記符 雙標記符和用于定義表格，一個表格的所有內容都放在這2個標記符之間。它具有多個屬性，具體內容在后面敘述。2）創(chuàng)建表格標題 雙標記符和用于建立表格的標題，并使用ALIGN屬性定義標題的位置。ALIGN位置屬性有4個值，即top（標題放在表格的上方）、bottom（標題放在表格的下方）、left（標題放在表格的左上方）、right（標題放在表格的右上方）。一個表格只能有一個標題。表格制作表格制作例如：顏色與顏色值對應表，表示將表格標題放在表格的下面且居中。表格制作表格制作表格的定義表格的定義 標題內容標題內容 表格內容表格內容 表格內容表格內容 表格的屬性表格的屬性標記

23、標記，和和的屬性用來定義表格的顯示特性的屬性用來定義表格的顯示特性 標記屬性表標記屬性表標記屬性表標記屬性表標記屬性表表格制作表格制作3）建立表頭 表頭是表格中行或列的標題，即表項的名稱。使用可以在表的第一行或第一列加表頭，表頭內容寫在和之間，顯示時將采用粗體字以醒目。 在表格的第一行加表頭的格式為：在表格的第一行加表頭的格式為： 表頭1表頭2表頭3在表格的第一列加表頭的格式為：在表格的第一列加表頭的格式為： 表頭1表項1表項2表項3表格制作表格制作4）表格行與列的定義 表格的內容是由行定義標記符和以及列定義標記符與來確定的?？梢允÷?，即一個新的開始，表示前一個的結束。一般的也可以省略。 在、

24、標記符中可使用ROWSPAN和COLSPAN屬性對行、列合并。表格制作表格制作 構造表格時，每個標記符產(chǎn)生一行，表格有多少行就應有多少個標記符；表格的列數(shù)則由或的個數(shù)而定；若表的單元格中無任何內容，則使用無內容的 或 標記符即可。 表格制作表格制作二、表格的修飾 1）表格邊框和分隔線 在 標記符內使用FRAME、BORDER屬性可以設置表格的邊框和單元格分隔線。 FRAME屬性用于控制是否顯示邊框以及如何顯示邊框,其值可以是void（默認值無邊框）、above（只有頂框）、below（只有底框）、hsides（只有頂框和底框）、vsides(只有左右側框)、lhs（只有左側框）、rhs（只有右

25、側框）、box（包含4個邊框）。 BORDER屬性用于設置邊框線的寬度。若BORDER=0，則表示無邊框，無分隔線；若取其他值，則意味著包含所有邊框和分隔線。若使用，相當于為BORDER設置了非零值。表格制作表格制作2）表格的對齊 表格的對齊指表格在頁面中的對齊方式。 表格在頁面中的對齊可在標記符中使用ALIGN屬性，其取值可有l(wèi)eft、center和right。默認值為left、即為頁面中左對齊。當表格與文字混合編排時，則文件中安排在表格后面的文字會顯示在表格的右邊或左邊，形成文字與表格環(huán)繞的效果表格制作表格制作3）單元格中內容的對齊 單元格內容的對齊包括數(shù)據(jù)項在水平方向上的對齊和在垂直方向

26、上的對齊。設置數(shù)據(jù)水平方向對齊是在表格內容標記符、中使用ALIGN屬性。其取值可以是center、left、right、justify（兩端對齊）。默認為左對齊。 垂直對齊則是使用VALIGN屬性，其取值為top（單元格頂部）、bottom（單元格底部）、middle（垂直方向的中部）、baseline（同行單元格一致）。默認值為居中（middle）對齊。表格制作表格制作4）單元格之間的間隔 在標記符中可使用CELLSPACING屬性來調節(jié)單元格之間的間隔；使用CELLPADDING屬性來調節(jié)表格分隔線和數(shù)據(jù)（即數(shù)據(jù)與單元格邊線）之間的間隔。它們的屬性項取值為象素值。 表格制作表格制作三、使用

27、表格設計頁面布局 HTML中有多種安排頁面內容、設計頁面布局的方法，運用表格就是方法之一。如果將整個窗口或整個顯示的頁面定義為一個表格，但隱去表格線，則在每個單元格中可以安排不同的內容（文本或圖像）、甚至設置不同的背景，這樣便可獲得特殊的頁面布局。 1）用色塊進行頁面布局 在標記符、內使用BGCOLOR屬性可設置單元格的背景色；使用BACKGROUND屬性可設置背景圖案。例如：可使表格背景為灰色，而則可使某單元格為黃色。通過大的色塊分割，可使整個頁面窗口分為幾個明顯的部分，以使信息歸類組織，即醒目又有序。 2）用表格嵌套實現(xiàn)頁面布局 將表格作為一個單元格的內容，安排在和標記符之間，即可實現(xiàn)表格

28、的嵌套的頁面布局。框架技術框架技術一、框架的概念框架（frame）亦稱為“幀”的技術，可以獲得在同一個窗口中開辟幾個子窗口以便同時顯示幾個不同頁面的效果。要使用框架，首先要了解框架集的概念?？蚣芗菢嬙煺麄€框架結構的文檔，它不包含具體顯示的文本和圖像，而只包含如何組織安排各個框架位置、大小和初始頁面信息的設計。它是框架使用中最基礎的文檔，常稱之為整個框架顯示時的主文檔?？蚣芗幕靖袷饺缦拢?注意到，框架組文檔中，用標記符代替了標記符。而標記符則用來指定每一個子窗口的內容?？蚣芗夹g框架技術1）窗口的分割用來分割瀏覽器窗口，它使用COLS和ROWS這2個屬性項把整個窗口按垂直方向或水平方向分割為

29、多個框架。例如：。該標記符把窗口分成3個垂直的框架，指定左框架寬度值為150象素、中間框架占總寬度的50%，余下的寬度留給右框架。由上例可見，框架尺寸除使用象素值和百分數(shù)外，還可以使用*和n* ；使用*表示剩余部分；當使用n*（如2*）時，n值確定框架之間的比例。例如：*，2*，3*表示左邊（或上邊）的框架占窗口寬度（或高度）的1/6，中間框架占1/3，右邊（或下邊）框架占1/2?？蚣芗夹g框架技術2）標記符的嵌套標記符可以嵌套使用。以構造包含橫向和縱向框架的窗口。以下代碼用嵌套框架結構建立一個多層框架的窗口。 框架的實現(xiàn) 框架技術框架技術3）框架的初始化標記符用于對各個框架進行初始化設置。使用

30、標記符中的SRC屬性指定需要在框架中顯示的頁面的文件，使用NAME屬性指定框架的名稱，以便在指定超級鏈接的目標框架時引用該框架名。標記符的個數(shù)應等于框架個數(shù)，并依出現(xiàn)的次序和層次先行后列對框架進行初始化?？蚣芗夹g框架技術二、框架效果設計1) 設置框架邊框在標記符中，可使用FRAMEBORDER屬性控制是否顯示框架邊框。屬性值取值為1或0。如果取值為1，表示生成三維框架（默認值）；如果取值為0，則不顯示框架邊框。2) 設置框架邊空白在標記符中使用MARGINWIDTH和MARGINHEIGHT屬性可分別設定框架中的內容和框架的左右邊框，以及上下邊框之間的空白。這2個屬性的取值均為象素值。框架技術

31、框架技術3) 設置框架的滾動條在標記符中使用SCROLLING屬性，可以控制是否為某框架加入滾動條，以便于觀看框架中的內容。該屬性的取值有yes、no、auto。它們分別表示加入垂直和水平滾動條、不加滾動條、根據(jù)需要加滾動條。其中auto為默認值。4) 固定邊框位置在標記符中加入NORESIZE屬性可以固定邊框線的位置，這樣瀏覽者就不能用鼠標來移動框架的邊框了?？蚣芗夹g框架技術三、目標框架的使用如果在有框架的網(wǎng)頁中設置了超級鏈接功能，則必須指定所鏈接的文件顯示在哪一個框架中，這就要用到標記符中NAME屬性所定義的框架名。如果不指定框架名，則單擊框架內的超鏈時，目標文件只會顯示在當前框架內?？刂?/p>

32、目標文件在哪一個框架內顯示的方法是在標記符中使用TARGET屬性，使用格式為：超鏈內容 表單表單 1.1.表單的定義表單的定義定義表單的語法如下：定義表單的語法如下： form method=get|post action= input type= textarea textarea定義定義 select select定義定義 表單表單 表單可以很簡單，只有一個輸入域，也可以很復雜，例如有按鈕、檢查框、滾動窗口的多區(qū)域等。最常使用的表單元素標記有三種，即INPUT、SELECT和TEXTAREA。1) 標記符的作用是在表單中建立各種的輸入域。其主要的屬性有name、value、type等3個。name被用來表示不同的