前端主要由三大塊組成：
1、Html網(wǎng)頁內(nèi)容的載體，是“結(jié)構(gòu)層”
2、Css對頁面進(jìn)行修飾，是“表現(xiàn)層”
3、Javascript實現(xiàn)頁面特效（動畫、交互），是“行為層”
一、認(rèn)識html
1、定義：超文本標(biāo)記語言。
????超文本：音頻、視頻、圖像等；
????標(biāo)記：標(biāo)簽。
2、開發(fā)環(huán)境：文本編輯工具—sublime
????????優(yōu)點：輕量級，開發(fā)速度快
????????使用sublime時，用“ctrl+n”新建文件，“ctrl+s”保存文件
??????????注意：輸入文件名時要自己添加后綴“.html”。
3、運(yùn)行環(huán)境：瀏覽器? ?谷歌，火狐，IE，opera
二、html5結(jié)構(gòu)
<!DOCTYPE html>版本標(biāo)識html5
<html?lang="en">語言是：English
<head>
<meta?charset="UTF-8">使用meta標(biāo)簽中的屬性charset，防止中文亂碼
<title>Document</title>頁面標(biāo)題
</head>
<body>
????????????內(nèi)容
</body>
</html>
三、html常用標(biāo)簽（標(biāo)簽有語義）
???1、p標(biāo)簽：段落標(biāo)簽，用來存放大量的文字
????????特征：（1）默認(rèn)寬度是父元素寬度的100%
????????????????????（2）可以設(shè)置寬/高
????????????????????（3）獨(dú)占一行
???2、h標(biāo)簽：標(biāo)題標(biāo)簽
????特征：（1）h1-h6 字體由大到小，默認(rèn)加粗
????????????????（2）默認(rèn)寬度是父元素寬度的100%
????????????????（3）可以設(shè)置寬/高
????????????????（4）獨(dú)占一行
????????
????這是標(biāo)題一</h1>
????這是標(biāo)題二</h2>
???????????...
????????這是標(biāo)題六</h6>
???????注意：h1標(biāo)簽在一個頁面上只能使用一次，與SEO（搜索引擎）有關(guān)：優(yōu)先選擇title“網(wǎng)頁標(biāo)題”相關(guān)內(nèi)容，其次選擇h1相關(guān)內(nèi)容，h1多寫會被SEO認(rèn)為濫用。
???3、div和span標(biāo)簽：沒有任何語義，用來實現(xiàn)頁面布局
????????（1）div：是一個塊元素，無語義，可以包含其他html標(biāo)簽，可以將網(wǎng)頁分為幾個區(qū)塊，用于排版布局。
????????（2）Span：是一個行內(nèi)元素，通常用來定義一小段文字樣式。
????????特征：a.同一行顯示，
????????????????????b.寬度由內(nèi)容決與p標(biāo)簽不同，不換行</span>
??????注意：與標(biāo)簽區(qū)分開。
可以使用“p*3 “ctrl+e””直接生成三行<p></p>，span一樣
???4、格式化標(biāo)簽（都是雙標(biāo)簽、行內(nèi)元素，格式化標(biāo)簽可嵌套）
（1）<b>：粗體文字（bold）
（2）<strong>：粗體，加重語義
（3）<big>：大號字
（4）<em>：斜體（emphasized），加重語義
（5）<i>：斜體（italic）
（6）<small>：小號字
（7）<sub>：下標(biāo)字（subscript）
（8）<sup>：上標(biāo)字（superscript）
（9）<del>：刪除字
注意：（1）“<strong>與<b>”，“<em>與<i>”這兩組語義相同，但SEO在搜索時會優(yōu)先篩選加重語義的標(biāo)簽信息。
（2）i：icon（小圖標(biāo)意思），圖標(biāo)首選<i>標(biāo)簽。
???5、img標(biāo)簽（單標(biāo)簽，為網(wǎng)頁插入圖片）
???<img src=”地址”?alt=”圖片加載失敗”?width=”寬”?hight=”高”?title=”我是一幅圖”>
??????（1）src：規(guī)定顯示圖片的URL（地址/存放位置），可以是gif、PNG、JPEG等；
（2）alt：圖片加載失敗后的顯示文本；
（3）title：圖片加載成功時鼠標(biāo)滑過顯示的文本。
注意：<1>絕對路徑：
????????????????????a.網(wǎng)絡(luò)地址：http://img/.../image.jpg
????????????????????b.從盤符開始的路徑：C:\Users\images\go.jpg
??????????????<2>相對路徑：
????????????????????a.當(dāng)圖片所在文件夾與當(dāng)前的html文件在同一個文件夾時（同一層）：src=”images/go.jpg”
????????????????????b.不在同一層：src=”../imgages/yes.jpg”
???6、a標(biāo)簽：雙標(biāo)簽，插入鏈接
?????<a ?href=”http://www.baidu.com”??target=”_blank”? title=”進(jìn)入百度”>百度 </a>
????四種狀態(tài)：
????????（1）link 訪問前 黑色
????????（2）visited 訪問后 紫色
????????（3）hover 懸停時 可設(shè)置顏色
????????（4）active 按住不放 紅色
????屬性：
????????（1）href：規(guī)定鏈接指向的頁面的URL
????????（2）target：在何處打開
????????????????默認(rèn)是“_self ”在當(dāng)前窗口打開；
????????????????“_blank”在新窗口打開
????★各種鏈接類型★：
（1）文字鏈接
????????<a href=”mi.html”>小米手機(jī)</a>
（2）圖片鏈接
????????<a href=”mi.html”><img src =”images/mi.jpg”?alt=”紅米”></a>
（3）空鏈接
????????<a?href=”#”>空鏈接</a> ?##可多個
???????不進(jìn)行頁面跳轉(zhuǎn)，但顯示網(wǎng)址
????????<a?href=”javascript:;”>空鏈接</a>
???????不進(jìn)行頁面跳轉(zhuǎn)也不顯示網(wǎng)址
?????（4）錨點鏈接：可以連接到同一頁面的指定位置
????????步驟：1.在被連接的位置上輸入id：<p id=”mi4”>..</p> ??
????????????????????2.在建立連接的對象上添加a標(biāo)簽：
????????????????????<a href=”#mi4”>小米手機(jī)4</a>
???7、高級標(biāo)簽table（tr行，td 列）
????????????1.屬性：（1）border：加邊框
????????????????????????????（2）cellspacing：單元格邊沿與內(nèi)容間距
????????????????????????????（3）cellpadding：單元格邊沿之間間距
????????????????????????????（4）colspan：列跨度
????????????????????????????（5）rowspan：行跨度
例1：<table border="1">
????????????????<tr><td>姓名</td><td>語文</td><td>數(shù)學(xué)</td><td>英語</td></tr>?
?? ? ?????????????<tr><td>小麗</td><td>88</td><td>87</td> <td>66</td></tr>
????????????</table>
例2：
????????<table ?width="55%" height="123" border="1" cellpadding="1" cellspacing="1">
????????????????<tr><td colspan="2" ?align="center"><h3>菜單</h3></td>
??????????????????????<td rowspan="2" width="34%" align="center">備注</td>
? ? ? ? ? ? ? ? ?</tr>
?????????????????<tr><td>青椒炒肉</td><td>糖醋里脊</td></tr>
????????</table>
2.結(jié)構(gòu)：
多個<th>..</th></thead>可省略
多個<td>..</td></tbody>
多個<td>..</td></tfoot>可省略
???8、form表單
1.應(yīng)用場景：登陸頁面、注冊頁面、搜索等跟服務(wù)器進(jìn)行數(shù)據(jù)傳遞的地方。
2.表單元素：
????????????（1）action：它的值是form表單需要提交的地址
Img和a標(biāo)簽的路徑
????????????（2）mathod屬性取值（默認(rèn)get）：
?????????????????????????get：信息追加到URL后面，不安全
?????????????????????????post：不將信息追加到URL后邊，安全，但效率低于get
（3）input中type屬性取值：
?????????????<1>text：文本輸入
?????????????<2>password：密碼
?????????????<3>checkbox：復(fù)選框
???????????????<input type="checkbox" checked="checked">1
???????????????<input type="checkbox">2
???????????????<input type="checkbox">3
?????????????<4>radio：單選按鈕
????????????????<input type="radio"?name="sex"?value="1">男
????????????????<input type="radio"?name="sex"?value="0">女
???????????注意：指定相同的name，才能實現(xiàn)互斥，即只選一個,返回值value代表信息??
?????????????<5>submit：自動提交按鈕（不同的瀏覽器默認(rèn)顯示的不一樣，例如“提交”、“登陸”、“自動提交”等，可以用value定義）
?????????????<6>button：普通按鈕
????????????????<input type="button"?value="button按鈕">=button按鈕</button>
?????????????<7>reset:重置
????????????????<input type="reset"><br>
?????????????<8>hidden：隱藏域
????????????????<hidden value="我媽不讓我跟傻子玩"></hidden>
?????????????<9>fiel：文件域
????????????????<input type="file"><br>
?????????????<10>image：圖片域
????????????????<input type="image" src="picture/yes.jpg"
?????????????????height="100" width="100"><br>
3.其它標(biāo)簽：
（1）textarea：多行文本框
???????????????<textarea name="textarea" id="" cols="30"
???????????????rows="10"></textarea><br>
（2）select：下拉框
屬性：Size:顯示行數(shù)；multiple：默認(rèn)選擇三個。
??????????????<select name="" id="" size="3" multiple="2">
?????????????????<option?value="zz">鄭州</option>
?????????????????...
信陽</option>
??????????????</select><br>
（3）label：將label屬性“for”與input屬性“id”綁定
點擊label文本，對應(yīng)id的input標(biāo)簽獲取交代
方式一：<input type="radio" name="sex" value="0"? id="women">女
? ? ? ? ? ? ? ? ?<label for="women">女</label>
方式二：<label>用戶名：
?????????????????????name="username"></label>
（4）fieldset打包：
?????????????????????<fieldset><ledend>是標(biāo)題哦</ledend>
???????????????????????<input type="text">
???????????????????????<input type="password">
?????????????????????</fieldset>
帶格式粘貼：ctrl+shift+v
四、什么是標(biāo)簽語義化？
1、合適的標(biāo)簽做合適的事情
2、不需要添加CSS，也可以看到頁面結(jié)構(gòu)，結(jié)構(gòu)清晰
3、有利于SEO搜索
4、推薦使用有語義的標(biāo)簽，少用無語義的標(biāo)簽
