一通铲、標(biāo)題標(biāo)簽
為了使網(wǎng)頁(yè)更具有語(yǔ)義化,我們經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)簽器贩。HTML 提供了 6 個(gè)等級(jí)的網(wǎng)頁(yè)標(biāo)題颅夺,即<h1>至<h6> 。
<h1>我是一級(jí)標(biāo)題</h1>
<h2>我是二級(jí)標(biāo)題</h2>
<h3>我是三級(jí)標(biāo)題</h3>
<h4>我是四級(jí)標(biāo)題</h4>
<h5>我是五級(jí)標(biāo)題</h5>
<h6>我是六級(jí)標(biāo)題</h6>
單詞 head 的縮寫蛹稍,意為頭部吧黄、標(biāo)題。
標(biāo)簽語(yǔ)義:作為標(biāo)題使用唆姐,并且依據(jù)重要性遞減拗慨。
特點(diǎn):
- 加了標(biāo)題的文字會(huì)變的加粗,字號(hào)也會(huì)依次變大奉芦。
- 一個(gè)標(biāo)題獨(dú)占一行赵抢。
二、段落標(biāo)簽
在網(wǎng)頁(yè)中声功,要把文字有條理地顯示出來(lái)烦却,就需要將這些文字分段顯示。在 HTML 標(biāo)簽中先巴,<p>標(biāo)簽用于定義段落其爵,它可以將整個(gè)網(wǎng)頁(yè)分為若干個(gè)段落。
<p> 我是一個(gè)段落標(biāo)簽 </p>
單詞 paragraph [?p?r?gr?f] 的縮寫伸蚯,意為段落摩渺。
標(biāo)簽語(yǔ)義:可以把 HTML 文檔分割為若干段落。
特點(diǎn):
- 文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行剂邮。
- 段落和段落之間保有空隙摇幻。
三、換行標(biāo)簽(單標(biāo)簽)
在 HTML 中抗斤,一個(gè)段落中的文字會(huì)從左到右依次排列囚企,直到瀏覽器窗口的右端,然后才自動(dòng)換行瑞眼。如果希望某段文本強(qiáng)制換行顯示龙宏,就需要使用換行標(biāo)簽 <br />。
<br />
單詞 break 的縮寫伤疙,意為打斷银酗、換行辆影。
標(biāo)簽語(yǔ)義:強(qiáng)制換行。
特點(diǎn):
- <br /> 是個(gè)單標(biāo)簽黍特。
- <br /> 標(biāo)簽只是簡(jiǎn)單地開(kāi)始新的一行蛙讥,跟段落不一樣,段落之間會(huì)插入一些垂直的間距灭衷。
四次慢、文本格式化標(biāo)簽
在網(wǎng)頁(yè)中,有時(shí)需要為文字設(shè)置粗體翔曲、 斜體 或下劃線等效果迫像,這時(shí)就需要用到 HTML 中的文本格式化標(biāo)簽,使文字以特殊的方式顯示瞳遍。
<strong>加粗</strong>
<b>加粗</b>
<em>傾斜</em>
<i>傾斜</i>
<del>刪除線</del>
<s>刪除線</s>
<ins>下劃線</ins>
<u>下劃線</u>
標(biāo)簽 | 語(yǔ)義 | 說(shuō)明 |
---|---|---|
<strong></strong> | 加粗 | 更推薦闻妓,語(yǔ)義更強(qiáng)烈 |
<em></em> | 傾斜 | 更推薦,語(yǔ)義更強(qiáng)烈 |
<del></del> | 刪除線 | 更推薦掠械,語(yǔ)義更強(qiáng)烈 |
<ins></ins> | 下劃線 | 更推薦由缆,語(yǔ)義更強(qiáng)烈 |
<b></b> | 加粗 | 不推薦 |
<i></i> | 傾斜 | 不推薦 |
<s></s> | 刪除線 | 不推薦 |
<u></u> | 下劃線 | 不推薦 |
標(biāo)簽語(yǔ)義:突出重要性, 比普通文字更重要。
五猾蒂、盒子標(biāo)簽
<div> 和 <span> 是沒(méi)有語(yǔ)義的均唉,它們就是一個(gè)盒子,用來(lái)裝內(nèi)容的婚夫。
<div>大盒子</div>
<span>小盒子</span>
div 是 division 的縮寫浸卦,表示分割、分區(qū)案糙。span 意為跨度限嫌、跨距。
特點(diǎn):
- <div> 標(biāo)簽用來(lái)布局时捌,但是現(xiàn)在一行只能放一個(gè)<div>怒医。
- <span> 標(biāo)簽用來(lái)布局,一行上可以多個(gè) <span>奢讨。
六稚叹、圖像標(biāo)簽(單標(biāo)簽)
在 HTML 標(biāo)簽中,<img> 標(biāo)簽用于定義 HTML 頁(yè)面中的圖像拿诸。
<img src="URL扒袖,用于指定圖像路徑"
alt="替換文本,圖像不能出現(xiàn)時(shí)顯示的文字"
title="提示文本亩码,鼠標(biāo)放到圖像上時(shí)顯示的文字" />
單詞 image 的縮寫季率,意為圖像。
src 是<img>標(biāo)簽的必須屬性描沟,它用于指定圖像文件的路徑和文件名飒泻。
所謂屬性:簡(jiǎn)單理解就是屬于這個(gè)圖像標(biāo)簽的特性鞭光。
七、超鏈接標(biāo)簽
在 HTML 標(biāo)簽中泞遗,<a> 標(biāo)簽用于定義超鏈接惰许,作用是從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。
<a href="URL史辙,用于指定鏈接目標(biāo)的地址"
target="用于指定鏈接頁(yè)面的打開(kāi)方式汹买,_self為默認(rèn)值,_blank為在新窗口中打開(kāi)">
文本或圖像
</a>
單詞 anchor [???k?(r)] 的縮寫髓霞,意為:錨卦睹。
鏈接分類:
- 外部鏈接: 例如 < a href="https://www.baidu.com "> 百度</a >。
- 內(nèi)部鏈接:網(wǎng)站內(nèi)部頁(yè)面之間的相互鏈接. 直接鏈接內(nèi)部頁(yè)面名稱即可方库,
如 < a href="index.html"> 首頁(yè) </a >。 - 空鏈接: 如果當(dāng)時(shí)沒(méi)有確定鏈接目標(biāo)時(shí)障斋,< a href="#"> 首頁(yè) </a > 纵潦。
- 下載鏈接: 如果 href 里面地址是一個(gè)文件或者壓縮包,會(huì)下載這個(gè)文件垃环。
- 網(wǎng)頁(yè)元素鏈接: 在網(wǎng)頁(yè)中的各種網(wǎng)頁(yè)元素邀层,如文本、圖像遂庄、表格寥院、音頻、視頻等都可以添加超鏈接涛目。
- 錨點(diǎn)鏈接: 點(diǎn)我們點(diǎn)擊鏈接,可以快速定位到頁(yè)面中的某個(gè)位置秸谢。
在鏈接文本的 href 屬性中,設(shè)置屬性值為 #名字 的形式霹肝,
如<a href="#two"> 第2集 </a>
找到目標(biāo)位置標(biāo)簽估蹄,里面添加一個(gè) id 屬性 = 剛才的名字 ,
如<h3 id="two">第2集介紹</h3>
八沫换、表格標(biāo)簽
表格主要用于顯示臭蚁、展示數(shù)據(jù),因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整讯赏,可讀性非常好垮兑。
特別是后臺(tái)展示數(shù)據(jù)的時(shí)候,能夠熟練運(yùn)用表格就顯得很重要漱挎。
一個(gè)清爽簡(jiǎn)約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理系枪。
表格不是用來(lái)布局頁(yè)面的,而是用來(lái)展示數(shù)據(jù)的识樱。
1.表格基本語(yǔ)法
<table>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
<tr>
<td>表頭1對(duì)應(yīng)的數(shù)據(jù)1</td>
<td>表頭2對(duì)應(yīng)的數(shù)據(jù)1</td>
</tr>
<tr>
<td>表頭1對(duì)應(yīng)的數(shù)據(jù)2</td>
<td>表頭2對(duì)應(yīng)的數(shù)據(jù)2</td>
</tr>
</table>
表頭1 | 表頭2 |
---|---|
表頭1對(duì)應(yīng)的數(shù)據(jù)1 | 表頭2對(duì)應(yīng)的數(shù)據(jù)1 |
表頭1對(duì)應(yīng)的數(shù)據(jù)2 | 表頭2對(duì)應(yīng)的數(shù)據(jù)2 |
1)<table> </table> 是用于定義表格的標(biāo)簽嗤无。
2)<tr> </tr> 標(biāo)簽用于定義表格中的行震束,必須嵌套在 <table> </table>標(biāo)簽中。
3)<td> </td> 用于定義表格中的單元格当犯,必須嵌套在<tr></tr>標(biāo)簽中垢村。
4)字母 td 指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容嚎卫。
一般表頭單元格位于表格的第一行或第一列嘉栓,表頭單元格里面的文本內(nèi)容加粗居中顯示。
<th> 標(biāo)簽表示 HTML 表格的表頭部分(table head 的縮寫)拓诸。
表頭單元格也是單元格, 常用于表格第一行, 突出重要性, 表頭單元格里面的文字會(huì)加粗居中顯示侵佃。
2.表格結(jié)構(gòu)標(biāo)簽
因?yàn)楸砀窨赡芎荛L(zhǎng),為了更好的表示表格的語(yǔ)義奠支,可以將表格分割成 表格頭部和表格主體兩大部分馋辈。
在表格標(biāo)簽中,分別用:<thead>標(biāo)簽 表格的頭部區(qū)域倍谜、<tbody>標(biāo)簽 表格的主體區(qū)域迈螟。這樣可以更好的分清表格結(jié)構(gòu)。
<table>
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表頭1對(duì)應(yīng)的數(shù)據(jù)1</td>
<td>表頭2對(duì)應(yīng)的數(shù)據(jù)1</td>
</tr>
<tr>
<td>表頭1對(duì)應(yīng)的數(shù)據(jù)2</td>
<td>表頭2對(duì)應(yīng)的數(shù)據(jù)2</td>
</tr>
</tbody>
</table>
1)<thead></thead>:用于定義表格的頭部尔崔。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽答毫。 一般是位于第一行。
2)<tbody></tbody>:用于定義表格的主體季春,主要用于放數(shù)據(jù)本體 洗搂。
3)以上標(biāo)簽都是放在 <table></table> 標(biāo)簽中。
3.合并單元格
合并單元格方式:
跨行合并:rowspan="合并單元格的個(gè)數(shù)"
跨列合并:colspan="合并單元格的個(gè)數(shù)"
目標(biāo)單元格:(寫合并代碼)
跨行:最上側(cè)單元格為目標(biāo)單元格载弄,寫合并代碼
跨列:最左側(cè)單元格為目標(biāo)單元格耘拇,寫合并代碼
合并單元格三步曲:
1)先確定是跨行還是跨列合并。
2)找到目標(biāo)單元格侦锯,寫上合并方式 = 合并的單元格數(shù)量驼鞭。
比如:<td colspan=“2”></td>。
3)刪除多余的單元格尺碰。
九挣棕、列表標(biāo)簽
表格是用來(lái)顯示數(shù)據(jù)的,那么列表就是用來(lái)布局的亲桥。
列表最大的特點(diǎn)就是整齊洛心、整潔、有序题篷,它作為布局會(huì)更加自由和方便词身。
根據(jù)使用情景不同,列表可以分為三大類:無(wú)序列表番枚、有序列表和自定義列表法严。
1.無(wú)序列表
<ul> 標(biāo)簽表示 HTML 頁(yè)面中項(xiàng)目的無(wú)序列表损敷,一般會(huì)以項(xiàng)目符號(hào)呈現(xiàn)列表項(xiàng),而列表項(xiàng)使用 <li> 標(biāo)簽定義深啤。
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
1)無(wú)序列表的各個(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分拗馒,是并列的。
2) <ul></ul> 中只能嵌套 <li></li>溯街,直接在 <ul></ul> 標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的诱桂。
3.)<li> 與 </li> 之間相當(dāng)于一個(gè)容器,可以容納所有元素呈昔。
4.)無(wú)序列表會(huì)帶有自己的樣式屬性挥等,但在實(shí)際使用時(shí),我們會(huì)使用 CSS 來(lái)設(shè)置堤尾。
去掉 li 前面的項(xiàng)目符號(hào)(小圓點(diǎn)):list-style: none;
2.有序列表
有序列表即為有排列順序的列表肝劲,其各個(gè)列表項(xiàng)會(huì)按照一定的順序排列定義。
在 HTML 標(biāo)簽中哀峻,<ol> 標(biāo)簽用于定義有序列表涡相,列表排序以數(shù)字來(lái)顯示,并且使用 <li> 標(biāo)簽來(lái)定義列表項(xiàng)剩蟀。
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>
1)<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的切威。
2)<li> 與 </li>之間相當(dāng)于一個(gè)容器育特,可以容納所有元素。
3)有序列表會(huì)帶有自己樣式屬性先朦,但在實(shí)際使用時(shí)缰冤,我們會(huì)使用 CSS 來(lái)設(shè)置。
3.自定義列表
自定義列表的使用場(chǎng)景:
自定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述喳魏,定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)棉浸。
在 HTML 標(biāo)簽中,<dl> 標(biāo)簽用于定義描述列表(或定義列表)刺彩,該標(biāo)簽會(huì)與 <dt>(定義項(xiàng)目/名字)和<dd>(描述每一個(gè)項(xiàng)目/名字)一起使用迷郑。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
<dd>名詞1解釋3</dd>
</dl>
1)<dl></dl> 里面只能包含 <dt> 和 <dd>。
2)<dt> 和 <dd>個(gè)數(shù)沒(méi)有限制创倔,經(jīng)常是一個(gè)<dt> 對(duì)應(yīng)多個(gè)<dd>嗡害。
十、表單標(biāo)簽
使用表單目的是為了收集用戶信息畦攘。
在我們網(wǎng)頁(yè)中霸妹, 我們也需要跟用戶進(jìn)行交互,收集用戶資料知押,此時(shí)就需要表單叹螟。
表單域是一個(gè)包含表單元素的區(qū)域鹃骂。
在 HTML 標(biāo)簽中, <form> 標(biāo)簽用于定義表單域罢绽,以實(shí)現(xiàn)用戶信息的收集和傳遞畏线。
<form> 會(huì)把它范圍內(nèi)的表單元素信息提交給服務(wù)器。
<form action="url地址有缆,指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址"
method="提交方式象踊,設(shè)置表單數(shù)據(jù)的提交方式,其取值為get或post"
name="表單域名稱棚壁,指定表單的名稱杯矩,以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單域">
各種表單元素控件
</form>
1.input輸入表單元素(單標(biāo)簽)
在英文單詞中,input 是輸入的意思袖外,而在表單元素中 <input> 標(biāo)簽用于收集用戶信息史隆。
在 <input> 標(biāo)簽中,包含一個(gè) type 屬性曼验,根據(jù)不同的 type 屬性值泌射,輸入字段擁有很多種形式(可以是文本字段、復(fù)選框鬓照、掩碼后的文本控件熔酷、單選按鈕、按鈕等)豺裆。
<input type="輸入類型"
name="定義input元素的名稱拒秘,區(qū)別不同的表單元素"
value="規(guī)定input元素的默認(rèn)值"
checked="規(guī)定此input元素首次加載時(shí)應(yīng)當(dāng)被選中"
maxlength="規(guī)定輸入字段中的字符的最大長(zhǎng)度"/>
1)name 和value 是每個(gè)表單元素都有的屬性值,主要給后臺(tái)人員使用臭猜。
2)name 表單元素的名字躺酒,要求 單選按鈕和復(fù)選框要有相同的name值。
3)checked屬性主要針對(duì)于單選按鈕和復(fù)選框蔑歌,主要作用一打開(kāi)頁(yè)面羹应,就要可以默認(rèn)選中某個(gè)表單元素。
4)maxlength 是用戶可以在表單元素輸入的最大字符數(shù)次屠,一般較少使用园匹。
輸入類型 | 描述 |
---|---|
button | 定義可點(diǎn)擊按鈕 |
checkbox | 定義復(fù)選框 |
file | 定義輸入字段和瀏覽按鈕,供文件上傳 |
hidden | 定義隱藏的輸入字段 |
image | 定義圖像形式的提交按鈕 |
password | 定義被掩碼的密碼字段 |
radio | 定義單選按鈕 |
reset | 定義重置按鈕帅矗,清除表單所有數(shù)據(jù) |
submit | 定義提交按鈕偎肃,提交表單所有數(shù)據(jù) |
text | 定義單行可輸入文本,默認(rèn)20個(gè)字符寬度 |
2.label標(biāo)簽
<label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)簽)浑此。
<label> 標(biāo)簽用于綁定一個(gè)表單元素累颂,當(dāng)點(diǎn)擊<label> 標(biāo)簽內(nèi)的文本時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)(光標(biāo))轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上,用來(lái)增加用戶體驗(yàn)紊馏。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心: <label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同料饥。
3.select下拉表單元素
使用場(chǎng)景: 在頁(yè)面中,如果有多個(gè)選項(xiàng)讓用戶選擇朱监,并且想要節(jié)約頁(yè)面空間時(shí)岸啡,我們可以使用<select>標(biāo)簽控件定義下拉列表。
<select>
<option>選項(xiàng)1</option>
<option>選項(xiàng)2</option>
<option>選項(xiàng)3</option>
</select>
1)<select> 中至少包含一對(duì)<option> 赫编。
2)在<option> 中定義 selected =“ selected " 時(shí)巡蘸,當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
4.textarea 文本域元素
使用場(chǎng)景: 當(dāng)用戶輸入內(nèi)容較多的情況下擂送,我們就不能使用文本框表單了悦荒,此時(shí)我們可以使用 <textarea> 標(biāo)簽。
在表單元素中嘹吨,<textarea> 標(biāo)簽是用于定義多行文本輸入的控件搬味。
使用多行文本輸入控件,可以輸入更多的文字蟀拷,該控件常見(jiàn)于留言板碰纬,評(píng)論。
<textarea rows="3" cols="20">
文本內(nèi)容
</textarea>
1)通過(guò) <textarea> 標(biāo)簽可以輕松地創(chuàng)建多行文本輸入框问芬。
2)cols="每行中的字符數(shù)" 悦析,rows="顯示的行數(shù)",我們?cè)趯?shí)際開(kāi)發(fā)中不會(huì)使用此衅,都是用 CSS 來(lái)改變大小她按。