前端07班 王
初識HTML
本節預告：
1.什么是HTML
2.HTML文件結構
3.HTML文檔
4.HTML標簽
5.感受HTML
6.課程定位
7.學習路徑
寫在前面：如果你想制作自己的網頁，做網頁設計，網站開發，那么你首先要學習的就是HTML，并能熟練掌握HTML文件的編寫。也許你編程語言學的不好甚至很差，不要怕，HTML完全是另一種語言，又是一片新天地，說不定這才是適合你的舞臺哦。HTML很容易上手的，Don’t be shy ，let’s have a try !!!開始定制只屬于你自己的網頁吧。
1.什么是HTML
首先，HTML是一種語言，是用來描述網頁的語言
HTML 指的是超文本標記語言 (Hyper Text Markup Language) 所謂的超文本就是指頁面內可以包含圖片、鏈接、甚至音樂，等非文字元素
HTML 不是一種編程語言，而是一種標記語言 (markup language)所以就算你什么編程語言都不懂，沒關系，完全可以上手HTML。 標記語言：一套標記標簽 (markup tag)（也就是一些特定的符號，后面我們會講到）
HTML 就是使用標記標簽來描述網頁
HTML文件后綴名就是(.html),你可以使用一般的文本編輯器就能編輯（在我們環境中可以使用Brackets，gedit，vim），之后再使用瀏覽器打開，就能看見所你所編輯的網頁
下面我們就來看看別人寫好的HTML文件
這張圖是網上找的簡單的html截圖，我們也可以直接打開環境里的瀏覽器，右鍵，view page source。
實際的HTML文件和網頁的展示就像下面的截圖（實驗樓的主頁）：
只是想讓大家看看：html文件寫出來就是長這個樣的。但千萬不要以為好麻煩的樣子，很多HTML文件只是篇幅大而已，請相信，上手肯定不難的。下面我們一一解剖它。
2.HTML文件結構
這里先看一張HTML的文件的結構圖
在這張圖中，展示的是html文件簡單的結構圖（各個部分我們會一一講解），我們可以對比看，一般的html文件結構就是下面這樣
<html> <head> <title>.....</title> </head> <body> <p>.....</p> </body></html>
前面說過，HTML是一種標記語言，這些<..>就叫做標簽，而HTML就是使用這些標簽來描述網頁的。了解大體結構以后，后面我們會學習HTML的標簽。
3.HTML文檔
HTML 文檔也被稱為網頁 HTML 文檔包含 HTML 標簽和純文本 Web 瀏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們。瀏覽器不會顯示 HTML標簽（相當于是隱藏的格式描述），而是使用標簽來解釋頁面的內容：
下面我們具體來看一看對應的解釋：
<html> <body> <h1>First Heading</h1> <p>first paragraph</p> </body></html>
< html> 與 < /html> 之間的文本描述網頁 < body> 與 < /body> 之間的文本是可見的頁面內容 < h1> 與 < /h1> 之間的文本被顯示為標題 < p> 與 < /p> 之間的文本被顯示為段落
4.HTML標簽
什么是標簽
標簽就是上面這些< head>、< body>、< table> 等被尖括號“<”和“>”包起來的對象，絕大部分的標簽都是成對出現的，如< table>< /talbe>、< form>< /form>。標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽，開始和結束標簽也被稱為開放標簽和閉合標簽;當然還有少部分不是成對出現的，如< br>、< hr>等。標簽就是用來標記HTML元素的。位于起始標簽和結束標簽之間的文本就是HTML元素的內容。
提前介紹什么是元素（對比）
很多人可能都沒有把哪個叫標簽，哪個叫元素這個概念搞清楚，學了一直都是混淆著。 為了避免這樣的悲劇再發生，我在這里就提前區別，事實上兩者之間的概念還是很清楚的
HTML網頁實際上就是由許許多多各種各樣的HTML元素構成的文本文件，并且任何網頁瀏覽器都可以直接運行HTML文件。所以可以這樣說，HTML元素就是構成HTML文件的基本對象，HTML元素可以說是一個統稱而已。HTML元素就是通過使用HTML標簽進行定義的。
比如< p>這就是一個標簽；< p>內容< /p>這就是一個元素，也就是說元素由一個開始的標簽和結束的標簽組成，用來包含某些內容;這里有一個值得注意的例外，即< br/>本身既是開始標簽也是結束標簽，但不包含任何內容，所以這只是個標簽。
我們后面會有具體的章節來講述元素，這里是為了避免概念與標簽混亂先簡單提一下。
常用的標簽
我們知道，網頁能實現各種各樣的定制，實現各種各樣的功能，反過來可以說明我們的標簽種類是很多的，這樣才能實現各種各樣的功能及定義。而這里我們先講四個最基本的標簽
HTML標題 Heading 是通過 < h1> - < h6> 等標簽進行定義的。 示例：
<h1>This is first heading</h1><h2>This is second heading</h2><h3>This is third heading</h3>......
HTML段落 paragraph 是通過 < p> 標簽進行定義的。 示例：
<p>This is a paragraph.</p><p>This is another paragraph.</p>......
HTML鏈接 鏈接 是通過 < a> 標簽進行定義的。 示例：
<a >This is a link</a>
HTML圖像 image是通過標簽進行定義的。 示例：
<img src="shiyanlou.jpg" width="100" height="142" />
這里只是簡單的展示四個常用的標簽，至于具體使用方法及其他標簽，我們會在后面章節具體講述。這里還要補充的一點就是：HTML 標簽對大小寫不敏感：< P> 等同于 < p>。許多網站都使用大寫的 HTML 標簽。 W3School 使用的是小寫標簽，因為萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。所以在之后的標簽，還有屬性的書寫中我們一律采取小寫。
5.感受HTML
盡管現在我們還沒有入門，盡管我們只知道了一丟丟，拋開一切，嘗嘗味道先。用上面剛學到的一兩個標簽，寫一個簡單的例子吧，體驗一把編輯的樂趣。
我們就先寫一個最簡單的"hello shiyanlou " 這是自己在環境里面使用vim編輯器編輯的簡單的test.html
保存之后用瀏覽器打開就是這樣的
大家可以對比結果與HTML內容看看
6.課程定位
面對人群及難易程度：對于這門課，我們不會講解很深入的東西，是想讓更多想入門學習HTML的學員輕松的上手，所以會以簡單的示例為主。寫這一段是為了讓大家在一開始就對本門課程有比較全面的了解。
7.學習路徑
學習方法：
對于初學者，堅持動手是提高的唯一路徑，這樣不僅讓學習有趣起來，吸收提高也相當快。對于開發環境，一開始我不建議用什么比較強大的HTML IDE，就用一般的文本編輯器就很好，在我們的環境中建議使用vim或者gedit，后面我們會使用brackets，雖然有很多不便的地方，但是對于初學者，這樣易于學習，理解。等熟練以后，我們再使用功能強大的開發環境來提高開發效率。
學習路徑：
在這門課中我們會學習到HTML的基礎運用，下面我用一張圖來描述下我們整門課程的學習路徑
小結
這一講中帶大家初步認識了HTML并學習了HTML的基礎知識，為后續的學習鋪墊理論基礎，建立一個比較清晰的框架。
注：轉載
