HTML语法初探（一）
最近由于想做一個(gè)個(gè)人網(wǎng)站或者簡(jiǎn)歷，所以在學(xué)習(xí)HTML語(yǔ)言，將學(xué)習(xí)過程記錄下來(lái)。
什么是 HTML？
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
- HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper?Text?Markup?Language)
- HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言?(markup language)
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽?(markup tag)
- HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
- HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
- HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
- 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
- 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
HTML 文檔 = 網(wǎng)頁(yè)
- HTML 文檔描述網(wǎng)頁(yè)
- HTML 文檔包含 HTML 標(biāo)簽和純文本
- HTML 文檔也被稱為網(wǎng)頁(yè)
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容：
<html> <body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body> </html>例子解釋
- <html> 與 </html> 之間的文本描述網(wǎng)頁(yè)
- <body> 與 </body> 之間的文本是可見的頁(yè)面內(nèi)容
- <h1> 與 </h1> 之間的文本被顯示為標(biāo)題
- <p> 與 </p> 之間的文本被顯示為段落
使用 Notepad 或 TextEdit 來(lái)編寫 HTML
可以使用專業(yè)的 HTML 編輯器來(lái)編輯 HTML：
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
不過，我們同時(shí)推薦使用文本編輯器來(lái)學(xué)習(xí) HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡(jiǎn)單的文本編輯器是學(xué)習(xí) HTML 的好方法。
通過記事本，依照以下四步來(lái)創(chuàng)建您的第一張網(wǎng)頁(yè)。
步驟一：啟動(dòng)記事本
如何啟動(dòng)記事本：
開始
????所有程序
????????附件
????????????記事本
步驟二：用記事本來(lái)編輯 HTML
在記事本中鍵入 HTML 代碼：
步驟三：保存 HTML
在記事本的文件菜單選擇“另存為”。
當(dāng)您保存 HTML 文件時(shí)，既可以使用 .htm 也可以使用 .html 擴(kuò)展名。兩者沒有區(qū)別，完全根據(jù)您的喜好。
在一個(gè)容易記憶的文件夾中保存這個(gè)文件，比如 w3school。
步驟四：在瀏覽器中運(yùn)行這個(gè) HTML 文件
啟動(dòng)您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。
結(jié)果應(yīng)該類似這樣：
HTML 標(biāo)題
HTML 標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
實(shí)例
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>HTML 段落
HTML 段落是通過 <p> 標(biāo)簽進(jìn)行定義的。
實(shí)例
<p>This is a paragraph.</p> <p>This is another paragraph.</p>HTML 鏈接
HTML 鏈接是通過 <a> 標(biāo)簽進(jìn)行定義的。
實(shí)例
<a href="http://www.w3school.com.cn">This is a link</a>HTML 圖像
HTML 圖像是通過 <img> 標(biāo)簽進(jìn)行定義的。
實(shí)例
<img src="w3school.jpg" width="104" height="142" />HTML 元素
HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
| <br /> | ? | ? |
注釋：開始標(biāo)簽常被稱為開放標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag）。
HTML 元素語(yǔ)法
- HTML 元素以開始標(biāo)簽起始
- HTML 元素以結(jié)束標(biāo)簽終止
- 元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
- 某些 HTML 元素具有空內(nèi)容（empty content）
- 空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
- 大多數(shù) HTML 元素可擁有屬性
提示：您將在本教程的下一章中學(xué)習(xí)更多有關(guān)屬性的內(nèi)容。
嵌套的 HTML 元素
大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文檔由嵌套的 HTML 元素構(gòu)成。
HTML 文檔實(shí)例
<html><body> <p>This is my first paragraph.</p> </body></html>上面的例子包含三個(gè) HTML 元素。
HTML 實(shí)例解釋
<p> 元素：
<p>This is my first paragraph.</p>這個(gè) <p> 元素定義了 HTML 文檔中的一個(gè)段落。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <p>，以及一個(gè)結(jié)束標(biāo)簽 </p>。
元素內(nèi)容是：This is my first paragraph。
<body> 元素：
<body> <p>This is my first paragraph.</p> </body><body> 元素定義了 HTML 文檔的主體。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <body>，以及一個(gè)結(jié)束標(biāo)簽 </body>。
元素內(nèi)容是另一個(gè) HTML 元素（p 元素）。
<html> 元素：
<html><body> <p>This is my first paragraph.</p> </body></html><html> 元素定義了整個(gè) HTML 文檔。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <html>，以及一個(gè)結(jié)束標(biāo)簽 </html>。
元素內(nèi)容是另一個(gè) HTML 元素（body 元素）。
不要忘記結(jié)束標(biāo)簽
即使您忘記了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地顯示 HTML：
<p>This is a paragraph <p>This is a paragraph上面的例子在大多數(shù)瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。
注釋：未來(lái)的 HTML 版本不允許省略結(jié)束標(biāo)簽。
空的 HTML 元素
沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。
<br> 就是沒有關(guān)閉標(biāo)簽的空元素（<br> 標(biāo)簽定義換行）。
在 XHTML、XML 以及未來(lái)版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實(shí)是更長(zhǎng)遠(yuǎn)的保障。
HTML 提示：使用小寫標(biāo)簽
HTML 標(biāo)簽對(duì)大小寫不敏感：<P> 等同于 <p>。許多網(wǎng)站都使用大寫的 HTML 標(biāo)簽。
因?yàn)槿f(wàn)維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來(lái) (X)HTML 版本中強(qiáng)制使用小寫。
HTML 屬性
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。
屬性實(shí)例
HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：
<a href="http://www.w3school.com.cn">This is a link</a>更多 HTML 屬性實(shí)例
屬性例子 1:
<h1> 定義標(biāo)題的開始。
<h1 align="center"> 擁有關(guān)于對(duì)齊方式的附加信息。
TIY : 居中排列標(biāo)題
屬性例子 2:
<body> 定義 HTML 文檔的主體。
<body bgcolor="yellow"> 擁有關(guān)于背景顏色的附加信息。
TIY : 背景顏色
屬性例子 3:
<table> 定義 HTML 表格。（您將在稍后的章節(jié)學(xué)習(xí)到更多有關(guān) HTML 表格的內(nèi)容）
<table border="1"> 擁有關(guān)于表格邊框的附加信息。
HTML 提示：使用小寫屬性
屬性和屬性值對(duì)大小寫不敏感。
不過，萬(wàn)維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。
始終為屬性值加引號(hào)
屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。雙引號(hào)是最常用的，不過使用單引號(hào)也沒有問題。
在某些個(gè)別的情況下，比如屬性值本身就含有雙引號(hào)，那么您必須使用單引號(hào)，例如：
name='Bill "HelloWorld" Gates'HTML 屬性參考手冊(cè)
我們的完整的 HTML 參考手冊(cè)提供了每個(gè) HTML 元素可使用的合法屬性的完整列表：
完整的 HTML 參考手冊(cè)
下面列出了適用于大多數(shù) HTML 元素的屬性：
| class | classname | 規(guī)定元素的類名（classname） |
| id | id | 規(guī)定元素的唯一 id |
| style | style_definition | 規(guī)定元素的行內(nèi)樣式（inline style） |
| title | text | 規(guī)定元素的額外信息（可在工具提示中顯示） |
如需更多關(guān)于標(biāo)準(zhǔn)屬性的信息，請(qǐng)?jiān)L問：
HTML 標(biāo)準(zhǔn)屬性參考手冊(cè)
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
總結(jié)
以上是生活随笔為你收集整理的HTML语法初探（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 平衡二叉树（AVL）--查找、删除、插入
- 下一篇： 前端每日值得花时间看的博客