1-2Html和CSS的關(guān)系
- HTML是網(wǎng)頁內(nèi)容的載體
- CSS樣式是表現(xiàn)
- JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果
1-3HTML標(biāo)簽
1.<h1></h1>就是標(biāo)題標(biāo)簽
2.<p></p>是段落標(biāo)簽
3.是圖片標(biāo)簽
1-7注釋文字
- 語法：
2-5強(qiáng)調(diào)語氣
-
<em>表示強(qiáng)調(diào)(默認(rèn)斜體) -
<strong>表示更強(qiáng)烈的強(qiáng)調(diào)（默認(rèn)粗體，程序員更喜歡用這個(gè)）
2-6設(shè)置特殊樣式span
<span>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的。
2-7短文本引用q
要引用的文本不用加雙引號(hào)，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)。
注意這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤上輸入雙引號(hào)就行了），而是它的語義：引用別人的話。
2-8長文本引用blockquote
瀏覽器對(duì)<blockquote>標(biāo)簽的解析是縮進(jìn)樣式。
2-9標(biāo)簽分行顯示文本
怎么可以讓每一句詩詞后面加入一個(gè)折行呢？那就可以用到<br />標(biāo)簽了,在需要加回車換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車。
2-10空格
2-11水平橫線<hr />
<hr />標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關(guān)系，這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后，都可以對(duì)其修改。
2-12標(biāo)簽，為網(wǎng)頁加入地址信息<address>
一般網(wǎng)頁中會(huì)有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽。也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。
語法：<address>聯(lián)系地址信息</address>
在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當(dāng)然可以，可以在后面的課程中使用 css 樣式來修改它<address>標(biāo)簽的默認(rèn)樣式。
2-13想加入一行代碼嗎？使用<code>標(biāo)簽
注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽了。
語法：<code>代碼語言</code>
2-14使用<pre>標(biāo)簽為你的網(wǎng)頁加入大段代碼
語法：<pre>語言代碼段</pre>
<pre> 標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。
**注意：<pre>標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它，只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。
3-1使用ul，添加新聞信息列表
列表可以使用ul-li標(biāo)簽來完成。ul-li是沒有前后順序的信息列表。
語法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
ul-li在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)
3-2有序列表ol
語法：
<ol>
<li>信息1</li>
<li>信息2</li>
......
</ol>
<ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1開始
3-3認(rèn)識(shí)div在排版中的作用
在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>
標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。
語法： <div>…</div>
3-4給div命名，使邏輯更加清晰
為了使邏輯更加清晰，我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱，用id屬性來為<div>提供唯一的名稱，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號(hào)，這個(gè)身份證號(hào)是唯一標(biāo)識(shí)我們的身份的，也是必須唯一的。
語法： <div id="版塊名稱">…</div>
3-5table標(biāo)簽，認(rèn)識(shí)網(wǎng)頁上的表格
創(chuàng)建表格的四個(gè)元素：
table、tbody、tr、th、td
1、<table>…</table>：整個(gè)表格以<table>
標(biāo)記開始、</table>
標(biāo)記結(jié)束。
2、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示。如右側(cè)代碼編輯器中的代碼。
3、<tr>…</tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行。
4、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。
6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
3-6用css樣式，為表格加入邊框
Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識(shí)點(diǎn)的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮剑瑸樗砑舆吙颉?br> 如：
table tr td,th{border:1px solid #000;}
</style>```
## 3-7caption標(biāo)簽，為表格添加標(biāo)題和摘要
- 摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。
**語法：**<table summary="表格簡介文本">
- 標(biāo)題：用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。
**語法：**
```<table>
<caption>標(biāo)題文本</caption>
<tr>
<td>…</td>
<td>…</td> …
</tr>
</table>```
## 4-1使用`<a>`標(biāo)簽，鏈接到另一個(gè)頁面
**語法：**
<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>
title屬性的作用，鼠標(biāo)滑過鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）
## 4-2在新建瀏覽器窗口中打開鏈接
`<a>`標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開，有時(shí)我們需要在新的瀏覽器窗口中打開。
```<a href="目標(biāo)網(wǎng)址" **target="_blank"**>click here!</a>```
## 4-3使用mailto在網(wǎng)頁中鏈接Email地址
`<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進(jìn)行講解，請(qǐng)看詳細(xì)圖示：`
**注意**：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。
如：
## 4-4認(rèn)識(shí)`<img>`標(biāo)簽，為網(wǎng)頁插入圖片
**語法：**
**講解：**
1、src：標(biāo)識(shí)圖像的位置；
2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；
3、title：**提供在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件。
## 5-1使用表單標(biāo)簽，與用戶交互
網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
語法：<form method="傳送方式" action="服務(wù)器文件">
**講解：**
1.**<form> ：**<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開始，以</form>結(jié)束。
2.**action** **：**瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。
3.**method** **：** 數(shù)據(jù)傳送的方式（get/post）。
## 5-2文本輸入框、密碼輸入框
**語法**：
<form>
<input type="text/password" name="名稱" value="文本" />
</form>```
1type： 當(dāng)type="text"時(shí)，輸入框?yàn)?strong>文本輸入框
當(dāng)type="password"時(shí),輸入框?yàn)?strong>密碼輸入框。
2、name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。
3、value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
5-3文本域，支持多行文本輸入
當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。
語法：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
1、<textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開始，以</textarea>結(jié)束。
2、cols ：多行輸入域的列數(shù)。
3、rows ：多行輸入域的行數(shù)。
4、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值。
注意這兩個(gè)屬性可用css樣式的width和height來代替：col用width、row用height來代替。
5-4使用單選框、復(fù)選框，讓用戶選擇
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當(dāng) type="radio" 時(shí)，控件為單選框
當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框
2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
3、name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用
4、checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中
注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
5-5使用下拉列表框，節(jié)省空間
講解：
1、value：
2、selected="selected"：
設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。
5-6使用下拉列表框進(jìn)行多選
下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"
屬性，就可以實(shí)現(xiàn)多選功能，在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl
鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)。
5-7使用提交按鈕，提交數(shù)據(jù)
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。
語法：
<input **type="submit"** value="提交">
type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
value：按鈕上顯示的文字
5-8使用重置按鈕，重置表單信息
當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。
語法：
<input **type="reset"** value="重置">
type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用**
value：按鈕上顯示的文字
5-9form表單中的label標(biāo)簽
label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。
語法：
<label for="控件id名稱">
注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。
