web前端開發（一）—HTML基礎
目錄
web前端簡介
web前端開發是從網頁製作演變而來，名稱上有很明顯的時代特徵。在網際網路的演化程序中，網頁製作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，使用者使用網站的行為也以瀏覽為主。隨著網際網路技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，互動效果顯著，功能更加強大。
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。
什麼是HTML？
HTML 指的是超文字標記語言 (Hyper Text Markup Language)
HTML 不是一種程式語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML標籤
HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
標籤與標籤之間是可以巢狀的，但先後順序必須保持一致，如：<div>裡巢狀<p>，那麼</p>必須放在</div>的前面。
HTML基本結構
一個HTML檔案是有自己固定的結構，如下所示：
<html>
<head>...</head>
<body>...</body>
</html>
程式碼講解：
1. <html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在之後會詳細介紹。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。
在head中設定網頁標題和字符集編碼
<head>
<title>這裡是標題</title>
<meta charset="utf-8"/>
</head>
HTML 段落標籤
如果想在網頁上顯示文章，這時就需要<p>標籤了，把文章的段落放到<p>標籤中。
<p>段落 </p>
<p>標籤的預設樣式，段前段後都會有空白。
HTML 換行標籤
如果希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標籤：
<p>This is<br/>a para<br/>graph with line breaks</p>
HTML標題
標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
語法： <hx>標題文字</hx> (x為1-6)
題標籤的樣式都會加粗，h1標籤字號最大，h2標籤字號相對h1要小，以此類推h6標籤的字號最小。一個標題標籤要獨佔一整行。
HTML 水平線
<hr /> 標籤在 HTML 頁面中建立水平線,可用於分隔內容。
<p>This is a paragraph</p> <hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>HTML註釋
麼是程式碼註釋？程式碼註釋的作用是幫助程式設計師標註程式碼的用途，過一段時間後再看你所編寫的程式碼，就能很快想起這段程式碼的用途。程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途，還可以幫助其他程式設計師很快的讀懂你的程式的功能，方便多人合作開發網頁程式碼。
語法：
<!--註釋文字 -->
HTML <span>標籤
<span>它的作用就是為了結合CSS設定單獨的樣式用的，本身沒有任何效果。
HTML 列表標籤
1）無序列表
在瀏覽網頁時，你會發現網頁上有很多資訊的列表，如新聞列表、圖片列表，如下圖所示。
這些列表就可以使用ul-li標籤來完成。ul-li是沒有前後順序的資訊列表。
語法：
<ul> <li>...</li> <li>... </li> ......</ul>2）有序列表
如果想在網頁中展示有前後順序的資訊列表，怎麼辦呢？如，噹噹網上的書籍熱賣排行榜，如下圖所示。這類資訊展示就可以使用<ol>標籤來製作有序列表來展示。
語法：<ol> <li>資訊</li> <li>資訊</li> ......</ol>HTML表格
有時候我們需要在網頁上展示一些資料，如某公司想在網頁上展示公司的庫存清單。如下表：
想在網頁上展示上述表格效果可以使用以下程式碼：
建立表格的四個元素：
table、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
3、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
4、<th>…</th>：表格的頭部的一個單元格，表格表頭。
5、表格中列的個數，取決於一行中資料單元格的個數。
表格標題
<caption> 指定表格標題，它顯示在表格上方。
語法：
<table>
<caption>標題文字</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
合併單元格
有時候一些行和列需要合併，如下：
合併行使用rowspan屬性，合併列使用功能colspan屬性。
HTML超連結
使用<a>標籤可實現超連結，它在網頁製作中可以說是無處不在，只要有連結的地方，就會有這個標籤。
語法：
<a href="目標網址" title="滑鼠滑過顯示的文字">連結顯示的文字</a>
例如：
<a href="http://www.baidu.com" title="點選進入百度">click here!</a>
上面例子作用是單擊click here!文字，網頁連結到http://www.baidu.com這個網頁。
title屬性的作用，滑鼠滑過連結文字時會顯示這個屬性的文字內容。這個屬性在實際網頁開發中作用很大，主要方便搜尋引擎瞭解連結地址的內容（語義化更友好）
<a>標籤在預設情況下，連結的網頁是在當前瀏覽器視窗中開啟，有時我們需要在新的瀏覽器視窗中開啟。
如下程式碼：
<a href="目標網址" target="_blank">click here!</a>
HTML 圖片
在網頁的製作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標籤來插入圖片。
語法：
<img src="圖片地址" alt="下載失敗時的替換文字" title = "提示文字">
舉例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解：
1、src：標識影象的位置；
2、alt：指定影象的描述性文字，當影象不可見時（下載不成功時），可看到該屬性指定的文字；
3、title：提供在影象可見時對影象的描述(滑鼠滑過圖片時顯示的文字)；
4、影象可以是GIF，PNG，JPEG格式的影象檔案。
HTML表單
網站怎樣與使用者進行互動？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。
<form method="傳送方式" action="伺服器檔案">
講解：
1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。
3.method ： 資料傳送的方式（get/post）。
<form method="post" action="save.php">
<label for="username">使用者名稱:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>
注意:
1、所有表單控制元件（文字框、文字域、按鈕、單選框、複選框等）都必須放在 <form></form> 標籤之間（否則使用者輸入的資訊可提交不到伺服器上哦！）。
2、method : post/get
表單元素-文字、密碼框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文字輸入框。文字框也可以轉化為密碼輸入框。
語法：
<form>
<input type="text/password" name="名稱" value="文字" />
</form>
1、type：
當type="text"時，輸入框為文字輸入框;
當type="password"時, 輸入框為密碼輸入框。
2、name：為文字框命名，以備後臺程式ASP 、PHP使用。
3、value：為文字輸入框設定預設值。(一般起到提示作用)
舉例：
<form>
姓名：
<input type="text" name="myName">
<br/>
密碼：
<input type="password" name="pass">
</form>
在瀏覽器中顯示的結果：
表單元素-多行文字框
當用戶需要在表單中輸入大段文字時，需要用到文字輸入域。
語法：
<textarearows="行數" cols="列數">文字</textarea>
1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4、在<textarea></textarea>標籤之間可以輸入預設值。
舉例：
<form method="post" action="save.php"><label>聯絡我們</label>
<textarea cols="50" rows="10" >在這裡輸入內容...</textarea>
</form>注意：程式碼中的<label>標籤在本章5-9中講解。
在瀏覽器中顯示結果：
表單元素-選擇框
在使用表單設計調查表時，為了減少使用者的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項使用者只能選擇一項，而複選框中使用者可以任意選擇多項，甚至全選。請看下面的例子:
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>1、type:
當 type="radio"時，控制元件為單選框
當 type="checkbox" 時，控制元件為複選框
2、value：提交資料到伺服器的值（後臺程式PHP使用）
3、name：為控制元件命名，以備後臺程式 ASP、PHP 使用
4、checked：當設定 checked="checked" 時，該選項被預設選中
如下面程式碼：
注意：程式碼中的<label>標籤在本章 5-9 中有講解。
在瀏覽器中顯示的結果：
注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
表單元素-下拉選擇框
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下程式碼：
講解：
1、value：
2、selected="selected"：
設定selected="selected"屬性，則該選項就被預設選中。
在瀏覽器中顯示的結果：
表單元素-按鈕
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單資訊到伺服器時，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
type：只有當type值設定為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：
HTML-div
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。
語法：
<div>…</div>
確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標籤作為容器。
