-
1 # 過年不下雨
-
2 # 鱷魚的微笑
HTML檔案製作方法如下：
一，開啟簡單的文字編輯器。NotePad是不錯的選擇，而且可以免費下載。大部分文字編輯軟體都能編寫HTML，不過，複雜的軟體有自動格式功能，比較難組織HTML頁面。
不建議使用TextEdit，它經常將檔案儲存成無法被瀏覽器識別為HTML的格式。
你也可以用線上HTML編輯器。不建議初學者使用專業的HTML編輯程式。
將檔案格式改成“網頁”（Web Page）、“.html”或“.htm”，存在容易找到的位置。
上面三個選擇是一樣的，沒有差別。
三，用網頁瀏覽器開啟檔案，雙擊檔案，它應該會自動在瀏覽器開啟，但現在還只是個空白網頁。
開啟檔案（Open File），然後選擇檔案。
這個網頁並不在網上，只能在你的電腦上看到。
四，更新網頁，檢視已儲存的更改。將<strong>Hello</strong>輸入空白的檔案。
更新瀏覽器上的空白網頁，你應該可以看到網頁上方有個加粗的“Hello”字眼。在本教程中，你隨時可以測試新的HTML。只要儲存.html檔案，然後更新瀏覽器視窗，就能看到瀏覽器如何詮釋HTML。
瀏覽器出現“<strong>”和“</strong>”字眼，代表你的檔案並未被正確詮釋為HTML。換個不同的文字編輯程式或瀏覽器。
五，瞭解標籤。HTML的指示寫在標籤之間，告訴瀏覽器要如何詮釋及呈現網頁。
標籤被尖括號<>括起來，網頁上看不到。你在上面的例子中已經用到它們了：<strong>是“首標籤”，或“起始標籤”。
寫在這個標籤後的內容被定義為“重點強調的文字”（通常在網頁上以粗體顯示）。
</strong>是“尾標籤”，或“結束標籤”。尾標籤有多一條斜槓“/”，表示重點強調的文字就此結束。
大部分標籤都需要尾標籤，才能起作用，所以別忘了它。
這個HTML程式碼告訴瀏覽器你使用哪一版HTML，網頁所有內容都在<html>和</html>標籤之間。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
</html>
七，新增head和body標籤。HTML文件分為2個部分。“Head”部分是特別資訊，例如網頁標題。“Body”部分則包括網頁內容。
將這兩個標籤放進文件，別忘了尾標籤。粗體字為新新增的文字。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
八，取個標題。對初學者來說，head部分的標籤大多不重要。
不過，標題標籤方便使用，而且決定了瀏覽器視窗，或選項卡上顯示的名稱。在head標籤的首標籤和尾標籤之間，寫下你喜歡的標題：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>我的第一個HTML網頁。</title>
</head>
<body>
</body>
</html>
擴充套件資料：
HTML新增連結和圖片方法：
一，瞭解特性（attributes）。你可以在每個標籤裡，寫上詳細資訊。這些資訊被稱為“特性”，是標籤裡的額外描述資訊，格式為特性名字="特定值"。任何HTML標籤都可以有個標題特性：
<p>在這裡寫一段介紹。
</p>給這個段落取個標題叫“Introduction”，當你把滑鼠滑到網頁上的這一段文字時，標題就會出現。
二，連線到另一個網頁。用<a> </a>標籤建立超連結，連線另一個網頁。用href特性插入你要連線的網頁地址。
下面的例子連線到你現在閱讀的網頁：
三，給標籤新增id特性。任何HTML都能用的另一個特性是“id”元素。
在任何一個標籤裡，寫下id="example"，或輸入沒有空格的名稱。現在，它還沒有明顯的作用，但我們會在下一步用到它。
舉個例子，在文件裡輸入<p>本段落將作為示例，展示id特性的作用。</p>
四，連線到有特定id的元素。現在，我們可以用超連結標籤<a> </a>，連線到同一網頁的另一個目的地。
所有HTML值都不分大小寫。不管是"#EXAMPLE"，還是"#example"，都會連線到同一個目的地。
五，新增圖片。<img>標籤是個空標籤，也就是說不需要尾標籤。用特性新增顯示圖片所需的全部資訊。以下例子將顯示wikiHow的標誌，每個特性後面都有詳細的描述。
<img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png">
src=" "特性說明圖片的所在位置（一般而言，顯示他人網站上的圖片是無禮的行為，而且如果有關網站下線了，圖片也會跟著消失）。
style=" "特性有很多用途，最重要的還是以畫素為單位，設定圖片的寬度和高度。你也可以分開使用width=" "（寬度），和height=" "（高度）特性。但是，如果你之後用CSS，圖片大小會變得很奇怪。)
alt=" "特性是圖片的簡要描述，如果圖片載入失敗，使用者就會看到這行替代文字。它被視為必要的資訊，因為盲人正是靠螢幕閱讀器，讀出這些資訊，來了解圖片內容。
回覆列表
1，使用sublime開發工具新建檔案 2，開啟檔案，點選新建檔案，快捷鍵Ctrl+N3,新建以後儲存檔案，檔案字尾名一定要是.html4，英文狀態下輸入一個"!",然後按一下TAB鍵快速生成html骨架5，最後就生成了一個html檔案