01.HTML教程/簡介/基礎
HTML 教程- (HTML5 標準)
超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
您可以使用 HTML 來建立自己的 WEB 站點，HTML 執行在瀏覽器上，由瀏覽器來解析。
在本教程中，您將學習如何使用 HTML 來建立站點。
HTML 很容易學習！相信您能很快學會它！
HTML 例項
本教程包含了數百個 HTML 例項。
使用本站的編輯器，您可以輕鬆實現線上修改 HTML，並檢視例項執行結果。
注意：對於中文網頁需要使用 <meta charset="utf-8"> 宣告編碼，否則會出現亂碼。有些瀏覽器會設定 GBK 為預設編碼，則你需要設定為 <meta charset="gbk">。
例項
HTML文件的字尾名
- .html
- .htm
以上兩種字尾名沒有區別，都可以使用。
注意:HTML中不支援 空格、回車、製表符，它們都會被解析成一個空白字元。
utf-8 和 utf8 有什麼區別。
"UTF-8" 是標準寫法，php 在 Windows 下邊英文不區分大小寫，所以也可以寫成 "utf-8"。"UTF-8" 也可以把中間的"-"省略，寫成 "UTF8"。一般程式都能識別，但也有例外（如下文），為了嚴格一點，最好用標準的大寫"UTF-8"。
在資料庫中只能使用"utf8"(MySQL) 在MySQL的命令模式中只能使用"utf8"，不能使用"utf-8"，也就是說在PHP程式中只能使用 "set names utf8(不加小橫槓)"，如果你加了"-"此行命令將不會生效，但是在 PHP 中 header 時卻要加上"-"，因為 IE 不認識沒槓的"utf8"，原因見下文。
PHP 中的 header：
<?php header('Content-Type: text/html; charset=UTF-8'); ?> //奇怪了：Content-Type 用冒號，Chatset卻是等號。靜態檔案使用：
總結：【只有在MySQL中可以使用"utf-8"的別名"utf8"，但是在其他地方一律使用大寫"UTF-8"。】
具體為：
除了在命令 "mysql_query(set names utf8)" 外一律用大寫"UTF-8"。
htm 與 html 的區別
前者是超文字標記(Hypertext Markup)
後者是超文字標記語言(Hypertext Markup Language)
可以說 htm = html
同時，這兩種都是靜態網頁檔案的副檔名，副檔名可以互相更換而不會引起錯誤（這是指開啟而言，但是對於一個連結來說，如果它指向的是一個htm檔案，而那個htm檔案被更改為html檔案，那麼是找不到這個連結的）
那為什麼出現兩種檔案格式呢？
htm 是來源於老的 8.3 檔案格式，DOS 作業系統只能支援長度為三位的字尾名，所以是 htm,但在 windows 下無所謂 HTM 與 HTML，html 是為長檔名的格式命名的。所以 htm 是為了相容過去的DOS命名格式存在的，在效果上沒有區別的。以前 htm 和 html 作為不同的伺服器上的超文字檔案，但現在通用。
什麼是8.3檔案格式？ 這是一種在老的16位Win95或Win98檔案系統的短檔名檔案格式，副檔名只限於3位，檔名只限於8位。 如果要與16位系統互動，比如說，要把一個路徑傳給一個16位的程式，你就不能用長檔名，而必須對它進行轉換。例如把"C ： /MyLongestPath/MyLongerPath/MyFilename.txt"轉換成"C ： /Mylong~1/MyLong~2/Myfile~1.txt"
瞭解這個有什麼用？ 在FAT磁碟格式下的DOS中只支援8.3檔案格式，如果你要在這個環境下做應用，應該要注意這個檔案格式問題。在NTFS下，預設可以相容這種檔案格式，同時也支援長檔名，你也可以通過調整登錄檔來取消對8.3檔案格式也支援。
字尾名選擇：用 htm 還是用 html ?
推薦使用長字尾名 html 。
命名應該遵從含義清晰、簡潔、一致性原則。含義清晰指見名知義，比如這裡的 htm（hypertext markup） 和 html (hypertext markup language) 均採用的是英文單詞首字母縮寫，含義清晰。簡潔要求變數命名儘量簡短，比如此處字尾名使用首字母縮寫而不使用全單詞。一致性原則要求同環境下的大量變數命名符合同樣的規則，比如有的朋友習慣於Linux資料夾命名規則後，使用win系統時新建資料夾命名仍拒絕使用空格，這便造成了新資料夾名與舊資料夾名命名規則不一致。
一致性原則往往更為重要。比如合作開發時，不能各守其是，人為提高開發難度。
從一路風塵的筆記中，我們瞭解到 htm 是歷史遺留的8.3字元限制命名方式，而現在我們在命名時並未遵守8.3規則。因此，從 htm 和 html 中選擇時，也應該選擇無限制長度命名方式的 html 。
HTML 簡介
例項解析
- <!DOCTYPE html> 宣告為 HTML5 文件
- <html> 元素是 HTML 頁面的根元素
- <head> 元素包含了文件的元（meta）資料
- <title> 元素描述了文件的標題
- <body> 元素包含了可見的頁面內容
- <h1> 元素定義一個大標題
- <p> 元素定義一個段落
什麼是HTML?
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文字標記語言: HyperText Markup Language
- HTML 不是一種程式語言，而是一種標記語言
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
- HTML 文件包含了HTML 標籤及文字內容
- HTML文件也叫做 web 頁面
HTML 標籤
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。
- HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標籤通常是成對出現的，比如 <b> 和 </b>
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱為開放標籤和閉合標籤
<標籤>內容</標籤>
HTML 元素
"HTML 標籤" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標籤與結束標籤，如下例項:
HTML 元素:
<p>這是一個段落。</p>
Web 瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用於讀取HTML檔案，並將其作為網頁顯示。
瀏覽器並不是直接顯示的HTML標籤，但可以使用標籤來決定如何展現HTML頁面的內容給使用者：
HTML 網頁結構
下面是一個視覺化的HTML頁面結構：
只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示。 |
|---|
HTML版本
從初期的網路誕生後，已經出現了許多HTML版本:
版本 |
釋出時間 |
|---|---|
HTML |
1991 |
HTML+ |
1993 |
HTML 2.0 |
1995 |
HTML 3.2 |
1997 |
HTML 4.01 |
1999 |
XHTML 1.0 |
2000 |
HTML5 |
2012 |
XHTML5 |
2013 |
<!DOCTYPE> 宣告
<!DOCTYPE>宣告有助於瀏覽器中正確顯示網頁。
網路上有很多不同的檔案，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 宣告是不區分大小寫的，以下方式均可：
通用宣告
HTML5
HTML 4.01
XHTML 1.0
中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元宣告為 UTF-8。
HTML 例項
HTML 編輯器
HTML 編輯器推薦
可以使用專業的 HTML 編輯器來編輯 HTML，菜鳥教程為大家推薦幾款常用的編輯器：
- Notepad++：https://notepad-plus-plus.org/
- Sublime Text：http://www.sublimetext.com/
- HBuilder：http://www.dcloud.io/
你可以從以上軟體的官網中下載對應的軟體，按步驟安裝即可。
接下來我們將為大家演示如何使用Notepad++工具來建立 HTML 檔案，其他兩個工具操作步驟類似。
Notepad++
Notepad++是 Windows作業系統下的一套文字編輯器(軟體版權許可證: GPL)，有完整的中文化介面及支援多國語言編寫的功能(UTF8技術)。
步驟 1: 新建 HTML 檔案
在 Notepad++ 安裝完成後，選擇" 檔案(F)->新建(N) "，在新建的檔案中輸入以下程式碼：
步驟 2: 另存為 HTML 檔案
然後選擇" 檔案(F)->另存為(A) "，檔名為 runoob.html:
當您儲存 HTML 檔案時，既可以使用 .htm 也可以使用 .html 副檔名。兩者沒有區別，完全根據您的喜好。
在一個容易記憶的資料夾中儲存這個檔案，比如 runoob
步驟 3: 在瀏覽器中執行這個 HTML 檔案
啟動您的瀏覽器，然後選擇"檔案"選單的"開啟檔案"命令，或者直接在資料夾中雙擊您的 HTML 檔案,
執行顯示結果類似如下:
Notepad++ 和 Sublime Text 還可以配合 Emmet 外掛來提高編碼速度。
Emmet 官網：http://emmet.io/
注意：
每一種作業系統都帶有簡單的文字編輯器：
- Windows 使用者可以使用記事本；
- Linux 使用者可以選擇幾種不同的文字編輯器，如 vi、vim 或者 emacs ；
- Mac 使用者可以使用 OS X 預裝的 TextEdit。
HTML 基礎- 4個例項
不要擔心本章中您還沒有學過的例子，
您將在下面的章節中學到它們。
HTML 標題
HTML 標題（Heading）是通過<h1> - <h6> 標籤來定義的.
例項
HTML 段落
HTML 段落是通過標籤 <p> 來定義的.
例項
HTML 連結
HTML 連結是通過標籤 <a> 來定義的.
例項
提示:在 href 屬性中指定連結的地址。
(您將在本教程稍後的章節中學習更多有關屬性的知識).
HTML 影象
HTML 影象是通過標籤 <img> 來定義的.
例項
注意： 影象的名稱和尺寸是以屬性的形式提供的。