Html、CSS、JavaScript
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的。
Html文件基本結構
<html>
<head>…</head>
<body>…</body>
</html>
常見標籤
<hx></hx> 標題標籤 共有6個從h1到h6依次遞減。
<img src=”xx.jpg”/> 圖片標籤
<head></head> 頭標籤:
描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會作爲內容顯示給讀者。
<head>
<title> … </title>
<meta>
<link>
<style>…</style>
<script>…</script>
<head>
<title></title>標籤之間內容是網頁的標題信息。
<!—註釋文字—> 註釋標籤
<body></body> 顯示網頁的內容。
<p></p> 段落標籤
<em></em> 和<strong></strong> 表示強調。
<span></span> 該標籤沒有語義，它的作用就是爲了設置單獨的樣式用的。
<q></q> 短文本引用，不需要雙引號，會被自動加上雙引號。
<blockquote></blockquote> 長文本引用，也不用加雙引號。
<br/> 換行
空格
<hr/> 添加水平橫線
<address>地址</address> 顯示地址信息。
<code></code> 在文章中插入一行代碼時，可以使用code標籤。
<pre></pre> 插入一大段代碼時可以使用pre標籤，被pre元素包圍的文本通常會保留空格和換行符。
<ul><li></li><ul> 列表信息，無序列表。
<ol><li></li></ol> 列表信息，有序列表。
<div></div> 容器，可以把一些獨立的邏輯劃分出來，如網頁中的欄目板塊。
<table> 標籤
<table>
<tr> 表示一行
<td> 表示一列</td>
</tr>
</table>
<caption>表格標題</caption> 表格需要添加一些標籤進行優化，可以添加標題和摘要。
<table summary=”表格”>
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a href=”目標網址” title=”鼠標滑過顯示的文本”>鏈接顯示文本</a>
<a href=”目標網址” target=”_blank”>click here</a> 在新建瀏覽器中打開鏈接
使用mailto 在網頁中鏈接網頁地址： <a> 標籤還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。
一個電子郵件完整的實例
<img src=”圖片地址” alt=”下載失敗時替換文本” title=”提示文本”>
Src: 標識圖片的位置。
Alt：指定圖片的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本。
Title：提供在圖像可見時對圖像的描述（鼠標滑過圖片是顯示的文本）。
<form></form> 表單標籤，與用戶交互。
<from method=”傳送方式” action=”服務器文件”>
<form>: <form> 標籤是成對出現的，以<form>開始，以<form>結束
<action>:瀏覽器輸入的數據被傳送到的地方，如save.jsp
Method:數據傳輸方式（get、post）。
<input type=”text/password” name=”名稱” value=”文本”/> 文本框、密碼輸入框
Type: 當type=“text” 時，輸入框爲文本輸入框。 當type=”password”時，輸入框爲密碼輸入框。
Name：爲文本框命名，以備後臺asp php 使用。
Value：爲文本輸入框設置默認值。（一般爲提示作用）。
<textarea rows=”行數” cols=”列數” >文本</textarea> 文本域，支持多行輸入
1.<textarea>標籤是成對出現的。
2.cols：多行輸入域的列數。
3.rows：多上輸入域的行數。
4.在<textarea></textarea>標籤之間可以輸入默認值。
<form method=”post” action=“save.php”>
<textarea cols=”50” rows=”10” >在這裏輸入內容…</textarea>
</form>
<input type=”radio/checkbox” value=”值” name=”名稱” checked=“checked”/>
1. type : 當type=”radio” 時，控件爲單選框。 當 type=”checkbox” 時，控件爲複選框。
2. value：提交數據到服務器的值。
3. name：爲控件命名，以備後臺程序ASP、PHP使用。
4. checked=“checked” 該選項被默認選中。
注意：同一組的單選按鈕，name取值一定要一致。
使用下拉列表，節省空間。
<select>
<option value=”提交值” selected=”selected”>顯示值</option> 表示被默認選中
…
</select>
使用下拉列表框進行多選
下拉列表也可以進行多選操作，在<select>標籤中設置 multiple=“multiple” 屬性，就可以實現多選功能，在windows操作系統下，進行多選時同時按下Ctrl 鍵和 單擊 。
<select multiple=”multiple”>
…
</select>
<input type=”submit” value=”提交”/> 提交按鈕，用於提交表單數據。
<input type=”reset” value=”重置”/> 重置按鈕，使輸入框恢復到初識狀態。
<label for=”控件id名稱”>
Label標籤不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶改進了可能性。如果你在label標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和標籤相關聯的表單控件上）。
注意：標籤的for屬性中的值要和相關控件的id屬性值相同。
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>