明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML有哪一些標簽？html常用標簽大全

發(fā)表時間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]html中標簽有很多，每一種標簽都有著不同的用處，下面這篇文章php中文網(wǎng)給大家總結(jié)html常用的標簽，每一種標簽都會跟隨一個例子，話不多說，讓我們來看看具體內(nèi)容。<font>字體標簽，用于展示效果中修飾文字樣式<font 屬性名=”屬性值”>文字</font>...
html中標簽有很多，每一種標簽都有著不同的用處，下面這篇文章php中文網(wǎng)給大家總結(jié)html常用的標簽，每一種標簽都會跟隨一個例子，話不多說，讓我們來看看具體內(nèi)容。

<font>

字體標簽，用于展示效果中修飾文字樣式

<font 屬性名=”屬性值”>文字</font>

size:控制字體大小.最小1 ~ 最大7。 如果設(shè)置范圍不在1~7之間，設(shè)置無效

color：控制字體顏色. 使用英文設(shè)置（例如：red,blue…）

face：控制字體類型。只能設(shè)置系統(tǒng)字庫中存在的字體類型

示例：

<body>
東邊日出<font color="green" size="50" face="宋體">西邊雨</font>
</body>

效果：

2345截圖20180804171205.png

<br/>

HTML源碼中換行，瀏覽器解析時會自動忽略。

換行標簽，用于展示效果中換行

示例：

竹枝詞二首·其一<br/>
劉禹錫<br/><br/>
楊柳青青江水平，聞郎江上踏歌聲。<br/>
東邊日出西邊雨，道是無晴卻有晴。

效果：

2345截圖20180804171613.png

<p></p>

段落標簽，用于展示效果中劃分段落。并且自動在段前和段后自動加空白行

align:段落內(nèi)容的對齊方式

默認是left， 內(nèi)容居左

Right 右

Center 居中

示例：

<p align="center">黃鶴樓送孟浩然之廣陵</p>
<p >故人西辭黃鶴樓，</p><p align="right">煙花三月下?lián)P州。</p>                
<p>孤帆遠影碧空盡，</p><p align="right">唯見長江天際流。</p>

效果：

2345截圖20180804172234.png

<h1></h1>

標題標簽，用于展示效果中劃分標題

其中<h1>最大，<h6>最小

示例：

<h1>念奴嬌·赤壁懷古</h1>
<h2>念奴嬌·赤壁懷古</h2>
<h3>念奴嬌·赤壁懷古</h3>
<h4>念奴嬌·赤壁懷古</h4>
<h5>念奴嬌·赤壁懷古</h5>
<h6>念奴嬌·赤壁懷古</h6>

效果：

2345截圖20180804172541.png

&nbsp;

HTML源碼中的多個空格，效果中最終會合并成一個。

空格符號，用于展示效果中顯示一個空白的位置

示例：

php&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中文網(wǎng)</br>
php&nbsp;&nbsp;&nbsp;中文網(wǎng)

效果：

2345截圖20180804172810.png

HTML注釋

用于注釋HTML源碼，不在HTML效果中展示。

只能在源碼中看到，頁面展示效果中是沒有

格式：<!--HTML注釋內(nèi)容 -->

示例：

<!--html標簽-->

效果：在HTML效果展示中不會顯示，只能在源碼中看到

圖片標簽

<img/>

用于在頁面效果中展示一張圖片。

src：指明圖片的路徑。（必有屬性）

圖片路徑的寫法：

①內(nèi)網(wǎng)路徑：

絕對路徑：文件在硬盤上的具體位置�！静唤ㄗh使用】

例如：C:\ JavaWeb001_html\img\c_1.jpg

相對路徑：從引入者所在目錄出發(fā)�！窘ㄗh使用相對路徑】

例如：../img/c_1.jpg

../表示上一層目錄

./表示當前目錄

互聯(lián)網(wǎng)路徑：

必須前面加上http://

例如：http://www.baidu.com/xxx.jpg

width：圖片寬度

height：圖片的高度

寬度和高度的設(shè)置：

默認單位是px，像素。例如：width=”400” 其實設(shè)置的是 width=”400px”。固定設(shè)置方式

百分比設(shè)置。例如：width=”50%”。 是父標簽的百分比。 動態(tài)改變的。

示例：

<img src="../c_1.jpg" width="600" height="600"/>
<img src="../c_2.jpg" width="60%"/>

列表標簽

<ul></ul>

無序列表標簽，用于在效果中定義一個無序列表

<li></li>

列表條目項標簽，用于在效果中定義一個列表的條目

<ol></ol>

有序列表標簽，用于在效果中定義一個有序列表

示例：

<ul>
        <li>古詩</li>
        <li>古詞</li>
        <li>詩歌</li>
</ul>

效果：

2345截圖20180804174102.png

示例：

<ol>
        <li>古詩</li>
        <li>古詞</li>
        <li>詩歌</li>
</ol>

效果：

2345截圖20180804174029.png

超鏈接標簽

<a></a>

超鏈接標簽，用于在效果中定義一個可以點擊跳轉(zhuǎn)的鏈接

href：超鏈接跳轉(zhuǎn)的路徑 (必有屬性)

內(nèi)網(wǎng)本機路徑：相對路徑和絕對路徑

互聯(lián)網(wǎng)路徑：http://地址

本頁：默認跳轉(zhuǎn)到本頁

超鏈接正常工作：①a標簽中必須有內(nèi)容

②a標簽必須有href屬性

示例：

<a herf="http://www.php.cn/">php中文網(wǎng)</a>
<a herf="demo html">demo</a>

注意：

①a標簽內(nèi)容體，不僅僅是文字，也可以是其他內(nèi)容，例如圖片

②a標簽的href屬性，不僅僅可以鏈接到html上，也可以鏈接到其他文件上，例如圖片

示例：

<a herf="demo html">
<img src="../img/c_1.jpg" />
</a>

示例：

<a herf="../img/c_1.jpg" />鏈接到一張圖片</a>

表格標簽

<table></table>

表格標簽，用于在效果中定義一個表格

border：設(shè)置表格的邊框粗細

width：設(shè)置表格的寬度

<tr></tr>

表格的行標簽，用于在效果中定義一個表格行

<td></td>

表格的單元格標簽，用于在效果中定義一個表格行中的單元格

表格的書寫順序：

步驟1：定義一個表格 <table></table>

步驟2：定義表格中的一行 <tr></tr>

步驟3：在表格一行中定義單元格 <td></td> 內(nèi)容就可以寫在單元格中

示例：

<table>
<tr>
<td>姓名</td>
<td>數(shù)學(xué)</td>
</tr>
<tr>
<td>A</td>
<td>100</td>
</tr>
</table>

效果：

2345截圖20180804175319.png

<th></th>

表格的表頭單元格標簽，用于在效果中定義一個表格行中的表頭單元格

<th>和<td>唯一區(qū)別：<th>內(nèi)容 居中加粗

示例：

<table boder="1px" width="100%">
<tr>
<th>姓名</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>A</td>
<td>100</td>
</tr>
</table>

效果：

2345截圖20180804175720.png

單元格合并

<td>或者<th>都有兩個單元格合并屬性：

colspan：跨列合并單元格

rowspan：跨行合并單元格

合并步驟：

確定合并哪幾個單元格，確定是跨列合并還是跨行合并

在第一個出現(xiàn)的單元格上書寫 合并單元格屬性

合并幾個單元格，屬性值就書寫幾

被合并的單元格必須刪掉

示例：

<tr>
<td conspan="2">1</td>
<td>3</td>
<td>4</td>
</tr>

示例：

<tr><td rowspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>12</td>
<td>15</td>
</tr>

示例：

<tr>
<td conspan="2" rowspan="2">8</td>
<td>11</td>
</tr>
<tr>
<td>16</td>
</tr>

塊標簽

<span></span>

行級的塊標簽，用于在效果中 一行上定義一個塊，進行內(nèi)容顯示。

span有多少內(nèi)容，就會占用多大空間。

Span不會自動換行

適用于少量數(shù)據(jù)展示

示例：

<span>哈哈哈哈哈</span>
<span>呵呵呵呵呵</span>

效果：

2345截圖20180806092731.png

<div></div>

塊級的塊標簽，用于在效果中 定義一塊，默認占滿一行，進行內(nèi)容的顯示

默認占滿一行

會自動換行

適用于大量數(shù)據(jù)展示

示例：

<div>哈哈哈哈哈</div>
<div>呵呵呵呵呵</div>

效果：

2345截圖20180806092905.png

框架標簽

框架標簽：<frameset>

<frameset> 標簽，是多個窗口頁面整合在一起的一個集合（框架集）。每一個頁面（框架）都是單獨文檔，需要使用子標簽<frame>來確定頁面的位置。<frameset>通過列和行來確定整體布局，使用cols確定列數(shù)，使用rows確定行數(shù)。多個<frameset>可以嵌套使用。

<frameset>和<body>兩個不能共存。

rows屬性和cols屬性取值：值1,值2,值3,….. 一個值表示一行（列），多值使用逗號分隔，值可以是 10px、10% 等，最后一個值如果不想計算可以使用*匹配剩余量。

框架子標簽：<frame>

<frame>標簽，用于設(shè)置<frameset>框架集中的一個頁面（框架）。

src屬性：確定頁面的路徑

noresize屬性：框架分隔先不能移動

target屬性：確定需要顯示的頁面在何處顯示

相關(guān)文章推薦：

html標簽之meta標簽_html/css_WEB-ITnose

HTML常用標簽

以上就是HTML有哪些標簽？html常用標簽大全的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。