web前端學習（3）：認識HTML基本標簽
本章主旨：
介紹常用的文本相關標簽，如<h>,<p>,<a>;簡介常見的HTML標簽屬性，如title屬性,href屬性,id/class屬性等；重點掌握<a>標簽。
在第二章中我們已經了解到網頁可以劃分為<html>部,<head>部,<body>部這三個部分，網頁文檔內容將寫入其中的<body>部；同時，我們開始接觸到了標簽，也對標記語言的“標記”二字有了些許體會。學習HTML的過程，大體上來說，就是學會使用標簽的過程。在實際生活中，網頁最重要的目的，是展示內容，一個網頁中，可能會有眾多字號大小不同的標題、一個個段落，也會有常見的超鏈接用以“跳轉頁面”（比如網站的導航欄），甚至也會有圖片、表格、列表等等內容。而要實現這些，少不了標簽的參與。而在本章中，我主要介紹的是些簡單的、與文本相關的標簽，以及常見的HTML標簽屬性。
一、網頁內容的結構必須由標簽說明
網頁文檔內容將寫入其中的<body>部，那麽讓我們模仿“報紙”，試著在<body>中寫出一份有標題段落的文本並用瀏覽器打開它（註意：在html中，我們用<!--註釋內容-->來進行註釋，註釋主要是為了讓自己更好的控制網頁的結構，瀏覽器在顯示網頁時會把註釋的內容忽略掉）。
<html>
<head> </head> <body> <!--以下是標題--> 時習 <!--以下是兩段段落--> 學而時習之，不亦說乎。學而時習之，不亦說乎。學而時習之，不亦說乎。
學而時習之，不亦說乎。學而時習之，不亦說乎。學而時習之，不亦說乎。
</body> </html>
從上圖中我們可以看到，瀏覽器做了它的首要工作——顯示文本，但是與此同時，我們設置的標題並沒有標題的“特點”，設置的段落也完全忽視了兩段式的格式，換句話說，瀏覽器完全忽略了HTML中的換行和空格。有可能你會想了，怎麽樣讓瀏覽器明白哪裏是標題，哪裏是段落，哪裏有空格，哪裏要換行呢？是不是也可以做個標記讓瀏覽器知道呢？是的，請記住——網頁內容的結構必須由標簽說明。如果想要實現我們想要的效果，我們就要用相應的標簽去修飾文本。
二、最常用的文本修飾標簽
試著為標題文本添上<h1>標簽，為段落文本添上<p>標簽吧!（註意：h即heading；p即paragraph;）
<head> </head> <body> <!--以下是標題--> <h1>時習</h1> <!--以下是兩段段落--> <p>學而時習之，不亦說乎。學而時習之，不亦說乎。學而時習之，不亦說乎。</p> <p>學而時習之，不亦說乎。學而時習之，不亦說乎。學而時習之，不亦說乎。</p> </body> </html>
嗯，我們成功得到了一個顯眼的標題和兩個段落。仔細觀察上圖所截的網頁頁面，標記了<h1>,<p>標簽的文本都在結束後自動換行了。不過<h1>中的‘h‘表示heading，那個‘1‘又表示什麽呢？其實<h1>表示的是1級heading，也即1級標題。顯然，有1級標題，就肯定有其他級別的標題。其實HTML中共有六級標題，從<h1>到<h6>依次遞減，在同一個瀏覽器中，它們默認保持級數越大、字號越小的規則。我們可以嘗試一下看看不同級別標題的差別。
<head> </head> <body> <!--以下是一級標題--> <h1>時習之</h1> <!--以下是二級標題--> <h2>時習之</h2> <!--以下是三級標題--> <h3>時習之</h3> <!--以下是四級標題--> <h4>時習之</h4> <!--以下是五級標題--> <h5>時習之</h5> <!--以下是六級標題--> <h6>時習之</h6> </body> </html>
三、超文本的主角——超鏈接
你是否想過，為什麽當我們點擊博客園上方的導航欄上的文字後，我們就能到達另一個頁面呢？實現從一個網頁跳到另一個網頁（關於超鏈接連接到本文檔內部的情況我們暫且不論），我們必須要經過一個連接了著陸點的“錨”，而這個“錨”上就有著“鏈接”，當我們點擊它時，我們就可以順著“錨”上的“鏈接”前往目標頁面，這個“錨”，就是<a>標簽，‘a‘就意味著anchor。由<a>修飾的文本代表著此文本是個超鏈接，它將連接到指定地址，對於我們來說，就是另一網頁的所在地址。下面假設我們要建立一個鏈接到百度的超鏈接，首先可以肯定的是我們需要一個錨<a>，其次，我們需要知道百度的地址，但是找到地址後我們該如何把地址記錄下來呢？這裏就要引入<a>標簽的href屬性了（註意：如果<a>指向互聯網上的網頁，href盡量給出"http://",如果不給出有可能出現無法連接至網頁的情況）。
<head> </head> <body> <!--這是一個超鏈接--> <a href="http://www.baidu.com">點我鏈接到百度</a> </body> </html>
當我們點擊這段文本，瀏覽器就會順著“錨”上的“鏈接”帶我們到達指定頁面：
四、簡介HTML的標簽屬性
標簽一般成對出現，分為開始標簽和結束標簽，如<h1>、</h1>;
HTML標簽都具有屬性，如id,class,title,alt等。但是並不是所有的標簽都需要設置屬性，只有像<a>的href這樣缺少就會出問題的屬性才必須要設置，因為如若不設置，就找不到目標網頁的位置，這個超鏈接自然會失效。通常屬性在開始標簽設置，同時屬性與標簽、屬性與屬性之間要用空格隔開。屬性會有一個屬性值，通常形式為：屬性=“屬性值 ”。有的屬性的屬性值不止一個，則需用分號隔開，形式為：屬性=“屬性值1；屬性值2；屬性值3；”。讓我們為上述的超鏈接增添新的title屬性,看看會有什麽新的變化。
<head> </head> <body> <!--這是一個超鏈接--> <a href="http://www.baidu.com" title="baidu">點我鏈接到百度</a> </body> </html>
在我們進一步給<a>添加了title屬性後，鼠標移到超鏈接文本上時會出現title的屬性值內容，這有助於讓用戶得到更多你想傳達的消息。
在本章，我們主要學習了與文本有關的一些簡單標簽，同時也學習了一些標簽屬性，主要的重點在於超鏈接的設置。今天的例子雖然有了基本的文本與結構，但是卻沒有圖片。在接下來的章節裏，我將會進行介紹。文章排版一直在變，一是自己也在找自己的風格，二是發到首頁的文章因為格式之類的問題被移出了首頁，所以在慢慢改，請見諒。
web前端學習（3）：認識HTML基本標簽