HTML代碼簡介(html入門必看)_第1頁
HTML代碼簡介(html入門必看)_第2頁
HTML代碼簡介(html入門必看)_第3頁
HTML代碼簡介(html入門必看)_第4頁
HTML代碼簡介(html入門必看)_第5頁
已閱讀5頁，還剩53頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML代碼簡介主要內(nèi)容HTML的基本結(jié)構(gòu)HTML語言的語法HTML語言的常用標(biāo)識網(wǎng)站設(shè)計基礎(chǔ)知識HTML部分文檔頭部分正文部分<HTML> <HEAD> <TITLE>歡迎進入HTML世界</TITLE> </HEAD> <BODY> <P>這會是一種很有趣的體驗</P> </BODY></HTML>基本結(jié)構(gòu)：運行結(jié)果HTML文檔的結(jié)構(gòu)HTML標(biāo)記的格式組成：<HTML>...</HTML>HTML標(biāo)記用于標(biāo)記HTML文檔的開始和結(jié)束元素

-標(biāo)識標(biāo)記屬性

-描述標(biāo)記值

-分配給屬性的內(nèi)容<ELEMENTATTRIBUTE=value>HTML開發(fā)

HTML頭部信息(Head)HTML頭部信息(head)里包含關(guān)于所在網(wǎng)頁的信息。頭部信息(head)里的內(nèi)容，主要是被瀏覽器所用，不會顯示在網(wǎng)頁的正文內(nèi)容里。標(biāo)題(title)標(biāo)題(title)是最常用的head信息。它不顯示在HTML網(wǎng)頁正文里，顯示在瀏覽器窗口的標(biāo)題欄里。

HTML頭部信息(Head)示例代碼如下：<html><head><title>HTML中文教程頭部信息</title></head></html>提供關(guān)于網(wǎng)頁的信息<METAname=“Author”content=“GrahamBrowne”><METAname=“KEYWORDS”content=“...”>

<METAname="DESCRIPTION"content="...">對網(wǎng)頁的描述根據(jù)關(guān)鍵詞生成響應(yīng)獲得文檔的作者名稱2.應(yīng)用：關(guān)鍵詞生成響應(yīng)<METAhttp-equiv="Expires"content="Mon,15Sep200314:25:27GMT">Expires:Mon,15Sep200314:25:27GMT設(shè)置網(wǎng)頁的到期值:響應(yīng)

<METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">

頁面顯示中文設(shè)置網(wǎng)頁使用gb2312:

使用META標(biāo)記2-13.自動刷新頁面<METAhttp-equiv="Refresh"content="10;url=http://yourlink">4.使用網(wǎng)頁所使用的編碼<METAhttp-equiv="Content-Type"content="text/html;

charset=gb2312">應(yīng)用：如網(wǎng)上實時新聞報道。應(yīng)用：如在不同瀏覽器上正確顯示中文。使用META標(biāo)記2-2HTML用<h1>到<h6>這幾個Tag來定義正文標(biāo)題，從大到小。每個正文標(biāo)題自成一段。正文標(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>HTML字體(Fonts)在HTML里，可以用font這個元素及其屬性來設(shè)定字體的大小，顏色和字體風(fēng)格。字體大小用字體大小屬性(size)來設(shè)定字體的大小。示例代碼如下：<p><fontsize="2">這一段的字體大小的值是2。</font></p>HTML字體(Fonts)在HTML里，可以用font這個元素及其屬性來設(shè)定字體的大小，顏色和字體風(fēng)格。字體風(fēng)格用face屬性來設(shè)定字體風(fēng)格。示例代碼如下：<p><fontface="arial">這一段的字體風(fēng)格是arial。</font></p>字體顏色用顏色屬性(color)來設(shè)定字體顏色?；驹怼馊玆BG#FF0000#000000#00FF00#FFFFFF#0000FF示例<html><head><title>字體大小fontsize</title></head><body><p><fontsize="1">這段文字的字體大小值為1。</font></p><p><fontsize="2">這段文字的字體大小值為2。</font></p><p><fontsize="3">這段文字的字體大小值為3。</font></p><p><fontsize="4">這段文字的字體大小值為4。</font></p></body></html>

示例<html><head><title>字體風(fēng)格fontface</title></head><body><p>以下第一段用的是arial字體，第二段用的是courier字體，第三段用的是verdana字體。</p><p><fontface="arial">arialcourierverdana</font></p><p><fontface="courier">arialcourierverdana</font></p><p><fontface="verdana">arialcourierverdana</font></p></body></html>

示例<html><head><title>字體顏色fontcolor</title></head><body><p>這段文字用的是缺省的字體顏色。</p><p><fontcolor="#FF0000">這段文字的字體顏色為紅色。</font></p></body></html>

HTML常用文本格式HTML定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下面的示例，你可以了解各種文本格式Tag如何改變HTML文本的顯示。常用文本格式Tag<b></b>粗體bold<i></i>斜體<U></U>下劃線文本格式標(biāo)記黑體字<b></b>斜體字<i></i>下劃線<u></u>加粗<strong></strong>：段落標(biāo)記在HTML里用<p>和</p>劃分段落，<P>可以不成對出現(xiàn)。<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender>

<P>這會是一種很有趣的體驗

<P>

另一個段落元素

</BODY></HTML>段落標(biāo)記<HTML>

<HEAD>

<TITLE>學(xué)習(xí)HTML</TITLE>

</HEAD> <BODYBGCOLOR=lavender> <Palign=center>這會是一種很有趣的體驗</P> </BODY></HTML>

右對齊Left：左對齊Center：居中Right：右對齊使用對齊屬性修飾段落使用對齊屬性修飾標(biāo)題<html><body><h1align="center">這是標(biāo)題</h1><p>上面的標(biāo)題是居中顯示的。</p></body></html>

換行通過使用<br>這個Tag，可以在不新建段落的情況下?lián)Q行。<br>沒有ClosingTag。用<p>換行是個壞習(xí)慣，正確的是使用<br>，即在行末加入<br>。<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>這會是一種很有趣的<BR>體驗

<P>另一個段落元素

</BODY></HTML>換行標(biāo)記HTML注釋在HTML文件里，你可以寫代碼注釋，解釋說明你的代碼，這樣有助于你和他人日后能夠更好地理解你的代碼。注釋可以寫在<!--和-->之間。瀏覽器是忽略注釋的，你不會在HTML正文中看到你的注釋。<!--Thisisacomment-->示例<html><body><!--這是代碼注釋--><p>代碼注釋是不會顯示在網(wǎng)頁里。</p></body></html>

用<hr>這個Tag可以在HTML文件里加一條橫線<hr>沒有結(jié)束標(biāo)簽加入水平線示例<html><body><p>有“中國避暑之都”美譽的林城——貴州省省會貴陽市。</p><hr><p>有“中國避暑之都”美譽的林城——貴州省省會貴陽市。

</p></body></html>HTML利用超鏈接打開鏈接文件HTML用<a></a>來表示超鏈接<a></a>可以指向任何一個文件源：一個HTML網(wǎng)頁，一個圖片，一個影視文件等。用法如下：<ahref="url">鏈接的顯示文字</a>點擊<a></a>當(dāng)中的內(nèi)容，即可打開一個鏈接文件，href屬性則表示這個鏈接文件的路徑。示例<html><body><ahref=“http://">這是一個鏈接</a><br><ahref=“http://”>露之珠站點鏈接</a></body></html＞

HTML利用超鏈接打開鏈接文件鏈接的target屬性使用鏈接的target屬性，可以在一個新窗口里打開鏈接文件。示例<html><body><ahref="http://">這是一個鏈接</a><br><ahref=“http://”target=_blank>露之珠站點鏈接</a></body></html>HTML利用超鏈接打開鏈接文件鏈接的title屬性使用鏈接的title屬性，可以讓鼠標(biāo)懸停在超鏈接上的時候，顯示該超鏈接的文字注釋。示例<html><body><ahref="http://">這是一個鏈接</a><br><ahref=“http://”target=_blanktitle=“露之珠站點鏈接”>露之珠站點鏈接</a></body></html>HTML利用超鏈接打開鏈接文件鏈接到email地址在網(wǎng)站中，經(jīng)常會看到“聯(lián)系我們”的鏈接，一點擊這個鏈接，就會觸發(fā)你的郵件客戶端，比如OutlookExpress，然后顯示一個新建mail的窗口。用<a>可以實現(xiàn)這樣的功能。示例<html><body><ahref="http://">這是一個鏈接</a><br><ahref=“http://”target=_blanktitle=“露之珠站點鏈接”>露之珠站點鏈接</a><ahref="mailto:info@">聯(lián)系新浪</a></body></html>

HTML相對路徑(RelativePath)和絕對路徑(AbsolutePath)HTML有2種路徑的寫法：相對路徑和絕對路徑。HTML相對路徑(RelativePath)同一個目錄的文件引用，如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。<ahref="biaoti.htm">這是一個鏈接</a>HTML相對路徑(RelativePath)和絕對路徑(AbsolutePath)HTML有2種路徑的寫法：相對路徑和絕對路徑。HTML相對路徑(RelativePath)如何表示上級目錄../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。如何表示下級目錄引用下級目錄的文件，直接寫下級目錄文件的路徑即可。HTML絕對路徑(absolutepath)指帶域名的文件的完整路徑。<ahref=“http:///index.php”target=_blank>露之珠站點鏈接</a>HTML絕對路徑(AbsolutePath)鏈接標(biāo)記<ahref=“URL”></a>1、如果目標(biāo)是Email地址：mailto:test@2、如果目標(biāo)是網(wǎng)址:http://3、如果目標(biāo)是本站中的網(wǎng)頁文檔xiajilanmu/wangye.html4、如果目標(biāo)是本站中的文件wenjian/wengdang.doc5、如果目標(biāo)是本頁#6、如果目標(biāo)是錨點#加上錨點的名字用<img>這個Tag可以在HTML里面插入圖片。最基本的語法如下：<img

src=“url”>url表示圖片的路徑和文件名。比如url

可以是“images/logo/blabla_logo01.gif"，也可以是個相對路徑"../images/logo/blabla_logo01.gif"。HTML圖片(Images)示例<html><body><p>圖片：<img

src="t1.jpg"></p></body></html>HTML圖片(Images)圖片align屬性用align屬性，可以改變水平對齊方式(居左、居中、居右)。圖片Valign屬性用valign屬性，可以改變圖片的垂直(居上、居中、居下)對齊方式圖片的大小在缺省狀況下，圖片顯示原有的大小?？梢杂胔eight和width屬性改變圖片的大小。不過圖片的大小一旦被改變，圖片會相應(yīng)放大或縮小，顯示出來的結(jié)果可能會很難看。示例<html><body><img

src="t1.jpg"width=150heigh=50></body></html>HTML背景顏色和背景圖片HTML的<body>有兩個關(guān)于背景的屬性bgcolor屬性bgcolor屬性用來設(shè)置HTML網(wǎng)頁的背景顏色。background屬性background屬性用來設(shè)置HTML網(wǎng)頁的背景圖片。background屬性值就是背景圖片的路徑和文件名，如果背景圖片小于網(wǎng)頁顯示窗口，那么這個背景圖片會自動重復(fù)。示例<html><bodybgcolor="yellow"><h2>看，這個頁面是黃色的。</h2></body></html>示例<html><bodybackground="t1.jpg"><h3>這個網(wǎng)頁有背景圖片！</h3><p>如果圖片比頁面小，圖片會自動重復(fù)。</p></body></html>

如何創(chuàng)建HTML表格表格表格可用于格式化輸出與版面布局表格組成：表格標(biāo)題（可省略）、表頭（可省略）、表行、單元格表格標(biāo)記符：<table>定義表格<caption>定義標(biāo)題<th>定義表頭<tr>定義行<td>定義單元格表格標(biāo)記＜table＞＜tr＞＜td＞單元格內(nèi)容1＜/td＞＜/tr＞＜tr＞＜td＞單元格內(nèi)容2＜/td＞＜/tr＞＜/table＞單元格內(nèi)容1單元格內(nèi)容2表格標(biāo)記表格<table></table>行<tr></tr>單元格<td></td>表頭（通常使用黑體居中）<th></th>表格標(biāo)記表格邊框的寬度<tableborder=#></table>表格邊框與其內(nèi)容間的距離<tablecellpadding=#></table>表格單元格間的距離<tablecellspacing=#></table>設(shè)置表格的寬度，(絕對像素值或文檔總寬度的百分比)<t

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論