HTML基礎(chǔ)教程_第1頁
HTML基礎(chǔ)教程_第2頁
HTML基礎(chǔ)教程_第3頁
HTML基礎(chǔ)教程_第4頁
HTML基礎(chǔ)教程_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、html基礎(chǔ)教程網(wǎng)頁內(nèi)容都是由html元素構(gòu)成的。雖然當(dāng)前可視化編輯工具到處都是，知名的工具包括 frontpage> dreamweaver等，但工具本身存在較多的局限性，有些功能并不能通過工具實(shí) 現(xiàn)出來，這吋就需要編輯html代碼來實(shí)現(xiàn)。先來看一個(gè)簡單的html文件內(nèi)容。!<html>!<head>；!<title> 頁面的標(biāo)題 </title>；!</head>!<body>這是我的第一個(gè)頁面。!</body>k/html>|以工就廷二個(gè)命單的html代材如何看到這個(gè)法面i打開系統(tǒng)自帶的記事本

2、（“開始t日程序附件>一,記爭本）將|：血的代碼復(fù)制粘貼進(jìn)去，之后保存。保存時(shí)文件名填寫成index, htmlo前面的index是文件名稱，這個(gè)可以隨意填寫。后血的.html是文件后綴，讓系統(tǒng)知道這個(gè)文件是一個(gè)網(wǎng)頁文件。找到剛保存的文件，雙擊打開。系統(tǒng)會(huì)自動(dòng)用瀏覽器打開這個(gè)頁面。這時(shí)就可以看到剛剛保 存的內(nèi)容了。瀏覽器的標(biāo)題顯示的是代碼中<title></title>中填寫的內(nèi)容。而瀏覽器顯示的內(nèi)容 則是<body></body>中填寫的內(nèi)容。1. html構(gòu)成網(wǎng)頁主要分3個(gè)部分構(gòu)成。主要包扌亞<html></html&

3、gt;這是告訴瀏覽器，這是一個(gè)網(wǎng)頁。固定在代碼中的頂部和底部。 <head></head>這是用于告訴瀏覽一些相關(guān)網(wǎng)頁的信息，但不顯示在內(nèi)容里血。 <body></body>這是告訴瀏覽器需要顯示的內(nèi)容。2. html標(biāo)簽html山html標(biāo)簽堆積而成。標(biāo)簽則是和 > 擴(kuò)起來的。以上個(gè)例子中我們看到 <html></html>, <head></head>, <title></title>均是標(biāo)簽。每個(gè)標(biāo)簽都有口己的含義，標(biāo)簽z間也可嵌套，但必須相互對應(yīng)。正確的嵌套 &

4、lt;head><titlex/title></head>不正確的嵌套 <head><title></headx/title>下而介紹一些常用的標(biāo)簽。標(biāo)題 <hl>"<h6>這個(gè)標(biāo)簽川于做文章標(biāo)題，總共有6個(gè)，人小不同。<html><head><title> 標(biāo)題演示 </title></head><body>! vhl>這個(gè)是hl標(biāo)題</hl>| vh2>這個(gè)是h2標(biāo)題</h2>；vh3

5、>這個(gè)是h3標(biāo)題</h3>vh4>這個(gè)是h4標(biāo)題</h4>i vh5>這個(gè)是h5標(biāo)題</h5>! vh6>這個(gè)是h6標(biāo)題</h6></body>i </html>以上是各個(gè)標(biāo)題的演示，可以將代碼保存成一個(gè)html文件，看看效杲。段落5>段落標(biāo)簽對以用于文章段落分段，段落z間有明顯空行。<html><headxtitle> 段落演示 </titlex/head>'<hl>段落演示</hl>iii；vp>段落1段落是構(gòu)成文章

6、的基本單位，具有換行另起的明顯標(biāo)志。通過設(shè)段； ；使文章有行有止，在讀者視覺上形成更加醒id明晰的印彖,便丁讀者閱讀、理； i解和回味，也有利于作者條理清楚的表達(dá)內(nèi)容。</p>；! <p>段落2段落是構(gòu)成文章的基本單位，具有換行另起的明顯標(biāo)志。通過設(shè)段； i丨!使文章有行有1二，在讀者視覺上形成更加醒目明晰的卬象，便于讀者閱讀、理丨 |i；解和回味，也有利于作者條理清楚的表達(dá)內(nèi)容。</p>；i </body>|i </html>|!i上面的代碼綜合了標(biāo)題標(biāo)簽，組成了一個(gè)文章。換行<br>文章遇到需要分句換行的時(shí)候，使用這個(gè)

7、標(biāo)簽。注意：這個(gè)標(biāo)簽是獨(dú)立的它只有一個(gè)<br>并不需要對應(yīng)</br>o html文件中存在一些 標(biāo)簽只有獨(dú)立的一個(gè)，他們沒有內(nèi)容，只是一個(gè)展示方式而已。依舊使用上而的例子，我們把文章進(jìn)行分行。<html>；<headxtitle>換行演示v/titlex/head>i| <body>；vhl>換行演示</hl>!；vp>段落lvbrxbr>段落是構(gòu)成文章的基本單位，具有換行另起的明顯標(biāo)志。 :vbr>通過設(shè)段使文章有行有止，在讀者鋰覺上形成更加醒目明晰的卬彖，便于 :讀者閱讀、理解和冋味，也有

8、利于作者條理清楚的表達(dá)內(nèi)容。</p>；'</body></html> 通過上而的例子可以看到，br>所在位置己經(jīng)換行。連續(xù)使用br>則會(huì)出現(xiàn)空口行。這 是沒有內(nèi)容的情況下?lián)Q行。通過上血幾個(gè)例子，忖前初步也應(yīng)該知道了 html標(biāo)簽如何使用。下面就給大家常用的 標(biāo)簽列表。可以逐一寫進(jìn)html看看效果。標(biāo)簽名稱標(biāo)簽格式代碼使用粗體<b><b></b><b>加粗文字/b>斜體<i><i></i>i斜體文字/i>下劃線<u><u>

9、</u><u>帶下劃線的文字/u>刪除線s><s></s><s>帶刪除線的文字/s>上標(biāo)<sup><sup></sup>領(lǐng)克特 <sup>tm</sup>下標(biāo)<sub><sub></sub>領(lǐng)克特<sub>. inc</sub>以上是一些在文章中比較常用的無屈性標(biāo)簽。更多的標(biāo)簽可以通過，下而的地址查看。3. html標(biāo)簽屬性標(biāo)簽本身有口己的格式，也有些標(biāo)簽支持格式定制，就是標(biāo)簽的屬性了。在第2部分中

10、，看到了b>,hl>籌標(biāo)簽可以控制字體的人小，形狀。那么卜而這個(gè)標(biāo)簽 可以控制字體的人小和顏色。文字設(shè)置<font>文字設(shè)置標(biāo)簽可以設(shè)置文字大小和文字的顏色。ii:<html>_i|<headxtitle>字體設(shè)置演75</titlex/head><body>ii<font size="7">這是 7 號(hào)字</fontxbr>!i<font size="32">這是 32 號(hào)字v/fontxbr>； <font color="

11、red,>這是紅色字v/font><br><font color="6" color="red">這是紅色 6 號(hào)字</font>|i<font color="red">這是vb>紅色v/b>字v/fontxbr>ii,ii </body> </html>；ii將上而代碼保存后運(yùn)行，注意這里而的雙引號(hào)必須是英文的。山于word原因拷貝過去 可能是屮文的雙引號(hào)，這里要修改一下。運(yùn)行后會(huì)看到7號(hào)和32號(hào)文字人小一樣。這個(gè)是<font

12、>標(biāo)簽的一個(gè)限制。size屬性的最小值是-7,最大值是7所以超過的部分都按照最后的大小計(jì)算。而color是設(shè)置顏色，可以用網(wǎng)頁的設(shè)置方式#ffoooo這個(gè)是16進(jìn)制的顏色衣。也口j 以川英文，#ffoooo就是英文red都是紅色。size , color,都是<font>的屬性可以一同設(shè)置。<font>沒有加粗，那么紅色乂加粗怎么做，代碼屮最肩一行就是紅色加粗的。帶屬性的標(biāo)簽有很多，下面我們再看看鏈接。鏈接標(biāo)簽a>連接標(biāo)簽，就是我們網(wǎng)頁經(jīng)常見到的，點(diǎn)擊文字跳轉(zhuǎn)頁血的功能。也是必不對少的標(biāo)簽 之一。ii<html><headxtitle>

13、;鏈接演示v/title></head>! <body>!點(diǎn)擊這里vahref="h target="_blank">去tf度v/a>!</body>；</html>；ii以上代碼是一個(gè)連接，點(diǎn)擊后彈出一個(gè)新窗口打開百度。代碼中鏈接標(biāo)簽用了2個(gè)屬性。href指定打開的頁血，如果目標(biāo)頁血屈于其他網(wǎng)站則需要加入http:/不然就會(huì)開打本 地的文件。target指定打開的方式,如果不設(shè)置這個(gè)屬性則默認(rèn),自身跳轉(zhuǎn),如果指定.blank則 在新窗口打開。很多標(biāo)簽都口帶一些屬性。這些大家都對以上網(wǎng)找找標(biāo)簽大全類

14、的資料杳看相應(yīng)的標(biāo)簽 使用方式和它木身白帶的屬性。i i i i i i i i i i i i i i i i下面看看z前熟悉的hi自帶的位置屈性。<html><headxtitle> 字體設(shè)置演示 </titlex/head><body>；<hl align'center這是hl自帶的居中屬性</hl>i <centerxhl>使丿ij居屮標(biāo)簽讓 hl 居屮</hlx/center>ii </body></html>上而的例子可以看到，hl設(shè)置了 align屬性后，位置

15、發(fā)生了變化。 而使用<center>居中標(biāo)簽也可以讓內(nèi)容進(jìn)行居中。當(dāng)需要多個(gè)內(nèi)容居中的時(shí)候，可以使用<center>o4. html列表列表標(biāo)簽在網(wǎng)頁中也是常見的標(biāo)簽。他們可以簡化許多的代碼達(dá)到需要的效果。 包括 無序列表ul> ,有序列表01> ,定義列表<dt>o下血來看看區(qū)別和如何使用。r；<html>| <head><title>列表演示v/title></head>i| <body>iii；<u卜無序列表ivli>列表項(xiàng) lv/li>!vli>列表

16、項(xiàng) 2</li>；</ul>i vo卜有序列表：vli> 列表項(xiàng) 1</ii>ivli>列表項(xiàng) 2</li>；</ol>iii! <ol type="a">有序列表ivli> 列表項(xiàng) 1</ii>ivli>列表項(xiàng) 2</li>i </ol>iiii <dl>iivdt>列表 l</dt>ivdd> 列表項(xiàng) </dd>ivdd> 列表項(xiàng) </dd>ivdt>列表 2</

17、dt>ivdd> 列表項(xiàng) v/dd>ivdd> 列表項(xiàng) v/dd>:</dl>iiii| </body>| </html>上面的代碼可以看到不同的列表形式，其中有序列表01支持多種列表類型。 其中不填寫屬性type則默認(rèn)數(shù)字。可選值有：a小寫字母a人寫字母1小寫羅馬字母t大寫羅馬字母列表也可以進(jìn)行多重恢套?？聪孪旅娴拇a:i| <html>| <head><title>列衣演示</title></head>! <body>! <u卜無序列表!vli&g

18、t;列表項(xiàng) lv/li>!<li>有序的i<ol>ivli> 列表項(xiàng) v/li>i<li> 列表項(xiàng) v/li>i<li> 列表項(xiàng) v/li>i</ol>i</li>ivli>列表項(xiàng)2</li>ivli>列表項(xiàng)3</li>i </ul>ii </body>ii </html>卜而的代碼可以看多一個(gè)多重列表。列表可用于目錄等功能。5. html表單衣單是網(wǎng)站互動(dòng)必不口j少的。有了表單，用戶才可以填寫提交信息進(jìn)行互動(dòng)。互動(dòng)并不

19、是單靠html就能做到的。必須配合動(dòng)態(tài)的服務(wù)器語言，就是所謂的php, asp等。那么如何創(chuàng)建一個(gè)表單，看下面代碼。i<html>ii vhead><title>表單演示</titlex/head>i <body>i<form action=nlogin.php" method'post"i用戶名：vinput type=ntexth name=uusername”i密碼：vinput type="password"name="password">ii<i

20、nput type=nsubmith name=,lloginn vrue登錄,f></form>ii </body>ii </html>ii茴而麗贏二不裔肺而義車:是我們常見的用戶登錄衣單。衣單的內(nèi)容存在于<form>與</化“>標(biāo)簽，表示這中間的 填寫項(xiàng)為這個(gè)表單關(guān)聯(lián)。當(dāng)用戶點(diǎn)擊登錄的時(shí)候，這個(gè)表單內(nèi)的所有項(xiàng)都會(huì)被提交。<form>必須的屬性有*2個(gè)：action表單提交tl標(biāo)頁面，如果為空則默認(rèn)捉交到本頁method提交方式,可選get, post兩個(gè) get則是將內(nèi)容通過url傳遞 post則將內(nèi)容隱藏提交，

21、相對比較安全。<input）是表單項(xiàng),包含如下屬性type衣單項(xiàng)類型可選值： text輸入框 password密碼輸入框 hidden隱藏域 radio單選域 checkbox復(fù)選框 reset重置表單 submit提交表單name名稱value默認(rèn)值其中要注意的有兩個(gè)，hidden, radioohidden添加后，在頁血中并不會(huì)看到，但提交表單時(shí)候，會(huì)包含這個(gè)值。 radio 選，需要注意的，只有name相同之下才會(huì)發(fā)生單選的情況。<html><body><form action二”"method=hpost,>:正確的單選：；<i

22、nput type-radio” name=”dxl“ value="l">單選 1；<input type'radio" name=,dxln value=n2">單選 2iiii<brxbr>iii;不正確的單選：!<input type="radio" name="dx3" value="l">單選 1i<input type'radio" name="dx4" value=',2&quo

23、t;>單選 2! </form>! </body>i </html>i這個(gè)例子可以看到，如果單選radio name屬性一樣的時(shí)候，可以單選。 如果name屬性不一樣，則無法單選。6. html表格html表格是html中比較重耍的部分，表格可以用來布局網(wǎng)頁，也可以用來展現(xiàn)內(nèi)容。r；<html>vheadxtitle> 表格演示 v/titlex/head>i<body>| <table border="l">|<tr>ivtd> 廣告主 v/td>|vtd&g

24、t; 訂單號(hào) v/td>i</tr>|<tr>!<td>da ngda ngv/td>!<td>123456</td>!</tr>!<tr>!<td>joyo</td>i<td>123456</td>!</tr>i </table>i </body>i </html>上而的代碼就是一個(gè)簡單的表格。代碼中為方便看到表格的樣子,在table中加入了 border屬性。設(shè)置為1則表示邊 框大小為lo綜合以前的代

25、碼在代碼中對以看到表格是用<table>和/table來表示的。表格中行是<tr></tr>,單元格是<td></td>o而內(nèi)容必須放在單元格內(nèi)，才能顯示正常。 否則顯示在表格外。再來看一下表格的高級(jí)應(yīng)川。r _ <html><headxtitle> 表格演示 </titlex/head>；<body>i <table border="l" align="center">；<tr>|<td colspan="

26、2" align="center">訂單列表v/td>；</tr>；<tr>ivtd>廣告主 v/td>!vtd> 訂單號(hào) v/td>i</tr>!<tr>!<td>da ngdan g</td>i<td>123456</td>i</tr><tr>i!<td>joyo</td>i<td>123456</td>i</tr>i </table>

27、iii<table border二”1” align="center">i<tr>!<td colspan="2" align="center">商品信息v/td>i</tr>i<tr>i；<td rowspan="3"><img src="7*0/20095107-l_t.jpg" />；</td>i</tr>i；<tr>；vtd>商品名稱：xx于表v/td>

28、;i</tr>；<tr>；vtd>商品介紹：一塊表v/td>i</tr>| </table>i</body>i </html>在上而的代碼中，我們看到了 2個(gè)相對復(fù)雜很多的表格。 其實(shí)是運(yùn)用了單元格合并的做法。rowspan縱向合并colspan橫向合并橫向合并的時(shí)候，當(dāng)前行就可以減少單元格?？v向合并的時(shí)候，在當(dāng)前行往下的行都要減少相應(yīng)位置的單元格。代碼中述可以看到，table, td都使用了 align屬性。這也是它們本身自帶的屬性。 table中align是本身針對網(wǎng)頁的位置。td中align是針對本身內(nèi)容

29、的位置。這里血用到了img,圖片標(biāo)簽。imgs于獨(dú)立標(biāo)簽并不需要/img結(jié)尾。 代碼中我們只用到了 img的一個(gè)必要屈性，就是src，它是用于設(shè)置圖片地址的。 除了 src, img還有下而兒個(gè)屬性：wi dth是指定圖片的寬度，如果不設(shè)置則為默認(rèn)height指定圖片高度，沒有設(shè)置則為默認(rèn)border設(shè)置圖片邊框7. html 框架<iframe>html框架，一般網(wǎng)頁屮使川的比較少。是一個(gè)比較獨(dú)特的標(biāo)簽，可以在網(wǎng)頁屮嵌入另外 一個(gè)網(wǎng)頁。沒有內(nèi)容，但是確有結(jié)尾標(biāo)簽。r；<html>；<headxtitle>ftt架演示</titlex/head>

30、i| <body>；本站vbr>|<iframe src二"" frameborder="l" width="500" height="300"x/iframe>；<iframe src二"" frameborder="0h width="500" height="500"x/iframe> </body>；</html>以上是一個(gè)簡單的框架代碼。運(yùn)行后可以看見頁面中l(wèi)li現(xiàn)了除了本身外還有兩個(gè)網(wǎng)站。 其中www. linktech, cn看起來和頁血融合到了一塊。這個(gè)就是frameborder的作用。src框架目標(biāo)頁而fr

溫馨提示

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

最新文檔

評論

0/150

提交評論