HTML 30分鐘入門教程_基礎教程

來源:互聯網
上載者:User
運行下面的代碼就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>HTML 30分鐘入門教程</title> <meta name="keywords" content="HTML,網頁,網頁製作,教程,入門" /> <meta name="description" content="30分鐘內讓你明白HTML是什麼,並對它有一些基本的瞭解。一旦入門後,你可以從網上找到更多更詳細的資料來繼續學習。" /> <meta name="author" content="deerchao" /> <style type="text/css"> h1 {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} </style> </head> <body language="javascript" onload="return window_onload()"> <h1>HTML 30分鐘入門教程</h1> <p style="text-align:center">作者:deerchao 來源:unibetter大學生社區 轉載請註明來源</p> <h2>本文目標</h2> <p>30分鐘內讓你明白HTML是什麼,並對它有一些基本的瞭解。一旦入門後,你可以從網上找到更多更詳細的資料來繼續學習。</p> <h2>什麼是HTML</h2> <p>HTML是英文Hyper Text Mark-up Language(超文字標記語言 (HTML))的縮寫,它規定了自己的文法規則,用來表示比"文本"更豐富的意義,比片,表格,連結等。瀏覽器(IE,FireFox等)軟體知道HTML語言的文法,可以用來查看HTML文檔。目前互連網上的絕大部分網頁都是使用HTML編寫的。</p> <h2>HTML是什麼樣的</h2> <p>簡單地來說,HTML的文法就是給文本加上表明文本含義的<span class="name">標籤</span>(Tag),讓使用者(人或程式)能對文本得到更好的理解。</p> <p>下面是一個最簡單的HTML文檔:</p> <html> <head> <title>第一個Html文檔</title> </head> <body> 歡迎訪問Unibetter大學生社區! </body></html> <p> 所有的HTML文檔都應該有一個<html>標籤,<html>標籤可以包含兩個部分:<head>和<body>。</p> <p> <head>標籤用於包含整個文檔的一般資訊,比如文檔的標題(<title>標籤用於包含標題),對整個文檔的描述,文檔的關鍵字等等。文檔的具體內容就要放在<body>標籤裡了。</p> <p>標籤用於表示連結,在瀏覽器(如IE,Firefox等)中查看HTML文檔時,點擊標籤括起來的內容時,通常會跳轉到另一個頁面。這個要跳轉到的頁面的地址由標籤的href屬性指定。上面的中,href屬性的值就是http://www.unibetter.com。</p> <h2>HTML文檔可以包含的內容</h2> <p>通過不同的標籤,HTML文檔可以包含不同的內容,比如文本,連結,圖片,列表,表格,表單,架構等。</p> <dl> <dt>文本</dt> <dd>HTML對文本的支援是最豐富的,你可以設定不同層級的標題,分段和換行,可以指定文本的語義和外觀,可以說明文本是引用自其它的地方,等等等等。</dd> <dt>連結</dt> <dd>連結用來指出內容與另一個頁面或當前頁面某個地方有關。</dd> <dt>圖片</dt> <dd>圖片用於使頁面更加美觀,或提供更多的資訊。</dd> <dt>列表</dt> <dd>列表用於說明一系列條目是彼此相關的。</dd> <dt>表格</dt> <dd>表格是按行與列將資料群組織在一起的形式。也有不少人使用表格進行頁面配置。</dd> <dt>表單</dt> <dd>表單通常由文本輸入框,按鈕,多選框,單選框,下拉式清單等組成,使HTML頁面更有互動性。</dd> <dt>架構</dt> <dd>架構使頁面裡能包含其它的頁面。</dd> </dl> <h2>HTML文檔格式詳細說明</h2> <p>前面介紹了HTML文檔的基本格式,下面再做一個詳細說明。</p> <p>HTML文檔可以用任何文字編輯器(比如記事本,UltraEdit等)建立,編輯,因為它的內容在本質也只是一些文本。</p> <p>在HTML文本中,用角括弧括起來的部分稱為標籤。如果想在本文裡使用角括弧(或者大與號小與號,總之是同一個東西),必須使用<span class="name">字元轉義</span>,也就是說轉換字元的原有意義。<應該使用<span class="trans"><</span>代替,>則使用<span class="trans">></span>,至於&符號本身,則應該使用<span class="trans">&</span>替代(不得不說的是有很多HTML文檔沒有遵循這個規則,常用的瀏覽器也都能夠分析出&到底是一個轉義的開始,還是一個符號,但是這樣做是不推薦的)。</p> <p>標籤本質上是對它所包含的內容的說明,可能會有屬性,來給出更多的資訊。比如(圖片)標籤有src屬性(用於指明圖片的地址),width和height屬性(用於說明圖片的寬度和高度)。HTML裡能使用哪些標籤,這些標籤分別可以擁有哪些屬性,這些都是有規定的,知道了這裡說的基本知識之後,學習HTML其實也就是學習這些標籤了。本文後面會對常用的HTML標籤做出簡短的介紹。</p> <p>標籤通常有開始部分和結束部分(也被稱為開始標籤和結束標籤),它們一起限定了這個標籤所包含的內容。屬性只能在開始標籤中指定,屬性值可以用單引號或雙引號括起來。結束標籤都以/加上標籤名來表示。有時候,有些標籤並不包含其它內容(只包括自己的屬性,甚至連屬性都沒有),這種情況下,可以寫成類似這樣:。注意最後的一個空格和一個反斜線,它說明這個標籤已經結束,不需要單獨的結束標籤了。</p> <p>某些標籤包含的內容中還可以有新的標籤,新的標籤名甚至可能還可以與包含它的標籤的名稱相同(哪些標籤可以包含標籤,可以包含哪些標籤也是有規定的)。比如:</p> 分類目錄... 當前分類內容列表... <p>在這種情況下,最後出現的標籤應該最先結束。</p> <p>HTML文檔裡所有的空白符(空格,Tab,換行,斷行符號)會被瀏覽器忽略,唯一的例外是空格,對空格的處理方式是所有連續的空格被當成一個空格,不管有一個,還是兩個,還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容,比如可以在每個標籤開始後增加縮排,標籤結束後減少縮排。由於英語文本中空格用得很普遍(用於分隔單詞),所以對空格做了這樣的特殊處理。如果要顯示連續的空格(比如為了縮排),應該用<span class="trans"> </span>來代表空格。</p> <h2>常用標籤介紹</h2> <h3> 文本</h3> <p>最常用的標籤可能是了,它用於改變字型,字型大小,文字顏色。</p> 64紅色的5黑體的字 <p>加粗,底線,斜體字也是常用的文字效果,它們分別用<b>,<u>,<i>表示:</p> <b>Bold</b><i>italic</i><u>underline</u> <p>還有一些標籤,用來指出包含的文本有特殊的意義,比如(表示縮寫),<em>(表示強調),<strong>(表示更強地強調),<cite>(表示引用),(表示地址)等等。這些標籤不是為了定義顯示效果而存在的,所以從瀏覽器裡看它們可能沒有任何效果,也可能不同的瀏覽器對這些標籤的顯示效果完全不同。</p> <p>一篇很長的文章,如果有合適的小標題的話,就可以快速地對它的內容進行大致的瞭解。在HTML裡,用來表示標題的標籤有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,它們分別表示一級標題,二級標題,三級標題...</p> <h1>HTML 30分鐘教程</h1><h2>什麼是HTML</h2>...<h2>HTML是什麼樣的</h2>... <h3> 圖片</h3> <p> 標籤用於在頁面上添加橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。</p> <hr width="90%" color="red" /> <p>標籤用於在頁面上添加圖片,src屬性指定圖片的地址,如果無法開啟src指定的圖片,瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。</p> <h3> 連結</h3> <p>超級連結用標籤表示,href屬性指定了連結到的地址。標籤可以包含文本,也可以包含圖片。</p> Unibetter大學生論壇 <h3>分段與換行</h3> <p>由於HTML文檔會忽略空白符,所以要想保證正常的分段換行的話,必須指出哪些文字是屬於同一段落的,這就用到了標籤<p>。</p> <p>這是第一段。</p><p>這是第二段。</p> <p>也有人不用<p>,而用<br>。<br>只表示換行,不表示段落的開始或結束,所以通常沒有結束標籤。</p> 這是第一段。<br>這是第二段。<br />這是第三段。 <p>有時,要把文檔看作不同的部分組合起來的,比如一個典型的頁面可能包括三個部分:頁頭,主體,頁尾。標籤專門用於標明不同的部分:</p> 頁頭內容主體內容頁腳內容 <h3>表格</h3> <p>HTML文檔在瀏覽器裡通常是從左至右,從上到下地顯示的,到了視窗右邊就自動換行。為了實現分欄的效果,很多人使用表格(<table>)進行頁面排版(雖然HTML裡提供表格的本意不是為了排版)。</p> <p><table>標籤裡通常會包含幾個<tr>標籤,<tr>代表表格裡的一行。<tr>標籤又會包含<td>標籤,每個<td>代表一個儲存格。</p> <table> <tr> <td>2000</td><td>雪梨</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr></table> <p><tr>標籤還可以被<table>裡的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭,表本文,表腳。在列印網頁的時候,如果表格很大,一頁列印不完,<thead>和<tfoot>將在每一頁出現。</p> <p><th>和<td>非常相似,也用在<tr>裡邊,不同的是<th>代表這個儲存格是它所在的行或列的標題。</p> <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> <h3>列表</h3> <p>表格用於表示二維資料(行,列),一維資料則用列表表示。列表可以分為無序列表(<ul>),有序列表(<ol>)和定義列表(<dl>)。前兩種列表更常見一些,都用<li>標籤包含清單項目。</p> <p>無序列表表示一系列類似的項目,它們之間沒有先後順序。</p> <ul> <li>蘋果</li> <li>桔子</li> <li>桃</li></ul> <p>有序列表中各個項目間的順序是很重要的,瀏覽器通常會自動給它們產生編號。</p> <ol> <li>開啟冰箱門</li> <li>把大象趕進去</li> <li>關上冰箱門</li></ol> <h3>架構</h3> <p>最後談一下架構,曾經非常流行的技術,架構使一個視窗裡能同時顯示多個文檔。主架構頁裡面沒有<body>標籤,取代它的是<frameset>。</p> <p><frameset>標籤的屬性Rows和Cols用於指定框架組(frameset)裡有多少行(列),以及每行(列)的高度(寬度)。</p> <p><frameset>標籤可以包含<frame>標籤,每個<frame>標籤代表一個文檔(src屬性指定文檔的地址)。</p> <p>如果覺得這樣的頁面還不夠複雜的話,還可以在<frameset>標籤裡包含<frameset>標籤。</p> <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> <h2>30分鐘以後怎麼辦</h2> <p> 這篇文章只是讓從沒有接觸過HTML的人對HTML有個初步的印象,所以很多東西都沒有談到。本文並沒有列出HTML中所有的標籤,對於列出的標籤也沒有介紹它們的全部屬性。另外,沒有提到的東西裡還包括我覺得非常重要的CSS, JavaScript, XHTML, XML, Web Standards,以及它們與HTML的關係。不過這些也不太可能在30分鐘內學會,好在只要入了門,就能利用網上很多資源繼續學習。當然,如果有一本紙質書,就更好了,這方面我推薦<<HTML與XHTML權威指南>>。下面是一些我覺得不錯的網上資源:</p> <ul> <li>HTML語言參考(英文)</li> <li>HTML教程</li> </ul> <h2> 一些我認為你可能已經知道的術語的參考</h2> <dl> <dt>文本</dt> <dd>文字</dd> <dt>文檔</dt> <dd>檔案,通常指內容是資料(而不是程式)的檔案</dd> </dl> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.