html簡介：
HTML學習總結慕課網
一、html介紹
（一）html和Css的關系
- HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
- CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
- JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。
（二）標簽語法
- 標簽由英文尖括號<和>括起來，如<html>就是一個標簽。
- html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。
- 標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：
<div>里嵌套<p>，那么</p>必須放在</div>的前面。 - HTML標簽不區分大小寫，但建議小寫，因為大部分程序員都以小寫為準。
（三）認識html文件的基本結構
一個HTML文件是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>
-
<html></html>
稱為根標簽，所有的網頁標簽都在<html></html>中。 -
<head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、<style>、<link>、<meta>等標簽。 - 在<body>和</body>標簽之間的內容是網頁的主要內容，
如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
（四）認識head標簽
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
下面這些標簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標簽：在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
二、認識標簽------（one）
<br />
（一）語義化，讓你的網頁更好的被搜索引擎理解
標簽的用途：我們學習網頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中，在文章中有想強調的文本，就可以使用 em 標簽表示強調等等。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
- 更容易被搜索引擎收錄。
- 更容易讓屏幕閱讀器讀出網頁內容。
（二）<body>標簽
在網頁上要展示出來的頁面內容一定要放在body標簽中。
<body>
<h1>了不起的蓋茨比</h1>
<p>1922年的春天，一個想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>
<p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為<strong>"爵士樂時代"</strong>吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p>
</body>
（三）<p>標簽
如果想在網頁上顯示文章，這時就需要<p>標簽了，把文章的段落放到<p>標簽中
注意一段文字一個<p>標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3<p>標簽中。
（四）<hx>標簽
文章的段落用<p>標簽，那么文章的標題用什么標簽呢？我們將使用<hx>標簽來制作文章的標題。
標題標簽一共有6個h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。**
語法：**<hx>標題文本</hx>
(x為1-6)文章的標題前面已經說過了，可以使用標題標簽，另外網頁上的各個欄目的標題也可使用它們。因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。h1標簽字號最大，h2標簽字號相對h1要小，以此類推h6標簽的字號最小。
（五）<strong>和<em>標簽
有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽。
但兩者在強調的語氣上有區別:<em>表示強調，<strong> 表示更強烈的強調。并且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。
語法：
<em>需要強調的文本</em>
<strong>需要強調的文本</strong>
（六）<span>標簽
-
<em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。 -
<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。
語法：
<span>文本</span>
（七）<q>標簽
想在你的html中加一段引用嗎？比如在你的網頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么<q>標簽是你所需要的。
講解：
注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
注意這里用<q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
（八）<blockquote>標簽，長文本引用
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。
（九）使用<br>標簽分行顯示文本
<br />標簽作用相當于word文檔中的回車。
（十）為網頁中添加一些空格
我們已經講解過在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入 。
（十一）<hr>標簽，添加水平橫線
有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。
語法：
html4.01版本** **
xhtml1.0版本 <hr />
注意：
-
<hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。 -
<hr />標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。 - 大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。
（十二）<address>標簽，為網頁加入地址信息
一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。
語法：
<address>聯系地址信息</address>
如：
<address>文檔編寫：lilian 北京市西城區德外大街10號</address>
（十三）<code>標簽，加入一行代碼
在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了。
注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。
語法：
<code>代碼語言</code>
注：如果是多行代碼，可以使用<pre>標簽。
三、認識標簽------（two）
（一）ul標簽，添加新聞信息列表
列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。
舉例：
<ul>
<li>[精彩少年</li>
<li>[美麗突然出現]</li>
<li>[觸動心靈的旋律]</li>
</ul>
（二）使用ol，添加圖書銷售排行榜
如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，這類信息展示就可以使用 標簽來制作有序列表來展示。
語法：
<ol>
<li>[信息]</li>
<li>[信息]</li>
......</ol>
（三）認識div在排版中的作用
在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>
標簽中，這個<div>標簽的作用就相當于一個容器。
語法：
<div>…</div>
確定邏輯部分：
什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<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樣式，為表格加入邊框
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>為表格添加邊框</title> **<style type="text/css"> table tr td,th{border:1px solid #000;} </style>** </head>
（六）caption標簽，為表格添加標題和摘要
表格還是需要添加一些標簽進行優化，可以添加標題和摘要。代碼如下：
摘要
摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法：
<table summary="表格簡介文本">
標題
用以描述表格內容，標題的顯示位置：表格上方。
語法：
<table>
<caption>標題文本</caption>
<tr> <td>…</td> <td>…</td> … </tr>…</table>
三、認識標簽------（three）
（一）使用<a>標簽，鏈接到另一個頁面
使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。
語法：
<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
注意：還有一個有趣的現象不知道小伙伴們發現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000})
（二）在新建瀏覽器窗口中打開鏈接
<a>
標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。
如下代碼：
<a href="目標網址" **target="_blank"**>click here!</a>
（三）使用mailto在網頁中鏈接Email地址
標簽還有一個作用是可以鏈接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格式的圖像文件。
四、與瀏覽者交互，表單標簽
（一）使用表單標簽，與用戶交互
表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
語法：
<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，里面有詳細介紹。
（二）文本輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法：
<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>```
######（三）文本域，支持多行文本輸入
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
**語法**：
``<textarea rows="行數"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>
######（四）使用單選框、復選框，讓用戶選擇
在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，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 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
######（五）使用下拉列表框，節省空間
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：
[](http://img.mukewang.com/52e604590001ae4005270185.jpg)
**講解：**
**1、value：**
[](http://img.mukewang.com/52e6037300015a9905030165.jpg)
2、**selected="selected"**：
設置**selected="selected"**屬性，則該選項就被默認選中。
在瀏覽器中顯示的結果：
######（六）使用提交按鈕，提交數據
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到**提交按鈕**。
**語法**：
``<input **type="submit"** value="提交">``
**type**：只有當type值設置為submit時，按鈕才有提交作用**
value
**：**
按鈕上顯示的文字
**舉例**
**：**
**[](http://img.mukewang.com/52e613350001461604820109.jpg)**
在瀏覽器中顯示的結果：
[](http://img.mukewang.com/52e6126f0001496a04480218.jpg)
######（七）使用重置按鈕，重置表單信息
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕
使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。
**語法**：
``<input **type="reset"** value="重置">``
**type**：**只有當type值設置為reset時，按鈕才有重置作用**
value
**：**
按鈕上顯示的文字
**舉例**
**：**
[](http://img.mukewang.com/52e618680001a6b204570101.jpg)
在瀏覽器中顯示的結果：
[](http://img.mukewang.com/52e6189e000186b604480218.jpg)
輸入賬號
[](http://img.mukewang.com/52e618bc00015a1004480218.jpg)
單擊重置按鈕
######（八）form表單中的label標簽
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法：
``<label for="控件id名稱">``
注意：標簽的 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>
