html經常使用標籤大全

時間 2020-01-07

標籤 html 經常使用標籤大全欄目 HTML 简体版

原文原文鏈接

html中標籤有不少，每一種標籤都有着不一樣的用處，下面這篇文章給你們總結html經常使用的標籤，每一種標籤都會跟隨一個例子，話很少說，讓咱們來看看具體內容。php

個人學習交流羣web前端學習交流羣html

<font>前端

字體標籤，用於展現效果中修飾文字樣式web

<font 屬性名=」屬性值」>文字</font>瀏覽器

size:控制字體大小.最小1 ~ 最大7。若是設置範圍不在1~7之間，設置無效框架

color：控制字體顏色. 使用英文設置（例如：red,blue…）佈局

face：控制字體類型。只能設置系統字庫中存在的字體類型學習

示例：字體

<body>

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

</body>

效果：spa

<br/>

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

換行標籤，用於展現效果中換行

示例：

竹枝詞二首·其一<br/>

劉禹錫<br/><br/>

楊柳青青江水平，聞郎江上踏歌聲。<br/>

東邊日出西邊雨，道是無晴卻有晴。

效果：

<p></p>

段落標籤，用於展現效果中劃分段落。而且自動在段前和段後自動加空白行

align:段落內容的對齊方式

默認是left，內容居左

Right 右

Center 居中

示例：

<p align="center">黃鶴樓送孟浩然之廣陵</p>

<p >故人西辭黃鶴樓，</p><p align="right">煙花三月下揚州。</p>                

<p>孤帆遠影碧空盡，</p><p align="right">惟見長江天際流。</p>

效果：

<h1></h1>

標題標籤，用於展現效果中劃分標題

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

示例：

<h1>念奴嬌·赤壁懷古</h1>

<h2>念奴嬌·赤壁懷古</h2>

<h3>念奴嬌·赤壁懷古</h3>

<h4>念奴嬌·赤壁懷古</h4>

<h5>念奴嬌·赤壁懷古</h5>

<h6>念奴嬌·赤壁懷古</h6>

效果：

 

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

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

示例：

php     中文網</br>

php   中文網

HTML註釋

用於註釋HTML源碼，不在HTML效果中展現。

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

格式：

示例：

<!--html標籤-->

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

圖片標籤

<img/>

用於在頁面效果中展現一張圖片。

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

圖片路徑的寫法：

①內網路徑：

絕對路徑：文件在硬盤上的具體位置。【不建議使用】

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

相對路徑：從引入者所在目錄出發。【建議使用相對路徑】

例如：../img/c_1.jpg

../表示上一層目錄

./表示當前目錄

互聯網路徑：

必須前面加上http://

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

width：圖片寬度

height：圖片的高度

寬度和高度的設置：

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

百分比設置。例如：width=」50%」。是父標籤的百分比。動態改變的。

示例：

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

效果：

示例：

<ol>

        <li>古詩</li>

        <li>古詞</li>

        <li>詩歌</li>

</ol>

效果：

超連接標籤

<a></a>

超連接標籤，用於在效果中定義一個能夠點擊跳轉的連接

href：超連接跳轉的路徑 (必有屬性)

內網本機路徑：相對路徑和絕對路徑

互聯網路徑：http://地址

本頁：默認跳轉到本頁

超連接正常工做：①a標籤中必須有內容

②a標籤必須有href屬性

示例：

<a herf="http://www.baidu.com/">百度</a>

<a herf="demo html">demo</a>

注意：

①a標籤內容體，不單單是文字，也能夠是其餘內容，例如圖片

②a標籤的href屬性，不單單能夠連接到html上，也能夠連接到其餘文件上，例如圖片

示例：

<a herf="demo html">

<img src="../img/c_1.jpg" />

</a>

示例：

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

表格標籤

<table></table>

表格標籤，用於在效果中定義一個表格

border：設置表格的邊框粗細

width：設置表格的寬度

<tr></tr>

表格的行標籤，用於在效果中定義一個表格行

<td></td>

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

表格的書寫順序：

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

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

步驟3：在表格一行中定義單元格 <td></td> 內容就能夠寫在單元格中

示例：

<table>

<tr>

<td>姓名</td>

<td>數學</td>

</tr>

<tr>

<td>A</td>

<td>100</td>

</tr>

</table>

效果：

<th></th>

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

<th>和<td>惟一區別：<th>內容居中加粗

示例：

<table boder="1px" width="100%">

<tr>

<th>姓名</th>

<th>數學</th>

</tr>

<tr>

<td>A</td>

<td>100</td>

</tr>

</table>

效果：

單元格合併

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

colspan：跨列合併單元格

rowspan：跨行合併單元格

合併步驟：

肯定合併哪幾個單元格，肯定是跨列合併仍是跨行合併

在第一個出現的單元格上書寫合併單元格屬性

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

被合併的單元格必須刪掉

示例：

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

行級的塊標籤，用於在效果中一行上定義一個塊，進行內容顯示。

span有多少內容，就會佔用多大空間。

Span不會自動換行

適用於少許數據展現

示例：

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

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

效果：

<div></div>

塊級的塊標籤，用於在效果中定義一塊，默認佔滿一行，進行內容的顯示

默認佔滿一行

會自動換行

適用於大量數據展現

示例：

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

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

框架標籤

框架標籤：<frameset>

<frameset> 標籤，是多個窗口頁面整合在一塊兒的一個集合（框架集）。每個頁面（框架）都是單獨文檔，須要使用子標籤<frame>來肯定頁面的位置。<frameset>經過列和行來肯定總體佈局，使用cols肯定列數，使用rows肯定行數。多個<frameset>能夠嵌套使用。

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

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

框架子標籤：<frame>

<frame>標籤，用於設置<frameset>框架集中的一個頁面（框架）。

src屬性：肯定頁面的路徑

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

target屬性：肯定須要顯示的頁面在何處顯示

以上就是HTML有哪些標籤？html經常使用標籤大全的詳細內容

但願能幫助到你們，更多前端知識，加入個人官方羣點擊此處。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。