當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体

發(fā)布時(shí)間：2024/3/13 HTML 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、排版標(biāo)簽

1、標(biāo)題標(biāo)簽

在新聞和文章的頁面中都離不開標(biāo)題，用來突出顯示文章主題。

h系列標(biāo)題

1-6級(jí)標(biāo)題，重要程度依次遞減，

文字都有加粗變大作用，并且從h1——h6逐漸減小

獨(dú)占一行

h1標(biāo)簽對(duì)于網(wǎng)頁尤為重要，開發(fā)中有特定的使用場(chǎng)景，如：新聞標(biāo)題，網(wǎng)頁的logo部分等。

2、段落標(biāo)簽

在文章和新聞頁面中，用于分段顯示

<p>我是一段文字</p>

段落之間存在間隙，獨(dú)占一行

<h1>關(guān)雎</h1><p>關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。參差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，輾轉(zhuǎn)反側(cè)。</p><p>參差荇菜，左右采之。窈窕淑女，琴瑟友之。參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。</p>

3、換行標(biāo)簽

<br>? ?讓文字強(qiáng)制換行顯示

<h1>關(guān)雎</h1> <p>關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。<br>參差荇菜，左右流之。窈窕淑女，寤寐求之。<br>求之不得，寤寐思服。悠哉悠哉，輾轉(zhuǎn)反側(cè)。</p> <p>參差荇菜，左右采之。窈窕淑女，琴瑟友之。<br>參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。</p>

4、水平線標(biāo)簽

<hr>? 分割不同主題內(nèi)容的水平線，單標(biāo)簽，在頁面中顯示一條水平線

<h1>關(guān)雎</h1><hr> <p>關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。</p><hr> <p>參差荇菜，左右流之。窈窕淑女，寤寐求之。</p><hr> <p>求之不得，寤寐思服。悠哉悠哉，輾轉(zhuǎn)反側(cè)。</p><hr> <p>參差荇菜，左右采之。窈窕淑女，琴瑟友之。</p><hr> <p>參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。</p><hr>

5、文本格式化標(biāo)簽

5.1標(biāo)簽介紹

需要讓文字加粗、下劃線、傾斜、刪除線等效果

標(biāo)簽	說明
b	加粗
u	下劃線
i	傾斜
s	刪除線

標(biāo)簽	說明
strong	加粗
ins	下劃線
em	傾斜
del	刪除線

? ? ? ? ?

突出重要的強(qiáng)調(diào)語境

5.2、標(biāo)簽語義化

實(shí)際項(xiàng)目中選擇標(biāo)簽的原則：標(biāo)簽語義化

? ? ? ? 即：根據(jù)語義選擇正確的標(biāo)簽

? ? ? ? 如：需要寫標(biāo)題就用h系列的標(biāo)簽

? ? ? ? ? ? ? 需要寫段落就用p標(biāo)簽

? ? ? ? ? ? ? .......

好處：好理解，好記憶，有利于機(jī)器解析

推薦：strong 、ins 、em、 del ，表示的強(qiáng)調(diào)語義更強(qiáng)烈！

二、媒體標(biāo)簽

1、圖片標(biāo)簽

1.1在網(wǎng)頁中顯示圖片

屬性名：src

屬性值：目標(biāo)圖片的路徑

當(dāng)前網(wǎng)頁和目標(biāo)圖片在同一個(gè)文件夾中，路徑直接寫目標(biāo)圖片的名字即可（包括后綴名）

屬性名：alt

屬性值：替換文本

當(dāng)圖片加載失敗時(shí)才顯示alt的文本，加載成功則不顯示

屬性名：title

屬性值：提示文本

當(dāng)鼠標(biāo)懸停時(shí)才顯示的文本，title屬性不僅可以用于圖片標(biāo)簽，還可以用于其他標(biāo)簽

1.2圖片標(biāo)簽的width和height屬性

屬性名：width? ? height

屬性值：寬度? ? ?高度

如果只設(shè)置width? 或? height 中的一個(gè)，另一個(gè)沒設(shè)置的會(huì)自動(dòng)等比例縮放（此時(shí)圖片不會(huì)變形）；

如果同時(shí)設(shè)置了width 和 height? 兩個(gè)，若設(shè)置不當(dāng)則圖片可能會(huì)變形；

1.3路徑

頁面加載需要的圖片，需要先根據(jù)對(duì)應(yīng)的地址路徑找到圖片

1.3.1絕對(duì)路徑

目錄下的絕對(duì)位置，可以直接到達(dá)目標(biāo)位置，通常從盤符開始；

例如：

盤符開始：D:\DAY01\images\1.ipg

完整的網(wǎng)絡(luò)地址：http://www.itcast.cn/images/logo.gif

1.3.2相對(duì)路徑(常用)

當(dāng)前文件：當(dāng)前的html網(wǎng)頁

目標(biāo)文件：要找到的圖片

相對(duì)路徑：從當(dāng)前文件開始觸發(fā)尋找目標(biāo)文件的過程

相對(duì)路徑分類：同級(jí)目錄、下級(jí)目錄、上級(jí)目錄

同級(jí)目錄：當(dāng)前文件和目標(biāo)文件在同一目錄中

類似于：我（當(dāng)前文件）和你（目標(biāo)文件）都在一個(gè)房間中

代碼步驟：直接寫目標(biāo)文件的名字即可

? ? ? ? <img src="目標(biāo)圖片.jpg">

? ? ? ? <img src="./目標(biāo)圖片.jpg">

下級(jí)目錄：目標(biāo)文件在下級(jí)目錄中

類似于：我在客廳，你去臥室，我要找到你

代碼步驟：先知道在哪個(gè)文件夾里面----文件夾名字

? ? ? ? ? ? ? ? 進(jìn)入這個(gè)文件夾------/

? ? ? ? ? ? ? ? 此時(shí)看到目標(biāo)文件直接喊-----直接寫目標(biāo)文件的名字

上級(jí)目錄：目標(biāo)文件在上級(jí)目錄中

類似于；我去臥室，而你還在客廳

代碼步驟：先出當(dāng)前文件，到上一級(jí)目錄----? ?../?

? ? ? ? ? ? ? ? 此時(shí)看到目標(biāo)文件直接喊-----直接寫目標(biāo)文件

2.音頻標(biāo)簽

<audio?src="./music.mp3"?controls></audio>

屬性名	功能
src	音頻的路徑
controls	顯示播放的控件
autoplay	自動(dòng)播放（部分瀏覽器不支持）
loop	循環(huán)播放

音頻標(biāo)簽?zāi)壳爸С秩N格式：MP3、Wav 、Ogg

3、視頻標(biāo)簽

<video?src="./video.mp4"?controls></video>

屬性名	功能
src	視頻路徑
controls	顯示播放的控件
autoplay	自動(dòng)播放（谷歌瀏覽器中需配合muted實(shí)現(xiàn)靜音播放）
loop	循環(huán)播放

視頻標(biāo)簽?zāi)壳爸С秩N格式：MP4、WebM?、Ogg

4、鏈接標(biāo)簽

點(diǎn)擊之后從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面

稱呼：a標(biāo)簽、超鏈接、錨鏈接

<a?href="./目標(biāo)網(wǎng)頁.html">超鏈接</a>

雙標(biāo)簽，內(nèi)部可以包裹內(nèi)容

如果需要a標(biāo)簽點(diǎn)擊之后去指定頁面，需要設(shè)置a標(biāo)簽的href屬性

4.1?、屬性名：href

屬性值：點(diǎn)擊之后去跳轉(zhuǎn)到哪一個(gè)網(wǎng)頁（目標(biāo)網(wǎng)頁的路徑）

外部鏈接：<a?href="http://www.baidu.com">去百度</a>

內(nèi)部鏈接：<a?href="./目標(biāo)網(wǎng)頁.html">目標(biāo)網(wǎng)頁</a>

?顯示特點(diǎn)：a標(biāo)簽?zāi)J(rèn)文字有下劃線

? ? ? ? ? ? ? ? ?a標(biāo)簽從未顯示過，默認(rèn)文字顯示藍(lán)色

? ? ? ? ? ? ? ? ?a標(biāo)簽點(diǎn)擊過之后，文字為紫色（清除瀏覽器歷史記錄可恢復(fù)藍(lán)色）

4.2、屬性：target

屬性值；目標(biāo)網(wǎng)頁的打開形式

取值	效果
_self	默認(rèn)值，在當(dāng)前窗口中跳轉(zhuǎn)（覆蓋原網(wǎng)頁）
_blank	在新窗口中跳轉(zhuǎn)（保留原網(wǎng)頁）

4.3、空鏈接

<a?href="#">空鏈接</a>

功能：點(diǎn)擊之后回到網(wǎng)頁頂部；

? ? ? ? ? 開發(fā)中不確定該鏈接的最終跳轉(zhuǎn)位置，用空鏈接占個(gè)位置

三、列表標(biāo)簽

1、無序列表 ul? ?li

在網(wǎng)頁中展示沒有順序之分

ul：表示無序列表的整體，用于包裹標(biāo)簽；

li：表示無序列表中的每一項(xiàng)，用于包含每一行的內(nèi)容；

顯示特點(diǎn)：列表的每一項(xiàng)前默認(rèn)顯示原點(diǎn)標(biāo)識(shí)；

注意：ul標(biāo)簽中只允許包含li標(biāo)簽，但li標(biāo)簽中可以包含任意內(nèi)容；

2、有序列表? ?ol? li

在網(wǎng)頁中展示有順序之分,如排行榜

ol：表示有序列表的整體；

li：表示有序列表的每一項(xiàng)，用于包含每一項(xiàng)的內(nèi)容；

顯示特點(diǎn)：列表的每一項(xiàng)前默認(rèn)顯示序號(hào)標(biāo)識(shí)；

注意：ol標(biāo)簽中只允許包含li標(biāo)簽，但li標(biāo)簽中可以包含任意內(nèi)容；

3、自定義列表? dl? dt? dd

在網(wǎng)頁的底部導(dǎo)航中通常會(huì)使用自定義列表實(shí)現(xiàn)。

dl：表示自定義列表的整體，用于包裹dt/dd標(biāo)簽；

dt：表示自定義列表的主題；

dd：表示自定義列表的針對(duì)主題的每一項(xiàng)內(nèi)容；

顯示特點(diǎn)：dd前會(huì)默認(rèn)顯示縮進(jìn)效果

注意點(diǎn)：dl標(biāo)簽中只允許包含dt/dd標(biāo)簽；

? ? ? ? ? ? ? dt/dd標(biāo)簽可以包含任意內(nèi)容。

四、表格標(biāo)簽

1、表格的基本標(biāo)簽? ? table? tr? td

在網(wǎng)頁中以行+列的單元格的方式整齊展示數(shù)據(jù)，如學(xué)生成績(jī)表

table：表格整體，可用于包裹多個(gè)tr

tr：表格每行，可用于包裹多個(gè)td

td：表格單元格，可用于包裹內(nèi)容

標(biāo)簽的嵌套關(guān)系：table > tr?> td

2、表格的相關(guān)屬性? border? ?width? height

設(shè)置表格基本展示效果

border：值為數(shù)字，代表邊框?qū)挾?#xff1b;

width：值為數(shù)字，代表表格寬度；

height：值為數(shù)字，代表表格高度；

實(shí)際開發(fā)針對(duì)樣式效果推薦使用CSS設(shè)置

3、表格標(biāo)題和表頭單元格標(biāo)簽? caption? ?th

在表格中表示整體大標(biāo)題和一列小標(biāo)題

caption：表示表格整體大標(biāo)題，默認(rèn)在表格整體頂部居中的位置顯示；

th：表頭單元格，表示一列小標(biāo)題，通常用于表格第一行，默認(rèn)內(nèi)部文字加粗并居中顯示；

注意點(diǎn)：caption標(biāo)簽寫在table標(biāo)簽內(nèi)部；

? ? ? ? ? ? ? th標(biāo)簽書寫在tr標(biāo)簽內(nèi)部（用于替換td標(biāo)簽）

4、表格的結(jié)構(gòu)標(biāo)簽

讓表格的內(nèi)容結(jié)構(gòu)分組，突出表格的不同部分（頭部、主體、底部），使語義更加清晰；

thead：表格頭部

tbody：表格主體

tfoot：表格底部

表格結(jié)構(gòu)標(biāo)簽內(nèi)部用于包裹tr標(biāo)簽；表格的結(jié)構(gòu)標(biāo)簽可以省略。

5、合并單元格

步驟：1、明確合并哪幾個(gè)單元格

? ? ? ? ? 2、通過左上原則，確定保留誰刪除誰

? ? ? ? ? ? ? ? 上下合并，只保留最上的，刪除其他

? ? ? ? ? ? ? ? 左右合并，只保留最左的，刪除其他

? ? ? ? 3、給保留的單元格設(shè)置：跨行合并（rowspan）或者跨列合并（colspan）

rowspan：合并單元格的個(gè)數(shù)，跨行合并，將多行的單元格垂直合并

colspan：合并單元格的個(gè)數(shù)，跨列合并，將多行的單元格水平合并

只有同一個(gè)結(jié)構(gòu)標(biāo)簽中的單元格才能合并，不能跨結(jié)構(gòu)標(biāo)簽合并。

?五、表單標(biāo)簽

1、input系列

在網(wǎng)頁中顯示收集用戶信息的表單效果，如：登錄頁、注冊(cè)頁

標(biāo)簽名：input

input標(biāo)簽可以根據(jù)type屬性值的不同，展示不同的效果

type屬性值：

標(biāo)簽名	type屬性值	說明
input	text	文本框。用于輸入單行文本
input	password	密碼框，用于輸入密碼
input	radio	單選框，用于多選一
input	checkbox	多選框，用于多選多
input	file	文件選擇，用于之后上傳文件
input	submit	提交按鈕，用于提交
input	reset	重置按鈕，用于重置
input	button	普通按鈕，默認(rèn)無功能，之后配合js添加功能

1.1、文本框??

在網(wǎng)頁中顯示輸入單行文本的表單控件

type屬性值：text

placeholder：占位符，提示用戶輸入內(nèi)容的文本；

1.2、value屬性和name屬性

value屬性：用戶輸入的內(nèi)容，提交之后會(huì)發(fā)送給后端服務(wù)器；

name屬性：當(dāng)前控件的含義，提交之后可以告訴后端發(fā)送過去的數(shù)據(jù)是什么含義；

后端接收數(shù)據(jù)的格式是：name的屬性值 = value的屬性值

1.3、密碼框

在網(wǎng)頁中顯示輸入密碼控件

type屬性值：password

placeholder：占位符，提示用戶輸入內(nèi)容的文本；

1.4、單選框

在網(wǎng)頁中顯示多選一的單選表單控件

type屬性值：radio

name：分組，有相同name屬性值的單選框?yàn)橐唤M，一組中同時(shí)只能有一個(gè)被選中；

checked：默認(rèn)選中

1.5、多選框

在網(wǎng)頁中顯示多選多的多選表單控件

type屬性值：checkbox

checked：默認(rèn)選中

1.6、文件選擇

在網(wǎng)頁中顯示選擇文件的表單控件

type屬性值：file

multiple：多文件選擇

1.7、按鈕

在網(wǎng)頁中顯示不同功能按鈕的表單控件

type屬性值：

submit：提交按鈕，點(diǎn)擊之后提交數(shù)據(jù)給后端服務(wù)器；

reset：重置按鈕，點(diǎn)擊之后恢復(fù)表單默認(rèn)值；

button：普通按鈕，默認(rèn)無功能，之后配合js添加功能；

注意：

如果需要實(shí)現(xiàn)以上按鈕功能，需要配合form標(biāo)簽使用；

form使用方法：用form標(biāo)簽把表單標(biāo)簽統(tǒng)一包裹起來即可；

2、button按鈕標(biāo)簽

在網(wǎng)頁中顯示用戶點(diǎn)擊的按鈕

標(biāo)簽名：button

type屬性值:

submit：提交按鈕，點(diǎn)擊之后提交數(shù)據(jù)給后端服務(wù)器；

reset：重置按鈕，點(diǎn)擊之后恢復(fù)表單默認(rèn)值；

button：普通按鈕，默認(rèn)無功能，之后配合js添加功能；

注意點(diǎn)：

谷歌瀏覽器中button默認(rèn)是提交按鈕；

button是雙標(biāo)簽，更便于包裹其他內(nèi)容，如文字圖片等；

昵稱：<input type="text" placeholder="請(qǐng)輸入你的昵稱"><br><button type="submit">提交</button><br><button type="reset">重置</button><br><button type="button">普通按鈕</button>

3、select下拉菜單標(biāo)簽

在網(wǎng)頁中提供多個(gè)選擇項(xiàng)的下拉菜單表單控件

標(biāo)簽組成：

select標(biāo)簽：下拉菜單的整體；

option標(biāo)簽：下拉菜單的每一項(xiàng)；

常見屬性：selected：下拉菜單的默認(rèn)選中；

所在城市<select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option></select>

4、text area文本域標(biāo)簽

在網(wǎng)頁中提供可輸入多行文本的表單控件

標(biāo)簽名：textarea

常見屬性：

cols：規(guī)定了文本域內(nèi)可見寬度；

rows：規(guī)定了文本域內(nèi)可見行數(shù)；

注意點(diǎn)：右下角拖拽改變大小；

? ? ? ? ? ? ? 實(shí)際開發(fā)時(shí)針對(duì)樣式效果推薦使用CSS

5、label標(biāo)簽

用于綁定內(nèi)容與表單標(biāo)簽的關(guān)系

標(biāo)簽名：label?

使用方法1：1）使用label標(biāo)簽把內(nèi)容（文本）包裹起來；

? ? ? ? ? ? ? ? 2）在表單標(biāo)簽上添加id屬性；

? ? ? ? ? ? ? ? 3）在label標(biāo)簽的for屬性中設(shè)置對(duì)應(yīng)的id屬性值；

使用方法2：1）直接使用label標(biāo)簽把內(nèi)容（文本）和表單標(biāo)簽一起包裹起來；

? ? ? ? ? ? ? ? 2）需要把label標(biāo)簽的for屬性刪除即可；

愛好：<input type="checkbox" id="one" ><label for="one">足球</label><input type="checkbox" id="two" ><label for="two">籃球</label>愛好：<label><input type="checkbox">足球</label><label><input type="checkbox">籃球</label>

六、語義化標(biāo)簽

1、沒有語義的布局標(biāo)簽

實(shí)際開發(fā)網(wǎng)頁時(shí)會(huì)大量頻繁的使用到 div 和 span 這兩個(gè)沒有語義的布局標(biāo)簽；

div：一行只顯示一個(gè)（獨(dú)占一行）；

span：一行可以顯示多個(gè)；

?2、有語義的布局標(biāo)簽

標(biāo)簽名	語義
header	網(wǎng)頁頭部
nav	網(wǎng)頁導(dǎo)航
footer	網(wǎng)頁底部
aside	網(wǎng)頁側(cè)邊欄
section	網(wǎng)頁區(qū)塊
article	網(wǎng)頁文章

以上標(biāo)簽的顯示特點(diǎn)和 div 一致，但是比 div 多了不同的語義。

七、字符實(shí)體

能通過字符實(shí)體在網(wǎng)頁中顯示特殊符號(hào)

1、HTML中的空格合并現(xiàn)象

如果在HTML代碼中同時(shí)并列出現(xiàn)多個(gè)空格、換行、縮進(jìn)等，最終瀏覽器只會(huì)解析出一個(gè)空格。

在網(wǎng)頁中展示特殊字符效果時(shí)，需要使用字符實(shí)體替代

結(jié)構(gòu)：&英文

常見字符實(shí)體：

顯示結(jié)果	描述	實(shí)體名稱
	空格
<	小于	<
>	大于	>

八、綜合案例

1、優(yōu)秀學(xué)生信息表格

<table border="1" width="300" height="150"><caption><h3>優(yōu)秀學(xué)生信息表格</h3></caption><thead><tr><th>年級(jí)</tH><th>姓名</th><th>學(xué)號(hào)</th><th>班級(jí)</th></tr></thead><tbody height=300><tr><th rowspan="2">高三</th><th>張三</th><th>110</th><th>三年二班</th></tr><tr><th>趙四</th><th>120</th><th>三年三班</th></tr></tbody><tfoot><tr><th>評(píng)語</th><th colspan="3">優(yōu)秀</th></tr></tfoot></table>

2、會(huì)員注冊(cè)表單

<form><h1>青春不常在，抓緊談戀愛</h1><hr>昵稱：<input type="text" placeholder="請(qǐng)輸入昵稱"><br>性別：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>生日：<input type="date"><br>城市：<select><option>上海</option><option>北京</option><option>廣州</option><option>深圳</option></select><br>婚姻狀況：<input type="radio" name="marry" checked>未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">保密<br>興趣愛好：<label><input type="checkbox" checked>抽煙</label><label><input type="checkbox" checked>喝酒</label><label><input type="checkbox">燙頭</label><br>個(gè)人信息：<br><textarea cols="40" rows="5"></textarea><br><h2>我承諾</h2><ul><li>年滿18歲，單身</li><li>抱著嚴(yán)肅的心態(tài)</li><li>真誠尋找另一半</li></ul><input type="checkbox">我同意所有條款<br><input type="submit" value="免費(fèi)注冊(cè)"><input type="reset"> </form>

總結(jié)

以上是生活随笔為你收集整理的HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：在Linux系统中的安装cpolar内网
下一篇： B站Up主-山地人-这位老哥2019年的