HTML、CSS、JavaScript語言
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的。
html的基本標籤
<h1></h1>就是標題標籤。
<p></p>是段落標籤。
圖片由img標籤來完成的，它在網頁上的代碼寫成<img
src="1.jpg">
HTML標籤不區分大小寫，
<h1>和
<H1>是一樣的，但建議小寫，因爲大部分程序員都以小寫爲準。
1. <html></html>稱爲根標籤，所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裏的標籤中的內容會在瀏覽器中顯示出來。
head中的標籤
下面這些標籤可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標籤：在<title>和</title>標籤之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標籤用於告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
代碼註釋
代碼註釋是幫助程序員標註代碼的作用，過一段時間後再看你所編寫的代碼，就能很快想起這段代碼的作用。代碼註釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。
標題標籤
使用<hx>標籤來製作文章的標題。
標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別爲一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
強調標籤
<em> 表示強調，<strong> 表示更強烈的強調。並且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。
1. <em>和<strong>標籤是爲了強調一段話中的關鍵字時使用，它們的語義是強調。
2. <span>標籤是沒有語義的，它的作用就是爲了設置單獨的樣式用的。
如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue（藍色），但注意不是爲了強調“美國夢”，而只是想爲它設置和其它文字不同的樣式（並不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標籤了。
q標籤，短文本引用
想在你的html中加一段引用嗎？比如在你的網頁的文章裏想引用某個作家的一句詩，這樣會使你的文章更加出彩，那麼<q>標籤是你所需要的。
語法：
<q>引用文本</q>
它的作用是在引用文本前後默認增加雙引號。
blockquote標籤，長文本引用
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。
等等，上一節<q>標籤不是也是對文本的引用嗎？不要忘記<q>標籤是對簡短文本的引用，比如說引用一句話就用到<q>標籤。
如想在我的文章中引用李白《關山月》中的詩句，因爲引用文本比較長，所以使用<blockquote>。
語法:
<blockquote>引用文本</blockquote>
它的作用是在將引用文本左右縮進。
回車換行
在需要加回車換行的地方加入<br />，<br />標籤作用相當於word文檔中的回車。
語法：
xhtml1.0寫法：
<br />
html4.01寫法：
<br>
與以前我們學過的標籤不一樣，<br
/>標籤是一個空標籤，沒有HTML內容的標籤就是空標籤，空標籤只需要寫一個開始標籤，這樣的標籤有<br
/>、<hr
/>和<img
/>。
在html中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。
要想輸入空格，必須寫入 。
語法：
分隔線
在信息展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些。
語法：
html4.01版本 <hr>
xhtml1.0版本 <hr />
注意：
1. <hr
/>標籤和<br
/>標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
2. <hr
/>標籤的在瀏覽器中的默認樣式線條比較粗，顏色爲灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。
address標籤，爲網頁加入地址信息
一般網頁中會有一些地址信息需要在網頁中展示出來，這些地址信息如公司的地址就可以<address>標籤。
語法：
<address>地址信息</address>
如：
<address>北京市西城區德外大街10號</address>
在瀏覽器上顯示的樣式爲斜體，如果不喜歡斜體，當然可以，可以在後面的課程中使用css樣式來修改它<address>標籤的默認樣式。
想加入一行代碼嗎？使用code標籤
在介紹語言技術的網站中，必免不了在網頁中顯示一些計算機專業的編程代碼，當代碼爲一行代碼時，你就可以使用<code>標籤了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行代碼時不能使用<code>標籤了。
語法：
<code>代碼語言</code>
注：如果是多行代碼，可以使用<pre>標籤。
使用pre標籤爲你的網頁加入大段代碼
在上節中介紹加入一行代碼的標籤爲<code>，但是在大多數情況下是需要加入大段代碼的，不會是每一代碼都加入一個<code>標籤吧，沒有這麼複雜，這時候就可以使用<pre>標籤。
語法：
<pre>語言代碼段</pre>
<pre> 標籤的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
注意：<pre> 標籤不只是爲顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的源代碼
使用ul，添加新聞信息列表
在瀏覽網頁時，你會發現網頁上有很多信息的列表，如新聞列表、圖片列表。
這些列表就可以使用ul-li標籤來完成。ul-li是沒有前後順序的信息列表。
語法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
ul-li在網頁中顯示的默認樣式一般爲：每項li前都自帶一個圓點，如下圖所示：
![]()
使用ol，添加圖書銷售排行榜
如果想在網頁中展示有前後順序的信息列表，怎麼辦呢？這類信息展示就可以使用<ol>標籤來製作有序列表來展示。
語法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
<ol>在網頁中顯示的默認樣式一般爲：每項<li>前都自帶一個序號，序號默認從1開始，如下圖所示：
![]()
認識div在排版中的作用
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。
語法：
<div>…</div>
確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。
給div命名，使邏輯更加清晰
在上一小節中，我們把一些標籤放進<div>裏，劃分出一個獨立的邏輯部分。爲了使邏輯更加清晰，我們可以爲這一個獨立的邏輯部分設置一個名稱，用id屬性來爲<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。
語法：
<div id="版塊名稱">…</div>
table標籤---認識網頁上的表格
有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。
創建表格的四個元素：
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完纔會顯示。
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數，取決於一行中數據單元格的個數。
上述代碼在瀏覽器中顯示的默認的樣式爲：
![]()
總結：
1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
2、表頭，也就是th標籤中的文本默認爲粗體並且居中顯示
用css樣式，爲表格加入邊框
Table表格在沒有添加css樣式之前，是沒有邊框的。這樣不便於我們後期合併單元格知識點的講解，所以在這一節中我們爲表格添加一些樣式，爲它添加邊框。
在右側代碼編輯器中添加如下代碼：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代碼是用css樣式代碼（後面章節會詳細講解），爲th，td單元格添加粗細爲一個象素的黑色邊框。
caption標籤，爲表格添加標題和摘要
表格還是需要添加一些標籤進行優化，可以添加標題和摘要。
摘要
摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法：<table
summary="表格簡介文本">
標題
用以描述表格內容，標題的顯示位置：表格上方。
語法：
<table>
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
使用<a>標籤，鏈接到別一個頁面
使用<a>標籤可實現超鏈接，它在網頁製作中可以說是無處不在，只要有鏈接的地方，就會有這個標籤。
語法：
<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎瞭解鏈接地址的內容（語義化更友好）。
注意：還有一個有趣的現象不知道小夥伴們發現了沒有，只要爲文本加入a標籤後，文字的顏色就會自動變爲藍色（被點擊過的文本顏色爲紫色），顏色很難看吧，不過沒有關係後面我們學習了css樣子就可以設置過來（a{color:#000}),後面會詳細講解。
在新建瀏覽器窗口中打開鏈接
<a>標籤在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。
如下代碼：
<a href="目標網址" target="_blank">click
here!</a>
使用mailto在網頁中鏈接Email地址
<a>標籤還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：
![]()
注意：如果mailto後面同時有多個參數的話，第一個參數必須以“?”開頭，後面的參數每一個都以“&”分隔。
認識<img>標籤，爲網頁插入圖片
在網頁的製作中爲使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<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表單(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的區別這一部分內容屬於後端程序員考慮的問題。感興趣的小夥伴可以查看本小節的wiki，裏面有詳細介紹。
method="get/post",兩種方式的區別
Form中的get和post方法，在數據傳輸過程中分別對應了GET和POST方法。
二者主要區別如下：
1、Get將表單中數據的按照variable=value的形式，添加到action所指向的URL後面，並且兩者使用“?”連接，而各個變量之間使用“&”連接；Post是將表單中的數據放在form的數據體中，按照變量和值相對應的方式，傳遞到action所指向URL。
如下形式：
http://www.imooc.com/test.asp?name=lilian&password=12345678
2、Get是不安全的，因爲在傳輸過程，數據被存放在請求的URL地址中，這樣就可能會有一些隱私的信息被第三方看到。
3、Get方式傳輸的數據量非常小，一般限制在 2KB 左右，但是執行效率卻比 Post 方法好；而 Post 方式傳遞的數據量相對較大，它是等待服務器來讀取數據，不過也有字節限制，這是爲了避免對服務器用大量數據進行惡意攻擊，根據微軟方面的說法，微軟對用 Request.Form()可接收的最大數據有限制，IIS4中爲 80KB 字節，IIS5 中爲 100KB 字節。
綜上所述，請儘量用 Post 方法。
文本輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化爲密碼輸入框。
語法：
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
1、type：
當type="text"時，輸入框爲文本輸入框;
當type="password"時, 輸入框爲密碼輸入框。
2、name：爲文本框命名，以備後臺程序ASP 、PHP使用。
3、value：爲文本輸入框設置默認值。(一般起到提示作用)
文本域，支持多行文本輸入
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：
<textarea rows="行數" cols="列數">文本</textarea>
1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4、在<textarea></textarea>標籤之間可以輸入默認值。
注意這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。（這兩個css樣式在以後的章節會講解）
使用單選框、複選框，讓用戶選擇
在使用表單設計調查表時，爲了減少用戶的操作，使用選擇框是一個好主意，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"時，該選項被默認選中
注意:同一組的單選按鈕，name取值一定要一致，這樣同一組的單選按鈕纔可以起到單選的作用。
使用下拉列表框，節省空間
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。
<select>
<option value="看書">看書</option>
<option value="旅遊">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
講解：
1、value：
![]()
2、selected="selected"：
設置selected="selected"屬性，則該選項就被默認選中。
使用下拉列表框進行多選
下拉列表也可以進行多選操作，在<select>標籤中設置multiple="multiple"屬性，就可以實現多選功能，進行多選時按下Ctrl鍵同時進行單擊，可以選擇多個選項。
使用提交按鈕，提交數據
在表單中有兩種按鈕可以使用，分別爲：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
type：只有當type值設置爲submit時，按鈕纔有提交作用
value：按鈕上顯示的文字
使用重置按鈕，重置表單信息
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置爲"reset"就可以。
語法：
<input type="reset" value="重置">
type：只有當type值設置爲reset時，按鈕纔有重置作用
value：按鈕上顯示的文字
form表單中的label標籤
小夥伴們，你們在前面學習表單各種控件的時候，有沒有發現一個標籤--label，這一小節就來揭曉它的作用。
label標籤不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）。
語法：
<label for="控件id名稱">
注意：標籤的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
例子：
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
