網(wǎng)頁制作HTML代碼簡介課件

HTML開發(fā)HTML標(biāo)記的格式組成：<HTML<...</HTML<HTML標(biāo)記用于標(biāo)記HTML文檔的開始和結(jié)束元素-標(biāo)識標(biāo)記屬性-描述標(biāo)記值-分配給屬性的內(nèi)容<ELEMENTATTRIBUTE=value<HTML文檔的結(jié)構(gòu)HTML部分文檔頭部分正文部分<HTML<<HEAD<<TITLE<歡迎進(jìn)入HTML世界</TITLE<</HEAD<<BODY<<P<這會是一種很有趣的體驗</P<</BODY<</HTML<基本結(jié)構(gòu)：運行結(jié)果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<<title<HTML中文教程頭部信息</title<</head<</html<

正文標(biāo)題

HTML用<h1<到<h6<這幾個Tag來定義正文標(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里用<p<和</p<劃分段落,<P<可以不成對出現(xiàn)。段落標(biāo)記<HTML<<HEAD<<TITLE<歡迎使用HTML</TITLE<</HEAD<<BODYBGCOLOR=lavender<

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

<P<

另一個段落元素

</BODY<</HTML<使用對齊屬性修飾段落<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<。換行標(biāo)記<HTML<<HEAD<<TITLE<歡迎使用HTML</TITLE<</HEAD<<BODYBGCOLOR=lavender<<P<這會是一種很有趣的<BR<體驗

<P<另一個段落元素

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

加入水平線用<hr<這個Tag可以在HTML文件里加一條橫線<Hr<沒有結(jié)束標(biāo)簽<html<<body<<p<村婦想像皇宮的生活：皇后得用金扁擔(dān)挑水吧。</p<<hr<<p<問：誰是世界上最可憐的人？答：炮兵連炊事班戰(zhàn)士！問：為什么？答：戴綠帽還給別人背黑鍋</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="biaoti.htm"<這是一個鏈接</a<<br<<ahref=""<新浪站點鏈接</a<</body<</html＞

鏈接的target屬性使用鏈接的target屬性，可以在一個新窗口里打開鏈接文件。<html<<body<<ahref="biaoti.htm"<這是一個鏈接</a<<br<<ahref=""target=_blank<新浪站點鏈接</a<</body<</html<鏈接的title屬性使用

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

HTML相對路徑(RelativePath)和絕對路徑(AbsolutePath)

HTML有2種路徑的寫法：相對路徑和絕對路徑。HTML相對路徑(RelativePath)同一個目錄的文件引用如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。<ahref="biaoti.htm"<這是一個鏈接</a<如何表示上級目錄../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。如何表示下級目錄引用下級目錄的文件，直接寫下級目錄文件的路徑即可。HTML絕對路徑(AbsolutePath)

HTML絕對路徑(absolutepath)指帶域名的文件的完整路徑。<ahref=“／index.htm"target=_blank<新浪站點鏈接</a<HTML圖片(Images)

用<img<這個Tag可以在HTML里面插入圖片。最基本的語法如下：<imgsrc="url"<url表示圖片的路徑和文件名。比如url可以是images/logo/blabla_logo01.gif，也可以是個相對路徑"../images/logo/blabla_logo01.gif"。<html<<body<<p<圖片：<imgsrc="t1.jpg"<</p<</body<</html<圖片align屬性用align屬性，可以改變水平對齊方式(居左、居中、居右)。用valign屬性，可以改變圖片的垂直(居上、居中、居下)對齊方式圖片的大小在缺省狀況下，圖片顯示原有的大小。你可以用height和width屬性改變圖片的大小。不過圖片的大小一旦被改變，圖片會相應(yīng)放大或縮小，顯示出來的結(jié)果可能會很難看。<html<<body<<imgsrc="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<

HTML表格用<table<表示。一個表格可以分成很多行，用<tr<表示；每行又可以分成很多單元格，用<td<表示。這三個Tag是創(chuàng)建表格最常用的Tag。

如何創(chuàng)建HTML表格

＜html<<body<<tablewidth="150"border="1"<<tr<<td<1</td<<td<2</td<<td<3</td<</tr<<tr<<td<4</td<<td<5</td<<td<6</td<</tr<<tr<<td<7</td<<td<8</td<<td<9</td<</tr<</table<</body<</html<HTML常用文本格式

HTML定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下面的示例，你可以了解各種文本格式Tag如何改變HTML文本的顯示。常用文本格式Tag<b<</b<粗體bold<i<</i<斜體<U<</U<下劃線HTML字體(Fonts)

在HTML里，可以用font這個元素及其屬性來設(shè)定字體的大小，顏色和字體風(fēng)格。字體大小用字體大小屬性(size)來設(shè)定字體的大小。示例代碼如下：<p<<fontsize="2"<這一段的字體大小的值是2。</font<</p<字體風(fēng)格用face屬性來設(shè)定字體風(fēng)格。示例代碼如下：<p<<fontface="arial"<這一段的字體風(fēng)格是arial。</font<</p<字體顏色用顏色屬性(color)來設(shè)定字體顏色。<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表單(F