運行下面的代碼就可以了
<!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> <script language="javascript" type="text/javascript"> <!-- function window_onload() { var divs=document.getElementsByTagName("div"); var codeDivs=new Array(); for(var i=0; i<divs.length; i++) { if(divs[i].className=="code") codeDivs.push(divs[i]); } for(var i=0; i<codeDivs.length; i++) { var button=document.createElement("span"); button.onclick=popwin; button.innerHTML="點擊查看效果"; button.style.marginLeft="500px"; button.style.borderStyle="solid"; button.style.borderWidth="1px"; button.style.color="gray"; codeDivs[i].parentNode.insertBefore(button,codeDivs[i]); } } function popwin() { theWin=window.open(); theWin.document.write(HtmlDecode(this.nextSibling.innerHTML)); } function HtmlDecode(s) { var out = ""; if (s==null) return; var l = s.length; for (var i=0; i<l; i++) { var ch = s.charAt(i); if (ch == '&') { var semicolonIndex = s.indexOf(';', i+1); if (semicolonIndex > 0) { var entity = s.substring(i + 1, semicolonIndex); if (entity.length > 1 && entity.charAt(0) == '#') { if (entity.charAt(1) == 'x' || entity.charAt(1) == 'X') ch = String.fromCharCode(eval('0'+entity.substring(1))); else ch = String.fromCharCode(eval(entity.substring(1))); } else { switch (entity) { case 'quot': ch = String.fromCharCode(0x0022); break; case 'amp': ch = String.fromCharCode(0x0026); break; case 'lt': ch = String.fromCharCode(0x003c); break; case 'gt': ch = String.fromCharCode(0x003e); break; case 'nbsp': ch=String.fromCharCode(0x00a0); break; default: ch = ''; break; } } i = semicolonIndex; } } out += ch; } return out; } var theWin=null; // --> </script> </head> <body language="javascript" onload="return window_onload()"> <h1>HTML 30分鐘入門教程</h1> <p >作者：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> <div class="code"> <html> <head> <title>第一個Html文檔</title> </head> <body> 歡迎訪問<a href="http://www.unibetter.com">Unibetter大學生社區</a>! </body></html> </div> <p> 所有的HTML文檔都應該有一個<html>標籤，<html>標籤可以包含兩個部分:<head>和<body>。</p> <p> <head>標籤用於包含整個文檔的一般資訊，比如文檔的標題（<title>標籤用於包含標題），對整個文檔的描述，文檔的關鍵字等等。文檔的具體內容就要放在<body>標籤裡了。</p> <p><a>標籤用於表示連結，在瀏覽器（如IE,Firefox等）中查看HTML文檔時，點擊<a>標籤括起來的內容時，通常會跳轉到另一個頁面。這個要跳轉到的頁面的地址由<a>標籤的href屬性指定。上面的<a href="http://www.unibetter.com">中，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>標籤本質上是對它所包含的內容的說明，可能會有屬性，來給出更多的資訊。比如<img>（圖片）標籤有src屬性（用於指明圖片的地址），width和height屬性（用於說明圖片的寬度和高度）。HTML裡能使用哪些標籤，這些標籤分別可以擁有哪些屬性，這些都是有規定的，知道了這裡說的基本知識之後，學習HTML其實也就是學習這些標籤了。本文後面會對常用的HTML標籤做出簡短的介紹。</p> <p>標籤通常有開始部分和結束部分（也被稱為開始標籤和結束標籤），它們一起限定了這個標籤所包含的內容。屬性只能在開始標籤中指定，屬性值可以用單引號或雙引號括起來。結束標籤都以/加上標籤名來表示。有時候，有些標籤並不包含其它內容（只包括自己的屬性，甚至連屬性都沒有），這種情況下，可以寫成類似這樣：<img src="logo.gif" />。注意最後的一個空格和一個反斜線，它說明這個標籤已經結束，不需要單獨的結束標籤了。</p> <p>某些標籤包含的內容中還可以有新的標籤，新的標籤名甚至可能還可以與包含它的標籤的名稱相同（哪些標籤可以包含標籤，可以包含哪些標籤也是有規定的）。比如：</p> <div class="code"> <div> <div>分類目錄...</div> <div>當前分類內容列表...</div></div> </div> <p>在這種情況下，最後出現的標籤應該最先結束。</p> <p>HTML文檔裡所有的空白符（空格，Tab，換行，斷行符號）會被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續的空格被當成一個空格，不管有一個，還是兩個，還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容，比如可以在每個標籤開始後增加縮排，標籤結束後減少縮排。由於英語文本中空格用得很普遍（用於分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續的空格（比如為了縮排），應該用<span class="trans"> </span>來代表空格。</p> <h2>常用標籤介紹</h2> <h3> 文本</h3> <p>最常用的標籤可能是<font>了，它用於改變字型，字型大小，文字顏色。</p> <div class="code"> <font size="6">6</font><font size="4">4</font><font color="red" size="5">紅色的5</font><font face="黑體">黑體的字</font> </div> <p>加粗，底線，斜體字也是常用的文字效果，它們分別用<b>,<u>,<i>表示：</p> <div class="code"> <b>Bold</b><i>italic</i><u>underline</u> </div> <p>還有一些標籤，用來指出包含的文本有特殊的意義，比如<abbr>（表示縮寫），<em>（表示強調），<strong>（表示更強地強調）,<cite>（表示引用），<address>（表示地址）等等。這些標籤不是為了定義顯示效果而存在的，所以從瀏覽器裡看它們可能沒有任何效果，也可能不同的瀏覽器對這些標籤的顯示效果完全不同。</p> <p>一篇很長的文章，如果有合適的小標題的話，就可以快速地對它的內容進行大致的瞭解。在HTML裡，用來表示標題的標籤有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它們分別表示一級標題，二級標題，三級標題...</p> <div class="code"> <h1>HTML 30分鐘教程</h1><h2>什麼是HTML</h2>...<h2>HTML是什麼樣的</h2>... </div> <h3> 圖片</h3> <p> <hr>標籤用於在頁面上添加橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。</p> <div class="code"> <hr width="90%" color="red" /> </div> <p><img>標籤用於在頁面上添加圖片，src屬性指定圖片的地址，如果無法開啟src指定的圖片，瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。</p> <div class="code"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="圖片簡介" /> </div> <h3> 連結</h3> <p>超級連結用<a>標籤表示，href屬性指定了連結到的地址。<a>標籤可以包含文本，也可以包含圖片。</p> <div class="code"> <a href="http://www.unibetter.com/forums/">Unibetter大學生論壇</a><a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="驗證HTML" /></a> </div> <h3>分段與換行</h3> <p>由於HTML文檔會忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬於同一段落的，這就用到了標籤<p>。</p> <div class="code"> <p>這是第一段。</p><p>這是第二段。</p> </div> <p>也有人不用<p>，而用<br>。<br>只表示換行，不表示段落的開始或結束，所以通常沒有結束標籤。</p> <div class="code"> 這是第一段。<br>這是第二段。<br />這是第三段。 </div> <p>有時，要把文檔看作不同的部分組合起來的，比如一個典型的頁面可能包括三個部分：頁頭，主體，頁尾。<div>標籤專門用於標明不同的部分：</p> <div class="code"> <div>頁頭內容</div><div>主體內容</div><div>頁尾內容</div> </div> <h3>表格</h3> <p>HTML文檔在瀏覽器裡通常是從左至右，從上到下地顯示的，到了視窗右邊就自動換行。為了實現分欄的效果，很多人使用表格（<table>）進行頁面排版（雖然HTML裡提供表格的本意不是為了排版）。</p> <p><table>標籤裡通常會包含幾個<tr>標籤，<tr>代表表格裡的一行。<tr>標籤又會包含<td>標籤，每個<td>代表一個儲存格。</p> <div class="code"> <table> <tr> <td>2000</td><td>雪梨</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr></table> </div> <p><tr>標籤還可以被<table>裡的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭，表本文，表腳。在列印網頁的時候，如果表格很大，一頁列印不完，<thead>和<tfoot>將在每一頁出現。</p> <p><th>和<td>非常相似，也用在<tr>裡邊，不同的是<th>代表這個儲存格是它所在的行或列的標題。</p> <div class="code"> <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> </div> <h3>列表</h3> <p>表格用於表示二維資料（行，列），一維資料則用列表表示。列表可以分為無序列表（<ul>），有序列表（<ol>）和定義列表（<dl>）。前兩種列表更常見一些，都用<li>標籤包含清單項目。</p> <p>無序列表表示一系列類似的項目，它們之間沒有先後順序。</p> <div class="code"> <ul> <li>蘋果</li> <li>桔子</li> <li>桃</li></ul> </div> <p>有序列表中各個項目間的順序是很重要的，瀏覽器通常會自動給它們產生編號。</p> <div class="code"> <ol> <li>開啟冰箱門</li> <li>把大象趕進去</li> <li>關上冰箱門</li></ol> </div> <h3>架構</h3> <p>最後談一下架構，曾經非常流行的技術，架構使一個視窗裡能同時顯示多個文檔。主架構頁裡面沒有<body>標籤，取代它的是<frameset>。</p> <p><frameset>標籤的屬性Rows和Cols用於指定框架組(frameset)裡有多少行（列），以及每行（列）的高度（寬度）。</p> <p><frameset>標籤可以包含<frame>標籤，每個<frame>標籤代表一個文檔（src屬性指定文檔的地址）。</p> <p>如果覺得這樣的頁面還不夠複雜的話，還可以在<frameset>標籤裡包含<frameset>標籤。</p> <div class="code"> <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> </div> <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需重新整理才能執行]
