關(guān)于HTML 30分鐘入門教程
運(yùn)行下面的代碼就可以了
{text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} .code { border:solid 1px gray; background-color:#eee} .name { font-weight:bold } dl {margin-left:20px} dt {font-weight:bold} .trans {color:red}
本文目標(biāo)
30分鐘內(nèi)讓你明白HTML是什么,并對(duì)它有一些基本的了解。一旦入門后,你可以從網(wǎng)上找到更多更詳細(xì)的資料來(lái)繼續(xù)學(xué)習(xí)。
什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本標(biāo)記語(yǔ)言)的縮寫,它規(guī)定了自己的語(yǔ)法規(guī)則,用來(lái)表示比"文本"更豐富的意義,比如圖片,表格,鏈接等。瀏覽器(IE,FireFox等)軟件知道HTML語(yǔ)言的語(yǔ)法,可以用來(lái)查看HTML文檔。目前互聯(lián)網(wǎng)上的絕大部分網(wǎng)頁(yè)都是使用HTML編寫的。
HTML是什么樣的
簡(jiǎn)單地來(lái)說(shuō),HTML的語(yǔ)法就是給文本加上表明文本含義的標(biāo)簽(Tag),讓用戶(人或程序)能對(duì)文本得到更好的理解。
下面是一個(gè)最簡(jiǎn)單的HTML文檔:
歡迎訪問(wèn)Unibetter大學(xué)生社區(qū)!
所有的HTML文檔都應(yīng)該有一個(gè)標(biāo)簽,標(biāo)簽可以包含兩個(gè)部分:和。
標(biāo)簽用于包含整個(gè)文檔的一般信息,比如文檔的標(biāo)題(
標(biāo)簽用于表示鏈接,在瀏覽器(如IE,Firefox等)中查看HTML文檔時(shí),點(diǎn)擊標(biāo)簽括起來(lái)的內(nèi)容時(shí),通常會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面。這個(gè)要跳轉(zhuǎn)到的頁(yè)面的地址由標(biāo)簽的href屬性指定。上面的中,href屬性的值就是http://www.unibetter.com。
HTML文檔可以包含的內(nèi)容
通過(guò)不同的標(biāo)簽,HTML文檔可以包含不同的內(nèi)容,比如文本,鏈接,圖片,列表,表格,表單,框架等。
文本 HTML對(duì)文本的支持是最豐富的,你可以設(shè)置不同級(jí)別的`標(biāo)題,分段和換行,可以指定文本的語(yǔ)義和外觀,可以說(shuō)明文本是引用自其它的地方,等等等等。 鏈接 鏈接用來(lái)指出內(nèi)容與另一個(gè)頁(yè)面或當(dāng)前頁(yè)面某個(gè)地方有關(guān)。 圖片 圖片用于使頁(yè)面更加美觀,或提供更多的信息。 列表 列表用于說(shuō)明一系列條目是彼此相關(guān)的。 表格 表格是按行與列將數(shù)據(jù)組織在一起的形式。也有不少人使用表格進(jìn)行頁(yè)面布局。 表單 表單通常由文本輸入框,按鈕,多選框,單選框,下拉列表等組成,使HTML頁(yè)面更有交互性。 框架 框架使頁(yè)面里能包含其它的頁(yè)面。 HTML文檔格式詳細(xì)說(shuō)明
前面介紹了HTML文檔的基本格式,下面再做一個(gè)詳細(xì)說(shuō)明。
HTML文檔可以用任何文本編輯器(比如記事本,UltraEdit等)創(chuàng)建,編輯,因?yàn)樗膬?nèi)容在本質(zhì)也只是一些文本。
在HTML文本中,用尖括號(hào)括起來(lái)的部分稱為標(biāo)簽。如果想在正文里使用尖括號(hào)(或者大與號(hào)小與號(hào),總之是同一個(gè)東西),必須使用字符轉(zhuǎn)義,也就是說(shuō)轉(zhuǎn)換字符的原有意義。<應(yīng)該使用<代替,>則使用>,至于&符號(hào)本身,則應(yīng)該使用&替代(不得不說(shuō)的是有很多HTML文檔沒有遵循這個(gè)規(guī)則,常用的瀏覽器也都能夠分析出&到底是一個(gè)轉(zhuǎn)義的開始,還是一個(gè)符號(hào),但是這樣做是不推薦的)。
標(biāo)簽本質(zhì)上是對(duì)它所包含的內(nèi)容的說(shuō)明,可能會(huì)有屬性,來(lái)給出更多的信息。比如
。▓D片)標(biāo)簽有src屬性(用于指明圖片的地址),width和height屬性(用于說(shuō)明圖片的寬度和高度)。HTML里能使用哪些標(biāo)簽,這些標(biāo)簽分別可以擁有哪些屬性,這些都是有規(guī)定的,知道了這里說(shuō)的基本知識(shí)之后,學(xué)習(xí)HTML其實(shí)也就是學(xué)習(xí)這些標(biāo)簽了。本文后面會(huì)對(duì)常用的HTML標(biāo)簽做出簡(jiǎn)短的介紹。
標(biāo)簽通常有開始部分和結(jié)束部分(也被稱為開始標(biāo)簽和結(jié)束標(biāo)簽),它們一起限定了這個(gè)標(biāo)簽所包含的內(nèi)容。屬性只能在開始標(biāo)簽中指定,屬性值可以用單引號(hào)或雙引號(hào)括起來(lái)。結(jié)束標(biāo)簽都以/加上標(biāo)簽名來(lái)表示。有時(shí)候,有些標(biāo)簽并不包含其它內(nèi)容(只包括自己的屬性,甚至連屬性都沒有),這種情況下,可以寫成類似這樣:
。注意最后的一個(gè)空格和一個(gè)反斜杠,它說(shuō)明這個(gè)標(biāo)簽已經(jīng)結(jié)束,不需要單獨(dú)的結(jié)束標(biāo)簽了。
某些標(biāo)簽包含的內(nèi)容中還可以有新的標(biāo)簽,新的標(biāo)簽名甚至可能還可以與包含它的標(biāo)簽的名稱相同(哪些標(biāo)簽可以包含標(biāo)簽,可以包含哪些標(biāo)簽也是有規(guī)定的)。比如:
分類目錄...
當(dāng)前分類內(nèi)容列表...
在這種情況下,最后出現(xiàn)的標(biāo)簽應(yīng)該最先結(jié)束。
HTML文檔里所有的空白符(空格,Tab,換行,回車)會(huì)被瀏覽器忽略,唯一的例外是空格,對(duì)空格的處理方式是所有連續(xù)的空格被當(dāng)成一個(gè)空格,不管有一個(gè),還是兩個(gè),還是100個(gè)。之所以有這樣的規(guī)則是因?yàn)楹雎钥瞻追茏屖褂肏TML的作者以他覺得最方便的格式來(lái)排列內(nèi)容,比如可以在每個(gè)標(biāo)簽開始后增加縮進(jìn),標(biāo)簽結(jié)束后減少縮進(jìn)。由于英語(yǔ)文本中空格用得很普遍(用于分隔單詞),所以對(duì)空格做了這樣的特殊處理。如果要顯示連續(xù)的空格(比如為了縮進(jìn)),應(yīng)該用來(lái)代表空格。
常用標(biāo)簽介紹 文本
最常用的標(biāo)簽可能是了,它用于改變字體,字號(hào),文字顏色。
64紅色的5黑體的字
加粗,下劃線,斜體字也是常用的文字效果,它們分別用,,表示:
Bolditalicunderline
還有一些標(biāo)簽,用來(lái)指出包含的文本有特殊的意義,比如(表示縮寫),(表示強(qiáng)調(diào)),(表示更強(qiáng)地強(qiáng)調(diào)),(表示引用),
(表示地址)等等。這些標(biāo)簽不是為了定義顯示效果而存在的,所以從瀏覽器里看它們可能沒有任何效果,也可能不同的瀏覽器對(duì)這些標(biāo)簽的顯示效果完全不同。
一篇很長(zhǎng)的文章,如果有合適的小標(biāo)題的話,就可以快速地對(duì)它的內(nèi)容進(jìn)行大致的了解。在HTML里,用來(lái)表示標(biāo)題的標(biāo)簽有:
,
,
,
,
,
,它們分別表示一級(jí)標(biāo)題,二級(jí)標(biāo)題,三級(jí)標(biāo)題...
HTML 30分鐘教程
什么是HTML
...
HTML是什么樣的
... 圖片
標(biāo)簽用于在頁(yè)面上添加橫線?梢酝ㄟ^(guò)指定width和color屬性來(lái)控制橫線的長(zhǎng)度和顏色。
標(biāo)簽用于在頁(yè)面上添加圖片,src屬性指定圖片的地址,如果無(wú)法打開src指定的圖片,瀏覽器通常會(huì)在頁(yè)面上需要顯示圖片的地方顯示alt屬性定義的文本。
鏈接
超級(jí)鏈接用標(biāo)簽表示,href屬性指定了鏈接到的地址。標(biāo)簽可以包含文本,也可以包含圖片。
Unibetter大學(xué)生論壇
分段與換行
由于HTML文檔會(huì)忽略空白符,所以要想保證正常的分段換行的話,必須指出哪些文字是屬于同一段落的,這就用到了標(biāo)簽
。
這是第一段。
這是第二段。
也有人不用
,而用
。
只表示換行,不表示段落的開始或結(jié)束,所以通常沒有結(jié)束標(biāo)簽。
這是第一段。
這是第二段。
這是第三段。
有時(shí),要把文檔看作不同的部分組合起來(lái)的,比如一個(gè)典型的頁(yè)面可能包括三個(gè)部分:頁(yè)頭,主體,頁(yè)腳。
標(biāo)簽專門用于標(biāo)明不同的部分:
頁(yè)頭內(nèi)容
主體內(nèi)容
頁(yè)腳內(nèi)容
表格
HTML文檔在瀏覽器里通常是從左到右,從上到下地顯示的,到了窗口右邊就自動(dòng)換行。為了實(shí)現(xiàn)分欄的效果,很多人使用表格(
。┻M(jìn)行頁(yè)面排版(雖然HTML里提供表格的本意不是為了排版)。
標(biāo)簽里通常會(huì)包含幾個(gè)標(biāo)簽,代表表格里的一行。標(biāo)簽又會(huì)包含
標(biāo)簽,每個(gè) | 代表一個(gè)單元格。 |
2000 | 悉尼 |
2004 | 雅典 |
2008 | 北京 |
標(biāo)簽還可以被
里的或或包含。它們分別代表表頭,表正文,表腳。在打印網(wǎng)頁(yè)的時(shí)候,如果表格很大,一頁(yè)打印不完,和將在每一頁(yè)出現(xiàn)。
里邊,不同的是
和 | 非常相似,也用在 |
---|---|
代表這個(gè)單元格是它所在的行或列的標(biāo)題。 |
時(shí)間 | 地點(diǎn) |
---|---|
2000 | 悉尼 |
2004 | 雅典 |
2000 | 北京 |
列表
表格用于表示二維數(shù)據(jù)(行,列),一維數(shù)據(jù)則用列表表示。列表可以分為無(wú)序列表(
。,有序列表(
。┖投x列表(
。。前兩種列表更常見一些,都用
標(biāo)簽包含列表項(xiàng)目。
無(wú)序列表表示一系列類似的項(xiàng)目,它們之間沒有先后順序。
蘋果
桔子
桃
有序列表中各個(gè)項(xiàng)目間的順序是很重要的,瀏覽器通常會(huì)自動(dòng)給它們產(chǎn)生編號(hào)。
打開冰箱門
把大象趕進(jìn)去
關(guān)上冰箱門
框架
最后談一下框架,曾經(jīng)非常流行的技術(shù),框架使一個(gè)窗口里能同時(shí)顯示多個(gè)文檔。主框架頁(yè)里面沒有標(biāo)簽,取代它的是。
標(biāo)簽的屬性Rows和Cols用于指定框架集(frameset)里有多少行(列),以及每行(列)的高度(寬度)。
標(biāo)簽可以包含標(biāo)簽,每個(gè)標(biāo)簽代表一個(gè)文檔(src屬性指定文檔的地址)。
如果覺得這樣的頁(yè)面還不夠復(fù)雜的話,還可以在標(biāo)簽里包含標(biāo)簽。
30分鐘以后怎么辦
這篇文章只是讓從沒有接觸過(guò)HTML的人對(duì)HTML有個(gè)初步的印象,所以很多東西都沒有談到。本文并沒有列出HTML中所有的標(biāo)簽,對(duì)于列出的標(biāo)簽也沒有介紹它們的全部屬性。另外,沒有提到的東西里還包括我覺得非常重要的CSS, JavaScript, XHTML, XML, Web Standards,以及它們與HTML的關(guān)系。不過(guò)這些也不太可能在30分鐘內(nèi)學(xué)會(huì),好在只要入了門,就能利用網(wǎng)上很多資源繼續(xù)學(xué)習(xí)。當(dāng)然,如果有一本紙質(zhì)書,就更好了,這方面我推薦<>。下面是一些我覺得不錯(cuò)的網(wǎng)上資源:
HTML語(yǔ)言參考(英文) HTML教程 一些我認(rèn)為你可能已經(jīng)知道的術(shù)語(yǔ)的參考 文本 文字 文檔 文件,通常指內(nèi)容是數(shù)據(jù)(而不是程序)的文件
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
【關(guān)于HTML 30分鐘入門教程】相關(guān)文章:
2.php入門教程:生成靜態(tài)html頁(yè)面原理