這篇講完,HTML的標(biāo)簽就差不多要告一段落了!接下來會是Css的樣式
本文是針對剛學(xué)編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!!
博客地址 點(diǎn)擊跳轉(zhuǎn)
表單標(biāo)簽
專門用來搜集用戶信息
在HTML中，標(biāo)簽/標(biāo)記元素都是指HTML中的標(biāo)簽
例如：<a> a標(biāo)簽/a元素/a標(biāo)記
- 表單元素其實(shí)就是HTML中的一些標(biāo)簽，只不過這些標(biāo)簽比較特殊夕膀，在瀏覽器中所有的表單標(biāo)簽都是特殊的外觀和默認(rèn)的功能
表單格式：
- 示例代碼 :
<form>
<表單元素>
</form>
常見的表單元素
input元素，有一個type的屬性烙荷，這個屬性有很多不同類型的取值，取值不同檬寂，功能和外觀就不同
示例代碼 :
<form>
<!--明文輸入框-->
帳號:<input type="text"/><br/><br/>
<!--暗文輸入框-->
密碼:<input type="password"><br/><br/>
<!--給輸入框設(shè)置默認(rèn)值-->
帳號:<input type="text" value="請輸入帳號"/><br/><br/>
密碼:<input type="password"><br/><br/><br/>
<!--
單選框
注意點(diǎn)：
1.默認(rèn)情況下單選框不會互斥终抽，要想單選框互斥，必須給每一個設(shè)置一個name屬性桶至，然后name值還必須設(shè)置相同的值
2.要想讓單選框默認(rèn)選中某一個框昼伴，那么給input添加一個checked屬性
3.在HTML中如果屬性的取值和屬性的名稱一樣，可以只寫一個镣屹，但是在企業(yè)開發(fā)中不要省略取值
-->
性別:
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
<input type="radio" name="gender" checked="checked"/>保密<br>
<!--
多選框
-->
愛好：
<input type="checkbox"/>籃球
<input type="checkbox"/>足球
<input type="checkbox"/>羽毛球
<input type="checkbox" checked="checked"/>棒球
</form>
- 圖片展示
表單
小Demo
- 示例代碼 :
<form action="http://www.520it.com">
帳號:<input type="text" name="username"/><br/><br/>
密碼:<input type="password" name="password"/><br/>
<!--
定義普通按鈕
可以通過value屬性來給按鈕指定標(biāo)題
作用：配合JS完成一些動畫操作
-->
<input type="button" value="我是按鈕" onclick="alert(123)"/>
<!--
圖片按鈕
作用：配合JS完成一些動畫操作
-->
<input type="image" src="images/register.jpg" onclick="alert(345)">
<!--
重置按鈕
作用：用于清空表單中已經(jīng)填好的數(shù)據(jù)
注意點(diǎn)：
如果想改重置按鈕默認(rèn)的按鈕標(biāo)題可以通過value屬性來修改
-->
<input type="reset" value="清空"/>
<!--
提交按鈕
作用：將表單中已經(jīng)填好的數(shù)據(jù)圃郊，提交到遠(yuǎn)程服務(wù)器
注意點(diǎn)：
要想把表單中填好的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器，必須具備兩個條件
1.需要給form表單添加一個action的屬性女蜈，通過這個屬性提交到服務(wù)器
2.需要給需要提交到服務(wù)器的表單元素添加一個name屬性
-->
<input type="submit"/>
<!--
隱藏域
作用：配合提交按鈕將一下數(shù)據(jù)悄悄的提交到服務(wù)器
Ajax
-->
<input type="hidden" name="cc" value="mimimi"/>
表單
Label標(biāo)簽
- 默認(rèn)情況下文字和輸入框是沒有關(guān)聯(lián)關(guān)系的持舆，如果想點(diǎn)擊文字時讓對應(yīng)的輸入框聚焦時，那么就需要把文字和輸入框綁定
- 要想讓輸入框和文字綁定在一起伪窖，那么我們可以使用label標(biāo)簽
- 綁定的格式：
1.將文字利用label標(biāo)簽包裹起來
2.給輸入框添加一個id屬性
3.在label標(biāo)簽中通過for屬性和輸入框里面的id綁定起來
- 示例代碼 :
<form action="">
<!--
這種綁定方式是官方推薦逸寓，不論是后面需要聚焦的輸入框是不是和前面的文字對應(yīng)都可以實(shí)現(xiàn)
-->
<label for="account">帳號:<input type="text" id="account"><br/></label>
<label for="pwd">密碼:<input type="password" id="pwd"/></label>
<!--
雖然把帳號可以包裹在label標(biāo)簽里面也可以實(shí)現(xiàn)綁定，但是有局限性
如果后面綁定的輸入框不是前面對應(yīng)的文字的時候就無法實(shí)現(xiàn)聚焦
-->
<label>
帳號:<input type="text">
</label>
**label標(biāo)簽**
Datalist標(biāo)簽
datalist標(biāo)簽
- 作用：給輸入框綁定帶選項(xiàng)
datalist格式
- 示例代碼 :
<datalist>
<option>待選項(xiàng)內(nèi)容</option>
</datalist>
小Demo
- 示例代碼 :
請輸入你的車型:<input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
- 圖片展示
**綁定下拉選項(xiàng)**
表單標(biāo)簽3
- 示例代碼 :
<form action="">
<!--
可以自動校驗(yàn)駛?cè)氲膬?nèi)容是否符合郵箱的格式
-->
郵箱:<input type="email"/>
<!--k
可以自動校驗(yàn)駛?cè)氲膬?nèi)容是否符合域名的格式
-->
域名:<input type="url">
<!--
輸入框中只可以輸入數(shù)字
-->
電話:<input type="number">
<!--
可以通過日歷來選擇時間
-->
時間:<input type="date">
<!--
可以通過取色板來選擇顏色
-->
顏色:<input type="color">
<input type="submit">
</form>
**input屬性**
select標(biāo)簽
select標(biāo)簽
- 作用：用于定義下拉列表
格式：
- 示例代碼 :
<select>
<optgroup label="分組名">
<option>列表數(shù)據(jù)</option>
</optgroup>
</select>
- 注意點(diǎn)：
1.下拉列表不能輸入內(nèi)容覆山，但是可以直接在列表中選擇內(nèi)容
2.可以通過給option添加一個selected屬性來指定列表的默認(rèn)值
3.可以通過給option包裹一個optgroup標(biāo)簽來給下拉列表中的數(shù)據(jù)分類
textarea標(biāo)簽
- 作用：定義一個多行的輸入框
- 注意點(diǎn)：
**1.默認(rèn)情況下輸入框可以無限換行
2.默認(rèn)情況下輸入框有自己的寬度和高度
3.可以通過cols和rows來指定輸入框的寬度和高度竹伸，但是還是可以無限換行**
- 示例代碼 :
<select>
<optgroup label="北京">
<option>朝陽區(qū)</option>
<option>昌平區(qū)</option>
<option>通州區(qū)</option>
</optgroup>
<optgroup label="廣州">
<option>天河區(qū)</option>
<option>越秀區(qū)</option>
<option>文明區(qū)</option>
</optgroup>
</select>
<hr/>
<textarea name="dd" id="aa" cols="2" rows="5"></textarea>
- 圖片展示
**下拉菜單**
小Demo
- 示例代碼 :
<form action="http://www.520it.com">
<!--
fieldest標(biāo)簽給表單添加一個邊框
lengend標(biāo)簽給表單添加一個標(biāo)題
-->
<fieldset>
<legend>注冊界面</legend>
<p>
<label for="username">帳號:<input type="text" id="username" name="account"></label>
</p>
<p>
<label for="pws">密碼:<input type="password" id="pws" name="pwd"></label>
</p>
<p>
性別:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked="checked" value="sec">保密
</p>
<p>
<!--注意點(diǎn)
單選框和多選框都需要指定相同的name值
-->
愛好:
<input type="checkbox" name="sport" value="basketball">籃球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" name="sport" checked="checked" value="crazy">足浴
</p>
<p>
個人簡介：
<textarea role="15" rows="6" name="desc"></textarea>
</p>
<p>
生日:<input type="date" name="birthday">
</p>
<p>
郵箱:<input type="email" name="email">
</p>
<p>
手機(jī):<input type="number" name="phone">
</p>
<input type="submit" value="注冊">
<input type="reset" value="清空">
<!--不加value值之前服務(wù)器的反饋
account=111&
pwd=222&
gender=on&
sport=on&
sport=on&d
esc=jest+do+it&
birthday=2016-10-03&
email=12345%40qq.com&
phone=12345678910
-->
<!--
除了按鈕類型的input標(biāo)簽以外，其他類型的標(biāo)簽都可以通過添加value屬性來指定將來提交到服務(wù)器的值
-->
<!--加了value值之后服務(wù)器的反饋簇宽，這才是完美匹配
account=111&
pwd=222&
gender=male&
sport=basketball&
sport=crazy&
desc=just+do+it&
birthday=2016-10-13&
email=87987%40qq.com&
phone=90898787890
-->
</fieldset>
</form>
-
圖片展示
表單練習(xí)
video和audio
video標(biāo)簽是用來播放視頻的
格式：
<video src=""></video>
video標(biāo)簽的屬性
1.src：用于告訴video標(biāo)簽需要播放的視頻地址
2.autoplay：用于告訴video標(biāo)簽是否自動播放視頻
3.control：用于告訴video標(biāo)簽是否需要顯示控制條
4.poster：用于告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片
5.loop：一般用于做廣告視頻勋篓，用于告訴video標(biāo)簽視頻播放完畢之后是否循環(huán)播放
6.preload：預(yù)加載視頻吧享，但是需要注意，這個屬性和autoplay相沖譬嚣，如果設(shè)置了autoplay屬性耙蔑，那么preload屬性就會失效
7.muted：靜音
8.width/height：和img標(biāo)簽的設(shè)置方式一模一樣
video第二種格式
- 示例代碼 :
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
- 由于視頻數(shù)據(jù)非常重要，所以五大瀏覽器廠商都不愿意指出別人的視頻格式孤荣，所以導(dǎo)致了沒有一種視頻格式是所有瀏覽器都支持的，所以W3C為了解決這個問題须揣，就推出了第二個video標(biāo)簽的格式
- video標(biāo)簽第二種格式存在的意義就是為了解決瀏覽器的適配問題
video元素支持三種視頻格式盐股，我們可以把這三種格式都通過source標(biāo)簽指定給video標(biāo)簽，那么當(dāng)瀏覽器播放視頻的時候它就會自動檢測一種自己支持的格式來播放 - 注意點(diǎn)：
當(dāng)前通過video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式耻卡，但是顯然所有瀏覽器都通過video標(biāo)簽播放視頻還有一個前提條件疯汁，就是瀏覽器必須支持H5標(biāo)簽，否則無法播放卵酪。如果想實(shí)現(xiàn)所有瀏覽器都可以播放視頻幌蚊，后續(xù)會學(xué)到j(luò)s里面的一個框架html5media來實(shí)現(xiàn)
- 示例代碼 :
<video controls="controls">
<source src="images/sb1.webm" type="video/webm">
<source src="images/sb1.mp4" type="video/mp4">
<source src="images/sb1.ogg" type="video/ogg">
</video>
audio和video的用法相同
詳情和概論
利用summary標(biāo)簽來描述概要信息，默認(rèn)情況是折疊顯示溃卡，想看詳情必須點(diǎn)擊溢豆。
格式：
<details>
<summary>概要信息</summary>
詳情信息
</details>
- 示例代碼 :
<details>
<summary>周杰倫</summary>
周杰倫（Jay Chou），華語天王巨星瘸羡。1979年1月18日出生于臺灣省新北市漩仙，中國臺灣流行樂男歌手、音樂人犹赖、演員队他、導(dǎo)演、編劇峻村、監(jiān)制麸折、商人。
</details>
- 圖片展示
**詳情概要**
marquee標(biāo)簽
作用：跑馬燈
-
格式：
<marquee>內(nèi)容</marquee> - 屬性：
**1.direction：設(shè)置滾動方向left/right/up/down
2.scrollamount:設(shè)置滾動的速度粘昨，值越大越快
3.loop：設(shè)置滾動的次數(shù)垢啼，默認(rèn)值是1
4.behavior：設(shè)置滾動類型，slide滾動到邊界就停止雾棺，alternate滾動到邊界就彈回**
注意點(diǎn)：
marquee不是W3C推薦的標(biāo)簽膊夹，在官網(wǎng)也找不到這個標(biāo)簽，但是各大瀏覽器都支持非常好捌浩。示例代碼 :
<!--設(shè)置滾動方向-->
<marquee>隨便寫點(diǎn)內(nèi)容</marquee>
<marquee direction="right">隨便寫點(diǎn)內(nèi)容</marquee>
<marquee direction="up">隨便寫點(diǎn)內(nèi)容</marquee>
<marquee direction="down">隨便寫點(diǎn)內(nèi)容</marquee>
<hr/>
<!--設(shè)置滾動速度-->
<marquee scrollamount="1">隨便寫點(diǎn)內(nèi)容</marquee>
<marquee scrollamount="10">隨便寫點(diǎn)內(nèi)容</marquee>
<hr/>
<!--設(shè)置滾動次數(shù)-->
<marquee loop="1">隨便寫點(diǎn)內(nèi)容</marquee>
<hr/>
<!--設(shè)置滾動類型-->
<marquee behavior="slide">隨便寫點(diǎn)內(nèi)容</marquee>
<marquee behavior="alternate">隨便寫點(diǎn)內(nèi)容</marquee>
<hr/>
<!--圖片滾動-->
<marquee>
</marquee>
**跑馬燈效果**
HTML中被廢棄的標(biāo)簽
為什么html中有一部分標(biāo)簽會被廢棄
- 因?yàn)楫?dāng)前HTML中的標(biāo)簽只有一個作用放刨，就是添加語義
- 而早期的HTML中的標(biāo)簽有一部分標(biāo)簽是沒有語義的，所以這部分標(biāo)簽就被淘汰
- 示例代碼 :
<br><hr><font>
<b><u><i><s>這些標(biāo)簽都是用來修改樣式的
b(bold) 加粗
u(underlined) 下劃線
i(italic) 傾斜
s(strikethrough) 刪除線
- 注意點(diǎn)：
1.以后在開發(fā)中不到萬不得已尸饺，不要用這些廢棄的標(biāo)簽
2.如果一定要使用进统，一般情況下都是用來作為css的鉤子來使用
3.這些新增標(biāo)簽替代被廢棄的
- 示例代碼 :
strong == b 語義：定義重要性強(qiáng)調(diào)的文字
ins（inseted） == u 語義：定義插入的文字
em （emphasized）== i 語義：定義強(qiáng)調(diào)的文字
del（deleted） == s 語義：定義被刪除的文字
字符實(shí)體
- 在HTML中對空格/回車/tab不敏感助币，會把多個空格和回車和Tab都當(dāng)作一個空格來處理
- 什么是字符實(shí)體
在HTML中有的字符是被HTML保留的，有的HTML字符在HTML中是有特殊含義的螟碎，在瀏覽器中不能直接顯示出來眉菱，那么這些東西要想顯示出來就必須通過字符實(shí)體來實(shí)現(xiàn)
就是一個空格的意思，有幾個 就有幾個空格會顯示出來掉分，切記最后一定要加分號
小于符號<：< (less than)的縮寫
大于符號>：> (greater than)的縮寫
版權(quán)符號：?
