如何正確使用html代碼

時(shí)間：2024-10-01 20:07:13 HTML DOM 我要投稿

相關(guān)推薦

如何正確使用html代碼

　　如何使用html代碼

　　如果你正在學(xué)習(xí)網(wǎng)頁(yè)制作，就一定會(huì)跟HTML打交道。雖然有很多編輯工具可以簡(jiǎn)化操作，避開(kāi)復(fù)雜的網(wǎng)頁(yè)代碼，但是想要成為一名真正的網(wǎng)頁(yè)設(shè)計(jì)師，學(xué)好HTML、看懂網(wǎng)頁(yè)代碼才是邁向成功的第一步。

　　HTML，中文譯為超文本標(biāo)記語(yǔ)言。簡(jiǎn)單理解為某些字句加上標(biāo)志的語(yǔ)言，從而實(shí)現(xiàn)預(yù)期的特定效果。網(wǎng)頁(yè)正是由這種HTML語(yǔ)言所編寫(xiě)出來(lái)的。作為一套標(biāo)記語(yǔ)言，基本上只要明白各種標(biāo)記的用法就算學(xué)會(huì)了HTML。

　　HTML的語(yǔ)法格式分為嵌套與非嵌套兩類，嵌套格式為＜標(biāo)記＞...＜/標(biāo)記＞，非嵌套只為＜標(biāo)記＞。此外，根據(jù)標(biāo)記的不同，有的標(biāo)記附帶有屬性參數(shù)，則表示為＜標(biāo)記屬性="參數(shù)值"＞，根據(jù)個(gè)人需要，可添加或去掉相應(yīng)的屬性標(biāo)記。

　　一、基本框架

　　如同人一樣，網(wǎng)頁(yè)也包括了“頭部”和“身體”，如圖就是標(biāo)記符號(hào)。

　�。糷ead＞標(biāo)記內(nèi)包含著諸如網(wǎng)頁(yè)標(biāo)題、語(yǔ)言編碼、網(wǎng)頁(yè)描述等基本信息，而平時(shí)我們真正見(jiàn)到的網(wǎng)頁(yè)內(nèi)容均放在＜body＞標(biāo)記內(nèi)�，F(xiàn)在先介紹一下＜head＞里的基本信息。

　　網(wǎng)頁(yè)標(biāo)題(標(biāo)記格式為＜title＞＜/title＞)

　　創(chuàng)建網(wǎng)頁(yè)標(biāo)題文字：＜title＞標(biāo)題＜/title＞ //此處書(shū)寫(xiě)的文字會(huì)顯示在IE的標(biāo)題欄上。

　　網(wǎng)頁(yè)文檔信息(標(biāo)記格式為＜meta＞)

　　描述網(wǎng)頁(yè)內(nèi)容類型：＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞ //該頁(yè)面為T(mén)XT文本或HTML格式，語(yǔ)言編碼方式為GB2312(即簡(jiǎn)體中文)。

　　描述網(wǎng)頁(yè)的關(guān)鍵字信息：＜meta name="keywords" content="這里是關(guān)鍵字"＞

　　對(duì)網(wǎng)頁(yè)的詳細(xì)描述：＜meta name="description" content="這里是對(duì)該網(wǎng)頁(yè)的介紹"＞

　　刷新網(wǎng)頁(yè)：＜meta http-equiv="refresh" content="5;URL=xxx.htm"＞ //5秒種后刷新，并鏈接到xxx.htm。

　　二、組成要素

　　無(wú)論網(wǎng)頁(yè)如何千變?nèi)f化，構(gòu)成一個(gè)網(wǎng)頁(yè)內(nèi)容的最基本要素大體只有五種，即文字、圖片、表格、超鏈接和表單控件，所以下面將圍繞著這五個(gè)要素逐一列舉介紹。

　　文字(標(biāo)記格式為＜font＞＜/font＞)

　　指定文字字體：＜font face="宋體"＞宋體文字＜/font＞

　　指定文字大小：＜font size="3"＞3號(hào)文字＜/font＞

　　指定文字顏色：＜font color="#FF0000"＞紅色文字＜/font＞ //網(wǎng)頁(yè)顏色采用16位編碼，因此#FF0000表現(xiàn)為紅色。大家可以查閱相關(guān)資料了解其他顏色的編碼。

　　圖片(標(biāo)記格式為＜img＞)

　　＜img src="images/pic.jpg" width="400" height="300" border="2" align="center"＞// src指定為路徑地址，width為寬度，height為高度，border為邊框大小，align為橫向位置。

　　表格(標(biāo)記格式為＜table＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞)

　�。紅able width="400" height="300" border="1" align="center" cellpadding="2" cellspacing="2" bgcolor="#FF0000"＞＜tr＞＜td＞此處添加文字或圖片等＜/td＞＜/tr＞＜/table＞// width、height、border、align與以上的例子作用一樣，cellpadding為邊框與單元格的間距，cellspacing為單元格之間的間距，bgcolor為表格背景色。

　　以上所介紹的.元素都是只存在當(dāng)前頁(yè)中，而網(wǎng)頁(yè)超鏈接的出現(xiàn)大大改變了人們的瀏覽習(xí)慣，可根據(jù)自己喜好，點(diǎn)擊到相關(guān)鏈接查看網(wǎng)頁(yè)信息。

　　超鏈接(標(biāo)記格式為＜a＞＜/a＞)

　�。糰 href="xxx.htm" title="提示文字"＞鏈接文字或圖片＜/a＞ //href為被點(diǎn)擊后的鏈接頁(yè)，title為鼠標(biāo)懸停在鏈接文字或圖片上后出現(xiàn)的提示文字。

　　表單控件(標(biāo)記符號(hào)為＜input＞、＜textarea＞＜/textarea＞、＜select＞＜/select＞)

　　表單控件實(shí)現(xiàn)了人與網(wǎng)頁(yè)的交互，像大家常去的論壇、購(gòu)物站點(diǎn)等都有它的“身影”。

　　文本框：＜input type="text" value="這是文本框"＞ //value為該控件的值，以下每個(gè)表單控件均可設(shè)定，不設(shè)默認(rèn)為空

　　密碼框：＜input type="password"＞

　　單選框：＜input type="radio"＞

　　復(fù)選框：＜input type="check"＞

　　提交按鈕：＜input type="submit"＞

　　重置按鈕：＜input type="reset"＞

　　隱藏區(qū)域：＜input type="hidden"＞