HTML 30分鐘入門教程

2020-10-23 18:41:52

字體：大中小

來源：轉載

供稿：網友

運行下面的代碼就可以了

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

上一篇：百分比的細節－－容器大小篇

下一篇：做網頁經常要注意的常識整理收集