原文：HTML的學習資料
NanShan 小編網絡收集了關於HTML的學習資料，需要的朋友可以收藏，好記性不如爛筆頭，學習就要從基礎開始。
HTML基本概念
什麼是HTML文件？
• HTML 的英文全稱是Hypertext Marked Language，中文叫做“超文本標記語言”。
• 和一般文本的不同的是，一個HTML 文件不僅包含文本內容，還包含一些Tag，中
文稱“標記”。
• 一個HTML 文件的後綴名是.htm 或者是.html。
• 用文本編輯器就可以編寫HTML 文件。
這就試寫一個HTML文件吧！
打開你的記事本，新建一個文件，然後拷貝以下代碼到這個新文件，然後將這個文件存
成first.html。
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
要瀏覽這個first.html 文件，雙擊它。或者打開瀏覽器，在File 菜單選擇Open，然後選
擇這個文件就行了。
解釋
這個文件的第一個Tag 是<html>，這個Tag 告訴你的瀏覽器這是HTML 文件的頭。文件
的最後一個Tag 是</html>，表示HTML 文件到此結束。
在<head>和</head>之間的內容，是Head 信息。Head 信息是不顯示出來的，你在瀏
覽器裏看不到。但是這並不表示這些信息沒有用處。比如你可以在Head 信息里加上一些
關鍵詞，有助於搜索引擎能夠搜索到你的網頁。
在<title>和</title>之間的內容，是這個文件的標題。你可以在瀏覽器最頂端的標題欄看
到這個標題。
在<body>和</body>之間的信息，是正文。
在<b>和</b>之間的文字，用粗體表示。<b>顧名思義，就是bold 的意思。
HTML 文件看上去和一般文本類似，但是它比一般文本多了Tag，比如<html>，<b>等，
通過這些Tag，可以告訴瀏覽器如何顯示這個文件。
HTML元素(HTML Elements)
• HTML 元素(HTML Element)用來標記文本，表示文本的內容。比如body, p, title
就是HTML 元素。
• HTML 元素用Tag 表示，Tag 以<開始，以>結束。
• Tag 通常是成對出現的，比如<body></body>。起始的叫做Opening Tag，結
尾的就叫做Closing Tag。
• 目前HTML 的Tag 不區分大小寫的。比如，<HTML>和<html>其實是相同的。
HTML元素(HTML Elements)的屬性
HTML 元素可以擁有屬性。屬性可以擴展HTML 元素的能力。
比如你可以使用一個bgcolor 屬性，使得頁面的背景色成爲紅色，就像這樣：
<body bgcolor="red">
再比如，你可以使用border 這個屬性，將一個表格設成一個無邊框的表格。如下：
<table border="0">
屬性通常由屬性名和值成對出現，就像這樣：name="value"。上面例子中的bgcolor,
border 就是name，red 和0 就是value。屬性值一般用雙引號標記起來。
屬性通常是附加給HTML 的Opening Tag，而不是Closing Tag。
一些基礎的HTML Tag
HTML 裏，比較基礎的Tag 主要用於標題，段落和分行。
學習HTML 最好的方法，就是跟着學。爲了各位學習的方便，我們準備了一個簡單的HTML
編輯器，你可以在左邊寫HTML 代碼，然後點擊上面的按鈕，查看HTML 的顯示結果。
試試看吧！
<html>
<body>
這是一個非常簡單的HTML。
</body>
</html>)
這個算是一個最簡單的HTML 文件，只包含了最基本的能構成一個HTML 文件的Tag。通
過這個例子，你可以看到瀏覽器是如何顯示這個文件的，以此對HTML 文件有個最初的認
識。
<html>
<body>
<p>這是第一段。</p>
<p>這是第二段。</p>
<p>這是第三段。</p>
<p>在HTML 裏，用p 來定義段落。</p>
</body>
</html>
這個顯示在HTML 文件裏如何分段。
正文標題
這個告訴你如何在HTML 文件裏定義正文標題。
HTML 用<h1>到<h6>這幾個Tag 來定義正文標題，從大到小。每個正文標題自成一段。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
段落劃分
在HTML 裏用<p>和</p>劃分段落。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
換行
通過使用<br>這個Tag，可以在不新建段落的情況下換行。<br>沒有Closing Tag。
用<p>換行是個壞習慣，正確的是使用<br>。
<p>This <br> is a para<br>graph with line breaks</p>
HTML註釋
在HTML 文件裏，你可以寫代碼註釋，解釋說明你的代碼，這樣有助於你和他人日後能夠
更好地理解你的代碼。
註釋可以寫在<!--和-->之間。瀏覽器是忽略註釋的，你不會在HTML 正文中看到你的注
釋。
<!-- This is a comment -->
一些小建議
HTML 文件會自動截去多餘的空格。不管你加多少空格，都被看做一個空格。一個空行也
被看做一個空格。
有些Tag 能夠將文本自成一段，而不需要使用<p></p>來分段。比如<h1></h1>之類
的標題Tag。
更多
<html>
<body>
<p>
這一段在源代碼裏包含很多分行，但是瀏覽器忽略這些分行。
</p>
<p>
這一段在瀏覽器裏
包含很多空格，
但是瀏覽器忽略多餘空格。
</p>
<p>
你使用的瀏覽器的窗口大小決定了段落的行數。如果你改編瀏覽器窗口的大小，段落的行數
會因此改變。
</p>
</body>
</html>
這個顯示了段落的特性。
<html>
<body>
<p>
要<br>在一段<br>裏<br>換行<br>請使用<br>br 這個Tag。
</p>
</body>
</html>
這個告訴你如何在HTML 文件裏換行。
<html>
<body>
<h1>這是1 號標題</h1>
<h2>這是2 號標題</h2>
<h3>這是3 號標題</h3>
<h4>這是4 號標題</h4>
<h5>這是5 號標題</h5>
<h6>這是6 號標題</h6>
</body>
</html>
這個教會你如何在HTML 文件裏顯示正文標題。
<html>
<body>
<h1 align="center">這是標題</h1>
<p>上面的標題是居中顯示的。</p>
</body>
</html>
這個告訴你如何將正文標題居中顯示。
<html>
<body>
<p>用hr 這個Tag 可以在HTML 文件里加一條橫線。</p>
<hr>
<p>村婦想像皇宮的生活：皇后得用金扁擔挑水吧。</p>
<hr>
<p>問：誰是世界上最可憐的人？答：炮兵連炊事班戰士！問：爲什麼？答：戴綠帽背黑
鍋看別人打炮。</p>
<hr>
<p>初中某數學老師講方程式變換，在講臺上袖子一挽大聲喝道：同學們注意！我要變形
了！……</p>
</body>
</html>
這個演示瞭如何在HTML 文中加條橫線。
<html>
<body>
<!--這是代碼註釋-->
<p>代碼註釋是不會顯示在網頁裏的。</p>
</body>
</html>
這個演示如何在HTML 代碼中加上代碼註釋，這些註釋只顯示在HTML 源代碼中，而源代
碼最終形成的網頁裏是看不到這些註釋的。
<html>
<body bgcolor="yellow">
<h2>看，這個頁面是黃色的。</h2>
</body>
</html>
這個演示如何改變HTML 文件的背景色。
HTML常用格式
HTML 定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下
面的，你可以瞭解各種文本格式Tag 如何改變HTML 文本的顯示。
常用文本格式Tag
Tag Tag說明
<b> 粗體bold
<i> 斜體italic
<del> 文字當中劃線表示刪除
<ins> 文字下劃線表示插入
<sub> 下標
<sup> 上標
<blockquote> 縮進表示引用
<pre> 保留空格和換行
<code> 表示計算機代碼，等寬字體
<html>
<body>
<p><b>粗體用b 表示。</b></p>
<p><i>斜體用i 表示。</i></p>
<p><del>芙蓉姐姐</del>這個詞當中劃線表示刪除。</p>
<p><ins>想唱就唱</ins>這個詞下劃線插入。</p>
<p>X<sub>2</sub>其中的2 是下標</p>
<p>X<sup>2</sup>其中的2 是上標</p>
<p><blockquote>好好學習，天天向上。這句話縮進表示引用</blockquote></p>
<pre>
這是
預設(preformatted)文本.
在pre 這個tag 裏的文本保留
空格和
分行。
</pre>
<code>call getOrders</code>
<p>用code 顯示計算機代碼，code 裏顯示的字符是等寬字符。</p>
</body>
</html>
這個用了上述Tag，你可以對比一下HTML 的顯示結果。
如何看HTML的源代碼
在瀏覽器看到的HTML 網頁，是瀏覽器解釋HTML 源代碼後產生的結果。
要查看這個HTML 的源代碼，有兩種方法。一是點擊鼠標右鍵，點擊View Source(查看
源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。
利用View Source 得到網頁的源代碼，你可以由此借鑑一下別人寫得好的地方。不過在你
對HTML 知識尚少的情況下，看別人複雜的HTML 源代碼，只會讓你頭暈。建議你還是再
等等，先掌握一些基礎再說。
HTML 特殊字符顯示
HTML字符實體(Character Entities)
有些字符在HTML 裏有特別的含義，比如小於號<就表示HTML Tag 的開始，這個小於號
是不顯示在我們最終看到的網頁裏的。那如果我們希望在網頁中顯示一個小於號，該怎麼辦
呢？
這就要說到HTML 字符實體(HTML Character Entities)了。
一個字符實體(Character Entity)分成三部分：第一部分是一個&符號，英文叫
ampersand；第二部分是實體(Entity)名字或者是#加上實體(Entity)編號；第三部分是
一個分號。
比如，要顯示小於號，就可以寫<或者<。
用實體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是less than 的意思，但是
其劣勢在於並不是所有的瀏覽器都支持最新的Entity 名字。而實體(Entity)編號，各種瀏
覽器都能處理。
注意：Entity 是區分大小寫的。
如何顯示空格
通常情況下，HTML 會自動截去多餘的空格。不管你加多少空格，都被看做一個空格。比如
你在兩個字之間加了10 個空格，HTML 會截去9 個空格，只保留一個。爲了在網頁中增加
空格，你可以使用 表示空格。
最常用的字符實體(Character Entities)
顯示結果說明Entity Name Entity Number
顯示一個空格  
< 小於< <
> 大於> >
& &符號& &
" 雙引號" "
其他常用的字符實體(Character Entities)
顯示結果說明Entity Name Entity Number
© 版權© ©
® 註冊商標® ®
× 乘號× ×
÷ 除號÷ ÷