什麼是HTML
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,它規定了自己的語法規則,用來表示比“文本”更豐富的意義,比如圖片,表格,鏈接等。瀏覽器(IE,FireFox等)軟件知道HTML語言的語法,可以用來查看HTML文檔。目前互聯網上的絕大部分網頁都是使用HTML編寫的。
HTML是什麼樣的
簡單地來說,HTML的語法就是給文本加上表明文本含義的標籤(Tag),讓用戶(人或程序)能對文本得到更好的理解。
下面是一個最簡單的HTML文檔:
<html> <head> <title>第一個Html文檔</title> </head> <body> 歡迎訪問<a href="http://deerchao.net">deerchao的個人網頁</a>! </body> </html>
所有的HTML文檔都應該有一個<html>標籤,<html>標籤可以包含兩個部分:<head>和<body>。
<head>標籤用於包含整個文檔的一般信息,比如文檔的標題(<title>標籤用於包含標題),對整個文檔的描述,文檔的關鍵字等等。文檔的具體內容就要放在<body>標籤裏了。
<a>標籤用於表示鏈接,在瀏覽器(如IE,Firefox等)中查看HTML文檔時,點擊<a>標籤括起來的內容時,通常會跳轉到另一個頁面。這個要跳轉到的頁面的地址由<a>標籤的href屬性指定。上面的<a href="http://deerchao.net">中,href屬性的值就是http://deerchao.net。
HTML文檔可以包含的內容
通過不同的標籤,HTML文檔可以包含不同的內容,比如文本,鏈接,圖片,列表,表格,表單,框架等。
文本
HTML對文本的支持是最豐富的,你可以設置不同級別的標題,分段和換行,可以指定文本的語義和外觀,可以說明文本是引用自其它的地方,等等等等。
鏈接
鏈接用來指出內容與另一個頁面或當前頁面某個地方有關。
圖片
圖片用於使頁面更加美觀,或提供更多的信息。
列表
列表用於說明一系列條目是彼此相關的。
表格
表格是按行與列將數據組織在一起的形式。也有不少人使用表格進行頁面佈局。
表單
表單通常由文本輸入框,按鈕,多選框,單選框,下拉列表等組成,使HTML頁面更有交互性。
框架
框架使頁面裏能包含其它的頁面。
HTML文檔格式詳細說明
前面介紹了HTML文檔的基本格式,下面再做一個詳細說明。
HTML文檔可以用任何文本編輯器(比如記事本,UltraEdit等)創建,編輯,因爲它的內容在本質也只是一些文本。
在HTML文本中,用尖括號括起來的部分稱爲標籤。如果想在正文裏使用尖括號(或者大與號小與號,總之是同一個東西),必須使用字符轉義,也就是說轉換字符的原有意義。<應該使用<代替,>則使用>,至於&符號本身,則應該使用&替代(不得不說的是有很多HTML文檔沒有遵循這個規則,常用的瀏覽器也都能夠分析出&到底是一個轉義的開始,還是一個符號,但是這樣做是不推薦的)。
標籤本質上是對它所包含的內容的說明,可能會有屬性,來給出更多的信息。比如<img>(圖片)標籤有src屬性(用於指明圖片的地址),width和height屬性(用於說明圖片的寬度和高度)。HTML裏能使用哪些標籤,這些標籤分別可以擁有哪些屬性,這些都是有規定的,知道了這裏說的基本知識之後,學習HTML其實也就是學習這些標籤了。本文後面會對常用的HTML標籤做出簡短的介紹。
標籤通常有開始部分和結束部分(也被稱爲開始標籤和結束標籤),它們一起限定了這個標籤所包含的內容。屬性只能在開始標籤中指定,屬性值可以用單引號或雙引號括起來。結束標籤都以/加上標籤名來表示。有時候,有些標籤並不包含其它內容(只包括自己的屬性,甚至連屬性都沒有),這種情況下,可以寫成類似這樣:<img src="logo.gif" />。注意最後的一個空格和一個反斜槓,它說明這個標籤已經結束,不需要單獨的結束標籤了。
某些標籤包含的內容中還可以有新的標籤,新的標籤名甚至可能還可以與包含它的標籤的名稱相同(哪些標籤可以包含標籤,可以包含哪些標籤也是有規定的)。比如:
<div> <div>分類目錄...</div> <div>當前分類內容列表...</div> </div>
在這種情況下,最後出現的標籤應該最先結束。
HTML文檔裏所有的空白符(空格,Tab,換行,回車)會被瀏覽器忽略,唯一的例外是空格,對空格的處理方式是所有連續的空格被當成一個空格,不管有一個,還是兩個,還是100個。之所以有這樣的規則是因爲忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容,比如可以在每個標籤開始後增加縮進,標籤結束後減少縮進。由於英語文本中空格用得很普遍(用於分隔單詞),所以對空格做了這樣的特殊處理。如果要顯示連續的空格(比如爲了縮進),應該用 來代表空格。
常用標籤介紹
文本
最常用的標籤可能是<font>了,它用於改變字體,字號,文字顏色。
<font size="6">6</font> <font size="4">4</font> <font color="red" size="5">紅色的5</font> <font face="黑體">黑體的字</font>
加粗,下劃線,斜體字也是常用的文字效果,它們分別用<b>,<u>,<i>表示:
<b>Bold</b> <i>italic</i> <u>underline</u>
還有一些標籤,用來指出包含的文本有特殊的意義,比如<abbr>(表示縮寫),<em>(表示強調),<strong>(表示更強地強調),<cite>(表示引用),<address>(表示地址)等等。這些標籤不是爲了定義顯示效果而存在的,所以從瀏覽器裏看它們可能沒有任何效果,也可能不同的瀏覽器對這些標籤的顯示效果完全不同。
一篇很長的文章,如果有合適的小標題的話,就可以快速地對它的內容進行大致的瞭解。在HTML裏,用來表示標題的標籤有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,它們分別表示一級標題,二級標題,三級標題...
<h1>HTML 30分鐘教程</h1> <h2>什麼是HTML</h2> ... <h2>HTML是什麼樣的</h2> ...
圖片
<hr>標籤用於在頁面上添加橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。
<hr width="90%" color="red" /> <img>標籤用於在頁面上添加圖片,src屬性指定圖片的地址,如果無法打開src指定的圖片,瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。 <img src="http://www.w3.org/Icons/valid-xhtml10" alt="圖片簡介" />
鏈接
超級鏈接用<a>標籤表示,href屬性指定了鏈接到的地址。<a>標籤可以包含文本,也可以包含圖片。
<a href="http://deerchao.net">deerchao的個人網站</a> <a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="驗證HTML" /></a>
分段與換行
由於HTML文檔會忽略空白符,所以要想保證正常的分段換行的話,必須指出哪些文字是屬於同一段落的,這就用到了標籤<p>。
<p>這是第一段。</p> <p>這是第二段。</p>
也有人不用<p>,而用<br>。<br>只表示換行,不表示段落的開始或結束,所以通常沒有結束標籤。
這是第一段。<br> 這是第二段。<br /> 這是第三段。
有時,要把文檔看作不同的部分組合起來的,比如一個典型的頁面可能包括三個部分:頁頭,主體,頁腳。<div>標籤專門用於標明不同的部分:
<div>頁頭內容</div> <div>主體內容</div> <div>頁腳內容</div>
表格
HTML文檔在瀏覽器裏通常是從左到右,從上到下地顯示的,到了窗口右邊就自動換行。爲了實現分欄的效果,很多人使用表格(<table>)進行頁面排版(雖然HTML裏提供表格的本意不是爲了排版)。
<table>標籤裏通常會包含幾個<tr>標籤,<tr>代表表格裏的一行。<tr>標籤又會包含<td>標籤,每個<td>代表一個單元格。
<table> <tr> <td>2000</td><td>悉尼</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr> </table>
<tr>標籤還可以被<table>裏的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭,表正文,表腳。在打印網頁的時候,如果表格很大,一頁打印不完,<thead>和<tfoot>將在每一頁出現。
<th>和<td>非常相似,也用在<tr>裏邊,不同的是<th>代表這個單元格是它所在的行或列的標題。
<table> <thead> <tr><th>時間</th><th>地點</th></tr> </thead> <tbody> <tr><td>2000</td><td>悉尼</td></tr> <tr><td>2004</td><td>雅典</td></tr> <tr><td>2000</td><td>北京</td></tr> </tbody> </table>
列表
表格用於表示二維數據(行,列),一維數據則用列表表示。列表可以分爲無序列表(<ul>),有序列表(<ol>)和定義列表(<dl>)。前兩種列表更常見一些,都用<li>標籤包含列表項目。
無序列表表示一系列類似的項目,它們之間沒有先後順序。
<ul> <li>蘋果</li> <li>桔子</li> <li>桃</li> </ul>
有序列表中各個項目間的順序是很重要的,瀏覽器通常會自動給它們產生編號。
<ol> <li>打開冰箱門</li> <li>把大象趕進去</li> <li>關上冰箱門</li> </ol>
框架
最後談一下框架,曾經非常流行的技術,框架使一個窗口裏能同時顯示多個文檔。主框架頁裏面沒有<body>標籤,取代它的是<frameset>。
<frameset>標籤的屬性Rows和Cols用於指定框架集(frameset)裏有多少行(列),以及每行(列)的高度(寬度)。
<frameset>標籤可以包含<frame>標籤,每個<frame>標籤代表一個文檔(src屬性指定文檔的地址)。
如果覺得這樣的頁面還不夠複雜的話,還可以在<frameset>標籤裏包含<frameset>標籤。
<frameset rows="15%,*"> <frame src="top.html" name=title scrolling=no> <frameset cols="20%,*"> <frame src="left.html" name=sidebar> <frame src="right.html" name=recipes> </frameset> </frameset>
轉載自:https://deerchao.net/tutorials/html/html.htm,謝謝作者