HTML常用標籤和屬性大全

阿新 • • 發佈：2019-01-18

回到頂部

html標籤<

<marquee>...</marquee>普通捲動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設捲動

<marquee behavior=alternate>...</marquee>來回捲動

<marquee direction=down>...</marquee>向下捲動

<marquee direction=up>...</marquee>向上捲動

<marquee direction=right></marquee>向右捲動

<marquee direction='left'></marquee>向左捲動

<marquee loop=2>...</marquee>捲動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定滾動速度

<marquee scrolldelay=300>...</marquee>設定捲動時間

<marquee onmouseover="this.stop()">...</marquee>滑鼠經過上面時停止滾動

<marquee onmouseover="this.start()">...</marquee>滑鼠離開時開始滾動

回到頂部

<!>字型效果

<h1>...</h1>標題字(最大)

<h6>...</h6>標題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調) （同上效果略同）

<i>...</i>斜體字

<em>...</em>斜體字(強調)

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字型

<xmp>...</xmp>固定寬度字型(在檔案中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字型(不執行標記符號)

<listing>...</listing> 固定寬度小字型

<font color=00ff00>...</font>字型顏色

<font size=1>...</font>最小字型

<font style =’font-size:100 px'>...</font>無限增大

回到頂部

區斷標記

<hr>水平線

<hr size='9'>水平線(設定大小)

<hr width='80%'>水平線(設定寬度)

<hr color='ff0000'>水平線(設定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

回到頂部

<!>連結格式

<base href=位址>(預設好連結路徑)

<a href=位址></a>外部連結

<a href=位址 target='_blank'></a>外部連結(另開新視窗)

<a href=位址 target='_top'></a>外部連結(全視窗連結)

<a href=位址 target='頁框名'></a>外部連結(在指定頁框連結)

回到頂部

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width="180">設定圖片寬度

<img src=圖片位址 height="30">設定圖片高度

<img src=圖片位址 alt="提示文字">設定圖片提示文字

<img src=圖片位址 border="1">設定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設定

回到頂部

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=邊框大小>...</table>設定表格邊框大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=引數>...</table>指定內容與格線之間的間距(使用數字)

<table cellspacing=引數>...</table>指定格線與格線之間的距離(使用數字)

<table cols=引數>...</table>指定表格的欄數

<table frame=引數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=引數>...</td>指定儲存格合併欄的欄數(使用數字)

<td rowspan=引數>...</td>指定儲存格合併列的列數(使用數字)

回到頂部

分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

屬性：

cols 垂直切割視窗（如左右分割兩個視窗）接受整數值，百分數，*（*代表佔用餘下空間）數值的個數代表分成的部分數目，要以逗號分隔。例：cols="30,*,50%"可以切成三個視窗，第一部分是30畫素（pixels）為絕對分割，第二部分是當分配完第一和第三檢視後剩下的空間，第三部分則佔整個視窗的50%寬度，為相對分割。

rows 就是橫向切割，將視窗上下分開，數值設定同上。

以上兩屬性儘量不要在同一個<frameset>標記中，因為王井（netscape）不支援，儘量採用多重分割。

frameborder 設定框架的邊框，其值有0不要邊框，1要邊框。

border 設定框架邊框厚度

framespacing 表示框架與框架間保留空白的距離

frame 元素（單標籤）

語法格式：

屬性：

name 框架名稱，指定框架來做連線的目標視窗。

src 框架中要顯示的網頁文當url地址，每個個框架要對應一個html文擋。

scrolling 是否顯示滾動條，yes/no,auto是自動。

noresize 設定不讓使用者改變這個框架的大小，

noframe元素

指定當使用了框架的頁面在不支援框架的瀏覽器中開啟時顯示的資訊

語法格式：

......

</noframe>

回到頂部

表單<form></form>

語法格式：

....

</form>

method有兩種提交方式get,post

action 是指明處理該表單的程式位置，這樣表單所填的資料才能傳給cgi做處裡，可設定此引數為action="mailto:[email protected]" 這樣此表單所填的資料將會發送到這個郵箱地址。

method 是指傳送資訊給cgi等網路程式的方式。可選post方法， get方法，post方法容許傳送大量資訊。get方法只接受低於1k的資訊。

申請表單用的是post搜尋引擎用的是get

<! - - ... - -> 註解

<A HREF TARGET> 指定超連結的分割視窗

<A HREF=#錨的名稱> 指定錨名稱的超連結

<A HREF> 指定超連結

<A NAME=錨的名稱> 被連結點的名稱

<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址

<B> 粗體字

<BASE TARGET> 指定超連結的分割視窗

<BASEFONT SIZE> 更改預設字形大小

<BGSOUND SRC> 加入背景音樂

<BIG> 顯示大字型

<BLINK> 閃爍的文字

<BODY TEXT LINK VLINK> 設定文字顏色

<BODY> 顯示本文

<BR> 換行

<CAPTION ALIGN> 設定表格標題位置

<CAPTION>...</CAPTION> 為表格加上標題

<CENTER> 向中對齊

<CITE>...<CITE> 用於引經據典的文字

<CODE>...</CODE> 用於列出一段程式碼

<COMMENT>...</COMMENT> 加上註解

<DD> 設定定義列表的專案解說

<DFN>...</DFN> 顯示"定義"文字

<DIR>...</DIR> 列表文字標籤

<DL>...</DL> 設定定義列表的標籤

<DT> 設定定義列表的專案

<EM> 強調之用

<FONT FACE> 任意指定所用的字形

<FONT SIZE> 設定字型大小

<FORM ACTION> 設定戶動式表單的處理方式

<FORM METHOD> 設定戶動式表單之資料傳送方式

<FRame MARGINHEIGHT> 設定視窗的上下邊界

<FRame MARGINWIDTH> 設定視窗的左右邊界

<FRame NAME> 為分割視窗命名

<FRame NORESIZE> 鎖住分割視窗的大小

<FRame SCROLLING> 設定分割視窗的卷軸

<FRame SRC> 將HTML檔加入視窗

<FRameSET COLS> 將視窗分割成左右的子視窗

<FRameSET ROWS> 將視窗分割成上下的子視窗

<FRameSET>...</FRameSET> 劃分分割視窗

<H1>~<H6> 設定文字大小

<HEAD> 標示檔案資訊

<HR> 加上分格線

<HTML> 檔案的開始與結束

<I> 斜體字

<IMG ALIGN> 調整圖形影像的位置

<IMG ALT> 為你的圖形影像加註

<IMG DYNSRC LOOP> 加入影片

<IMG HEIGHT WIDTH> 插入圖片並預設圖形大小

<IMG HSPACE> 插入圖片並預設圖形的左右邊界

<IMG LOWSRC> 預載圖片功能

<IMG SRC BORDER> 設定圖片邊界

<IMG SRC> 插入圖片

<IMG VSPACE> 插入圖片並預設圖形的上下邊界

<INPUT TYPE NAME value> 在表單中加入輸入欄位

<ISINDEX> 定義查詢用表單

<KBD>...</KBD> 表示使用者輸入文字

<LI TYPE>...</LI> 列表的專案 ( 可指定符號 )

<MARQUEE> 跑馬燈效果

<MENU>...</MENU> 條列文字標籤

<MULTIPLE> 可同時選擇多項的列表欄

<NOFRame> 定義不出現分割視窗的文字

<OL>...</OL> 有序號的列表

<OPTION> 定義表單中列表欄的專案

<P ALIGN> 設定對齊方向

<P> 分段

<PERSON>...</PERSON> 顯示人名

<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字

<select >...</select > 在表單中定義列表欄

<SMALL> 顯示小字型

<STRIKE> 文字加橫線

<STRONG> 用於加強語氣

<SUB> 下標字

<SUP> 上標字

<TABLE BORDER=n> 調整表格的寬線高度

<TABLE CELLPADDING> 調整資料欄位之邊界

<TABLE CELLSPACING> 調整表格線的寬度

<TABLE HEIGHT> 調整表格的高度

<TABLE WIDTH> 調整表格的寬度

<TABLE>...</TABLE> 產生表格的標籤

<TD ALIGN> 調整表格欄位之左右對齊

<TD BGCOLOR> 設定表格欄位之背景顏色

<TD COLSPAN ROWSPAN> 表格欄位的合併

<TD NOWRAP> 設定表格欄位不換行

<TD VALIGN> 調整表格欄位之上下對齊

<TD WIDTH> 調整表格欄位寬度

<TD>...</TD> 定義表格的資料欄位

<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄

<TEXTAREA WRAP> 決定文字輸入欄是自動否換行

<TH>...</TH> 定義表格的標頭欄位

<TITLE> 檔案標題

<TR>...</TR> 定義表格美一行

<TT> 打字機字型

<U> 文字加底線

<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數

BlockQuotc文字縮排

回到頂部

表示顏色的有三種方式；

1，16進位制顏色程式碼

語法：#RRGGBB

例：<font color="#ff0000">紅色</font>

2，10進位制RGB碼

語法：RGB（RRR，GGG，BBB）

例：<font color="rgb(255,000,000)">紅色</font>

3,直接用顏色的英文名稱

例：<font color="red">紅色</font>

回到頂部

<body>.....</body>屬性可分為三種：

1，背景屬性

包括：bgcolor,background

2,文字屬性：

包括：text,link,alink,vlink,

3,留白屬性：

其中分為：leftmargin,topmargin

.bgcolor背景色

語法格式：<body bgcolor="#ff0000">

.background背景圖案。

語法格式：<body background="url">

.text文字顏色（非連線文字顏色）

.link連線文字顏色（可連線文字顏色）

.alink活動連線文字顏色（正被點選的可連線文字的顏色）

.vlink已訪問連線文字顏色）（已經點選訪問過的可連線文字的顏色）

語法格式：<body text="color" link="color" alink="color" vlink="color">

.leftmargin 頁面左側的留白距離

.topmargin 頁面頂部的留白距離

語法格式：<body leftmargin="value" topmargin="value">

注：value為長度值為數字

align 屬性

語法：<h2 align="?">文字</h2>

其屬性有三種：left靠左,center居中,right靠右

〈p〉</p>為段落標記，可利用以上屬性對整個段落進行設定

〈br>為換行標記

<nobr></nobr>為不換行標記放在文字兩邊即可

例：<body>

<h3>江南逢李龜年</h3>

<p>歧王宅裡尋常見<br>

催九堂前幾度聞<br>

正是江南好風景<br>

落花時節又逢君</p>

</body>

預格式化：

<pre>......</pre> 瀏覽是效果和編寫是效果格式一樣

回到頂部

列表

1無序列表又稱符號列表

語法格式：

<ul type="">type的屬性可選直disc實心圓點,clrcle空心圓點,square實心方框

</ul>

2有序列表

語法格式：

</ol>

type的值是編號字元可選的有1...,a...,A...,i... ,I...

start為起始值例：如果start為3是那麼將從3開始，而且必須是數字。

3定義列表

<dl>定義列表標記

<dt>標示定義條目

<dd>標示定義內容

語法格式：

<dl>

</dl>

連線和影象

語法格式：

屬性：href 連線目標值可以是url地址也可以是連線錨點

<a href="url">...</a>或者

回到頂部

name 連線名稱

語法格式：<a name="錨點名稱">...</a>

例：<a name="abcdcf">...</a>

連線到該錨點的連線則應是：

回到頂部

target目標視窗語法格式：

-blank開啟新視窗

_self當前視窗開啟

一下兩個僅在框架葉面中應用

_parent當前視窗的父級視窗（上一級）開啟

_top在最高一級的視窗開啟

windowname已命名的視窗或框架中開啟連線

title連線提示

回到頂部

影象<img> 語法格式：

border屬性定義圖片邊框的寬度，預設值為0

align屬性設定圖片旁邊文字的位置

語法格式：<img src="" align"">

可選值有：

top圖片和文字頂部對齊

middle圖片和文字居中對齊

bottom圖片和文字底邊對齊（預設）

left圖片居左對齊，文字沿圖片繞排

right圖片居右對齊，文字沿圖片繞排

absmiddle圖片對齊到目前文字行絕對中央

absbottom圖片對齊到目前文字行絕對底部

文字的排版

不換行空白標記

回到頂部

font元素

語法格式：

字型大小可選值為1——7，預設為3

例：〈font face="黑體" size="4" color="#ff00ff">....</font>

水平線<hr>

語法格式：<hr width="寬度" align="對齊方式預設居中center" size="水平線厚度預設為2" color="顏色" noshade>

noshade無陰影，既實線

層〈div><span>兩種元素

<div>是塊級元素，和段落元素<p>相似，不同的是兩個<div>元素之間不會產生兩個<p>元素之間的空行，

<span>是行內元素，可以定義段落中部分文字的屬性

語法格式：

align設定層中元素的水平對齊方式

stule設定元素應用css規範的屬性

回到頂部

表格語法格式：

</table>

border邊框寬度預設值為0，既沒有邊框

cellspacing表格中單元格的邊距大小，預設值為兩個畫素

cellpadding表格中單元格之間的間距大小，預設值為兩個畫素

tr元素

語法格式：

align屬性對齊方式可選值如下：left,center,tight,預設為left

bgcolor指定該行的背景顏色

td元素

語法格式：

align屬性的可選值有：left,center,right

valign屬性的可選值有：top,middle,bottom

rowspan和colapan跨行和跨列的數量，預設為1

回到頂部

input元素語法格式：

type屬性的可選值有：

text 單行文字框

屬性：name 文字框名稱

value 文字框的初始值

size 文字框的長度

maxlength 可輸入字串最大的長度

radio 單選框

屬性：name 單選框名稱

value 內部值

checked 預設選定

checkbox 複選框

屬性：name 複選框名稱

value 內部值

checked 預設選定

reset 重置按鈕

submit 確定按鈕

屬性：name 按鈕名稱

value 顯示在按鈕上的文字

password 密碼框

屬性與文字框的屬性完全相同

file 檔案域

屬性：name檔案域名稱

size 檔案域的長度

maxlength 檔案域可接受的字元數量的上限

hidden 隱藏域

屬性：name 隱藏域名稱

value 內定值

image 圖片域

屬性：name 所要代表的按鈕，可以是submit,reset,或其他.

src 按鈕圖片的url 地址

列表框<select>

語法格式：

.....

.....

</select>

回到頂部

select元素

語法格式：<select name="" size=""multiple></select>

name 指定列表框的名字

size 指定列表框顯示列表項的條數，如果指定了該引數，select元素是個列表，否則是一個下拉列表框

multiple 指定了這個引數，則表示該列表框可選擇多項，否則只可選擇一項

option屬性

語法格式：<option value="" selected></option>

value 該列表項的值

selected 如果設定了這個引數，預設為選定這一項

回到頂部

多行文字框<textarea>

屬性：

name文字框的名稱

cols文字框的寬度

rows文字框的高度

wrap文字框的折行方式可選值有：

off不儲存換行資訊

physical強迫瀏覽器在傳送資訊到web伺服器端時必須將多行文字框的文字一行一行的送出，

virtual送出連續成串的字除非使用者按回車。

回到頂部

css 層疊樣式表

引入層疊樣式表的方法包括：

外聯式樣式表

例：<head>

</head>

<body>

....

</body>

</html>

屬性：rel 用來說明<link>元素在這裡要完成的任務是連線一個獨立的css檔案。而href屬性給出了所要連線css檔案的url地址

內嵌式樣式表：

例：<html>

<head>

<!--

td{font:9pt;color:red}

.font105{font:10.5pt;color:blue}

-->

</style>

</head>

</html>

元素內定

格式：<p style="font-size:10.5pt">

匯入式樣式表

〈html>

<head>

<!--

@import url(css/home.css);

-->

</style>

<body>

....

</body>

</html>

css的優先順序

越接近目標的樣式定義優先順序越高，高優先順序樣式將繼承低優先順序樣式的未重疊定義但覆蓋重疊的定義

如果4種樣式表對同一元素定義了不同的樣式，那麼他們的優先順序順序從高到低是，元素內定，內嵌樣式表，匯入樣式表，外聯樣式表。

css結構

例：td{font-size:10.5pt;color:#666666}

css樣式包含兩個基礎部分，

選擇符<td>和宣告{font-size:10.5pt;color:#666666}

宣告也有兩部分組成：

屬性font-size,color和值10.5pt,#666666

選擇符分為6種

1元素選擇符

當頁面上多個元素的樣式相同時，可以將多個元素放在一起定義，中間以逗號分開例：td,p,li,input,select{font-size:12px;}

2class(類)選擇符

例：〈head>

<!--

.red{font-size:10.5pt;color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井岡山地方官</p>

<p>九連環離開計劃</p>

</body>

還有一種方法就是限定可以應用它的頁面元素

例：〈head>

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井岡山地方官</p>

<h1 class="red">九連環離開計劃</h1>

</body>

3 id選擇符

與class選擇附類似，只是把'.'換成'#'

例：<body>

<head>

<!--

#select{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center" id="select">id選擇符</td>

</tr>

</table>

</body>

</html>

我們看到在呼叫ID選擇附時與CLASS選擇附類似，只是將class=""換成了id=""，方便頁面指令碼語言的呼叫

關聯選擇符

<body>

<head>

<!--

td p{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center"><p>關聯選擇符</p></td>

</tr>

</table>

<p>關聯選擇符</p>

</body>

</html>

我們設定了在元素中<td>的元素<p>所包含文字的樣式，只有在兩個條件都滿足是，樣式在會起作用，

偽類選擇符

是隻能用在css選擇符裡，而不能用在html程式碼中的選擇符

例：

〈html>

<head>

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</style>

</head>

<body>

<p><a href="#">關聯選擇符</a><p>

〈/body>

</html>

正確的順序是a:link\a:visited\a:hover否則會引起頁面上連線顏色混亂

偽元素選擇符

與偽類選擇符定義類似，目前被大多數瀏覽器支援的有兩個：首行偽元素（first-line）和首字元偽元素(first-letter)是用來實現首行大寫和首行下沉效果的

例：首行

<html>

<head>

<style>

<!--

p:first-line{color:red;font-size:20pt}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

長度隨瀏覽器視窗大小而改變

首字

<html>

<head>

<style>

<!--

p:first-letter{color:red;font-size:50pt;float:left;}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

以上兩種都只能應用於塊狀元素上

回到頂部

css規則

1.繼承

例：<html>

<head>

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

<tr>

<p>css規則</p>

</td>

</table>

</body>

</html>

<p>為最高階<td>次一級兩種css用在一個屬性元素上，相同的覆蓋，不同的繼承，

2.組合

例:td{font-size:12pt}

p1{font-size:12pt}

組合後

td,.p1{font-size:12pt}

3.層疊

在樣式裡定義過後，在表格屬性中又定義一次

<html>

<head>

<!--

red{color:#ff0000 limportant}

-->

</style>

</hesd>

<body>

<tr>

<td align="center" style="color:#0000ff" class="red">決撒地方官</td>

</tr>

</table>

</body>

</html>

css單位

分四大類：

1 長度單位

數值可以是整數，小數，正數，負數，0，後加單位（負值不要輕易使用）

換算關係：

1in(英寸)=6pc(派)

1in(英寸)=72pt(磅)

1in(英寸)=2.54(釐米)

1cm(釐米)=10mm(毫米)

1cm(釐米)=0.3937(英寸)

1pt(磅)=1/72in(英寸)=0.2478mm(毫米)

1pc(派)=1/6in(英寸)=我國新四號鉛字的尺寸

2 百分比單位

3 顏色單位

4 url單位

回到頂部

div屬性

color : #999999 文字顏色

font-family : 宋體文字字型

font-size : 10pt 文字大小

font-style:itelic 文字斜體育

font-variant:small-caps 小字型

letter-spacing : 1pt 文字間距

line-height : 200% 設定行高

font-weight:bold 文字粗體

vertical-align:sub 下標字

vertical-align:super 上標字

text-decoration:line-through 加?h除線

text-decoration:overline 加頂線

text-decoration:underline 加底線

text-decoration:none ?h除連線底線

text-transform : capitalize 首字大寫

text-transform : uppercase 英文大寫

text-transform : lowercase 英文寫

text-align:right 文字*右對齊

text-align:left 文字*左對齊

text-align:center 文字置中對齊

這些是一些簡單的文字效果，可以應用到css的頁面中。　

回到頂部

背景

TEXTAREA STYLE="border:1px dashed pink">

實線

HTML常用標籤和屬性大全

html標籤<

<!>字型效果

區斷標記

<!>連結格式

<!>貼圖/音樂

<!>表格語法

分割視窗

表單<form></form>

表示顏色的有三種方式；

<body>.....</body>屬性可分為三種：

align 屬性

列表

1無序列表又稱符號列表

2有序列表

3定義列表

name 連線名稱

target目標視窗語法格式：

影象<img> 語法格式：

font元素

表格語法格式：

tr元素

td元素

input元素 語法格式：

select元素

option屬性

多行文字框<textarea>

css 層疊樣式表

外聯式樣式表

元素內定

匯入式樣式表

css結構

選擇符分為6種

關聯選擇符

偽元素選擇符

css規則

1.繼承

2.組合

3.層疊

css單位

div屬性

背景

相關推薦

input元素語法格式：