引言： 我所教授的前端知識適用于純小白定踱，零基礎(chǔ)。以后未來發(fā)展方向是前端領(lǐng)域恃鞋，需要系統(tǒng)學(xué)習(xí)的人崖媚，從零到1的人 轉(zhuǎn)載需備注地址---- 我是（我想靜靜）一個要把代碼寫出藝術(shù)感的人！ 寫代碼的男人很帥氣恤浪！
## 學(xué)習(xí)注意： 加星 都是重點(diǎn)
1畅哑、web 標(biāo)準(zhǔn)是什么？ 三個東西? ? 1水由、 結(jié)構(gòu)? ? 2荠呐、表現(xiàn)? ? 3、行為
```
DOCTYPE html? 是什么 是聲明文檔類型 現(xiàn)在是HTML5
<!DOCTYPE html>?
? ? Lang 是語言信息
<html lang=“en">
? head 頭?
<head>? ?
? ? head 里面的所有東西 都是給瀏覽器看的
meta 元信息? charset 是 字符集? utf-8 字符集編碼
<meta charset=“UTF-8">?
title 標(biāo)題?
<title>Document</title>
</head>
<body>
body 是給用戶看的主體砂客，所有給用戶看的都在body 里面
</body>
</html>
```
謹(jǐn)記 ：用戶只會關(guān)心 body 里面的內(nèi)容
## 標(biāo)簽的學(xué)習(xí) ：
標(biāo)題標(biāo)簽
```
<h1> -<h6> h1 標(biāo)簽最好只寫一次
```?
```
<!-- 決定了頁面所有的a標(biāo)簽 超鏈接打開方式 -->
? <base target="_blank">
? <!----> 這是注釋 -->
? 本人Mac電腦是 command + 斜杠 /
?   是空格 符號 因?yàn)樵趆tml5 里面無論增加多少空格只會顯示一個所以需要使用 ? 按住 shift + 7 可以打出來
< 小于號
> 大于號
¥ 人民幣
## 文件夾路徑： 上一級 ../? 下一級 /? 非常重要路徑問題 新手容易犯的錯很多在路徑上
div? span 是沒有語義的 我們網(wǎng)頁布局主要的2個盒子 想必聽過 css + div
div就是 divsion 的縮寫
div 獨(dú)占一行
span? 跨度范圍
標(biāo)簽語義化： 合適的地方給一個最為合理的標(biāo)簽
```
hr 是水平線標(biāo)簽
P 是段落標(biāo)簽
br 是換行
Strong? 與? b? 是文字加粗
em 與 i? 文字傾斜
Del 與 s? 是刪除線
Ins? 與 u? 是下劃線
Sup 是 上標(biāo)? 使用如下? 5 <sup> 2 </sup>
sub? 是 下標(biāo)? 使用如下 5 <sub> 2 </sub>
```
圖片標(biāo)簽? src 圖片的來源? title 提示文本? alt 替換文本泥张，在圖標(biāo)不顯示時候顯示 width 寬?
height 高? border 邊框
<img src="" title="" alt="" width="" height=""? border="">
```
```
href 鏈接的路徑? title 提示文本? target="_blank" 打開的方式_blacnk是在新窗口打開，原窗口不關(guān)閉
<a href="" title="" target="_blank"></a>
<a href="#"> 空連接</a>
```
```
<!-- 增加錨點(diǎn) -->
? <a href="#bottom">去底部</a>
? <p id="top">
? 據(jù)東北新聞網(wǎng)報道 記者從有關(guān)部門獲悉鞠值，加拿大公民邁克爾媚创，英文名：Spavor Michael Peter Todd，因涉嫌從事危害中國國家安全的活動齿诉，于2018年12月10日筝野，被遼寧省丹東市國家安全局依法審查。目前粤剧，案件正在審理中歇竟。
另據(jù)環(huán)球網(wǎng)消息，邁克爾的公司此前剛剛將一些游客和冰球運(yùn)動員送往朝鮮抵恋。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名焕议。
據(jù)東北新聞網(wǎng)報道 記者從有關(guān)部門獲悉，加拿大公民邁克爾弧关，英文名：Spavor Michael Peter
? </p>
<p>據(jù)東北新聞網(wǎng)報道 記者從有關(guān)部門獲悉盅安，加拿大公民邁克爾唤锉，英文名：Spavor Michael Peter Todd，因涉嫌從事危害中國國家安全的活動别瞭，于2018年12月10日窿祥，被遼寧省丹東市國家安全局依法審查。目前蝙寨，案件正在審理中晒衩。
另據(jù)環(huán)球網(wǎng)消息，邁克爾的公司此前剛剛將一些游客和冰球運(yùn)動員送往朝鮮墙歪。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名听系。
</p>
<p>據(jù)東北新聞網(wǎng)報道 記者從有關(guān)部門獲悉，加拿大公民邁克爾虹菲，英文名：Spavor Michael Peter Todd靠胜，因涉嫌從事危害中國國家安全的活動，于2018年12月10日毕源，被遼寧省丹東市國家安全局依法審查浪漠。目前，案件正在審理中脑豹。
另據(jù)環(huán)球網(wǎng)消息郑藏，邁克爾的公司此前剛剛將一些游客和冰球運(yùn)動員送往朝鮮。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名瘩欺。</p>
<p id="bottom">
據(jù)東北新聞網(wǎng)報道 記者從有關(guān)部門獲悉，加拿大公民邁克爾拌牲，英文名：Spavor Michael Peter Todd俱饿，因涉嫌從事危害中國國家安全的活動，于2018年12月10日塌忽，被遼寧省丹東市國家安全局依法審查拍埠。目前，案件正在審理中土居。
另據(jù)環(huán)球網(wǎng)消息枣购，邁克爾的公司此前剛剛將一些游客和冰球運(yùn)動員送往朝鮮。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名擦耀。
</p>
<a href="#top">去頂部</a>
```
## 關(guān)于編輯器Sublime 的使用
? ? 棉圈！+tab 基本機(jī)構(gòu)
? ? 標(biāo)簽加單詞 自動補(bǔ)全
? ? com + shift + D 快速復(fù)制一行
? ? com + shift + k 快速刪除一行
? ? com + shift + 上箭頭 上移動
? ? com + shift + 下箭頭 下移動
? ? com + 鼠標(biāo)左鍵單機(jī) 集體編輯
? ? com + f 快速 查找
? ? com + l? 快速選中
? ? com + B + k 快速 隱藏側(cè)邊欄
##? 關(guān)于列表 : 一共三種
? 1、無序列表? ul? 無序列表沒有順序之分
? 2眷蜓、有序列表
? 3分瘾、自定義列表
? **? ** ul 里面 只能嵌套 li? li里面可以容納嵌套任意標(biāo)簽 p? div 等等
```
? <ul> <!--? 無序列表 -->
? <li></li> <!--? li 就是列表項(xiàng)? -->
? <li></li>
? </ul>
```
```
<!-- 有序列表 工作中使用較少? -->
<ol>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ol>
```
```
<!--自定義列表 多用于底部展示 footer? -->
<dl>
<dt>**自定義列表的標(biāo)題**</dt>
<dd>解釋項(xiàng)</dd>
<dd>解釋項(xiàng)</dd>
<dd>解釋項(xiàng)</dd>
</dl>
```
## table表格
表格常用處理，顯示表格式數(shù)據(jù)
```
<!-- 表格? -->
cellspacing ="默認(rèn)是兩個2 可以改成0就會沒有邊線吁系，設(shè)置單元格與單元格邊框之間的空白間距"
cellpadding ="可以給表格加 cellpadding 表格內(nèi)容距離邊框的距離"
align="" 設(shè)置表格在網(wǎng)頁中的水平對齊方式? 有 left? center? right
align對齊方式德召，可以給table 和tr 加 給 table 加就是整個表格對齊方式白魂，給tr加就是 內(nèi)容 對齊的方式
th是表頭
caption 表格的標(biāo)題與表格是一體的，必須緊隨table 之后增加上岗，只能有一個居中在表格之上
表格如果去掉寬福荸，高有一定的默認(rèn)距離
table? tr? td 用來創(chuàng)建表格的基本標(biāo)簽
td 里面可以嵌套任意標(biāo)簽
table>tr*5>td*3 表格的快速簡寫方式? table 里面包含 tr 有5個 tr里面有td td有三個
<table width="" height="" border="" cellspacing="2" cellpadding="10">
? ? <caption>表格的標(biāo)題</caption>
<!-- tr 是行? -->
<tr>
? ? <th>有語義化</th>給SEO 用的
</tr>
<tr>
? ? <!-- td 是單元格 -->
? ? ? ? ? ? <td></td>
? ? <td></td>
</tr>
</table>
```
```
增加 thead? 與 tbody? 都是為了seo? 搜索? tfoot 有兼容問題
<table>
<thead>? 表格頭部 thead
<tr>
<td></td>
</tr>
</thead>
<tbody>? 表格 身體 tbody
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot 多數(shù)是不使用的因?yàn)?有瀏覽器兼容問題</td>
</tr>
</tfoot>
</table>
```
## table 表格 合并單元格
<!-- 跨行合并 rowspan? 垂直合并 也叫跨行合并 -->
<!-- 跨列合并 colspan? 水平合并也叫跨列合并 -->
合并單元格的思想 ： 將多個內(nèi)容合并的時候，就會有多余的東西肴掷，把他刪除逞姿，列如把3個td 合并成一個，那就多余了2個 需要刪除
公式 ： 刪除的個數(shù) = 合并的個數(shù) -1
```
<table width="800" height="400" cellspacing="0" border="1" align="center"? >
<!-- 跨行合并 rowspan? 垂直合并 -->
<!-- 跨列合并 colspan? 水平合并-->
<tr>
<td colspan="4"></td>
注意：在colspan之后 后面的3個 td 都要刪除掉
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
</tr>
<tr>
<td rwospan="2"></td> 跨行合并 需要刪除下面tr 里面相同部位的td
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<td></td>
<td></td>
<td></td>
</tr>
</table>
```
## form input的表單提交? 重要
<!-- 表單域 form 收集信息? -->
method? 一共兩種 方法 get 和post?
get 提交的方式會在 瀏覽器地址欄顯示
post 不會顯示
action 作用就是 收集的信息交給誰處理
method 信息提交的方法
下面是演示代碼
```
<form action="1.php" method="get" >
姓名：<input type="text" name="userName"> <br>
密碼：<input type="password" name="pwd"> <br>
<input type="submit" name="">
</form>
```
method? 一共兩種 方法 get 和post?
```
<form action="2.php" method="post" >
姓名：<input type="text" name="userName"> <br>
密碼：<input type="password" name="pwd"> <br>
<input type="submit" name="">
</form>
```
```
<form action="1.php" method="post">
<!--
單行文本輸入框
name 表單的名字 捆等，這樣后臺可以通過這個name屬性找到這個表單滞造，頁面中的表單很多，name 主要作用就是用于區(qū)別不同的表單
value 就是表單內(nèi)的默認(rèn)值
maxlength 最長字符數(shù)是 6 限制用戶輸入 固定的就是6
size 可以輸入的字符長度
-->
昵稱： <input type="text" name="userName" value="默認(rèn)值" maxlength="6" size="30"> <br>
密碼： <input type="password" name="pwd">
</form>
```
## 單選框
<form action="1.php" method="post">
<!-- 性別單選按鈕 如果想要實(shí)現(xiàn)單選效果栋烤，必須把 name 里面的值設(shè)置為相同的 -->
<!-- 添加默認(rèn)選中選項(xiàng) checked = "checked" -->
男 <input type="radio" name="gender" >
女 <input type="radio" name="gender" checked="checked">
</form>
```
<form action="1.php" method="post">
<!-- 性別單選按鈕 如果想要實(shí)現(xiàn)單選效果谒养，必須把 name 里面的值設(shè)置為相同的 -->
<!-- 添加默認(rèn)選中選項(xiàng) checked = "checked" -->
男 <input type="radio" name="gender" >
女 <input type="radio" name="gender" checked="checked">
</form>
```
## 復(fù)選框 也叫多選框
<form action="1.php" method="post">
<!-- 多選框 checkbox? 也可以添加 默認(rèn)選中 checked? -->
愛好： <input type="checkbox" name=""> 吸煙
? ? <input type="checkbox" name="">喝酒
? ? <input type="checkbox" name="" checked="checked">燙頭
</form>
```
<form action="1.php" method="post">
<!-- 多選框 checkbox? 也可以添加 默認(rèn)選中 checked? -->
愛好： <input type="checkbox" name=""> 吸煙
? ? <input type="checkbox" name="">喝酒
? ? <input type="checkbox" name="" checked="checked">燙頭
</form>
```
##? 文本域 多用于評論 textarea 控件可以輕松的創(chuàng)建多行文本輸入框
cols? 每行中可以輸入的字符數(shù)?
rows? 顯示的行數(shù)
```
<textarea name="" cols="30" rows="10">
</textarea>
```
## select 下拉菜單
出生日期
<select name="" id="">
<option value=""> 1991</option>
<option value=""> 1992</option>
<option value=""> 1993</option>
</select>
```
<!--option是下拉菜單選項(xiàng) -->
<select name="" id="">
<option value=""> 1991</option>
<option value=""> 1992</option>
<option value=""> 1993</option>
</select>
```
## 文件上傳控件
file就是文件的意思
上傳信息 ： <input type="file">
```
<input type="file">
```
## label標(biāo)簽提升用戶使用
用于綁定一個表單元素，當(dāng)點(diǎn)擊label 標(biāo)簽的時候明郭，被綁定的表單元素就會獲得輸入焦點(diǎn)
包裹的 input买窟， 在點(diǎn)擊 請輸入后會在input 里面有提示 是把請輸入綁定在了 input 上面
第一種用法
<label>
<!-- 第一種方法 -->
請輸入<input type="text" name="" value="這個是label標(biāo)簽">
</label>
```
<label>
<!-- 第一種方法 -->
請輸入<input type="text" name="" value="這個是label標(biāo)簽">
</label>
```
第二種方法
通過for把 input 的id 綁定在了一起點(diǎn)擊姓名
<label for="user">姓名：</label> <input type="text" id="user" value="這是第二種用法"> 沒有生效需要瀏覽器試驗(yàn)！
```
<label for="user">姓名：</label> <input type="text" id="user">
```
## 按鈕系列 重要
<form action="1.php" method="post">
<!-- 提交按鈕? -->
<!-- 提交按鈕? 可以通過value進(jìn)行更改? -->
<input type="submit" value="立即注冊"><br>
<!-- 普通按鈕 -->
<!-- 普通按鈕 配合js 使用? -->
<button>普通按鈕</button> <br>
<input type="button" value="普通按鈕"> <br>
<input type="image"? src=""> <br>
<input type="reset">
</form>
<form action="1.php" method="post">
<!-- 提交按鈕? -->
<!-- 提交按鈕? 可以通過value進(jìn)行更改? -->
<input type="submit" value="立即注冊">
<!-- 普通按鈕 -->
<!-- 普通按鈕 配合js 使用? -->
<button>普通按鈕</button> <br>
<input type="button" value="普通按鈕"> <br>
<!-- 圖片按鈕 -->
<!-- 圖片按鈕可以 提交 src 圖片來源 -->
<input type="image"? src=""> <br>
<!-- 重置按鈕 -->
<!-- 重置按鈕 可以 恢復(fù)到默認(rèn)狀態(tài)? -->
<input type="reset">
</form>
當(dāng)初自學(xué)第一天與第二天課程
