快速添加標(biāo)簽 選中文本 在按住 command + alt + t
-
單標(biāo)簽
- 只有開始標(biāo)簽沒有結(jié)束標(biāo)簽,也就是由一個<>組成
<meta charset="UTF-8">
- 雙標(biāo)簽
- 又開始標(biāo)簽和結(jié)束標(biāo)簽,也就是由一個<>和一個</>組成
<html>
</html>
H標(biāo)簽
- 被H系列標(biāo)簽包裹的內(nèi)容會獨占一行
- 在H系列的標(biāo)簽中,H1最大,H6最小
- 在企業(yè)中,H1標(biāo)簽慎用,一般一個網(wǎng)頁中只能出現(xiàn)一個H1標(biāo)簽(和SEO有關(guān))
P標(biāo)簽
- 作用
- 告訴瀏覽器哪些文字是一個段落
- 格式
- `<p>xxxxxx</p>`
- 注意點
- 1 在瀏覽器中會單獨占一行
img標(biāo)簽
img標(biāo)簽不會像P標(biāo)簽,H標(biāo)簽獨占一行 <img src="1.jpg" alt="">
- width和height屬性
1:因為指定了img的寬度和高度屬性后,很容易讓圖片變形,所以不想讓圖片變形可以只指定寬度或者高度
2:如果只指定了寬度,系統(tǒng)會自動計算高度是多少,圖片都是等比例拉伸
- title屬性
當(dāng)鼠標(biāo)懸停在圖片的上面時,會填出要顯示的文本提示內(nèi)容
- alt屬性
告訴瀏覽器,當(dāng)圖片找不到或者不存時,要顯示的內(nèi)容,就像許多被封的網(wǎng)站,圖片都成白底得了,你們懂得,
br標(biāo)簽
br的意思是不另起一個段落進行換行, 而網(wǎng)頁中99.99%需要換行時都是因為另起了一個段落, 所以應(yīng)該用p來做
a標(biāo)簽
控制頁面與頁面之間的跳轉(zhuǎn)
href : 跳轉(zhuǎn)到目的頁面
target : _self(當(dāng)前頁面顯示) _blank(另開一個頁面顯示)
title: 鼠標(biāo)放上面會顯示提示
base標(biāo)簽
base標(biāo)簽就是專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接(a標(biāo)簽)需要如何打開
注意點:
base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間
假鏈接
1 : # -> 點擊后會自動回到頂部
2 : javascript: -> 不會自動回到網(wǎng)頁頂部
無序列表
樣式
<ul>
<li>需要顯示的條目內(nèi)容</li>
</ul>
用途:
1 : 新聞列表
2 : 商品列表
3 : 導(dǎo)航條
快捷鍵
1 : ul>li 在按tab鍵 -> 生成一堆ul標(biāo)簽,然后在這對ul標(biāo)簽中在生成一對li標(biāo)簽
2 : ul>li*3
定義列表
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
用途:
1 : 做網(wǎng)站尾部的相關(guān)信息
2 : 做圖文混排
表格標(biāo)簽
格式
<table>
<tr>
<td></td>
</tr>
</table>
table: 代表整個表格
tr : 代表整個表格中的一行數(shù)據(jù)
td : 代表一行中的一個單元格,也就是一對td標(biāo)簽就是一行中的一個單元格
border : 邊框?qū)傩?caption標(biāo)簽
在表格標(biāo)簽中提供了一個標(biāo)簽專門用來設(shè)置表格的標(biāo)題
標(biāo)題會自動相對于表格的寬度居中
注意點:
1 : caption一定要寫在table標(biāo)簽中,否則沒有用
2 : caption一定要竟跟在table標(biāo)簽后面
th標(biāo)簽
在表格標(biāo)簽中提供了一個標(biāo)簽專門用來存儲每一列的標(biāo)題
只要將當(dāng)前的標(biāo)題存儲在這個標(biāo)簽中就會自動居中和加粗
常見的表單元素
input標(biāo)簽:
type屬性: text,password等
radio可以做單選框(radio)
注意 : 默認情況下 不會互次 想要單選框互次,必須給每一個單選框標(biāo)簽都設(shè)置一個name屬性,然后name屬性還必須設(shè)置相同的值
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
checked : 默認選中一個框子
在html中如果屬性的取值和屬性的名稱一樣,可以只寫一個
checkbox : 可以做多選框
button : 按鈕
image : 圖片
reset : 用于清空表單中已經(jīng)填寫好的數(shù)據(jù)
submit : 提交
注意點:要想吧表單中的數(shù)據(jù)提交到服務(wù)器必須注意兩點
1 : 需要給form表單添加一個action的舒心,通過這個action屬性 指定需要提交到的服務(wù)器地址
2 : 需要給需要提交到服務(wù)器的表單元素添加一個name屬性
hidden : 隱藏域
作用 : 配合提交按鈕將一些數(shù)據(jù)摸摸的提交到服務(wù)器
label標(biāo)簽
1 : 將文字利用label標(biāo)簽包裹起來
2 : 給輸入框添加一個id屬性
3 : 在label標(biāo)簽中通過for屬性和輸入框中的id進行綁定
樣式1:(建議)
<form action="">
<label for="account">賬號:</label><input type="text" id="account">
<label for="pwd">密碼:</label><input type="password" id="pwd">
<td></td>
</tr>
</form>
樣式2:
<label>賬號:<input type="text" ></label>
datalist標(biāo)簽(了解 - 絕大多數(shù)瀏覽器已經(jīng)不支持)
作用 : 給輸入框綁定待選框
例子:
請輸入你的車型:<input type="text" list="cars">
<datalist id="cars">
<option>寶馬</option>
<option>奔馳</option>
<option>賓利</option>
<option>勞斯萊斯</option>
</datalist>
select標(biāo)簽
用于定義下拉列表
格式
<select>
<option>列表數(shù)據(jù)</option>
</select>
注意點:
1 : 不能輸入內(nèi)容
2 : 可以在下拉列表中選擇
3 : <option selected="selected">勞斯萊斯</option> // 設(shè)置為默認數(shù)據(jù)
??1 單組:
<select>
<option>寶馬</option>
<option>奔馳</option>
<option>賓利</option>
<option selected="selected">勞斯萊斯</option> // 設(shè)置為默認數(shù)據(jù)
</select>
??2 分組:
<select>
<optgroup label="北京">
<option>朝陽區(qū)</option>
<option>昌平區(qū)</option>
</optgroup>
<optgroup label="蚌埠">
<option>禹會區(qū)</option>
<option>蚌山區(qū)</option>
</optgroup>
</select>
textarea標(biāo)簽
可以輸入多行文本
格式 :
<textarea>
</textarea>
注意點:
1 : 默認情況可以無限換行
2 : 默認情況下有自己的寬度和高度
3 : 可以通過cols和rows來指定,但是還是可以無限換行
4 : 默認情況下可以手動拉伸
video標(biāo)簽
格式1 :
<video src="" autoplay="autoplay">
</video>
autoplay : 自動播放
controls : 用于告訴video是否顯示工具條
poster : 用于視頻沒有播放前的占位圖片
loop : 一般用于做廣告視頻,用于告訴video視頻播放完后,是否需要循環(huán)播放
preload : 預(yù)先加載視頻,但是需要注意他和autoplay相互沖突,只能用一個
muted : 靜音
width/height : 設(shè)置其中一個就可以,同時設(shè)置不按比例有可能會變形
格式2 :
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
方式三 :
可以通過js的框架html5media來播放所有的瀏覽器視頻
video
audio標(biāo)簽
作用 : 播放視頻
格式1 :
<audio src=""></audio>
格式2 :
<audio>
<source src="" type="">
</audio>
詳情概要標(biāo)簽
格式:
<details>
<summary>概要信息</summary>
詳情信息
</details>
marquee標(biāo)簽
作用 : 跑馬燈
格式:
<marquee>
內(nèi)容
</marquee>
屬性:
direction : 方向
scrollamount : 滾動速度
loop : 滾動次數(shù) 默認-1,也就是無限滾動
behavior : 設(shè)置滾動類型 slide滾動到邊界就停止,alternate滾動到邊界就彈回
字符實體標(biāo)簽
: 空格符號
< : < 小于符號 (less than)
> : > 大于符號 (greater than)
© : 版權(quán)符號
