全方位詳解HTML常用標(biāo)簽

2022-10-31 17:32 更新

HTML 是所有網(wǎng)頁制作技術(shù)的核心和基礎(chǔ),也是每個(gè)網(wǎng)頁制作者必須掌握的基本知識(shí),而 html 標(biāo)簽是 html 語言中最基本的單位,是 HTML 最重要的組成部分。

初學(xué)者首先要知道 HTML 標(biāo)簽的一些特點(diǎn):

HTML 標(biāo)簽是與大小寫無關(guān)的,例如“<BODY>”跟<body>表示的意思是一樣的,推薦使用小寫。類似“<p>”這樣由尖括號(hào)包關(guān)鍵字組成,例如:

實(shí)例

<P>P 是段落標(biāo)簽,HTML標(biāo)簽不區(qū)分大小寫</P>

<p>意思是一樣的,推薦使用小寫。</p>


嘗試一下 ?


注:HTML 標(biāo)簽對(duì)大小寫不敏感,但推薦使用小寫!

HTML 標(biāo)簽一般是成對(duì)出現(xiàn)的,由開始標(biāo)簽如<h1>,左邊標(biāo)簽一般叫開始標(biāo)簽,右邊</h1>叫結(jié)束標(biāo)簽,有始有終,除了一些個(gè)別是單閉合標(biāo)簽的,下面列舉 HTML 單閉合標(biāo)簽。


單閉合標(biāo)簽

標(biāo)簽 功能
<br /> 插入一個(gè)換行簡(jiǎn)單的換行符
<hr /> 定義水平線
<area /> 定義圖像映射內(nèi)部的區(qū)域
<base /> 定義頁面中所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)
<img /> 定義圖像
<input /> 定義輸入控件
<link /> 定義文檔與外部資源的關(guān)系
<meta /> 定義關(guān)于 HTML 文檔的元信息
<basefont /> 不建議使用。定義頁面中文本的默認(rèn)字體、顏色或尺寸
<param /> 定義對(duì)象的參數(shù)
<col /> 定義表格中一個(gè)或多個(gè)列的屬性值
<frame /> 定義框架集的窗口或框架
<embed /> 定義外部交互內(nèi)容或插件

字體效果

標(biāo)簽

功能

<h1>...</h1> 標(biāo)題字(最大)
<h6>...</h6> 標(biāo)題字(最小)
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強(qiáng)調(diào))
<i>...</i> 斜體字
<em>...</em> 斜體字(強(qiáng)調(diào))
<dfn>...</dfn> 斜體字(表示定義)
<u>...</u> 底線
<ins>...</ins> 底線(表示插入文字)
<strike>...</strike> 橫線
<s>...</s> 刪除線
<del>...</del> 刪除線(表示刪除)
<kbd>...</kbd> 鍵盤文字
<tt>...</tt> 打字體
<xmp>...</xmp> 固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext> 固定寬度字體(不執(zhí)行標(biāo)記符號(hào))
<listing>...</listing> 固定寬度小字體
<font color=00ff00>...</font> 字體顏色
<font size=1>...</font> 最小字體
<font style =font-size:100 px>...</font> 無限增大

區(qū)斷標(biāo)記

標(biāo)簽

功能

<hr> 水平線
<hr size=9> 水平線(設(shè)定大小)
<hr width=80%> 水平線(設(shè)定寬度)
<hr color=ff0000> 水平線(設(shè)定顏色)
<br> (換行)
<nobr>...</nobr> 水域(不換行)
<p>...</p> 水域(段落)
<center>...</center> 置中

鏈接

標(biāo)簽

功能

<base href=地址> (預(yù)設(shè)好連結(jié)路徑)
<a href=地址></a> 外部連結(jié)
<a href=地址 target=_blank></a> 外部連結(jié)(另開新窗口)
<a href=地址 target=_top></a> 外部連結(jié)(全窗口連結(jié))
<a href=地址 target=頁框名></a> 外部連結(jié)(在指定頁框連結(jié))

圖像/音樂

標(biāo)簽

功能

<img src=圖片地址> 貼圖
<img src=圖片地址 width=180> 設(shè)定圖片寬度
<img src=圖片地址 height=30> 設(shè)定圖片高度
<img src=圖片地址 alt=提示文字> 設(shè)定圖片提示文字
<img src=圖片地址 border=1> 設(shè)定圖片邊框
<bgsound src=MID音樂文件地址> 背景音樂設(shè)定

表格

標(biāo)簽

功能

<table align=left>...</table> 表格位置,置左
<table align=center>...</table> 表格位置,置中
<table background=圖片路徑>...</table> 背景圖片的URL=就是路徑網(wǎng)址
<table border=邊框大小>...</table> 設(shè)定表格邊框大小(使用數(shù)字)
<table bgcolor=顏色碼>...</table> 設(shè)定表格的背景顏色
<table borderclor=顏色碼>...</table> 設(shè)定表格邊框的顏色
<table borderclordark=顏色碼>...</table> 設(shè)定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table> 設(shè)定表格亮邊框的顏色
<table cellpadding=參數(shù)>...</table> 指定內(nèi)容與網(wǎng)格線之間的間距(使用數(shù)字)
<table cellspacing=參數(shù)>...</table> 指定網(wǎng)格線與網(wǎng)格線之間的距離(使用數(shù)字)
<table cols=參數(shù)>...</table> 指定表格的欄數(shù)
<table frame=參數(shù)>...</table> 設(shè)定表格外框線的顯示方式
<table width=寬度>...</table> 指定表格的寬度大小(使用數(shù)字)
<table height=高度>...</table> 指定表格的高度大小(使用數(shù)字)
<td colspan=參數(shù)>...</td> 指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)
<td rowspan=參數(shù)>...</td> 指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)

分割窗口

標(biāo)簽

功能

<frameset cols="20%,* "> 左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會(huì)自動(dòng)調(diào)整
<frameset rows="20%,* "> 上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會(huì)自動(dòng)調(diào)整
<frameset cols="20%,* "> 分割左右兩個(gè)框架
<frameset cols="20%,*,20% "> 分割左中右三個(gè)框架
<frameset rows="20%,*,20% "> 分割上中下三個(gè)框架
<! - - ... - -> 批注
<a href target> 指定超級(jí)鏈接的分割窗口
<a href=#錨的名稱> 指定錨名稱的超級(jí)鏈接
<a href> 指定超級(jí)鏈接
<a name=錨的名稱> 被連結(jié)點(diǎn)的名稱
<address>....</address> 用來顯示電子郵箱地址
<b>...</b> 粗體字
<base target> 指定超級(jí)鏈接的分割窗口
<basefont size> 更改預(yù)設(shè)字形大小
<bgsound src> 加入背景音樂
<big> 顯示大字體
<blink> 閃爍的文字
<body text link vlink> 設(shè)定文字顏色
<body> 顯示本文
<br> 換行
<caption align> 設(shè)定表格標(biāo)題位置
<caption>...</caption> 為表格加上標(biāo)題
<center> 向中對(duì)齊
<cite>...<cite> 用于引經(jīng)據(jù)典的文字
<code>...</code> 用于列出一段程序代碼
<comment>...</comment> 加上批注
<dd> 設(shè)定定義列表的項(xiàng)目解說
<dfn>...</dfn> 顯示"定義 "文字
<dir>...</dir> 列表文字卷標(biāo)
<dl>...</dl> 設(shè)定定義列表的卷標(biāo)
<dt> 設(shè)定定義列表的項(xiàng)目
<em> 強(qiáng)調(diào)之用
<font face> 任意指定所用的字形
<font size> 設(shè)定字體大小
<form action> 設(shè)定戶動(dòng)式窗體的處理方式
<form method> 設(shè)定戶動(dòng)式窗體之資料傳送方式
<frame marginheight> 設(shè)定窗口的上下邊界
<frame marginwidth> 設(shè)定窗口的左右邊界
<frame name> 為分割窗口命名
<frame noresize> 鎖住分割窗口的大小
<frame scrolling> 設(shè)定分割窗口的滾動(dòng)條
<frame src> 將 HTML 文件加入窗口
<frameset cols> 將窗口分割成左右的子窗口
<frameset rows> 將窗口分割成上下的子窗口
<frameset>...</frameset> 劃分分割窗口
<h1>~<h6> 設(shè)定文字大小
<head>...</head> 標(biāo)示文件信息
<hr> 加上分網(wǎng)格線
<html>...</html> 文件的開始與結(jié)束
<i>...</i> 斜體字
<img align> 調(diào)整圖形影像的位置
<img alt> 為你的圖形影像加注
<img dynsrc loop> 加入影片
<img height width> 插入圖片并預(yù)設(shè)圖形大小
<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界
<img lowsrc> 預(yù)載圖片功能
<img src border> 設(shè)定圖片邊界
<img src> 插入圖片
<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界
<input type name value> 在窗體中加入輸入字段
<isindex> 定義查詢用窗體
<kbd>...</kbd> 表示使用者輸入文字
<li type>...</li> 列表的項(xiàng)目 ( 可指定符號(hào) )
<marquee> 跑馬燈效果
<menu>...</menu> 條列文字卷標(biāo)
<meta name="refresh " content url> 自動(dòng)更新文件內(nèi)容
<multiple> 可同時(shí)選擇多項(xiàng)的列表欄
<noframe> 定義不出現(xiàn)分割窗口的文字
<ol>...</ol> 有序號(hào)的列表
<option> 定義窗體中列表欄的項(xiàng)目
<p align> 設(shè)定對(duì)齊方向
<p>...</p> 分段
<person>...</person> 顯示人名
<pre> 使用原有排列
<samp>...</samp> 用于引用字
<select>...</select> 在窗體中定義列表欄
<small> 顯示小字體
<strike> 文字加橫線
<strong> 用于加強(qiáng)語氣
<sub>...</sub> 下標(biāo)字
<sup>...</sup> 上標(biāo)字
<table border=n> 調(diào)整表格的寬線高度
<table cellpadding> 調(diào)整數(shù)據(jù)域位之邊界
<table cellspacing> 調(diào)整表格線的寬度
<table height> 調(diào)整表格的高度
<table width> 調(diào)整表格的寬度
<table>...</table> 產(chǎn)生表格的卷標(biāo)
<td align> 調(diào)整表格字段之左右對(duì)齊
<td bgcolor> 設(shè)定表格字段之背景顏色
<td colspan rowspan> 表格字段的合并
<td nowrap> 設(shè)定表格字段不換行
<td valign> 調(diào)整表格字段之上下對(duì)齊
<td width> 調(diào)整表格字段寬度
<td>...</td> 定義表格的數(shù)據(jù)域位
<textarea name rows cols> 窗體中加入多少列的文字輸入欄
<textarea wrap> 決定文字輸入欄是自動(dòng)否換行
<th>...</th> 定義表格的標(biāo)頭字段
<title>...</title> 文件標(biāo)題
<tr>...</tr> 定義表格美一行
<tt>...</tt> 打字機(jī)字體
<u>...</u> 文字加底線
<ul type>...</ul> 無序號(hào)的列表 ( 可指定符號(hào) )
<var>...</var> 用于顯示變量

跑馬燈

標(biāo)簽

功能

<marquee>...</marquee> 普通卷動(dòng)
<marquee behavior=slide>...</marquee> 滑動(dòng)
<marquee behavior=scroll>...</marquee> 預(yù)設(shè)卷動(dòng)
<marquee behavior=alternate>...</marquee> 來回卷動(dòng)
<marquee direction=down>...</marquee> 向下卷動(dòng)
<marquee direction=up>...</marquee> 向上卷動(dòng)
<marquee direction=right>...</marquee> 向右卷動(dòng)
<marquee direction=left>...</marquee> 向左卷動(dòng)
<marquee loop=2>...</marquee> 卷動(dòng)次數(shù)
<marquee width=180>...</marquee> 設(shè)定寬度
<marquee height=30>...</marquee> 設(shè)定高度
<marquee bgcolor=ff0000>...</marquee> 設(shè)定背景顏色
<marquee scrollamount=30>...</marquee> 設(shè)定卷動(dòng)距離
<marquee scrolldelay=300>...</marquee> 設(shè)定卷動(dòng)時(shí)間



以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)