html入門教程適合初學(xué)者_(dá)第1頁
html入門教程適合初學(xué)者_(dá)第2頁
html入門教程適合初學(xué)者_(dá)第3頁
html入門教程適合初學(xué)者_(dá)第4頁
html入門教程適合初學(xué)者_(dá)第5頁
已閱讀5頁，還剩118頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

PAGE希望可以幫到大家一、HTML基本概念什么是HTML文件？HTML的英文全稱是HypertextMarkedLanguage，中文叫做“超文本標(biāo)記語言”。和一般文本的不同的是，一個HTML文件不僅包含文本內(nèi)容，還包含一些Tag，中文稱“標(biāo)記”。一個HTML文件的后綴名是.htm或者是.html。用文本編輯器就可以編寫HTML文件。這就試寫一個HTML文件吧！打開你的Notepad，新建一個文件，然后拷貝以下代碼到這個新文件，然后將這個文件存成first.html。<html><head><title>Titleofpage</title></head><body>Thisismyfirsthomepage.<b>Thistextisbold</b></body></html>要瀏覽這個first.html文件，雙擊它?；蛘叽蜷_瀏覽器，在File菜單選擇Open，然后選擇這個文件就行了。示例解釋這個文件的第一個Tag是<html>，這個Tag告訴你的瀏覽器這是HTML文件的頭。文件的最后一個Tag是</html>，表示HTML文件到此結(jié)束。在<head>和</head>之間的內(nèi)容，是Head信息。Head信息是不顯示出來的，你在瀏覽器里看不到。但是這并不表示這些信息沒有用處。比如你可以在Head信息里加上一些關(guān)鍵詞，有助于搜索引擎能夠搜索到你的網(wǎng)頁。在<title>和</title>之間的內(nèi)容，是這個文件的標(biāo)題。你可以在瀏覽器最頂端的標(biāo)題欄看到這個標(biāo)題。在<body>和</body>之間的信息，是正文。在<b>和</b>之間的文字，用粗體表示。<b>顧名思義，就是bold的意思。HTML文件看上去和一般文本類似，但是它比一般文本多了Tag，比如<html>，<b>等，通過這些Tag，可以告訴瀏覽器如何顯示這個文件。HTML元素(HTMLElements)HTML元素(HTMLElement)用來標(biāo)記文本，表示文本的內(nèi)容。比如body,

p,title就是HTML元素。

HTML元素用Tag表示，Tag以<開始，以>結(jié)束。Tag通常是成對出現(xiàn)的，比如<body></body>。起始的叫做OpeningTag，結(jié)尾的就叫做ClosingTag。目前HTML的Tag不區(qū)分大小寫的。比如，<HTML>和<html>其實是相同的。HTML元素(HTMLElements)的屬性HTML元素可以擁有屬性。屬性可以擴展HTML元素的能力。比如你可以使用一個bgcolor屬性，使得頁面的背景色成為紅色，就像這樣：<bodybgcolor="red">再比如，你可以使用border這個屬性，將一個表格設(shè)成一個無邊框的表格。如下：<tableborder="0">屬性通常由屬性名和值成對出現(xiàn)，就像這樣：name="value"。上面例子中的bgcolor,border就是name，red和0就是value。屬性值一般用雙引號標(biāo)記起來。屬性通常是附加給HTML的OpeningTag，而不是ClosingTag。二、基礎(chǔ)HTMLTagHTML里，比較基礎(chǔ)的Tag主要用于標(biāo)題，段落和分行。學(xué)習(xí)HTML最好的方法，就是跟著示例學(xué)。正文標(biāo)題這個示例告訴你如何在HTML文件里定義正文標(biāo)題。HTML用<h1>到<h6>這幾個Tag來定義正文標(biāo)題，從大到小。每個正文標(biāo)題自成一段。<h1>Thisisaheading</h1><h2>Thisisaheading</h2><h3>Thisisaheading</h3><h4>Thisisaheading</h4><h5>Thisisaheading</h5><h6>Thisisaheading</h6>段落劃分在HTML里用<p>和</p>劃分段落。<p>Thisisaparagraph</p><p>Thisisanotherparagraph</p>換行通過使用<br>這個Tag，可以在不新建段落的情況下?lián)Q行。<br>沒有ClosingTag。用<p>換行是個壞習(xí)慣，正確的是使用<br>。<p>This<br>isapara<br>graphwithlinebreaks</p>HTML注釋在HTML文件里，你可以寫代碼注釋，解釋說明你的代碼，這樣有助于你和他人日后能夠更好地理解你的代碼。注釋可以寫在<!--和-->之間。瀏覽器是忽略注釋的，你不會在HTML正文中看到你的注釋。<!--Thisisacomment-->一些小建議HTML文件會自動截去多余的空格。不管你加多少空格，都被看做一個空格。一個空行也被看做一個空格。有些Tag能夠?qū)⑽谋咀猿梢欢?，而不需要使?lt;p></p>來分段。比如<h1></h1>之類的標(biāo)題Tag。更多示例這個示例顯示了段落的特性。<html><body><p>這一段在源代碼里包含很多分行，但是瀏覽器忽略這些分行。</p><p>這一段在瀏覽器里包含很多空格，但是瀏覽器忽略多余空格。</p><p>你使用的瀏覽器的窗口大小決定了段落的行數(shù)。如果你改編瀏覽器窗口的大小，段落的行數(shù)會因此改變。</p></body></html>換行這個示例告訴你如何在HTML文件里換行。<html><body><p>要<br>在一段<br>里<br>換行<br>請使用<br>br這個Tag。</p></body></html>正文標(biāo)題這個示例教會你如何在HTML文件里顯示正文標(biāo)題。<html><body><h1>這是1號標(biāo)題</h1><h2>這是2號標(biāo)題</h2><h3>這是3號標(biāo)題</h3><h4>這是4號標(biāo)題</h4><h5>這是5號標(biāo)題</h5><h6>這是6號標(biāo)題</h6></body></html>居中的正文標(biāo)題這個示例告訴你如何將正文標(biāo)題居中顯示。<html><body><h1align="center">這是標(biāo)題</h1><p>上面的標(biāo)題是居中顯示的。</p></body></html>加條橫線這個示例演示了如何在HTML文中加條橫線。<html><body><p>用hr這個Tag可以在HTML文件里加一條橫線。</p><hr><p>村婦想像皇宮的生活：皇后得用金扁擔(dān)挑水吧。</p><hr><p>問：誰是世界上最可憐的人？答：炮兵連炊事班戰(zhàn)士！問：為什么？答：戴綠帽背黑鍋看別人打炮。</p><hr><p>初中某數(shù)學(xué)老師講方程式變換，在講臺上袖子一挽大聲喝道：同學(xué)們注意！我要變形了！……</p></body></html>代碼注釋這個示例演示如何在HTML代碼中加上代碼注釋，這些注釋只顯示在HTML源代碼中，而源代碼最終形成的網(wǎng)頁里是看不到這些注釋的。<html><body><!--這是代碼注釋--><p>代碼注釋是不會顯示在網(wǎng)頁里的。</p></body></html>背景顏色這個示例演示如何改變HTML文件的背景色。<html><bodybgcolor="yellow"><h2>看，這個頁面是黃色的。</h2></body></html>三、Html常用格式HTML定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下面的示例，你可以了解各種文本格式Tag如何改變HTML文本的顯示。常用文本格式TagTagTag說明<b>粗體bold<i>斜體italic<del>文字當(dāng)中劃線表示刪除<ins>文字下劃線表示插入<sub>下標(biāo)<sup>上標(biāo)<blockquote>縮進(jìn)表示引用<pre>保留空格和換行<code>表示計算機代碼，等寬字體示例HTML常用的格式Tag這個示例用了上述Tag，你可以對比一下HTML的顯示結(jié)果。<html><body><p><b>粗體用b表示。</b></p><p><i>斜體用i表示。</i></p><p><del>芙蓉姐姐</del>這個詞當(dāng)中劃線表示刪除。</p><p><ins>想唱就唱</ins>這個詞下劃線插入。</p><p>X<sub>2</sub>其中的2是下標(biāo)</p><p>X<sup>2</sup>其中的2是上標(biāo)</p><p><blockquote>好好學(xué)習(xí)，天天向上。這句話縮進(jìn)表示引用</blockquote></p><pre>這是預(yù)設(shè)(preformatted)文本.在pre這個tag里的文本保留空格和分行。</pre><code>callgetOrders</code><p>用code顯示計算機代碼，code里顯示的字符是等寬字符。</p></body></html>如何看HTML的源代碼在瀏覽器看到的HTML網(wǎng)頁，是瀏覽器解釋HTML源代碼后產(chǎn)生的結(jié)果。要查看這個HTML的源代碼，有兩種方法。一是點擊鼠標(biāo)右鍵，點擊ViewSource(查看源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。利用ViewSource得到網(wǎng)頁的源代碼，你可以由此借鑒一下別人寫得好的地方。不過在你對HTML知識尚少的情況下，看別人復(fù)雜的HTML源代碼，只會讓你頭暈。建議你還是再等等，先掌握一些基礎(chǔ)再說。四、Html特殊字符顯示HTML字符實體(CharacterEntities)有些字符在HTML里有特別的含義，比如小于號<就表示HTMLTag的開始，這個小于號是不顯示在我們最終看到的網(wǎng)頁里的。那如果我們希望在網(wǎng)頁中顯示一個小于號，該怎么辦呢？這就要說到HTML字符實體(HTMLCharacterEntities)了。一個字符實體(CharacterEntity)分成三部分：第一部分是一個&符號，英文叫ampersand；第二部分是實體(Entity)名字或者是#加上實體(Entity)編號；第三部分是一個分號。比如，要顯示小于號，就可以寫<或者<。用實體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是lessthan的意思，但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字。而實體(Entity)編號，各種瀏覽器都能處理。注意：Entity是區(qū)分大小寫的。如何顯示空格通常情況下，HTML會自動截去多余的空格。不管你加多少空格，都被看做一個空格。比如你在兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。為了在網(wǎng)頁中增加空格，你可以使用 表示空格。最常用的字符實體(CharacterEntities)顯示結(jié)果說明EntityNameEntityNumber顯示一個空格  <小于<<>大于>>&&符號&&"雙引號""其他常用的字符實體(CharacterEntities)顯示結(jié)果說明EntityNameEntityNumber?版權(quán)©©?注冊商標(biāo)®®×乘號××÷除號÷÷ISOLatin-1字符集（見附件1）五、HTML的超鏈接先看兩個示例建立一個超鏈接這個示例演示了如何在HTML文件里創(chuàng)建超鏈接。<html><body><p><ahref="../asdocs/html_tutorials/humor02.html">這是一個鏈接</a></p><p><ahref="/html"target=_blank>站長網(wǎng)站長學(xué)院站點鏈接</a></p></body></html>將一個圖片作為一個超鏈接這個示例演示了如何將一個圖片作為一個超鏈接，即點擊一個圖片，可以連接到其它文件。<html><body><p>你可以將一張圖片作為一個鏈接，點擊這個圖片。<ahref="../asdocs/html_tutorials/humor03.html"><imgsrc="../images/html_tutorials/smile.jpg"></a></p></body></html>a和href屬性HTML用<a>來表示超鏈接，英文叫anchor。<a>可以指向任何一個文件源：一個HTML網(wǎng)頁，一個圖片，一個影視文件等。用法如下：<ahref="url">鏈接的顯示文字</a>點擊<a></a>當(dāng)中的內(nèi)容，即可打開一個鏈接文件，href屬性則表示這個鏈接文件的路徑。比如鏈接到/html站點首頁，就可以這樣表示：<ahref="/html">站長網(wǎng)站長學(xué)院/html首頁</a>target屬性使用target屬性，可以在一個新窗口里打開鏈接文件。<ahref="/html"target=_blank>站長網(wǎng)站長學(xué)院/html首頁</a>實例：<html><body><ahref="../asdocs/html_tutorials/humor01.html"target="_blank">一則笑話</a><p>如果你將target的屬性值設(shè)成_blank，你點擊這個鏈接的時候，網(wǎng)頁就會在一個新窗口出現(xiàn)。</p></body></html>title屬性使用

title屬性，可以讓鼠標(biāo)懸停在超鏈接上的時候，顯示該超鏈接的文字注釋。<ahref="/html"title="站長網(wǎng)站長學(xué)院網(wǎng)頁教程與代碼的中文站點">站長網(wǎng)站長學(xué)院網(wǎng)站</a>/html如果希望注釋多行顯示，可以使用 作為換行符。<ahref="/html"title="站長網(wǎng)站長學(xué)院 網(wǎng)頁教程與代碼的中文站點">站長網(wǎng)站長學(xué)院網(wǎng)站</a>實例：<html><body><p><ahref="/html"title="站長網(wǎng)站長學(xué)院網(wǎng)頁教程與代碼的中文站點">站長網(wǎng)站長學(xué)院網(wǎng)站</a></p><p><ahref="/html"title="站長網(wǎng)站長學(xué)院 網(wǎng)頁教程與代碼的中文站點">站長網(wǎng)站長學(xué)院網(wǎng)站</a></p></body></html>name屬性使用name屬性，可以跳轉(zhuǎn)到一個文件的指定部位。使用name屬性，要設(shè)置一對。一是設(shè)定name的名稱，二是設(shè)定一個href指向這個name：<ahref="#C1">參見第一章</a><aname="C1">第一章</a>實例：<html><body><p><ahref="#C9">參見第六章</a></p><p><aname="C1"><h2>第1章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C2"><h2>第2章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C3"><h2>第3章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C4"><h2>第4章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C5"><h2>第5章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C6"><h2>第6章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C7"><h2>第7章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C8"><h2>第8章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p><aname="C9"><h2>第9章</h2></a><p>這是站長網(wǎng)站長學(xué)院/html-網(wǎng)頁教程與代碼的中文站點。</p></body></html>name屬性通常用于創(chuàng)建一個大文件的章節(jié)目錄(tableofcontents)。每個章節(jié)都建立一個鏈接，放在文件的開始處，每個章節(jié)的開頭都設(shè)置Name屬性。當(dāng)用戶點擊某個章節(jié)的鏈接時，這個章節(jié)的內(nèi)容就顯示在最上面。如果瀏覽器不能找到Name指定的部分，則顯示文章開頭，不報錯鏈接到email地址在網(wǎng)站中，你經(jīng)常會看到“聯(lián)系我們”的鏈接，一點擊這個鏈接，就會觸發(fā)你的郵件客戶端，比如OutlookExpress，然后顯示一個新建mail的窗口。用<a>可以實現(xiàn)這樣的功能。<ahref="mailto:info@">聯(lián)系新浪</a>實例：<html><body><p>這是一個最簡單的郵箱地址的鏈接：<ahref="mailto:info@">給新浪網(wǎng)站發(fā)信</a></p><p>這個郵箱地址的鏈接寫了subject內(nèi)容：<ahref="mailto:info@?subject=Hello">給新浪網(wǎng)站發(fā)信</a></p><p>這個郵箱地址鏈接寫了to,cc,bcc,subject,body的內(nèi)容：<ahref="mailto:info@?cc=webmaster@&bcc=media@&subject=I%20like%20your%20site&body=真是個好站點！">寫信給新浪</a></p><p><b>注:</b>空格請用%20表示。</p></body></html>六、HTML相對路徑(RelativePath)和絕對路徑(AbsolutePath)HTML初學(xué)者會經(jīng)常遇到這樣一個問題，如何正確引用一個文件。比如，怎樣在一個HTML網(wǎng)頁中引用另外一個HTML網(wǎng)頁作為超鏈接(hyperlink)？怎樣在一個網(wǎng)頁中插入一張圖片？如果你在引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導(dǎo)致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)。為了避免這些錯誤，正確地引用文件，我們需要學(xué)習(xí)一下HTML路徑。HTML有2種路徑的寫法：相對路徑和絕對路徑。HTML相對路徑(RelativePath)同一個目錄的文件引用如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。我們現(xiàn)在建一個源文件info.html，在info.html里要引用index.html文件作為超鏈接。假設(shè)info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html

假設(shè)index.html路徑是：c:\Inetpub\wwwroot\sites\blabla\index.html

在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：<ahref="index.html">index.html</a>如何表示上級目錄../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。假設(shè)info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html

假設(shè)index.html路徑是：c:\Inetpub\wwwroot\sites\index.html

在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：<ahref="../index.html">index.html</a>假設(shè)info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html

假設(shè)index.html路徑是：c:\Inetpub\wwwroot\index.html

在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：<ahref="../../index.html">index.html</a>假設(shè)info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html

假設(shè)index.html路徑是：c:\Inetpub\wwwroot\sites\wowstory\index.html

在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：<ahref="../wowstory/index.html">index.html</a>

如何表示下級目錄引用下級目錄的文件，直接寫下級目錄文件的路徑即可。假設(shè)info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html

假設(shè)index.html路徑是：c:\Inetpub\wwwroot\sites\blabla\html\index.html

在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：<ahref="html/index.html">index.html</a>假設(shè)info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html

假設(shè)index.html路徑是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：<ahref="html/tutorials/index.html">index.html</a>HTML絕對路徑(AbsolutePath)HTML絕對路徑(absolutepath)指帶域名的文件的完整路徑。假設(shè)你注冊了域名/html，并申請了虛擬主機，你的虛擬主機提供商會給你一個目錄，比如www，這個www就是你網(wǎng)站的根目錄。假設(shè)你在www根目錄下放了一個文件index.html，這個文件的絕對路徑就是：/html。假設(shè)你在www根目錄下建了一個目錄叫html_tutorials，然后在該目錄下放了一個文件index.html，這個文件的絕對路徑就是/html/html_tutorials/index.html。七、如何在HTML中創(chuàng)建表格HTML表格用<table>表示。一個表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多單元格(cell)，用<td>表示。這三個Tag是創(chuàng)建表格最常用的Tag。示例<html><body><p>表格所用到的Tag：整個表格開始要用table；每一行開始要用tr；每一單元格開始要用td。</p><h4>只有一行(Row)一列(Column)的表格</h4><tableborder="1"><tr><td>100</td></tr></table><h4>一行三列的表格</h4><tableborder="1"><tr><td>100</td><td>200</td><td>300</td></tr></table><h4>兩行三列的表格</h4><tableborder="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body></html>border屬性在缺省情況下，如果不設(shè)置表格的邊界，表格是不顯示邊界的。示例：不顯示邊界的表格<html><body><h4>缺省情況下，表格沒有邊界。</h4><table><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><h4>表格Border設(shè)為0，也不顯示邊界：</h4><tableborder="0"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body></html>要顯示表格的邊界，可使用border這個屬性。示例：顯示邊界的表格<html><body><h4>表格的邊界值設(shè)為1：</h4><tableborder="1"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>表格的邊界值設(shè)為8，邊界更粗：</h4><tableborder="8"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>表格的邊界值設(shè)為15，邊界更粗：</h4><tableborder="15"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></html>表格的表頭用<th>來表示表格的表頭，表頭的字是粗體顯示的。示例：有表頭的表格<html><body><h4>有表頭的表格：</h4><tableborder="1"><tr><th>姓名</th><th>電話</th><th>傳真</th></tr><tr><td>BillGates</td><td>55577854</td><td>55577855</td></tr></table><h4>豎直方向的表頭：</h4><tableborder="1"><tr><th>姓名</th><td>BillGates</td></tr><tr><th>電話</th><td>55577854</td></tr><tr><th>傳真</th><td>55577855</td></tr></table></body></html>空的單元格如果表格的單元格<td></td>之間沒有內(nèi)容，那么這個單元格的邊界是不會被顯示出來的，盡管整個表格已設(shè)置邊界值。要顯示這個單元格的邊界，可以插入一個 空格符。示例<html><body><tableborder="1"><tr><td>Sometext</td><td>Sometext</td></tr><tr><td></td><td>Sometext</td></tr></table><p>上面的表格中，有一個單元格里是沒有任何內(nèi)容的，這個空的單元格沒有顯示邊界，雖然整個表格設(shè)了邊界值。</p><tableborder="1"><tr><td>Sometext</td><td>Sometext</td></tr><tr><td> </td><td>Sometext</td></tr></table><p>上面的例子，你可以看到，給這個單元格加上一個空格符號之后，單元格的邊界就顯示出來了。</p><p>注意：空格符要用&bsp;表示。 是一個HTML特別字符，參見HTML特別字符(HTMLCharacterEntities)。</p></body></html>更多示例有標(biāo)題的表格這個示例演示如何用<caption>在一個表格上加上標(biāo)題。<html><body><h4>這個表格有標(biāo)題：</h4><tableborder="6"><caption>表格標(biāo)題</caption><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body></html>包含多列或多行的單元格這個示例演示如何用colspan，rowspan設(shè)置多列或者多行的單元格。<html><body><h4>用colpsan屬性，設(shè)置包含多列的單元格：</h4><tableborder="1"><tr><th>姓名</th><thcolspan="2">聯(lián)系方式</th></tr><tr><td>BillGates</td><td>55577854</td><td>55577855</td></tr></table><h4>用rowspan這個屬性，設(shè)置包含多行的單元格：</h4><tableborder="1"><tr><th>姓名</th><td>BillGates</td></tr><tr><throwspan="2">聯(lián)系方式</th><td>55577854</td></tr><tr><td>55577855</td></tr></table></body></html>單元格里的內(nèi)容這個例子演示單元格<td></td>里面的內(nèi)容。單元格的內(nèi)容可以是文字，圖片，超鏈接，F(xiàn)orm，表格等。<html><body><tableborder="1"><tr><td><p>這是一段</p><p>這是另外一段。</p></td><td>這個單元格里包含了一個表格：<tableborder="1"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table></td></tr><tr><td>這個單元格里包含了一個圖片：<imgsrc="../images/html_tutorials/mail.gif"></td><td>HELLO</td></tr></table></body></html>單元格內(nèi)容與單元格邊界之間的距離這個示例教你如何用cellpadding這個屬性設(shè)置單元格內(nèi)容與單元格邊界之間的距離。<html><body><h4>沒有cellpadding的表格：</h4><tableborder="1"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><p>設(shè)置cellpadding屬性，可以改變單元格內(nèi)容和單元格邊界之間的距離。</p><h4>以下是設(shè)置了cellpadding屬性的表格：</h4><tableborder="1"cellpadding="10"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>cellpadding屬性值設(shè)置為30的表格：</h4><tableborder="1"cellpadding="30"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></html>單元格之間的距離這個示例教你如何用cellspacing這個屬性設(shè)置單元格之間的距離<html><body><p>Cellspacing屬性表示單元格之間的距離。</p><h4>如果表格里沒有設(shè)置cellspacing屬性，缺省情況下，cellspacing值為1。</h4><tableborder="1"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>Cellspacing屬性值設(shè)為0的表格：</h4><tableborder="1"cellspacing="0"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>Cellspacing屬性值設(shè)為20的表格：</h4><tableborder="1"cellspacing="20"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></html>設(shè)置表格的背景顏色和背景圖片這個示例演示如何用bgcolor屬性設(shè)置表格的背景顏色，如何用background屬性為表格添加背景圖片。<html><body><h4>給表格設(shè)置背景顏色：</h4><tableborder="1"bgcolor="red"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table><h4>給表格加背景圖片：</h4><tableborder="1"background="../images/html_tutorials/background.gif"><tr><td>第一</td><td>行</td></tr><tr><td>第二</td><td>行</td></tr></table></body></html>設(shè)置單元格的背景顏色和背景圖片這個示例演示如何用bgcolor屬性設(shè)置單元格的背景顏色，如何用background屬性為單元格添加背景圖片。<html><body><h4>單元格背景色：</h4><tableborder="1"><tr><tdbgcolor="red">第一</td><td>行</td></tr><tr><tdbackground="../images/html_tutorials/background.gif">第二</td><td>行</td></tr></table></body></html>單元格內(nèi)容的對齊方式這個示例教你如何用align屬性設(shè)置單元格的對齊方式。<html><body><tablewidth="350"border="1"><tr><thalign="center">分?jǐn)?shù)</th><thalign="center">期中考試</th><thalign="center">期末考試</th></tr><tr><tdalign="left">芙蓉姐姐</td><tdalign="right">250.10</td><tdalign="right">50000.20</td></tr><tr><tdalign="left">程菊花</td><tdalign="right">1000.00</td><tdalign="right">5000.45</td></tr><tr><tdalign="left">周筆暢</td><tdalign="right">2000.40</td><tdalign="right">500.00</td></tr><tr><tdalign="left">黃新</td><tdalign="right">300.50</td><tdalign="right">800.65</td></tr></table></body></html>八、HTML框架(Frames)使用框架(Frame)，你可以在瀏覽器窗口同時顯示多個網(wǎng)頁。每個Frame里設(shè)定一個網(wǎng)頁，每個Frame里的網(wǎng)頁相互獨立。Frameset<frameset></frameset>決定如何劃分Frame。<frameset>有cols屬性和rows屬性。使用cols屬性，表示按列分布Frame；使用rows屬性，表示按行分布Frame。Frame用<frame>這個Tag設(shè)定網(wǎng)頁。<frame>里有src屬性，src值就是網(wǎng)頁的路徑和文件名。下面的代碼的目的是：將Frameset分成2列，第一列25%，表示第一列的寬度是窗口寬度的25%；第二列75%，表示第一列的寬度是窗口寬度的75%。第一列中顯示a.html，第二列中顯示b.html。<framesetcols="25%,75%">

<framesrc="../asdocs/html_tutorials/Frame_a.html">

<framesrc="../asdocs/html_tutorials/Frame_b.html"></frameset>IframeIframe是InlineFrame的意思，用<iframe></iframe>可以將Frame置于一個HTML文件內(nèi)。示例列分Frame這個例子顯示如何在瀏覽器里同時顯示三個網(wǎng)頁，三個網(wǎng)頁是按列分布的。<html><framesetcols="25%,50%,25%"><framesrc="../asdocs/html_tutorials/Frame_a.html"><framesrc="../asdocs/html_tutorials/Frame_b.html"><framesrc="../asdocs/html_tutorials/Frame_c.html"></frameset></html>行分Frame這個例子顯示如何在瀏覽器里同時顯示三個網(wǎng)頁，三個網(wǎng)頁是按行分布的。<html><framesetrows="25%,50%,25%"><framesrc="../asdocs/html_tutorials/Frame_a.html"><framesrc="../asdocs/html_tutorials/Frame_b.html"><framesrc="../asdocs/html_tutorials/Frame_c.html"></frameset></html>混合Frameset這個例子既用到了cols屬性，又用到了rows屬性，將Frame進(jìn)行靈活分布。<html><framesetrows="50%,50%"><framesrc="../asdocs/html_tutorials/Frame_a.html"><framesetcols="25%,75%"><framesrc="../asdocs/html_tutorials/Frame_b.html"><framesrc="../asdocs/html_tutorials/Frame_c.html"></frameset></frameset></html>Frameset中的noresize屬性使用Noresize屬性可以確保Frame的大小。如果不使用noresize屬性，你可以用鼠標(biāo)移動Frame的邊界，來改變Frame的大小，如果設(shè)置了noresize屬性，就不能移動邊界了。<html><framesetrows="50%,50%"><framenoresize="noresize"src="../asdocs/html_tutorials/Frame_a.html"><framesetcols="25%,75%"><framenoresize="noresize"src="../asdocs/html_tutorials/Frame_b.html"><framenoresize="noresize"src="../asdocs/html_tutorials/Frame_c.html"></frameset></frameset></html>Frame用于導(dǎo)航<html><framesetcols="120,*"><framesrc="../asdocs/html_tutorials/framelist.html"><framesrc="../asdocs/html_tutorials/Frame_a.html"name="showframe"></frameset></html>這個例子演示如何建立一個用于導(dǎo)航的Frame。這個導(dǎo)航Frame包含一個HTML，這個HTML（代碼如下）包含了一個網(wǎng)頁列表。點擊網(wǎng)頁列表中的任何一項，就會在第二個Frame中顯示點擊中的網(wǎng)頁。<HTML><HEAD><TITLE>humorlist.html</TITLE></HEAD><BODY><p><ahref="../asdocs/html_tutorials/Frame_a.html"target="showframe">笑話一<a></p><p><ahref="../asdocs/html_tutorials/Frame_b.html"target="showframe">笑話二<a></p><p><ahref="../asdocs/html_tutorials/Frame_c.html"target="showframe">笑話三<a></p></BODY></HTML>Iframe的使用這個例子顯示如何在一個HTML文件里用iframe嵌入一個網(wǎng)頁。<html><body><p>用IFRAME可以在HTML文件里顯示另一個網(wǎng)頁。</p><p>這個HTML文檔中使用IFRAME來顯示另外一個叫Frame_a.html的網(wǎng)頁。</p><iframesrc="../asdocs/html_tutorials/Frame_a.html"></iframe></body></html>九、HTML列表(Lists)HTML有三種列表形式：排序列表(OrderedList)；不排序列表(UnorderedList)；定義列表(DefinitionList)。排序列表(OrderedList)排序列表中，每個列表項前標(biāo)有數(shù)字，表示順序。排序列表由<ol>開始，每個列表項由<li>開始。示例<html><body><h4>一個排序列表(OrderedList)：</h4><ol><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ol></body></html>不排序列表(UnorderedList)不排序列表不用數(shù)字標(biāo)記每個列表項，而采用一個符號標(biāo)志每個列表項，比如圓黑點。不排序列表由<ul>開始，每個列表項由<li>開始。示例<html><body><h4>不排序列表(UnorderedList)：</h4><ul><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ul></body></html>定義列表定義列表通常用于術(shù)語的定義。定義列表由<dl>開始。術(shù)語由<dt>開始，英文意為DefinitionTerm。術(shù)語的解釋說明，由<dd>開始，<dd></dd>里的文字縮進(jìn)顯示。定義列表示例<html><body><h4>定義列表(DefinitionList)：</h4><dl><dt>野生動物</dt><dd>所有非經(jīng)人工飼養(yǎng)而生活于自然環(huán)境下的各種動物。</dd><dt>寵物</dt><dd>指貓、狗以及其它供玩賞、陪伴、領(lǐng)養(yǎng)、飼養(yǎng)的動物，又稱作同伴動物。</dd></dl></body></html>更多示例不同類型(Type)的排序列表這個例子顯示如何用Type屬性設(shè)置排序列表項前的符號。<html><body><h4>排序列表，不設(shè)Type屬性：</h4><ol><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ol><h4>排序列表，Type屬性設(shè)為A：</h4><oltype="A"><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ol><h4>排序列表，Type屬性設(shè)為a：</h4><oltype="a"><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ol><h4>排序列表，Type屬性設(shè)為I：</h4><oltype="I"><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ol><h4>排序列表，Type屬性設(shè)為i：</h4><oltype="i"><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ol></body></html>不同類型(Type)的不排序列表這個例子顯示如何用Type屬性設(shè)置不排序列表項前的符號。<html><body><h4>Type設(shè)為disc的列表，列表項前面的符號是圓黑點：</h4><ultype="disc"><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ul><h4>Type設(shè)為circle的列表，列表項前面的符號是空心圓：</h4><ultype="circle"><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ul><h4>Type設(shè)為square的列表，列表項前面的符號是黑方塊：</h4><ultype="square"><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁課程</li><li>站長網(wǎng)站長學(xué)院之網(wǎng)頁代碼</li><li>站長網(wǎng)站長學(xué)院之魔獸世界</li></ul></body></html>嵌套的列表列表里可以含有子列表。通常用這種嵌套的列表，反映層次較多的內(nèi)容。<html><body><h4>嵌套一層的列表：</h4><ul><li>肉類</li><li>蔬菜<ul><li>番茄</li><li>青菜</li></ul></li><li>酒類</li></ul><h4>嵌套2層的列表：</h4><ul><li>動物<ul><li>兩棲動物</li><li>哺乳動物<ul><li>人</li><li>猩猩</li></ul></li><li>魚類</li></ul></li><li>植物</li></ul></body></html>十、HTML表單(Forms)HTML表單(Form)是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。舉個簡單的例子，一個讓用戶輸入姓名的HTML表單(Form)。示例代碼如下：<formaction="/html/asdocs/html_tutorials/yourname.asp"method="get">請輸入你的姓名：<inputtype="text"name="yourname"><inputtype="submit"value="提交"></form>演示示例<html><head><title>輸入用戶姓名</title></head><body><formaction="/html/asdocs/html_tutorials/yourname.asp"method="get">請輸入你的姓名：<inputtype="text"name="yourname"><inputtype="submit"value="提交"></form></body></html>學(xué)習(xí)HTML表單(Form)最關(guān)鍵要掌握的有三個要點：表單控件(FormControls)ActionMethod先說表單控件(FormControls)，通過HTML表單的各種控件，用戶可以輸入文字信息，或者從選項中選擇，以及做提交的操作。比如上面的例句里，inputtype="text"就是一個表單控件，表示一個單行輸入框。用戶填入表單的信息總是需要程序來進(jìn)行處理，表單里的action就指明了處理表單信息的文件。比如上面例句里的/html/asdocs/html_tutorials/yourname.asp。至于method，表示了發(fā)送表單信息的方式。method有兩個值：get和post。get的方式是將表單控件的name/value信息經(jīng)過編碼之后，通過URL發(fā)送(你可以在地址欄里看到)。而post則將表單的內(nèi)容通過http發(fā)送，你在地址欄看不到表單的提交信息。那什么時候用get，什么時候用post呢？一般是這樣來判斷的，如果只是為取得和顯示數(shù)據(jù)，用get；一旦涉及數(shù)據(jù)的保存和更新，那么建議用post。HTML表單(Form)常用控件(Controls)HTML表單(Form)常用控件有：表單控件(FormContros)說明inputtype="text"單行文本輸入框inputtype="submit"將表單(Form)里的信息提交給表單里action所指向的文件inputtype="checkbox"復(fù)選框inputtype="radio"單選框select下拉框textArea多行文本輸入框inputtype="password"密碼輸入框(輸入的文字用*表示)表單控件(FormControl)：單行文本輸入框(inputtype="text")單行文本輸入框允許用戶輸入一些簡短的單行信息，比如用戶姓名。例句如下：<inputtype="text"name="yourname">演示示例（同上）表單控件(FormControl)：復(fù)選框(inputtype="checkbox")復(fù)選框允許用戶在一組選項里，選擇多個。示例代碼：<inputtype="checkbox"name="fruit"value="apple">蘋果<br><inputtype="checkbox"name="fruit"value="orange">桔子<br><inputtype="checkbox"name="fruit"value="mango">芒果<br>演示示例<html><head><title>選擇</title></head><body>請選擇你喜歡的水果：<br><formaction="/html/asdocs/html_tutorials/choose.asp"method="post"><inputtype="checkbox"name="fruit"value="apple">蘋果<br><inputtype="checkbox"name="fruit"value="orange">桔子<br><inputtype="checkbox"name="fruit"value="mango">芒果<br><inputtype="submit"value="提交"></form></body></html>用checked表示缺省已選的選項。<inputtype="checkbox"name="fruit"value="orange"checked>桔子<br>表單控件(FormControl)：單選框(inputtype="radio")使用單選框，讓用戶在一組選項里只能選擇一個。示例代碼：<inputtype="radio"name="fruit"value="Apple">蘋果<br><inputtype="radio"name="fruit"value="Orange">桔子<br><inputtype="radio"name="fruit"value="Mango">芒果<br>演示示例<html><head><title>選擇</title></head><body>請選擇你最喜歡的水果：<br><formaction="/html/asdocs/html_tutorials/choose.asp"method="post"><inputtype="radio"name="fruit"value="Apple">蘋果<br><inputtype="radio"name="fruit"value="Orange">桔子<br><inputtype="radio"name="fruit"value="Mango">芒果<br><inputtype="submit"value="提交"></form></body></html>用checked表示缺省已選的選項。<inputtype="radio"name="fruit"value="Orange"checked>桔子<br>表單控件(FormControl)：下拉框(select)下拉框(Select)既可以用做單選，也可以用做復(fù)選。單選例句如下：<selectname="fruit">

<optionvalue="apple">蘋果

<optionvalue="orange">桔子

<optionvalue="mango">芒果</select>演示示例<html><body><formaction="/html/asdocs/html_tutorials/choose.asp"method="post">你最喜歡的水果是：<selectname="fruit"><optionvalue="apple">蘋果<optionvalue="orange">桔子<optionvalue="mango">芒果</select><inputtype="submit"value="提交"></form></body></html>如果要變成復(fù)選，加muiltiple即可。用戶用Ctrl來實現(xiàn)多選。例句：<selectname="fruit"multiple>用戶還可以用size屬性來改變下拉框(Select)的大小。<selectname="fruit"size="1"multiple>表單控件(FormControl)：多行輸入框(textarea)多行輸入框(textarea)主要用于輸入較長的文本信息。例句如下：<textareaname="yoursuggest"cols="50"rows="3"></textarea>其中cols表示textarea的寬度，rows表示textarea的高度。演示示例<html><head><title>請?zhí)釋氋F意見</title></head><body><formaction="/html/asdocs/html_tutorials/suggest.asp"method="get">請?zhí)釋氋F意見：<br><textareaname="yoursuggest"cols="50"rows="3"></textarea><br><inputtype="submit"value="提交"></form></body></html>表單控件(FormControl)：密碼輸入框(inputtype="password")密碼輸入框(inputtype="password")主要用于一些保密信息的輸入，比如密碼。因為用戶輸入的時候，顯示的不是輸入的內(nèi)容，而是黑點符號。。例句如下：<inputtype="password"name="yourpw">演示示例<html><head><title>輸入用戶姓名和密碼</title></head><body><formaction="/html/asdocs/html_tutorials/userpw.asp"method="post">請輸入你的姓名：<inputtype="text"name="yourname"><br>請輸入你的密碼：<inputtype="password"name="yourpw"><br><inputtype="submit"value="提交"></form></body></html>表單控件(FormControl)：提交(inputtype="submit")通過提交(inputtype=submit)可以將表單(Form)里的信息提交給表單里action所指向的文件。例句如下：<inputtype="submit"value="提交">演示示例（同inputtype=”text”示例）表單控件(FormControl)：圖片提交(inputtype="image")inputtype=image相當(dāng)于inputtype=submit，不同的是，inputtype=image以一個圖片作為表單的提交按鈕，其中src屬性表示圖片的路徑。<inputtype="image"src="images/icons/go.gif"alt="提交"NAME="imgsubmit">演示示例<html><head><title>輸入用戶姓名</title></head><body><formaction="/html/asdocs/html_tutorials/yourname.asp"method="get">請輸入你的姓名：<inputtype="text"name="yourname"><br><inputtype="image"src="images/icons/go.gif"alt="提交"NAME="imagesubmit"></form></body></html>十一、HTML圖片(Images)用<img>這個Tag可以在HTML里面插入圖片。最基本的語法如下：<imgsrc="url">url表示圖片的路徑和文件名。比如url可以是images/logo/blabla_logo01.gif，也可以是個相對路徑"../images/logo/blabla_logo01.gif"。示例<html><body><p>站長網(wǎng)站長學(xué)院Logo圖片：<imgsrc="../images/html_tutorials/blabla_logo.gif"></p></body></html>圖片alt屬性<img>中有一個alt屬性，英文叫alternatetext。例句如下：<imgsrc="../images/html_tutorials/smile.jpg"alt="smileface">假使瀏覽器沒有載入圖片的功能，瀏覽器就會轉(zhuǎn)而顯示Alt屬性的值。其實，現(xiàn)在大多數(shù)瀏覽器都支持圖片載入。在此介紹Alt屬性，是因為它的另外一個重要功能。目前搜索引擎抓取工具無法識別圖像中所含的文字，所以用ALT屬性寫上圖片的說明，便于搜索引擎抓取你網(wǎng)頁的內(nèi)容。示例<html><body><p>將鼠標(biāo)停留在圖片上，你可以看到Alt屬性里寫的內(nèi)容。</p><i

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論