html常用標簽是什么

發(fā)布時間：2020-12-05 11:03:03 來源：億速云閱讀：190 作者：小新欄目：web開發(fā)

小編給大家分享一下html常用標簽是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

html中標簽有很多，每一種標簽都有著不同的用處，下面這篇文章億速云給大家總結(jié)html常用的標簽，每一種標簽都會跟隨一個例子，話不多說，讓我們來看看具體內(nèi)容。

<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>

效果：

html常用標簽是什么

<br/>

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

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

示例：

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

效果：

html常用標簽是什么

<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>

效果：

html常用標簽是什么

<h2></h2>

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

其中<h2>最大，<h7>最小

示例：

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

效果：

html常用標簽是什么

 

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

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

示例：

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

HTML注釋

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

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

格式：

示例：

<!--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>

效果：

html常用標簽是什么

示例：

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

效果：

html常用標簽是什么

超鏈接標簽

<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/">億速云</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>

效果：

html常用標簽是什么

<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>

效果：

html常用標簽是什么

單元格合并

<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>

效果：

html常用標簽是什么

<div></div>

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

默認占滿一行

會自動換行

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

示例：

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

效果：

html常用標簽是什么

框架標簽

框架標簽：<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屬性：確定需要顯示的頁面在何處顯示

看完了這篇文章，相信你對html常用標簽是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

html常用標簽是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽