如何編寫HTML頁面

手機
關注：1.58W次

HTML（超文本標記語言）是建立網頁的基礎語言。這是一種十分簡單、靈活的編碼語言，幾乎所有網頁都由某種形式的代碼構成（例如ColdFusion、XML、XSLT）。HTML很容易學，但要掌握所有功能，則需要很長的時間。想讓網頁更多姿多彩，變得更有趣？學會製作基本HTML頁面後，不妨學習基本的CSS。

建立文檔

（01）打開簡單的文本編輯器。NotePad是不錯的選擇，而且可以免費下載。大部分文本編輯軟件都能編寫HTML，不過，複雜的軟件有自動格式功能，比較難組織HTML頁面。不建議使用TextEdit，它經常將文件保存成無法被瀏覽器識別為HTML的格式。你也可以用在線HTML編輯器。不建議初學者使用專業的HTML編輯程序。

（02）將文件保存為網頁。在上方菜單中，選擇文件（File），點擊另存為（Save As）。將文件格式改成“網頁”（Web Page）、“”或“”。存在容易找到的位置。上面三個選擇是一樣的，沒有差別。

（03）用網頁瀏覽器打開文件。雙擊文件，它應該會自動在瀏覽器打開，但現在還只是個空白網頁。你也可以先打開瀏覽器，例如Firefox或Internet Explorer，再從文件（File）標籤中，點擊打開文件（Open File），然後選擇文件。這個網頁並不在網上，只能在你的電腦上看到。

（04）更新網頁，查看已保存的更改。將<strong>Hello</strong>輸入空白的文件。更新瀏覽器上的空白網頁，你應該可以看到網頁上方有個加粗的“Hello”字眼。在本教程中，你隨時可以測試新的HTML。只要保存文件，然後更新瀏覽器窗口，就能看到瀏覽器如何詮釋HTML。瀏覽器出現“<strong>”和“</strong>”字眼，代表你的文件並未被正確詮釋為HTML。換個不同的文本編輯程序或瀏覽器。

（05）瞭解標籤。HTML的指示寫在標籤之間，告訴瀏覽器要如何詮釋及呈現網頁。標籤被尖括號<>括起來，網頁上看不到。你在上面的例子中已經用到它們了：<strong>是“首標籤”，或“起始標籤”。寫在這個標籤後的內容被定義為“重點強調的文本”（通常在網頁上以粗體顯示）。</strong>是“尾標籤”，或“結束標籤”。尾標籤有多一條斜槓“/”，表示重點強調的文本就此結束。大部分標籤都需要尾標籤，才能起作用，所以別忘了它。

（06）構建文檔。刪除HTML文檔裏的所有東西。一字不變地輸入以下文本，重新開始（忽略小圓點）。這個HTML代碼告訴瀏覽器你使用哪一版HTML，網頁所有內容都在<html>和</html>標籤之間。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html></html>

（07）添加head和body標籤。HTML文檔分為2個部分。“Head”部分是特別信息，例如網頁標題。“Body”部分則包括網頁內容。將這兩個標籤放進文檔，別忘了尾標籤。粗體字為新添加的文本。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head></head><body></body></html>

（08）取個標題。對初學者來説，head部分的標籤大多不重要。不過，標題標籤方便使用，而且決定了瀏覽器窗口，或選項卡上顯示的名稱。在head標籤的首標籤和尾標籤之間，寫下你喜歡的標題：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><title>我的第一個HTML網頁。</title></head><body></body></html>

格式化文本

（01）在body部分添加文本。在這一部分，我們只輸入body標籤內的內容。文檔裏仍然保留其它文本，不過在本指南中，為了節省空間，我們不會每次都重複一遍。在<body>和</body>標籤之間隨便寫一些東西，它們會成為網頁上的首個內容。舉個例子：<body>我正在按wikiHow指南編寫HTML網頁。</body>

（02）添加頁眉。用頁眉標籤組織網頁內容。瀏覽器會以比較大的字號，顯示頁眉標籤內的文本。搜索引擎和其它工具也會透過頁眉標籤，確認你的網頁內容及編排。頁眉標籤共有6個，<h1> </h1>最大，<h6> </h6>最小。在你的頁面上試一試：<body><h1>歡迎來到我的網頁</h1>我正在按wikiHow指南編寫HTML網頁。<h3>我今天的目標：</h3><h5>已完成的目標：</h5>學會用頁眉。<h5>未完成的目標：</h5>學會更多文本格式化標籤</body>

（03）學會更多文本格式化標籤。你已經看過<strong>標籤了，但其實還有很多方法可以格式化文本。嘗試不同的標籤，或在相同的文本使用多種標籤。別忘了在文本後面添加尾標籤！<strong>重點強調的文本，在瀏覽器上以粗體顯示。</strong><em>強調文本，在瀏覽器上以斜體顯示。</em><small>比普通文本小一點。如果用在標題，則會自動縮放。</small><del>文本不再適用，以刪除線顯示。</del><ins>文檔其餘部分之外的插入文本，以下劃線顯示。</ins>

（04）排列網頁上的文本。你可能注意到單靠按回車鍵，並不能分行顯示文本。別擔心，以下標籤能幫助你分段和換行，或是以其它方式排列文本：<p>“paragraph段落”的縮寫，標籤裏的文本為一個段落，並與之前和之後的文本分離。</p><br>換行。由於它並未改變任何內容，所以''不需要''尾標籤。寫詩詞或地址時可以用到，但不能用來分段。<pre>如果你需要非常精確地呈現文本，那麼這個標籤裏面的文本，將呈現為等寬字體，並像普通打字那樣空格和換行，不需要使用相關標籤。</pre><blockquote>引用自某個資料來源的文本。</blockquote>你可以在後面添加<cite></cite>標籤，描述資料來源。

（05）添加註解文本。comment標籤不會出現在網頁上，你可以利用它們，在HTML文檔寫只給自己看的註釋，而不會影響網頁內容。不要添加尾標籤。有的標籤可以單獨存在，不需要尾標籤，被稱為“空標籤”。

（06）將所有標籤整合在一起。想記住這些標籤，最好的方法是在自己的網頁上使用它們。下面的例子使用了你目前學到的所有標籤。試着預測瀏覽器會如何呈現它們，然後複製粘貼到文檔，找出答案。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><title>我的第一個HTML網頁。</title></head><body><h1>歡迎來到我的網頁。</h1>希望你喜歡本網站！<p><strong>這是為你而做的。</strong><h2>部分1：我是怎麼HTML的</h2>我已經學了HTML 差不多<del>1</del> <ins>2</ins>個小時，算得上是半個專家了吧。</body></html>

添加鏈接和圖片

（01）瞭解特性（attributes）。你可以在每個標籤裏，寫上詳細信息。這些信息被稱為“特性”，是標籤裏的額外描述信息，格式為特性名字="特定值"。任何HTML標籤都可以有個標題特性：<p title="Introduction">在這裏寫一段介紹。</p>給這個段落取個標題叫“Introduction”，當你把滑鼠滑到網頁上的這一段文字時，標題就會出現。

（02）連接到另一個網頁。用<a> </a>標籤創建超鏈接，連接另一個網頁。用href特性插入你要連接的網頁地址。下面的例子連接到你現在閲讀的網頁：<a href="">網站訪客可以點擊這裏的文本，隨着鏈接進入wikihow網頁。</a>

（03）給標籤添加id特性。任何HTML都能用的另一個特性是“id”元素。在任何一個標籤裏，寫下id="example"，或輸入沒有空格的名稱。現在，它還沒有明顯的作用，但我們會在下一步用到它。舉個例子，在文檔裏輸入<p id="example">本段落將作為示例，展示id特性的作用。</p>

（04）連接到有特定id的元素。現在，我們可以用超鏈接標籤<a> </a>，連接到同一網頁的另一個目的地。我們用#符號代替網址，然後輸入要連接的id值。比如説，<a href="#example">這個文本將被連接到id為 "example"的段落。</a>所有HTML值都不分大小寫。不管是"#EXAMPLE"，還是"#example"，都會連接到同一個目的地。如果網頁太短，一次就能顯示全部內容，那麼點擊瀏覽器裏的鏈接時，可能看不到它的作用。調整窗口大小，直到滾動條出現，然後再試一次。

（05）添加圖片。<img>標籤是個空標籤，也就是説不需要尾標籤。用特性添加顯示圖片所需的全部信息。以下例子將顯示wikiHow的標誌，每個特性後面都有詳細的描述。<img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px; height:84px" alt="wikiHow logo">src=" "特性説明圖片的所在位置（一般而言，顯示他人網站上的圖片是無禮的行為，而且如果有關網站下線了，圖片也會跟着消失）。style=" "特性有很多用途，最重要的還是以像素為單位，設置圖片的寬度和高度。你也可以分開使用width=" "（寬度），和height=" "（高度）特性。但是，如果你之後用CSS，圖片大小會變得很奇怪。)alt=" "特性是圖片的簡要描述，如果圖片加載失敗，用户就會看到這行替代文字。它被視為必要的信息，因為盲人正是靠屏幕閲讀器，讀出這些信息，來了解圖片內容。

瞭解更多並把網頁放上網

（01）驗證HTML。驗證HTML，檢查代碼是否有錯誤。瀏覽器不能正確顯示網頁？進行驗證可以幫你找出有問題的錯誤。它也能識別出能正確顯示，但因為HTML規範更新而不建議使用的代碼，使你更瞭解HTML。雖然過時的HTML也能用，但用不同瀏覽器顯示時，網頁可能不一致或有問題。嘗試W3C的免費在線驗證服務，或是在網上搜索其它的HTML 5驗證器。

（02）瞭解更多標籤和特性。HTML標籤和特性還有很多，如果你有興趣，可以在許多地方學習：W3schools（中英文）和HTML Dog（英文）有更多教程，和更完整的標籤列表。尋找你喜歡的網頁，用瀏覽器的“查看頁面源代碼”（View Page Source）功能，自己看一看它們的HTML代碼。把它複製粘貼到你的文檔，自己修改及測試，看看它們的作用。閲讀其它相關的網絡文章。

（03）把網頁放上網。只要選擇一個網站託管服務，想上載多少HTML頁面到個人網域都可以。你首先需要使用FTP上載軟件。許多網站主機均有提供這項服務。連接自己網站上的網頁或圖片時，不需要使用完整的網址。舉個例子，如果你的域名是，輸入<a href="/journal/">文本</a>，就能連接到""。

（04）用CSS添加樣式。HTML頁面看起來有點簡單？不妨學一些基本的CSS，添加顏色、不同的字體，及更好地控制元素排列。將CSS的“stylesheet”連接到HTML頁面，這樣就能快速做出大改變，在一個特定標籤內，就能自動調整所有文本樣式。你可以用Notepad創建簡單的CSS樣式表，HTML Dog和W3schools也有提供更詳細的教程。