計(jì)算機(jī)要從娃娃抓起
很顯然，這是一位找片未遂的中年男子萬般無奈之下發(fā)出的感慨：當(dāng)時(shí)技術(shù)落后，找片的時(shí)間遠(yuǎn)大于看片的時(shí)間，可以理解！但這可害苦了成千上萬的少年前仆后繼的進(jìn)軍IT！哎.....年紀(jì)小、不懂事，坑你沒商量！
一、H5標(biāo)簽
img
<img src="**/**.jpg" width="100" title="這個(gè)是江哥的微信二維碼圖片" alt="對(duì)不起, 你需要查看的圖片不見了">
- title：用于告訴瀏覽器, 當(dāng)鼠標(biāo)懸停在圖片上時(shí), 需要彈出的描述框中顯示什么內(nèi)容
- alt：英文alternate的縮寫, 它的作用就是用于告訴瀏覽器, 當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容
注意：和H系列標(biāo)簽/p標(biāo)簽還有Hr標(biāo)簽不一樣, img標(biāo)簽不會(huì)獨(dú)占一行 - 路徑(給src屬性賦值)：
a. 同級(jí)同級(jí)就是"圖片"和".html文件"存儲(chǔ)在同一個(gè)文件夾中格式: src="QRCode.jpg"含義: 在.html文件所在的文件夾中查找名稱叫做QRCode.jpg的圖片
b. 下級(jí)下級(jí)就是"存儲(chǔ)圖片的文件夾"和".html文件"在同一個(gè)文件夾中格式: src="images/QRCode.jpg"含義: 在.html文件所在的文件夾中找到名稱叫做images的文件夾然后再在images文件夾中找到名稱叫做QRCode.jpg的圖片
c. 上級(jí)上級(jí)就是"存儲(chǔ)圖片的位置"和存"儲(chǔ)代碼的文件夾"在同一個(gè)文件夾中格式: src="../QRCode.jpg"含義：在.html文件所在的文件夾中找到這個(gè)文件夾的上一級(jí)文件夾, 然后再在上一級(jí)文件夾中找到名稱叫做QRCode.jpg其中../代表找到當(dāng)前文件夾的上一級(jí)文件夾
a
a標(biāo)簽的格式: <a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要展現(xiàn)給用戶查看的內(nèi)容</a>
- target：這個(gè)屬性的作用就是專門用于控制如何跳轉(zhuǎn)：
- _self: 用于在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn), 也就是不新建界面跳轉(zhuǎn). 默認(rèn)就是_self
- _blank: 用于在新的選項(xiàng)卡中跳轉(zhuǎn), 也就是新建界面跳轉(zhuǎn)
base
- 作用：base標(biāo)簽就是專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接(a標(biāo)簽)需要如何打開
- 注意點(diǎn)：
- base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間
- 如果既在base中指定了target又在a標(biāo)簽中指定了target,那么瀏覽器會(huì)按照a標(biāo)簽中指定的來執(zhí)行
錨點(diǎn)
要想實(shí)現(xiàn)通過a標(biāo)簽跳轉(zhuǎn)到指定的位置分為兩步：
<a href="#center">跳轉(zhuǎn)到中部</a><h2 id="center">我是中部</h2>
- 給目標(biāo)位置的標(biāo)簽添加一個(gè)id屬性, 然后指定一個(gè)獨(dú)一無二的值
- 告訴a標(biāo)簽?zāi)阈枰D(zhuǎn)到的目標(biāo)標(biāo)簽對(duì)應(yīng)的獨(dú)一無二的身份證號(hào)碼是多少
無序列表(ul、li)
- 應(yīng)用場(chǎng)景：導(dǎo)航條、新聞列表、商品列表
在webstorm中如何快速編寫一個(gè)ul的格式：
ul>li： 生成一對(duì)ul標(biāo)簽, 然后在這對(duì)ul標(biāo)簽中再生成一對(duì)li標(biāo)簽
ul>li3*：生成一對(duì)ul標(biāo)簽, 然后在這對(duì)ul標(biāo)簽中再生成3對(duì)li標(biāo)簽
定義列表(dl、dt)
- 應(yīng)用場(chǎng)景：做網(wǎng)站尾部的相關(guān)信息、做圖文混排
相關(guān)用法基本上和無序列表一樣
form(表單)
<form action="http://www.baidu.com">
<表單元素>(常見的表單元素有<input>)
</form>```
###### input
* 明文輸入框：(默認(rèn)值為lzy)
`賬號(hào):<input type="text" value="lzy">`
* 暗文輸入框：
` 密碼:<input type="password">`
* 單選框：
`<input type="radio" name="xx" checked="checked">男`
* 多選框：
`<input type="checkbox">籃球`
* 單選框注意點(diǎn):
>1.默認(rèn)情況下單選框不會(huì)互斥, 要想單選框互斥那么必須給每一個(gè)單選框標(biāo)簽都設(shè)置一個(gè)name屬性, 然后name屬性還必須設(shè)置相同的值
2.要想讓單選框默認(rèn)選中某一個(gè)框子, 那么可以給input標(biāo)簽添加一個(gè)checked屬性
3.在HTML中如果屬性的取值和屬性的名稱一樣, 可以只寫一個(gè). 但是在XHTML中必須寫上取值, 所以在企業(yè)開發(fā)中我們推薦大家不要省略取值
* 按鈕
* 普通按鈕：
`<input type="button" value="我是按鈕">`
* 圖片按鈕
`<input type="image" src="images/register.jpg">`
* 重置按鈕
`<input type="reset" value="清空">`
作用：用于清空表單中已經(jīng)填寫好的數(shù)據(jù)
* 提交按鈕
`<input type="submit">`
作用：將表單中已經(jīng)填寫好的數(shù)據(jù), 提交到遠(yuǎn)程服務(wù)器
* 隱藏域
`<input type="hidden" name="cc" value="kukuku">`
作用 : 配合提交按鈕將一些數(shù)據(jù)默默的悄悄咪咪的提交到服務(wù)器
###### Label
* 作用：默認(rèn)情況下文字和輸入框是沒有關(guān)聯(lián)關(guān)系的, 也就是說點(diǎn)擊文字輸入框不會(huì)聚焦, 如果想點(diǎn)擊文字時(shí)讓對(duì)應(yīng)的輸入框聚焦, 那么就需要讓文字和輸入框進(jìn)行綁定
* 格式：
1. 將文字利用label標(biāo)簽包裹起來
2. 給輸入框添加一個(gè)id屬性
3. 在label標(biāo)簽中通過for屬性和輸入框中的id進(jìn)行綁定即可
` <label for="account">賬號(hào):</label><input type="text" id="account">`
###### datalist
* 作用：給輸入框綁定待選項(xiàng)
* 如何給輸入框綁定待選列表
1. 搞一個(gè)輸入框
2. 搞一個(gè)datalist列表
3. 給datalist列表標(biāo)簽添加一個(gè)id
4. 給輸入框添加一個(gè)list屬性,將datalist的id對(duì)應(yīng)的值賦值給list屬性即可
請(qǐng)輸入你的喜好: <input type="text" list="love">
<datalist id="love">
<option>抽煙</option>
<option>喝酒</option>
<option>燙頭</option>
</datalist>```
datalist.gif
表單標(biāo)簽-H5
- 郵箱：
<input type="email">可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否符合郵箱的格式 - 域名:
<input type="url">可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否是URL地址 - 電話:
<input type="number">輸入框中只能輸入數(shù)字 - 時(shí)間:
<input type="date">可以通過日歷來選擇時(shí)間 - 顏色:
<input type="color">可以通過取色板來選擇顏色
表單標(biāo)簽-H5.gif
select
- 作用：用于定義下拉列表
- 格式:
<select>
<optgroup label="分組名稱">
<option>列表數(shù)據(jù)</option>
</optgroup>
</select>```
* 注意點(diǎn)
> 1. 下拉列表不能輸入內(nèi)容, 但是可以直接在列表中選擇內(nèi)容
2. 可以通過給option標(biāo)簽添加一個(gè)selected屬性來指定列表的默認(rèn)值
3. 可以通過給option標(biāo)簽包裹一層optgroup標(biāo)簽來給下拉列表中的數(shù)據(jù)分類
###### video
* 作用: 播放視頻
* video標(biāo)簽屬性：
* src: 用于告訴video標(biāo)簽需要播放的視頻地址
* autoplay: 用于告訴video標(biāo)簽是否需要自動(dòng)播放視頻
* controls: 用于告訴video標(biāo)簽是否需要顯示控制條
* poster: 用于告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片
* loop: 一般用于做廣告視頻, 用于告訴video標(biāo)簽視頻播放完畢之后是否需要循環(huán)播放
* preload: 預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會(huì)失效
* muted:靜音
###### audio
* 作用: 播放音頻
* 注意點(diǎn):
* audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣, video中能夠使用的屬性在audio標(biāo)簽中大部分都能夠使用, 并且功能都一樣
* 只不過有3個(gè)屬性不能用, height/width/poster
###### 詳情(details)和概要(summary)
* 作用：利用summary標(biāo)簽來描述概要信息, 利用details標(biāo)簽來描述詳情信息默認(rèn)情況下是折疊展示, 想看見詳情必須點(diǎn)擊
* 格式:
<details>
<summary>概要信息</summary>
詳情信息....
</details>```
summary.gif
marquee(跑馬燈)
- 屬性:
- direction: 設(shè)置滾動(dòng)方向 left/right/up/down
- scrollamount: 設(shè)置滾動(dòng)速度, 值越大就越快
- loop: 設(shè)置滾動(dòng)次數(shù), 默認(rèn)是-1, 也就是無限滾動(dòng)
- behavior: 設(shè)置滾動(dòng)類型 slide滾動(dòng)到邊界就停止, alternate滾動(dòng)到邊界就彈回
- 注意點(diǎn):
marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無法查詢這個(gè)標(biāo)簽, 但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好
字符實(shí)體
- 空格, 一個(gè) 就是一個(gè)空格, 有多少個(gè) 就有多少個(gè)空格
- < 小于符號(hào) <
- > 大于符號(hào) >
- ? 版權(quán)符號(hào)
WebStorm快捷鍵總結(jié)（后續(xù)更新....）
shift + Enter 軟回車 ,無論在前一行代碼的什么位置,都能定位到下一行
command + option + l 代碼格式化
command + d 直接粘貼當(dāng)前行的內(nèi)容
command + delete 直接刪除當(dāng)前行的內(nèi)容
command + x 剪切行
command + j 輸出模板
