a標(biāo)簽
注意點(diǎn):
- a標(biāo)簽必須有一個(gè)herf屬性纯陨,制定一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)艇劫。
- herf屬性的網(wǎng)頁(yè)URL必須加上http:// 或者 https://
<a herf"轉(zhuǎn)到的路徑">在網(wǎng)頁(yè)顯示的文字或者是圖片<a/>
例:
<a herf"http://www.baidu.com">百度一下<a/>
<a herf"http://www.baidu.com><img src"code.jpg"><a/>"
控制是否跳轉(zhuǎn)到一個(gè)新的頁(yè)面
屬性:
- target
一個(gè)是_self (默認(rèn)),另一個(gè)是_blank
其中“_self”是調(diào)轉(zhuǎn)到當(dāng)前頁(yè)面七嫌,“_blank”是跳轉(zhuǎn)到新的頁(yè)面少办。
格式: target" _self" - title
作用是控制鼠標(biāo)懸停時(shí)顯示的內(nèi)容。
格式:title" xxx"
base標(biāo)簽
作用:base標(biāo)簽專(zhuān)門(mén)用來(lái)統(tǒng)一指定網(wǎng)頁(yè)中當(dāng)前所以的a標(biāo)簽超鏈接如何打開(kāi)
注意點(diǎn):base標(biāo)簽必須寫(xiě)在head標(biāo)簽內(nèi)部抄瑟,格式為
<base target"_blank">.
假鏈接
假鏈接的兩種
- JavaScript:
兩者的區(qū)別:# 會(huì)自動(dòng)回到網(wǎng)頁(yè)的頂部凡泣,但是 JavaScript:不會(huì)自動(dòng)回到頂部。
錨點(diǎn)
要想通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定位置皮假,那么必須告訴目標(biāo)標(biāo)簽一個(gè)獨(dú)一二的id鞋拟。
步驟
1.給目標(biāo)的標(biāo)簽添加一個(gè)id屬性,并且添加一個(gè)獨(dú)一無(wú)二的值惹资。
2.給a標(biāo)簽的herf屬性中寫(xiě)上#+id(id就是目標(biāo)屬性的id值)
<h2>我是頂部</h2>
<a href="#center">跳轉(zhuǎn)到中部</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="center">我是中部</h2>
<a href="#end">調(diào)轉(zhuǎn)到底部</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="end">我是底部</h2>
列表標(biāo)簽
無(wú)序列表
無(wú)序列表表示沒(méi)有先后之分贺纲,列表是一個(gè)整體。
格式為:
<ul>
<li>
需要顯示的列表?xiàng)l目
</li>
</ul>
eg:
<h2>中國(guó)的城市</h2>
<hr width="500px" align="left">
<ul >
<li>北京</li>
<li>上海</li>
<li>廣州</li>
<li>西安</li>
</ul>
<h1>物品清單</h1>
<ul>
<li>
<h2>蔬菜</h2>
<ul>
<li>白菜</li>
<li>蘿卜</li>
<li>黃瓜</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>蘋(píng)果</li>
<li>桃子</li>
<li>香蕉</li>
</ul>
</li>
</ul>
有序列表
有序列表:所有的數(shù)據(jù)都是有序的
格式:
<ol type="a或者1或者I">
<li></li>
</ol>
ol有type屬性褪测,列表的排列目錄猴誊。即1,2,3或者a,b,c等
其他與無(wú)序列表大同小異
定義列表
定義列表的應(yīng)用場(chǎng)景:
- 做網(wǎng)頁(yè)的尾部信息
- 做圖文混排
格式:
<dl>
<dt></dt> 中間寫(xiě)的是事物
<dd></dd> 中間寫(xiě)的是描述
</dl>
<dl>
<dt>
(img/QRcode.jpg )
</dt>
<dd>
<h3>我的頭像</h3>
</dd>
</dl>
表格標(biāo)簽
目的:給數(shù)據(jù)添加表格語(yǔ)義
格式:
<table border="1"> 整個(gè)表格
<tr> 一行
<td>需要顯示的內(nèi)容</td> 一行的一個(gè)單元格
</tr>
</table>
注意點(diǎn):border默認(rèn)為零,因此不顯示侮措。故要設(shè)置成1.
表格的屬性:
- 寬度和高度
可以給table和td標(biāo)簽使用懈叹。
默認(rèn)是按照內(nèi)容來(lái)自動(dòng)設(shè)定的,也可以給table設(shè)置width或者h(yuǎn)eight屬性分扎。給td設(shè)置width或者h(yuǎn)eight屬性時(shí)候澄成,總寬度或者高度不變。 - 水平對(duì)其和垂直對(duì)其
其中畏吓,水平對(duì)其能給table和tr和td標(biāo)簽使用墨状,垂直對(duì)其只能給tr和td使用。
水平對(duì)齊是設(shè)置align屬性,垂直對(duì)其是valign 格式為align="center/left/right". valign="top/bottom". - 外邊距和內(nèi)邊距屬性
只能給table使用菲饼。
外邊距是單元格與單元格之間的距離肾砂,默認(rèn)情況下的外邊距是2。 格式為 cellspacing"20px"
內(nèi)邊距是單元格與文字之間的距離 默認(rèn)值是1. 格式為 cellpadding"20px"
eg:寫(xiě)一個(gè)表格宏悦,2行2列,外邊距為0镐确,文字全部居中的一個(gè)表格
<table border="1" width="500px" height="200px" cellspacing="0" align="center">
<tr align="center">
<td>1.1</td>
<td>2.3</td>
</tr>
<tr align="center">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
細(xì)線表格
先給整個(gè)表格設(shè)置背景顏色為黑色,然后給每個(gè)行設(shè)置背景顏色為白色饼煞,把黑色線條就顯示出來(lái)了辫塌,因?yàn)橥膺吘嗟哪J(rèn)值為2,設(shè)置成1派哲,即可。
步驟:
1.給table設(shè)置bgcolor和cellspcing
2.給tr設(shè)置bgcolor
<table bgcolor="black" cellspacing="1px" width="500" height="200">
<tr bgcolor="white" align="center">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white" align="center">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
表格的其他標(biāo)簽
表格的標(biāo)題:caption標(biāo)簽掺喻,一定要寫(xiě)在table內(nèi)部才會(huì)有效芭届,并且緊跟table后面储矩。
<table bgcolor="black" cellspacing="1px" width="800px" align="center">
<caption>
<h2>今日小說(shuō)排行榜</h2>
</caption>
<tr bgcolor="#a52a2a" align="center">
<td>排名</td>
<td>關(guān)鍵詞</td>
<td>趨勢(shì)</td>
<td>今日搜索</td>
<td>最近七日</td>
<td>相關(guān)鏈接</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>上升</td>
<td>8888</td>
<td>779897</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>上升</td>
<td>8888</td>
<td>779897</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>上升</td>
<td>8888</td>
<td>779897</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>上升</td>
<td>8888</td>
<td>779897</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>上升</td>
<td>8888</td>
<td>779897</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
單元格的合并
- 水平方向上單元格合并
可以給td標(biāo)簽添加colspan屬性,來(lái)指定把一個(gè)單元格看做兩個(gè)褂乍。 格式:<td colspan="2"></td>
但是這樣會(huì)多出一個(gè)單元格持隧,那么還應(yīng)該刪掉一個(gè)單元格,就是刪掉一個(gè)td
注意點(diǎn):?jiǎn)卧褚欢ㄊ窍蚝蠛喜⒒蛘呦蛳潞喜ⅰ?/li> - 垂直方向上單元格合并
可以給td標(biāo)簽添加rowspan屬性逃片,把一個(gè)單元格當(dāng)做兩個(gè)看待屡拨。
但是這樣會(huì)在垂直方向上多出一個(gè)單元格,還應(yīng)該刪掉一個(gè)單元格褥实。
<table height="200" width="500px" bgcolor="black" align="center" cellspacing="1px">
<tr bgcolor="white">
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
表單標(biāo)簽
表單就是收集用戶的信息的呀狼。
表單的格式:
<form>
<表單元素>
</form>
<form>
<!-- 明文輸入框-->
賬號(hào): <input type="text"/><br/>
<!-- 暗文輸入框-->
密碼: <input type="password"/><br/>
<!-- 給輸入框設(shè)置默認(rèn)值-->
姓名: <input type="text" value="stf"/><br/>
<!-- 單選框
注意點(diǎn):?jiǎn)芜x框默認(rèn)情況下不會(huì)互斥,要想互斥损离,都添加一個(gè)name屬性
要想默認(rèn)選中某個(gè)值哥艇,添加一個(gè)checked屬性
-->
性別:
<input type="radio" name="stf" checked="checked"/>男
<input type="radio" name="stf"/>女 <br/>
<!-- 多選框-->
喜歡的運(yùn)動(dòng) <br/>
<input type="checkbox"checked/>籃球
<input type="checkbox" checked/>足球
<input type="checkbox" checked/>乒乓
</form>
按鈕
普通按鈕的type:button
圖片按鈕的type:image
清空按鈕的type:reset
提交按鈕的type:submit,其中要想提交至服務(wù)器 1.給form添加一個(gè)action屬性填寫(xiě)地址 2.給需要提交的信息添加name屬性僻澎。
<form action="http://www.baidu.com">
賬號(hào):<input type="text" name="12"/>
密碼:<input type="password" name="23"/>
<!--普通按鈕-->
<input type="button" value="我是按鈕"/>
<!--圖片按鈕-->
<input type="image" src="img/QRcode.jpg"/>
<!-- 重置按鈕-->
<input type="reset" value="清空一下"/>
<!-- 提交按鈕-->
<input type="submit"/>
<!-- 隱藏域-->
<input type="hidden"/>
</form>
輸入框的聚焦
上次說(shuō)的有一些不足之處貌踏,點(diǎn)賬號(hào),賬號(hào)輸入框不會(huì)聚焦窟勃,同理祖乳,密碼輸入框也不會(huì)聚焦。怎么實(shí)現(xiàn)聚焦呢秉氧?
就要使用label標(biāo)簽眷昆。
有兩種方法。
- 1.將文字用label標(biāo)簽包裹
2.給input添加一個(gè)id屬性谬运。
3.用label的for屬性與id綁定(官方推薦)
格式就是:<label for="aaa">賬號(hào):</label><input type="text" id="aaa"/> - 直接將文字和所綁定的輸入框用label標(biāo)簽包裹隙赁。
局限性:不能實(shí)現(xiàn)賬號(hào)與密碼輸入框聚焦。
格式就是:<label>賬號(hào):<input type="text"/></label>
<form action="">
賬號(hào):<input type="text"/> <br/>
密碼:<input type="password"/> <br/>
<hr/>
<label for="aaa">賬號(hào):</label><input type="text" id="aaa"/> <br/>
<label for="bbb">密碼:</label><input type="password" id="bbb"/> <br/>
<hr/>
<label>賬號(hào):<input type="text"/></label> <br/>
<label>密碼:<input type="password"/></label> <br/>
</form>
待選框
給輸入框添加待選內(nèi)容
1.有一個(gè)輸入框
2.寫(xiě)一個(gè)datalist標(biāo)簽梆暖,內(nèi)部寫(xiě)一個(gè)option標(biāo)簽伞访,option標(biāo)簽內(nèi)部輸入待選內(nèi)容。
3.給datalist添加一個(gè) id屬性
4.給input標(biāo)簽添加一個(gè)list屬性轰驳,并且與datalist標(biāo)簽的id關(guān)聯(lián)厚掷。
請(qǐng)輸入你要的車(chē):<input type="text" list="cars"/>
<datalist id="cars">
<option>寶馬</option>
<option>路虎</option>
<option>奧迪</option>
<option>賓利</option>
</datalist>
新增的表單標(biāo)簽
一些固有的格式,這樣可以自動(dòng)校驗(yàn)是否符合格式级解。
<form action="">
郵箱:<input type="email"/>
電話:<input type="number"/>
時(shí)間:<input type="date"/>
顏色:<input type="color"/>
網(wǎng)址:<input type="url"/>
<input type="submit"/>
</form>
練習(xí)
注冊(cè)界面
<form action="http://www.baidu.com">
<!--
fieldset可以給表單添加一個(gè)邊框冒黑,legend標(biāo)簽可以添加標(biāo)題。
-->
<fieldset>
<legend>注冊(cè)界面</legend>
<label>賬號(hào):<input type="text"/></label> <br/>
<label>密碼:<input type="password"/></label> <br/>
性別:<input type="radio"name="xxx" checked="checked" />男
<input type="radio" name="xxx" />女
<input type="radio" name="xxx"/>保密<br/>
愛(ài)好:
<input type="checkbox"/>籃球
<input type="checkbox"/>足球
<input type="checkbox" checked="checked"/>足浴<br/>
<label for="ddd">個(gè)人簡(jiǎn)介:</label>
<textarea cols="20" rows="5" id="ddd"></textarea><br/>
<label for="aaa">生日:</label>
<input type="data" id="aaa"/><br/>
<label for="bbb">郵箱:</label>
<input type="email" id="bbb"/><br/>
<label for="ccc">手機(jī):</label>
<input type="number" id="ccc"/><br/>
<input type="submit" value="注冊(cè)"/>
<input type="reset" value="清空"/>
</fieldset>
</form>
其他的表單標(biāo)簽(select標(biāo)簽和textarea標(biāo)簽)
1.select標(biāo)簽
1.1作用:用于定義下拉列表
1.2設(shè)置默認(rèn)顯示的內(nèi)容:給option添加selected屬性
1.3給下拉列表的內(nèi)容分類(lèi) 格式為:
<select>
<optgroup label="類(lèi)名">
<option>列表內(nèi)容</option>
</optgroup>
</select>
2.textarea標(biāo)簽
2.1作用:定義一個(gè)多行輸入框
2.2格式:<textarea cols="30" rows="10"></textarea>
注意點(diǎn):cols和rows可以設(shè)置行數(shù)和列數(shù)勤哗。但是在網(wǎng)頁(yè)里面依然可以通過(guò)右下角的三角號(hào)進(jìn)行拉伸抡爹。
<select>
<optgroup label="不發(fā)達(dá)省份">
<option>山西</option>
<option selected>陜西</option>
<option>河南</option>
</optgroup>
<optgroup label="發(fā)達(dá)城市">
<option>北京</option>
<option selected>上海</option>
<option>廣州</option>
</optgroup>
<hr/>
<textarea cols="30" rows="10"></textarea>
</select>
視頻和音頻標(biāo)簽
視頻的第一種形式
格式:
<video src=""></video>
屬性:
autoplay:視頻默認(rèn)不會(huì)自動(dòng)播放,因此添加autoplay屬性芒划。
controls:控制條
poster:視頻沒(méi)有播放之前顯示的展位圖片冬竟,但是使用這個(gè)的時(shí)候應(yīng)該沒(méi)有autoplay標(biāo)簽的欧穴,因?yàn)槟菢訒?huì)自動(dòng)播放。
loop:用于廣告泵殴,不能控制涮帘,不能關(guān)閉
preload:預(yù)加載視頻。 如果設(shè)置了autoplay屬性笑诅,那么preload就會(huì)自動(dòng)失效调缨。
muted:設(shè)置靜音
width:視頻的寬度
height:視頻的高度
<!--<video src="videos/再見(jiàn)只是陌生人.mp4" autoplay="autoplay" controls="controls" poster="img/QRcode.jpg"></video>-->
<video src="videos/再見(jiàn)只是陌生人.mp4" autoplay="autoplay" loop="loop" muted="muted" width="200px"></video>
視頻的第二種形式
video第二種形式存在的意義:因?yàn)槲宕鬄g覽器廠商都不愿意支持其他瀏覽器的視頻格式,導(dǎo)致了有的視頻格式在瀏覽器上不會(huì)播放吆你,
為了解決這個(gè)問(wèn)題弦叶,推出了第二中形式。
<video >
<source src="videos/再見(jiàn)只是陌生人.mp4" type="video/mp4" ></source>
<source src="videos/再見(jiàn)只是陌生人.ogg" type="video/ogg"></source>
<source src="videos/再見(jiàn)只是陌生人.webm" type="video/webm"></source>
</video>
注意點(diǎn):瀏覽器必須支持HTML5標(biāo)簽早处,否則同樣無(wú)法播放的湾蔓。
以后可以通過(guò)JS框架實(shí)現(xiàn)。
<video autoplay="autoplay">
<source src="videos/再見(jiàn)只是陌生人.mp4" type="video/mp4" ></source>
<source src="videos/再見(jiàn)只是陌生人.ogg" type="video/ogg"></source>
<source src="videos/再見(jiàn)只是陌生人.webm" type="video/webm"></source>
</video>
音頻
音頻和視頻是基本上相同的砌梆,也是有兩種可是的默责。
video使用的屬性基本上可以在audio中使用。功能也基本上差不多咸包。
1.<audio src="" autoplay="autoplay" controls="controls" muted="muted"></audio>
2. <audio>
<source src="" type=""></source>
<source src="" type=""></source>
<source src="" type=""></source>
</audio>
marquee標(biāo)簽
作用:跑馬燈效果
屬性:
- direction:left/right/up/down
- scrollamount 單詞是滾動(dòng)速度的意思: 設(shè)置滾動(dòng)的速度桃序,值越大,速度越快烂瘫。
- loop:設(shè)置滾動(dòng)的次數(shù)媒熊,默認(rèn)情況是-1.即無(wú)限滾動(dòng)。
4.behavior 單詞是行為的意思:設(shè)置滾動(dòng)的類(lèi)型坟比。slide滾動(dòng)到邊界就停止芦鳍,alternate滾動(dòng)到邊界就自動(dòng)彈回。
marquee標(biāo)簽:
跑馬燈可以讓文字滾動(dòng)葛账,也可以讓圖片滾動(dòng)
<marquee behavior="" direction="left">
你們好柠衅!
</marquee>
<marquee behavior="slide" direction="right">你們好!</marquee>
<marquee behavior="slide" direction="right" scrollamount="100" loop="3">哎呀我炸你</marquee>
字符實(shí)體標(biāo)簽
字符實(shí)體:
- 空格: 一個(gè)“ ” 是一個(gè)空格籍琳,多個(gè)就是多個(gè)空格菲宴;
- <>在HTML中有特殊的含義,因此不能再網(wǎng)頁(yè)中直接顯示出來(lái)
其中 < 用lr >用bl 分別表示趋急。
3.版權(quán)符號(hào) :?
<p>我 愛(ài)你</p>
<p>現(xiàn)在我們學(xué)習(xí)了<p>喝峦、<table>等標(biāo)簽</p>
?2017-2018.
html中廢棄的標(biāo)簽
<font>等
<b> <u> <i> <s>
<b>加粗文本
u 給文本添加下劃線
i 將文本傾斜
s 給文本添加下劃線
這些沒(méi)有語(yǔ)義,就是改變樣式呜达,違背了HTML的原則谣蠢,因此不到萬(wàn)不得已都不使用這些標(biāo)簽。
現(xiàn)在用下列標(biāo)簽替代這些:
strong 代替 b
ins (instead) 代替 u
em (emphasizde) 代替 i
del (deleted) 代替 s