這篇講完,HTML的標簽就差不多要告一段落了!接下來會是Css的樣式
本文是針對剛學編程的小白,都是一些基礎知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!
博客地址 點擊跳轉
表單標簽
專門用來搜集用戶信息
在HTML中，標簽/標記元素都是指HTML中的標簽
例如：<a> a標簽/a元素/a標記
- 表單元素其實就是HTML中的一些標簽，只不過這些標簽比較特殊，在瀏覽器中所有的表單標簽都是特殊的外觀和默認的功能
表單格式：
- 示例代碼 :
<form>
<表單元素>
</form>
常見的表單元素
input元素，有一個type的屬性，這個屬性有很多不同類型的取值，取值不同，功能和外觀就不同
示例代碼 :
<form>
<!--明文輸入框-->
帳號:<input type="text"/><br/><br/>
<!--暗文輸入框-->
密碼:<input type="password"><br/><br/>
<!--給輸入框設置默認值-->
帳號:<input type="text" value="請輸入帳號"/><br/><br/>
密碼:<input type="password"><br/><br/><br/>
<!--
單選框
注意點：
1.默認情況下單選框不會互斥，要想單選框互斥，必須給每一個設置一個name屬性，然后name值還必須設置相同的值
2.要想讓單選框默認選中某一個框，那么給input添加一個checked屬性
3.在HTML中如果屬性的取值和屬性的名稱一樣，可以只寫一個，但是在企業開發中不要省略取值
-->
性別:
<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屬性來給按鈕指定標題
作用：配合JS完成一些動畫操作
-->
<input type="button" value="我是按鈕" onclick="alert(123)"/>
<!--
圖片按鈕
作用：配合JS完成一些動畫操作
-->
<input type="image" src="images/register.jpg" onclick="alert(345)">
<!--
重置按鈕
作用：用于清空表單中已經填好的數據
注意點：
如果想改重置按鈕默認的按鈕標題可以通過value屬性來修改
-->
<input type="reset" value="清空"/>
<!--
提交按鈕
作用：將表單中已經填好的數據，提交到遠程服務器
注意點：
要想把表單中填好的數據提交到遠程服務器，必須具備兩個條件
1.需要給form表單添加一個action的屬性，通過這個屬性提交到服務器
2.需要給需要提交到服務器的表單元素添加一個name屬性
-->
<input type="submit"/>
<!--
隱藏域
作用：配合提交按鈕將一下數據悄悄的提交到服務器
Ajax
-->
<input type="hidden" name="cc" value="mimimi"/>
表單
Label標簽
- 默認情況下文字和輸入框是沒有關聯關系的，如果想點擊文字時讓對應的輸入框聚焦時，那么就需要把文字和輸入框綁定
- 要想讓輸入框和文字綁定在一起，那么我們可以使用label標簽
- 綁定的格式：
1.將文字利用label標簽包裹起來
2.給輸入框添加一個id屬性
3.在label標簽中通過for屬性和輸入框里面的id綁定起來
- 示例代碼 :
<form action="">
<!--
這種綁定方式是官方推薦，不論是后面需要聚焦的輸入框是不是和前面的文字對應都可以實現
-->
<label for="account">帳號:<input type="text" id="account"><br/></label>
<label for="pwd">密碼:<input type="password" id="pwd"/></label>
<!--
雖然把帳號可以包裹在label標簽里面也可以實現綁定，但是有局限性
如果后面綁定的輸入框不是前面對應的文字的時候就無法實現聚焦
-->
<label>
帳號:<input type="text">
</label>
**label標簽**
Datalist標簽
datalist標簽
- 作用：給輸入框綁定帶選項
datalist格式
- 示例代碼 :
<datalist>
<option>待選項內容</option>
</datalist>
小Demo
- 示例代碼 :
請輸入你的車型:<input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
- 圖片展示
**綁定下拉選項**
表單標簽3
- 示例代碼 :
<form action="">
<!--
可以自動校驗駛入的內容是否符合郵箱的格式
-->
郵箱:<input type="email"/>
<!--k
可以自動校驗駛入的內容是否符合域名的格式
-->
域名:<input type="url">
<!--
輸入框中只可以輸入數字
-->
電話:<input type="number">
<!--
可以通過日歷來選擇時間
-->
時間:<input type="date">
<!--
可以通過取色板來選擇顏色
-->
顏色:<input type="color">
<input type="submit">
</form>
**input屬性**
select標簽
select標簽
- 作用：用于定義下拉列表
格式：
- 示例代碼 :
<select>
<optgroup label="分組名">
<option>列表數據</option>
</optgroup>
</select>
- 注意點：
1.下拉列表不能輸入內容，但是可以直接在列表中選擇內容
2.可以通過給option添加一個selected屬性來指定列表的默認值
3.可以通過給option包裹一個optgroup標簽來給下拉列表中的數據分類
textarea標簽
- 作用：定義一個多行的輸入框
- 注意點：
**1.默認情況下輸入框可以無限換行
2.默認情況下輸入框有自己的寬度和高度
3.可以通過cols和rows來指定輸入框的寬度和高度，但是還是可以無限換行**
- 示例代碼 :
<select>
<optgroup label="北京">
<option>朝陽區</option>
<option>昌平區</option>
<option>通州區</option>
</optgroup>
<optgroup label="廣州">
<option>天河區</option>
<option>越秀區</option>
<option>文明區</option>
</optgroup>
</select>
<hr/>
<textarea name="dd" id="aa" cols="2" rows="5"></textarea>
- 圖片展示
**下拉菜單**
小Demo
- 示例代碼 :
<form action="http://www.520it.com">
<!--
fieldest標簽給表單添加一個邊框
lengend標簽給表單添加一個標題
-->
<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>
<!--注意點
單選框和多選框都需要指定相同的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>
手機:<input type="number" name="phone">
</p>
<input type="submit" value="注冊">
<input type="reset" value="清空">
<!--不加value值之前服務器的反饋
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標簽以外，其他類型的標簽都可以通過添加value屬性來指定將來提交到服務器的值
-->
<!--加了value值之后服務器的反饋，這才是完美匹配
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>
-
圖片展示
表單練習
video和audio
video標簽是用來播放視頻的
格式：
<video src=""></video>
video標簽的屬性
1.src：用于告訴video標簽需要播放的視頻地址
2.autoplay：用于告訴video標簽是否自動播放視頻
3.control：用于告訴video標簽是否需要顯示控制條
4.poster：用于告訴video標簽視頻沒有播放之前顯示的占位圖片
5.loop：一般用于做廣告視頻，用于告訴video標簽視頻播放完畢之后是否循環播放
6.preload：預加載視頻，但是需要注意，這個屬性和autoplay相沖，如果設置了autoplay屬性，那么preload屬性就會失效
7.muted：靜音
8.width/height：和img標簽的設置方式一模一樣
video第二種格式
- 示例代碼 :
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
- 由于視頻數據非常重要，所以五大瀏覽器廠商都不愿意指出別人的視頻格式，所以導致了沒有一種視頻格式是所有瀏覽器都支持的，所以W3C為了解決這個問題，就推出了第二個video標簽的格式
- video標簽第二種格式存在的意義就是為了解決瀏覽器的適配問題
video元素支持三種視頻格式，我們可以把這三種格式都通過source標簽指定給video標簽，那么當瀏覽器播放視頻的時候它就會自動檢測一種自己支持的格式來播放 - 注意點：
當前通過video標簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式，但是顯然所有瀏覽器都通過video標簽播放視頻還有一個前提條件，就是瀏覽器必須支持H5標簽，否則無法播放。如果想實現所有瀏覽器都可以播放視頻，后續會學到js里面的一個框架html5media來實現
- 示例代碼 :
<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標簽來描述概要信息，默認情況是折疊顯示，想看詳情必須點擊。
格式：
<details>
<summary>概要信息</summary>
詳情信息
</details>
- 示例代碼 :
<details>
<summary>周杰倫</summary>
周杰倫（Jay Chou），華語天王巨星。1979年1月18日出生于臺灣省新北市，中國臺灣流行樂男歌手、音樂人、演員、導演、編劇、監制、商人。
</details>
- 圖片展示
**詳情概要**
marquee標簽
作用：跑馬燈
-
格式：
<marquee>內容</marquee> - 屬性：
**1.direction：設置滾動方向left/right/up/down
2.scrollamount:設置滾動的速度，值越大越快
3.loop：設置滾動的次數，默認值是1
4.behavior：設置滾動類型，slide滾動到邊界就停止，alternate滾動到邊界就彈回**
注意點：
marquee不是W3C推薦的標簽，在官網也找不到這個標簽，但是各大瀏覽器都支持非常好。示例代碼 :
<!--設置滾動方向-->
<marquee>隨便寫點內容</marquee>
<marquee direction="right">隨便寫點內容</marquee>
<marquee direction="up">隨便寫點內容</marquee>
<marquee direction="down">隨便寫點內容</marquee>
<hr/>
<!--設置滾動速度-->
<marquee scrollamount="1">隨便寫點內容</marquee>
<marquee scrollamount="10">隨便寫點內容</marquee>
<hr/>
<!--設置滾動次數-->
<marquee loop="1">隨便寫點內容</marquee>
<hr/>
<!--設置滾動類型-->
<marquee behavior="slide">隨便寫點內容</marquee>
<marquee behavior="alternate">隨便寫點內容</marquee>
<hr/>
<!--圖片滾動-->
<marquee>
</marquee>
**跑馬燈效果**
HTML中被廢棄的標簽
為什么html中有一部分標簽會被廢棄
- 因為當前HTML中的標簽只有一個作用，就是添加語義
- 而早期的HTML中的標簽有一部分標簽是沒有語義的，所以這部分標簽就被淘汰
- 示例代碼 :
<br><hr><font>
<b><u><i><s>這些標簽都是用來修改樣式的
b(bold) 加粗
u(underlined) 下劃線
i(italic) 傾斜
s(strikethrough) 刪除線
- 注意點：
1.以后在開發中不到萬不得已，不要用這些廢棄的標簽
2.如果一定要使用，一般情況下都是用來作為css的鉤子來使用
3.這些新增標簽替代被廢棄的
- 示例代碼 :
strong == b 語義：定義重要性強調的文字
ins（inseted） == u 語義：定義插入的文字
em （emphasized）== i 語義：定義強調的文字
del（deleted） == s 語義：定義被刪除的文字
字符實體
- 在HTML中對空格/回車/tab不敏感，會把多個空格和回車和Tab都當作一個空格來處理
- 什么是字符實體
在HTML中有的字符是被HTML保留的，有的HTML字符在HTML中是有特殊含義的，在瀏覽器中不能直接顯示出來，那么這些東西要想顯示出來就必須通過字符實體來實現
就是一個空格的意思，有幾個 就有幾個空格會顯示出來，切記最后一定要加分號
小于符號<：< (less than)的縮寫
大于符號>：> (greater than)的縮寫
版權符號：?
