Html基本標(biāo)簽的使用
時(shí)間：2023-07-24 23:39:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-24 23:39:02 來源：網(wǎng)站運(yùn)營(yíng)
Html基本標(biāo)簽的使用：Html基本標(biāo)簽的使用
2021年3月5日
16:34
1.<h></h>標(biāo)簽:h標(biāo)簽是容器標(biāo)簽，但不同級(jí)別h標(biāo)簽之間不能嵌套，如果嵌套就顯示里面以及標(biāo)簽的大小，外面一級(jí)的標(biāo)簽在
瀏覽器中查看時(shí)會(huì)被放到里面一級(jí)標(biāo)簽的同級(jí)位置。
2.<p></p>標(biāo)簽和<br/>標(biāo)簽</br>:換行標(biāo)簽，相當(dāng)于回車鍵，上下行空襲比較少。
<p></p>：段落標(biāo)簽
3.文本格式化標(biāo)簽：(雙標(biāo)簽)del：在文字中間加一行橫線：
常用：b,u,i,em,strong
4.圖片img標(biāo)簽：src路徑屬性：（
<img src="" alt="">）1.相對(duì)路徑
2.絕對(duì)路徑：
<img src="C:/Users/86188/Desktop/learn_img/html1.png" alt="">
3.網(wǎng)址路徑：
<img src="
https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3250660113,3500682724&fm=26&gp=0.jpg" alt="">
title屬性：鼠標(biāo)點(diǎn)擊圖片時(shí)候顯示的文本文字
alt屬性：圖片加載失敗的顯示的文本文字
border屬性：設(shè)置邊框?qū)挾?，一般用css設(shè)置
height，width屬性：?jiǎn)卧O(shè)置一個(gè)屬性時(shí)，圖片會(huì)等比例放大縮小
5.添加音頻和視頻 <audio src="media/video.mp4" controls="control"></audio>
<video src="media/video.mp4"controls=""control></video>
6.超鏈接標(biāo)簽atarget屬性，href屬性，title屬性（img標(biāo)簽也有）
<a href="
https://lagou.com">跳轉(zhuǎn)到拉鉤</a>
<a target="blank" href="
https://baidu.com">跳轉(zhuǎn)到百度</a>
<a href="4video_audio.html" title="點(diǎn)擊按鈕跳轉(zhuǎn)到原網(wǎng)頁(yè)"><img src="images/btn.png" alt="">
</a>
7.錨點(diǎn):通過a標(biāo)簽實(shí)現(xiàn)錨點(diǎn)條狀,需要設(shè)置跳轉(zhuǎn)位置標(biāo)簽的id,#號(hào)是錨點(diǎn)的標(biāo)志符號(hào)
1.頁(yè)面內(nèi)跳轉(zhuǎn)<a src="#+id"> 跳轉(zhuǎn)到id指定的段落內(nèi)容
2.跨頁(yè)面跳轉(zhuǎn):<a src="sadas.html#id">
8.列表1.ol和ul標(biāo)簽（ol有序，ul無(wú)序）
它們之間嵌套的是<li>標(biāo)簽
2.列表與列表之間可以相互嵌套，列表中加標(biāo)題<h>標(biāo)簽時(shí)，要放到ol(ul)標(biāo)簽外面。
3.無(wú)序列表（dl dt dd）
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
<dl>
<dt>王五</dt>
<dd>
<p>城市：杭州</p>
<p>學(xué)校：外國(guó)語(yǔ)學(xué)校</p>
<p>電話：12312</p>
</dd>
</dl>
列表的補(bǔ)充：
9.表格標(biāo)簽（table,th,tr,td）邊框?qū)傩裕篵order:"1px" style:"border-collapse:collapse;''(將邊框之間的空襲去掉)
th是表格第一行標(biāo)題，自帶加粗效果
例子：
<table border="1" style="border-collapse: collapse;">
<th>1</th>
<th>2</th>
<tr>
<td>姓名</td>
<td>電話</td>
<td>住址</td>
<td>學(xué)校</td>
<td>成績(jī)</td>
</tr>
……
</table>
表格合并：（colspan:合并行，roespan:合并列）先設(shè)計(jì)每行的表格數(shù)目（合并后的）再根據(jù)合并后表格的個(gè)數(shù)添加相應(yīng)
的合并屬性
表格分區(qū)：(capption，thead,tbody,th td)caption是標(biāo)題：可以寫在table標(biāo)簽的任意一個(gè)位置，但建議寫開頭
代碼示例如下
作業(yè)：
可以將標(biāo)題加粗居中，用到tr>th10.容器標(biāo)簽（div 和 span）div是大容器標(biāo)簽 span是小容器標(biāo)簽，通常加在標(biāo)簽的內(nèi)部
11.表單制作（<form>）基本格式如下
action后面是表單提交數(shù)據(jù)的地址，methon是數(shù)據(jù)傳輸?shù)姆椒?，name是自己定義的名字
表單元素：<input>標(biāo)簽:用戶名和密碼框
單選框：（屬性radio）
如下示例：
注意：當(dāng)設(shè)置兩個(gè)單選框，且兩個(gè)復(fù)選框只能點(diǎn)擊一個(gè)復(fù)選框時(shí)候，將兩個(gè)復(fù)選框
的name屬性設(shè)置成相同的值。
另外input輸入標(biāo)簽中value屬性的值是設(shè)置輸入框的默認(rèn)值。
復(fù)選框：在input標(biāo)簽屬性中的type設(shè)置成checkbox
三個(gè)復(fù)選框的時(shí)候 name的屬性要設(shè)置成相同的
值
代碼示例：
注意：
1.單選框和多選框中checked=""checked屬性是給對(duì)應(yīng)的選框按鈕默認(rèn)打勾
2.單選框中的打勾不能取消，而多選框中的打勾可以取消掉。
按鈕：不同按鈕的type屬性值不同
普通按鈕：button
重置按鈕：reset
提交按扭：submit
圖片按鈕：image src="圖片地址"
文件上傳按扭：file
注意：file 按鈕里面有一個(gè)屬性multiple，設(shè)置好之后就能上傳多個(gè)文件
示例如下：
12.文本域標(biāo)簽：(<textarea>)文本域標(biāo)簽可以讓文本在一個(gè)設(shè)定好的區(qū)域內(nèi)展示，當(dāng)超出設(shè)定的行數(shù)和列數(shù)的時(shí)候
文字就會(huì)出現(xiàn)滾動(dòng)條。
常用屬性：cols (列數(shù)) rows（行數(shù)）
代碼示例：
13.下拉菜單：（<select>）下拉菜單中包裹的標(biāo)簽（<optgroup>,<option>）
代碼示例：
注：option中的屬性selected是默認(rèn)值，optgroup中的lable標(biāo)簽是分組中的標(biāo)簽名字下拉框中不可選擇。14.綁定標(biāo)簽：(<lable>)綁定標(biāo)簽的作用就是將鼠標(biāo)點(diǎn)擊按鈕的范圍變大，點(diǎn)擊文字的時(shí)候也能點(diǎn)擊的到小圓圈
兩種綁定方式：1.通過id綁定：Input中的for屬性和lable中的id屬性，兩者之間的屬性值要相等
代碼示例
性別：<input type="radio" name='sex' checked="checked" id="nan"><label for="nan">男</label>
2.通過lable標(biāo)簽包裹綁定：代碼示例：
<label ><input type="radio" name="sex">女</label>
注意：包裹綁定的時(shí)候不要有for屬性
15.html字符實(shí)體：字符實(shí)體都是以&開頭，；號(hào)結(jié)尾，且區(qū)分大小寫。
常用的：
 ；空格
© 版權(quán)符號(hào)
< 小于號(hào)
> 大于號(hào)
剩下的可以在網(wǎng)站w3school上面查找
一個(gè)dl中可以有多個(gè)<dt><dd>標(biāo)簽
dd標(biāo)簽緊跟上一dt標(biāo)簽，在實(shí)際應(yīng)用中的結(jié)構(gòu)里
如左邊
或者另外一種布局，如左邊代碼示例
在線咨詢