html超文本標(biāo)記語言.docx

Html教程（1）什么是HTML文件？ HTML的英文全稱是Hypertext Marked Language，中文叫做“超文本標(biāo)記語言”。 和一般文本的不同的是，一個HTML文件不僅包含文本內(nèi)容，還包含一些Tag，中文稱“標(biāo)記”。 一個HTML文件的后綴名是.htm或者是.html。 用文本編輯器就可以編寫HTML文件。 這就試寫一個HTML文件吧！打開你的Notepad，新建一個文件，然后拷貝以下代碼到這個新文件，然后將這個文件存成first.html。Title of pageThis is my first homepage. This text is bold 要瀏覽這個first.html文件，雙擊它?；蛘叽蜷_瀏覽器，在File菜單選擇Open，然后選擇這個文件就行了。示例解釋這個文件的第一個Tag是，這個Tag告訴你的瀏覽器這是HTML文件的頭。文件的最后一個Tag是，表示HTML文件到此結(jié)束。在和之間的內(nèi)容，是Head信息。Head信息是不顯示出來的，你在瀏覽器里看不到。但是這并不表示這些信息沒有用處。比如你可以在Head信息里加上一些關(guān)鍵詞，有助于搜索引擎能夠搜索到你的網(wǎng)頁。在和之間的內(nèi)容，是這個文件的標(biāo)題。你可以在瀏覽器最頂端的標(biāo)題欄看到這個標(biāo)題。在和之間的信息，是正文。在和之間的文字，用粗體表示。顧名思義，就是bold的意思。HTML文件看上去和一般文本類似，但是它比一般文本多了Tag，比如，等，通過這些Tag，可以告訴瀏覽器如何顯示這個文件。HTML元素(HTML Elements) HTML元素(HTML Element)用來標(biāo)記文本，表示文本的內(nèi)容。比如body, p, title就是HTML元素。 HTML元素用Tag表示，Tag以結(jié)束。 Tag通常是成對出現(xiàn)的，比如。起始的叫做Opening Tag，結(jié)尾的就叫做Closing Tag。 目前HTML的Tag不區(qū)分大小寫的。比如，和其實是相同的。HTML元素(HTML Elements)的屬性HTML元素可以擁有屬性。屬性可以擴展HTML元素的能力。比如你可以使用一個bgcolor屬性，使得頁面的背景色成為紅色，就像這樣：再比如，你可以使用border這個屬性，將一個表格設(shè)成一個無邊框的表格。如下：屬性通常由屬性名和值成對出現(xiàn)，就像這樣：name=value。上面例子中的bgcolor, border就是name，red和0就是value。屬性值一般用雙引號標(biāo)記起來。屬性通常是附加給HTML的Opening Tag，而不是Closing Tag。（2）示例：這是第一段。這是第二段。這是第三段。在HTML里，用p來定義段落。這是第一段。這是第二段。這是第三段。在HTML里，用p來定義段落。正文標(biāo)題這個示例告訴你如何在HTML文件里定義正文標(biāo)題。HTML用到這幾個Tag來定義正文標(biāo)題，從大到小。每個正文標(biāo)題自成一段。This is a headingThis is a headingThis is a headingThis is a headingThis is a headingThis is a heading段落劃分在HTML里用和劃分段落。This is a paragraphThis is another paragraph 換行通過使用這個Tag，可以在不新建段落的情況下?lián)Q行。沒有Closing Tag。用換行是個壞習(xí)慣，正確的是使用。This is a paragraph with line breaks HTML注釋在HTML文件里，你可以寫代碼注釋，解釋說明你的代碼，這樣有助于你和他人日后能夠更好地理解你的代碼。注釋可以寫在之間。瀏覽器是忽略注釋的，你不會在HTML正文中看到你的注釋。 一些小建議HTML文件會自動截去多余的空格。不管你加多少空格，都被看做一個空格。 一個空行也被看做一個空格。有些Tag能夠?qū)⑽谋咀猿梢欢?，而不需要使用來分段。比如之類的?biāo)題Tag。更多示例更多段落這個示例顯示了段落的特性。換行這個示例告訴你如何在HTML文件里換行。正文標(biāo)題這個示例教會你如何在HTML文件里顯示正文標(biāo)題。居中的正文標(biāo)題這個示例告訴你如何將正文標(biāo)題居中顯示。這是標(biāo)題上面的標(biāo)題是居中顯示的。加條橫線這個示例演示了如何在HTML文中加條橫線。用hr這個Tag可以在HTML文件里加一條橫線。村婦想像皇宮的生活：皇后得用金扁擔(dān)挑水吧。代碼注釋這個示例演示如何在HTML代碼中加上代碼注釋，這些注釋只顯示在HTML源代碼中，而源代碼最終形成的網(wǎng)頁里是看不到這些注釋的。背景顏色這個示例演示如何改變HTML文件的背景色。 看，這個頁面是黃色的。HTML常用格式HTML定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下面的示例，你可以了解各種文本格式Tag如何改變HTML文本的顯示。常用文本格式TagTagTag說明粗體bold斜體italic文字當(dāng)中劃線表示刪除文字下劃線表示插入下標(biāo)上標(biāo) 縮進表示引用保留空格和換行表示計算機代碼，等寬字體示例HTML常用的格式Tag這個示例用了上述Tag，你可以對比一下HTML的顯示結(jié)果。如何看HTML的源代碼在瀏覽器看到的HTML網(wǎng)頁，是瀏覽器解釋HTML源代碼后產(chǎn)生的結(jié)果。要查看這個HTML的源代碼，有兩種方法。一是點擊鼠標(biāo)右鍵，點擊View Source(查看源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。利用View Source得到網(wǎng)頁的源代碼，你可以由此借鑒一下別人寫得好的地方。不過在你對HTML知識尚少的情況下，看別人復(fù)雜的HTML源代碼，只會讓你頭暈。建議你還是再等等，先掌握一些基礎(chǔ)再說。HTML字符實體(Character Entities)有些字符在HTML里有特別的含義，比如小于號就表示HTML Tag的開始，這個小于號是不顯示在我們最終看到的網(wǎng)頁里的。那如果我們希望在網(wǎng)頁中顯示一個小于號，該怎么辦呢？這就要說到HTML字符實體(HTML Character Entities)了。一個字符實體(Character Entity)分成三部分：第一部分是一個&符號，英文叫ampersand；第二部分是實體(Entity)名字或者是#加上實體(Entity)編號；第三部分是一個分號。比如，要顯示小于號，就可以寫<或者。用實體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是less than的意思，但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字。而實體(Entity)編號，各種瀏覽器都能處理。注意：Entity是區(qū)分大小寫的。如何顯示空格通常情況下，HTML會自動截去多余的空格。不管你加多少空格，都被看做一個空格。比如你在兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。為了在網(wǎng)頁中增加空格，你可以使用 表示空格。最常用的字符實體(Character Entities)顯示結(jié)果說明Entity NameEntity Number顯示一個空格 大于>&符號&雙引號"其他常用的字符實體(Character Entities)顯示結(jié)果說明Entity NameEntity Number版權(quán)©注冊商標(biāo)®乘號×除號÷更多字符實體(Character Entities)更多字符實體(Character EntitiesISO Latin-1字符集字符十進制字符編號實體名字說明-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-制表符Horizontal tab-換行Line feed-未使用Unused-未使用Unused-回車Carriage Return-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-未使用Unused-Space!-驚嘆號Exclamation mark"雙引號Quotation mark#-數(shù)字標(biāo)志Number sign$-美元標(biāo)志Dollar sign%-百分號Percent sign&Ampersand-單引號Apostrophe(-小括號左邊部分Left parenthesis)-小括號右邊部分Right parenthesis*-星號Asterisk+-加號Plus sign,-逗號Comma-連字號Hyphen.-句號Period (fullstop)/-斜杠Solidus (slash)0-數(shù)字0 Digit 01-數(shù)字1 Digit 12-數(shù)字2 Digit 23-數(shù)字3 Digit 34-數(shù)字4 Digit 45-數(shù)字5 Digit 56-數(shù)字6 Digit 67-數(shù)字7 Digit 78-數(shù)字8 Digit 89-數(shù)字9 Digit 9:-冒號Colon;-分號Semicolon>大于號Greater than?-問號Question mark-Commercial atA-大寫A Capital AB-大寫B(tài) Capital BC-大寫C Capital CD-大寫D Capital DE-大寫E Capital EF-大寫F Capital FG-大寫G Capital GH-大寫H Capital HI-大寫J Capital IJ-大寫K Capital JK-大寫L Capital KL-大寫K Capital LM-大寫M Capital MN-大寫N Capital NO-大寫O Capital OP-大寫P Capital PQ-大寫Q Capital QR-大寫R Capital RS-大寫S Capital ST-大寫T Capital TU-大寫U Capital UV-大寫V Capital VW-大寫W Capital WX-大寫X Capital XY-大寫Y Capital YZ-大寫Z Capital Z-中括號左邊部分Left square bracket-反斜杠Reverse solidus (backslash)-中括號右邊部分Right square bracket-Caret_-下劃線Horizontal bar (underscore)HTML利用超鏈接打開鏈接文件先看兩個示例建立一個超鏈接這個示例演示了如何在HTML文件里創(chuàng)建超鏈接。將一個圖片作為一個超鏈接這個示例演示了如何將一個圖片作為一個超鏈接，即點擊一個圖片，可以連接到其它文件。a和href屬性HTML用來表示超鏈接，英文叫anchor?？梢灾赶蛉魏我粋€文件源：一個HTML網(wǎng)頁，一個圖片，一個影視文件等。用法如下：鏈接的顯示文字 點擊當(dāng)中的內(nèi)容，即可打開一個鏈接文件，href屬性則表示這個鏈接文件的路徑。比如鏈接到/html站點首頁，就可以這樣表示：站長網(wǎng) 站長學(xué)院/html首頁 target屬性使用target屬性，可以在一個新窗口里打開鏈接文件。站長網(wǎng) 站長學(xué)院/html首頁 示例title屬性使用 title 屬性，可以讓鼠標(biāo)懸停在超鏈接上的時候，顯示該超鏈接的文字注釋。站長網(wǎng) 站長學(xué)院網(wǎng)站 如果希望注釋多行顯示，可以使用作為換行符。站長網(wǎng) 站長學(xué)院網(wǎng)站 示例name屬性使用name屬性，可以跳轉(zhuǎn)到一個文件的指定部位。使用name屬性，要設(shè)置一對。一是設(shè)定name的名稱，二是設(shè)定一個href指向這個name：參見第一章 第一章 示例name屬性通常用于創(chuàng)建一個大文件的章節(jié)目錄(table of contents)。每個章節(jié)都建立一個鏈接，放在文件的開始處，每個章節(jié)的開頭都設(shè)置Name屬性。當(dāng)用戶點擊某個章節(jié)的鏈接時，這個章節(jié)的內(nèi)容就顯示在最上面。如果瀏覽器不能找到Name指定的部分，則顯示文章開頭，不報錯。鏈接到email地址在網(wǎng)站中，你經(jīng)常會看到“聯(lián)系我們”的鏈接，一點擊這個鏈接，就會觸發(fā)你的郵件客戶端，比如Outlook Express，然后顯示一個新建mail的窗口。用可以實現(xiàn)這樣的功能。聯(lián)系新浪示例HTML相對路徑(Relative Path)和絕對路徑(Absolute Path)HTML初學(xué)者會經(jīng)常遇到這樣一個問題，如何正確引用一個文件。比如，怎樣在一個HTML網(wǎng)頁中引用另外一個HTML網(wǎng)頁作為超鏈接(hyperlink)？怎樣在一個網(wǎng)頁中插入一張圖片？.(相關(guān)教程：HTML超鏈接；HTML圖片)如果你在引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導(dǎo)致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)。為了避免這些錯誤，正確地引用文件，我們需要學(xué)習(xí)一下HTML路徑。HTML有2種路徑的寫法：相對路徑和絕對路徑。HTML相對路徑(Relative Path)同一個目錄的文件引用如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。我們現(xiàn)在建一個源文件info.html，在info.html里要引用index.html文件作為超鏈接。假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsitesblablaindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html如何表示上級目錄./表示源文件所在目錄的上一級目錄，././表示源文件所在目錄的上上級目錄，以此類推。假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsitesindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsiteswowstoryindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html如何表示下級目錄引用下級目錄的文件，直接寫下級目錄文件的路徑即可。假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsitesblablahtmlindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsitesblablahtmltutorialsindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.htmlHTML絕對路徑(Absolute Path)HTML絕對路徑(absolute path)指帶域名的文件的完整路徑。假設(shè)你注冊了域名/html，并申請了虛擬主機，你的虛擬主機提供商會給你一個目錄，比如www，這個www就是你網(wǎng)站的根目錄。假設(shè)你在www根目錄下放了一個文件index.html，這個文件的絕對路徑就是： /html。假設(shè)你在www根目錄下建了一個目錄叫html_tutorials，然后在該目錄下放了一個文件index.html，這個文件的絕對路徑就是/html/html_tutorials/index.html。你可以將一張圖片作為一個鏈接，點擊這個圖片。如何創(chuàng)建HTML表格HTML表格用表示。一個表格可以分成很多行(row)，用表示；每行又可以分成很多單元格(cell)，用表示。這三個Tag是創(chuàng)建表格最常用的Tag。示例表格所用到的Tag：整個表格開始要用table；每一行開始要用tr；每一單元格開始要用td。只有一行(Row)一列(Column)的表格100一行三列的表格100200300兩行三列的表格100200300400500600表格所用到的Tag：整個表格開始要用table；每一行開始要用tr；每一單元格開始要用td。 只有一行(Row)一列(Column)的表格100一行三列的表格100200300兩行三列的表格100200300400500600border屬性在缺省情況下，如果不設(shè)置表格的邊界，表格是不顯示邊界的。示例：不顯示邊界的表格要顯示表格的邊界，可使用border這個屬性。示例：顯示邊界的表格表格的表頭用來表示表格的表頭，表頭的字是粗體顯示的。示例： 有表頭的表格空的單元格如果表格的單元格之間沒有內(nèi)容，那么這個單元格的邊界是不會被顯示出來的，盡管整個表格已設(shè)置邊界值。要顯示這個單元格的邊界，可以插入一個 空格符。示例更多示例有標(biāo)題的表格這個示例演示如何用在一個表格上加上標(biāo)題。包含多列或多行的單元格這個示例演示如何用colspan，rowspan設(shè)置多列或者多行的單元格。單元格里的內(nèi)容這個例子演示單元格里面的內(nèi)容。單元格的內(nèi)容可以是文字，圖片，超鏈接，F(xiàn)orm，表格等。單元格內(nèi)容與單元格邊界之間的距離這個示例教你如何用cellpadding這個屬性設(shè)置單元格內(nèi)容與單元格邊界之間的距離。單元格之間的距離這個示例教你如何用cellspacing這個屬性設(shè)置單元格之間的距離設(shè)置表格的背景顏色和背景圖片這個示例演示如何用bgcolor屬性設(shè)置表格的背景顏色，如何用background屬性為表格添加背景圖片。設(shè)置單元格的背景顏色和背景圖片這個示例演示如何用bgcolor屬性設(shè)置單元格的背景顏色，如何用background屬性為單元格添加背景圖片。單元格內(nèi)容的對齊方式這個示例教你如何用align屬性設(shè)置單元格的對齊方式。分?jǐn)?shù)期中考試期末考試芙蓉姐姐250.1050000.20程菊花1000.005000.45周筆暢2000.40500.00黃新300.50800.65HTML框架(Frames)使用框架(Frame)，你可以在瀏覽器窗口同時顯示多個網(wǎng)頁。每個Frame里設(shè)定一個網(wǎng)頁，每個Frame里的網(wǎng)頁相互獨立。Frameset決定如何劃分Frame。有cols屬性和rows屬性。使用cols屬性，表示按列分布Frame；使用rows屬性，表示按行分布Frame。Frame用這個Tag設(shè)定網(wǎng)頁。里有src屬性，src值就是網(wǎng)頁的路徑和文件名。下面的代碼的目的是：將Frameset分成2列，第一列25%，表示第一列的寬度是窗口寬度的25%；第二列75%，表示第一列的寬度是窗口寬度的75%。第一列中顯示a.html，第二列中顯示b.html。 IframeIframe是Inline Frame的意思，用可以將Frame置于一個HTML文件內(nèi)。示例列分Frame這個例子顯示如何在瀏覽器里同時顯示三個網(wǎng)頁，三個網(wǎng)頁是按列分布的。行分Frame這個例子顯示如何在瀏覽器里同時顯示三個網(wǎng)頁，三個網(wǎng)頁是按行分布的?；旌螰rameset這個例子既用到了cols屬性，又用到了rows屬性，將Frame進行靈活分布。Frameset中的noresize屬性使用Noresize屬性可以確保Frame的大小。如果不使用noresize屬性，你可以用鼠標(biāo)移動Frame的邊界，來改變Frame的大小，如果設(shè)置了noresize屬性，就不能移動邊界了。Frame用于導(dǎo)航這個例子演示如何建立一個用于導(dǎo)航的Frame。這個導(dǎo)航Frame包含一個HTML，這個HTML（代碼如下）包含了一個網(wǎng)頁列表。點擊網(wǎng)頁列表中的任何一項，就會在第二個Frame中顯示點擊中的網(wǎng)頁。 humorlist.html 笑話一笑話二笑話三Iframe的使用這個例子顯示如何在一個HTML文件里用iframe嵌入一個網(wǎng)頁 Html元素a表示超鏈接的起始或目的位置。acronym表示取首字母的縮寫詞。address表示特定信息，如地址、簽名、作者、文檔信息。applet在頁面上放置可執(zhí)行內(nèi)容。area定義一個客戶端圖像映射中一個超級鏈接區(qū)域的形狀、坐標(biāo)和關(guān)聯(lián) URL。b指定文本應(yīng)以粗體顯示。base指定一個顯式 URL 用于解析對于外部源的鏈接和引用，如圖像和樣式表。basefont設(shè)置顯示文本時作為默認(rèn)字體的基礎(chǔ)字體值。bdo允許作者為選定文本片斷禁用雙向法則。bgsound使頁面能夠帶有背景聲音或配音。big指定所含文本要以比當(dāng)前字體稍大的字體顯示。blockquote表示文本中的一段引用語。body指明文檔主體的開始和結(jié)束。br插入一個換行符。button指定一個容器，其中所含的 HTML 會被顯示為一個按鈕。caption表格的標(biāo)題，對表格的簡單描述。center將指定文本和圖像居中顯示。cite用斜體顯示標(biāo)明引文。code表示代碼范例。col說明基于列的表格缺省屬性。colgroup說明表格中一列或一組列的缺省屬性。comment表示不可見的注釋。防止所包含的文本或者HTML源代碼被瀏覽器解析和顯示。dd在定義列表中表示定義。定義通常在定義列表中縮進顯示。del表示文本已經(jīng)從文檔中刪除。dfn表示術(shù)語的定義。dir表示目錄列表。div表示一塊可顯示 HTML 的區(qū)域dl表示定義列表。dt在定義列表中表示定義術(shù)語。em強調(diào)文本，通常以斜體顯示。embed允許嵌入任何類型的文檔。fieldset在字段集包含的文本和其它元素外面畫一個方框。font用于說明所包含文本的新字體、大小和顏色。form說明所包含的控件是某個表單的組成部分。frame在 FRAMESET 元素內(nèi)表示單個框架。frameset表示一個框架集，用于組織多個框架和嵌套框架集。head提供了關(guān)于文檔的無序信息集合。hn以標(biāo)題樣式顯示文本。hr畫一條橫線。html表明文檔包含 HTML 元素。i指定文本應(yīng)以斜體顯示。iframe創(chuàng)建內(nèi)嵌漂浮框架。img在文檔中嵌入圖像或視頻片斷。input創(chuàng)建各種表單輸入控件。input type=button創(chuàng)建按鈕控件。input type=checkbox創(chuàng)建復(fù)選框控件。input type=file創(chuàng)建文件上載控件，該控件帶有一個文本框和一個瀏覽按鈕。input type=hidden傳輸關(guān)于客戶/服務(wù)器交互的狀態(tài)信息。input type=image創(chuàng)建一個圖像控件，該控件被點擊后將導(dǎo)致表單立即被提交。input type=password創(chuàng)建與 I