html關鍵字大全

来源:https://www.cnblogs.com/dazigo/archive/2022/06/16/16383087.html
-Advertisement-
Play Games

html標簽屬性大全 html標簽屬性大全從網上搜集整理的常用html標簽,供朋友們交流學習html用。 html標簽<marquee> <marquee>...</marquee>普通捲動 <marquee behavior=slide>...</marquee>滑動 <marquee behav ...


 

html標簽屬性大全

 

html標簽屬性大全從網上搜集整理的常用html標簽,供朋友們交流學習html用。

html標簽<marquee>

<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 οnmοuseοver="this.stop()">...</marquee>滑鼠經過上面時停止滾動

<marquee οnmοuseοver="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

<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 元素(單標簽)

語法格式:

<frame name="" src="url" scrolling="yes/no" noresize>

屬性:

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

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

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

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

noframe元素

指定當使用了框架的頁面在不支持框架的瀏覽器中打開時顯示的信息

語法格式:

<noframe>

......

</noframe>

 

表單<form></form>

語法格式:

<form action="url" method="get/post">

....

<input type=submit><input type=reset>

</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> 條列文字標簽

<meta NAME="REFRESH" CONTENT URL> 自動更新文件內容

<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實心方框

<li>文字</li>

<li>文字</li>

</ul>

2有序列表

語法格式:

<ol type="?" start"?">

<li>文字</li>

<li>文字</li>

</ol>

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

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

3定義列表

<dl>定義列表標記

<dt>標示定義條目

<dd>標示定義內容

語法格式:

<dl>

<dt>文字</dt>

<dd>文字內容</dd>

</dl>

連接和圖像

語法格式:

<a href="url" name="?" target="?" title="?">....</a>

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

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

<a href="錨點">...</a>

name 連接名稱

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

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

連接到該錨點的連接則應是:

<a name="#abcdef">....</a>

target目標視窗語法格式

<a href="url"target="_blank|_self|_farent|_top|windowname">....</a>

-blank打開新視窗

_self當前視窗打開

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

_parent當前視窗的父級視窗(上一級)打開

_top在最高一級的視窗打開

windowname已命名的視窗或框架中打開連接

title連接提示

<a href="https://dazigo.vip" title="打字狗線上打字練習">打字狗</a>

圖像<img> 語法格式:

<img src="url" alt="?" width="?" height="?" border="?" align="?">

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

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

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

可選值有:

top圖片和文字頂部對齊

middle圖片和文字居中對齊

bottom圖片和文字底邊對齊(預設)

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

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

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

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

文字的排版

不換行空白標記

font元素

語法格式:

<font face="字體名稱" size="字體大小" color="字體顏色">

字體大小可選值為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>是行內元素,可以定義段落中部分文字的屬性

語法格式:

<div align="" style="">...</div>

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

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

<div>相容性比<span>要好一點,最好使用<div>

表格語法格式

<table width="" bgcolor="" background="" border="" cellspacing="" cellpadding="">

<tr>...<td>....</td>....</tr>

</table>

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

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

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

tr元素

語法格式:

<tr align="" bgcolor="">....</tr>

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

bgcolor指定該行的背景顏色

td元素

語法格式:

<td width="寬度" height="高度" align="水平對齊方式" valign="垂直對齊方式" bgcolor="" background="" rowspan="單元格的行跨度" colapan="單元格的列跨度">.....</td>

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

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

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

input元素 語法格式:

<input type="">

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>

.....

<option>....</option>

.....

</select>

select元素

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

name 指定列表框的名字

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

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

option屬性

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

value 該列表項的值

selected 如果設定了這個參數,預設為選定這一項

多行文本框<textarea>

<textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea>

屬性:

name文本框的名稱

cols文本框的寬度

rows文本框的高度

wrap文本框的折行方式可選值有:

off不保存換行信息

physical強迫瀏覽器在發送信息到web伺服器端時必須將多行文本框的文字一行一行的送出,

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

css 層疊樣式表

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

外聯式樣式表

例:<head>

<link rel="stylesheet" href="/css/default.css">

</head>

<body>

....

</body>

</html>

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

內嵌式樣式表:

例:<html>

<head>

<style type="text/css">

<!--

td{font:9pt;color:red}

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

-->

</style>

</head>

<body>....</body>

</html>

元素內定

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

導入式樣式表

〈html>

<head>

<style type="text/css">

<!--

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

<title>.....</title>

<style type="text/css">

<!--

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

-->

</style>

</head>

<body bgcolor="#ffffff">

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

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

</body>

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

例:〈head>

<title>.....</title>

<style type="text/css">

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<body bgcolor="#ffffff">

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

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

</body>

3 id選擇符

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

例:<body>

<head>

<style type="text/css">

<!--

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

-->

</style>

</head>

<body>

<table width="250" border="1" height="50">

<tr>

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

</tr>

</table>

</body>

</html>

我們看到在調用ID選擇附時與CLASS選擇附類似,只是將class=""換成了id="",方便頁面腳本語言的調用

關聯選擇符

<body>

<head>

<style type="text/css">

<!--

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

-->

</style>

</head>

<body>

<table width="250" border="1" height="50">

<tr>

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

</tr>

</table>

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

</body>

</html>

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

偽類選擇符

是只能用在css選擇符里,而不能用在html代碼中的選擇符

例:

〈html>

<head>

<style type="text/css">

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</style>

</head>

<body>

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

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

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

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

<style type="text/css">

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

<table width="300" border="1" height="150">

<tr>

<td align="center">

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

<style type="text/css">

<!--

red{color:#ff0000 limportant}

-->

</style>

</hesd>

<body>

<table width="300" border="1" height="150">

<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的頁面中。 

背景

background-color:black 背景顏色

background-image : url(image/bg.gif) 背景圖片

background-attachment : fixed 固定背景

background-repeat : repeat 重覆排列-網頁預設

background-repeat : no-repeat 不重覆排列

background-repeat : repeat-x 在x軸重覆排列

background-repeat : repeat-y 在y軸重覆排列

background-position : 90% 90% 背景圖片x與y軸的位置  

鏈接

A 所有超連接

A:link 超連接文字格式

A:visited 瀏覽過的連接文字格式

A:active 按下連接的格式

A:hover 滑鼠移至連接

邊框

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四邊框

虛線

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

實線

<TEXTAREA STYLE="border:1px solid pink"> 

 

以上列出的所有html關鍵字,都可以直接去打字狗網站線上打字練習,傳送門>>>html關鍵字線上打字練習

 

HTML標記大全 

文件類型 <HTML></HTML> (放在檔案的開頭與結尾)

文件主題 <TITLE></TITLE> (必須放在「文頭」區塊內)

文頭 <HEAD></HEAD> (描述性資料,像是「主題」)

文體 <BODY></BODY> (文件本體)

------------------------------------------------------------結構性定義(由瀏覽器控制的顯示風格)

標題 <H?></H?> (從1到6,有六層選擇)

標題的對齊 <H? ALIGN=LEFT|CENTER|RIGHT></H?>

區分 <DIV></DIV>

區分的對齊 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊 <BLOCKQUOTE></BLOCKQUOTE> (通常會內縮)

強調 <EM></EM> (通常會以斜體顯示)

特別強調 <STRONG></STRONG> (通常會以加粗顯示)

引文 <CITE></CITE> (通常會以斜體顯示)

碼 <CODE></CODE> (顯示原始碼之用)

樣本 <SAMP></SAMP>

鍵盤輸入 <KBD></KBD>

變數 <VAR></VAR>

定義 <DFN></DFN> (有些瀏覽器不提供)

地址 <ADDRESS></ADDRESS>

大字 <BIG></BIG>

小字 <SMALL></SMALL>

------------------------------------------------------------與外觀相關的標簽

加粗 <B></B>

斜體 <I></I>

底線 <U></U> (尚有些瀏覽器不提供)

刪除線 <S></S> (尚有些瀏覽器不提供)

下標 <SUB></SUB>

上標 <SUP></SUP>

打字機體 <TT></TT> (用單空格字型顯示)

預定格式 <PRE></PRE> (保留文件中空格的大小)

預定格式的寬度 <PRE WIDTH=?></PRE>(以字元計算)

向中看齊 <CENTER></CENTER> (文字與圖片都可以)

閃耀 <BLINK></BLINK> (有史以來最被嘲弄的標簽)

字體大小 <FONT SIZE=?></FONT>(從1到7)

改變字體大小 <FONT SIZE=+|-?></FONT>

基本字體大小 <BASEFONT SIZE=?> (從1到7; 內定為3)

字體顏色 <FONT COLOR="#

 

$$"></FONT>

--------------------------------------------------------------------------------《連結與圖形》

連接 <A HREF="URL"></A>

連接到錨點 <A HREF="URL#***"></A>(如果錨點在另一個檔案)

<A HREF="#***"></A> (如果錨點目前的檔案)

連結到目的視框 <A HREF="URL" TARGET="***"></A>

設定錨點 <A NAME="***"></A>

圖形 <IMG SRC="URL">

圖形看齊方式 <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>

圖形看齊方式 <IMG SRC="URL"

ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>

取代文字 <IMG SRC="URL" ALT="***"> (如果沒有辦法顯示圖形則顯示此文字)

點選圖 <IMG SRC="URL" ISMAP> (需要CGI程式)

點選圖 <IMG SRC="URL" USEMAP="URL">

地圖 <MAP NAME="***"></MAP>(描述地圖)

段落 <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>

大小 <IMG SRC="URL" WIDTH="?" HEIGHT="?">(以pixels為單位)

圖形邊緣 <IMG SRC="URL" BORDER=?> (以pixels為單位)

圖形邊緣空間 <IMG SRC="URL" HSPACE=? VSPACE=?> (以pixels為單位)

低解析度圖形 <IMG SRC="URL" LOWSRC="URL">

用戶端拉 <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">(使用端自動更新 )

內嵌物件 <EMBED SRC="URL"> (將物件插入頁面)

內嵌物件大小 <EMBED SRC="URL" WIDTH="?" HEIGHT="?">

-------------------------------------------------------------------------------- 分隔

段落 <P> (通常是兩個return)

段落 <P></P> (新定義成容器型標簽)

文字看齊方式 <P ALIGN=LEFT|CENTER|RIGHT></P>

換行 <BR> (一個return)

文字部份看齊方式<BR CLEAR=LEFT|RIGHT|ALL>(與圖形合用時)

橫線 <HR>

橫線對齊 <HR ALIGN=LEFT|RIGHT|CENTER>

橫線厚度 <HR SIZE=?> (以pixels為單位)

橫線寬度 <HR WIDTH=?> (以pixels為單位)

橫線比率寬度 <HR WIDTH=%> (以頁寬為100%)

實線 <HR NOSHADE> (沒有立體效果)

不可換行 <NOBR></NOBR> (不換行)

可換行處 <WBR> (如果需要,可在此斷行)

-------------------------------------------------------------------------------- 列舉 (可以巢狀列舉)

無次序式列舉 <UL><LI></UL> (<LI> 放在每一項前)

公佈式列舉 <UL TYPE=DISC|CIRCLE|SQUARE>(定義全部的列舉項)

<LI TYPE=DISC|CIRCLE|SQUARE>(定義這個及其後的列舉項)

有次序式列舉 <OL><LI></OL> (<LI> 放在每一項前)

數標型態 <OL TYPE=A|a|I|i|1> (定義全部的列舉項)

<LI TYPE=A|a|I|i|1> (定義這個及其後的列舉項)

起始數字 <OL value=?> (定義全部的列舉項)

<LI value=?> (定義這個及其後的列舉項)

定義式列舉 <DL><DT><DD></DL>(<DT>項目, <DD>定義)

表單式列舉 <MENU><LI></MENU>(<LI> 放在每一項前)

目錄式列舉 <DIR><LI></DIR> (<LI> 放在每一項前)

-------------------------------------------------------------------------------- 背景與顏色

重覆排列的背景 <BODY BACKGROUND="URL">

背景顏色 <BODY BGCOLOR="#

 

$$"> (依序為紅、綠、藍)

文字顏色 <BODY TEXT="#

 

$$">

連結顏色 <BODY LINK="#

 

$$">

看過的連結 <BODY VLINK="#

 

$$">

使用中的連結 <BODY ALINK="#

 

$$">

-------------------------------------------------------------------------------- 特殊字元(以下標簽需用小寫)

特別符號 &#?; (其中 ? 代表 ISO 8859-1 的編碼)

< < > > & & " "

註冊商標TM ®

N1.0+ 註冊商標TM ®

著作權符號 ©

N1.0+ 著作權符號 ©

-------------------------------------------------------------------------------- 表單 (通常需要與CGI程式配合)

定義表單 <FORM ACTION="URL" METHOD=GET|POST></FORM>

N2.0 上傳檔案 <FORM ENCTYPE="multipart/form-data></FORM>

輸入欄位

<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">

欄位名稱 <INPUT NAME="***">

欄位內定值 <INPUT value="***">

已選定 <INPUT CHECKED> (適用於checkboxes與 radio boxes)

欄位寬度 <INPUT SIZE=?> (以字元數為單位)

最長字數 <INPUT MAXLENGTH=?> (以字元數為單位)

下拉式選單 <SELECT></SELECT>

下拉式選單名稱 <SELECT NAME="***"></SELECT>

選單項目數量 <SELECT SIZE=?></SELECT>

多選式選單 <SELECT MULTIPLE> (多選)

選項 <OPTION>

內定選項 <OPTION SELECTED>

文字輸入區 <TEXTAREA ROWS=? COLS=?></textarea>

輸入區名稱 <TEXTAREA NAME="***"></textarea>

輸入區換行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></textarea>

-------------------------------------------------------------------------------- 表格

定義表格 <TABLE></TABLE>

表格框線 <TABLE BORDER></TABLE> (有或沒有)

表格框線 <TABLE BORDER=?></TABLE>(可以設定數值)

儲存格左右留白 <TABLE CELLSPACING=?>

儲存格上下留白 <TABLE CELLPADDING=?>

表格寬度 <TABLE WIDTH=?> (以pixels為單位)

寬度比率 <TABLE WIDTH=%> (頁寬為100%)

表格列 <TR></TR>

表格列內容看齊 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

儲存格 <TD></TD> (須與列並用)

儲存格內容看齊 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

不換行 <TD NOWRAP>

儲存格背景顏色 <TD BGCOLOR=#

 

$$>

儲存格橫向連接 <TD COLSPAN=?>

儲存格縱向連接 <TD ROWSPAN=?>

儲存格寬度 <TD WIDTH=?> (以pixels為單位)

儲存格寬度比率 <TD WIDTH=%> (頁寬為100%)

表格標題 <TH></TH> (跟<TD>一樣,不過會對中並加粗)

表格標題對齊 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

表格標題不換行 <TH NOWRAP>

表格標題占幾欄 <TH COLSPAN=?>

表格標題占幾列 <TH ROWSPAN=?>

表格標題寬度 <TH WIDTH=?> (以pixels為單位)

表格標題比率寬度<TH WIDTH=%> (頁寬為100%)

表格抬頭 <CAPTION></CAPTION>

表格抬頭看齊 <CAPTION ALIGN=TOP|BOTTOM>(在表格之上/之下)

-----------------------------------------------------------------------------視框 (定義與控制螢幕上的特定區域)

視框格式總定義 <FRAMESET></FRAMESET> (取代<BODY>)

視框行長度分配 <FRAMESET ROWS=,,,></FRAMESET>(pixels 或 %)

視框行長度分配 <FRAMESET ROWS=*></FRAMESET> (* = 相對大小)

視框欄寬度分配 <FRAMESET COLS=,,,></FRAMESET>(pixels 或 %)

視框欄寬度分配 <FRAMESET COLS=*></FRAMESET> (* =相對大小)

定義個別視框 <FRAME> (定義個別視框)

個別視框內容 <FRAME SRC="URL">

個別視框名稱 <FRAME NAME="***"|_blank|_self|_parent|_top>

邊緣寬度 <FRAME MARGINWIDTH=?> (「左」與「右」邊界)

邊緣高度 <FRAME MARGINHEIGHT=?> (「天頂」與「地底」邊界)

捲動條 <FRAME SCROLLING="YES|NO|AUTO">

不可改變大小 <FRAME NORESIZE>

無視框時的內容 <NOFRAMES></NOFRAMES>(如果瀏覽器不提供視框功能的話)

-------------------------------------------------------------------------------- 雜項

說明 (瀏覽器不會顯示)

檔案型態聲明 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

檔案型態聲明 <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN">

可搜尋 <ISINDEX> (指示可搜尋的索引項)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、索引概念 • 在關係資料庫中,索引是一種與表有關的資料庫對象,它可以使對應於表的SQL查詢語句執行得更快。 • 索引的作用類似於圖書的目錄,可以根據目錄中的頁碼快速找到所需的內容。 • 對於資料庫來說,索引是一個必選項,對於現在的各種大型資料庫來說,索引可以大大提高資料庫的性能,以至於它變成了數 ...
  • 一、觸發器簡介 • 什麼是觸發器(trigger) • 觸發器在資料庫里以獨立的對象存儲,由資料庫產生某一類事件而啟動運行,即觸發器是當某個事件發生時自動地隱式運行。 • 觸發器的特點 • 由特定事件觸發,外部無法調用。 • 觸發器無參數。 • 一個表上最多可有12個觸發器。 • 觸發器的作用 • ...
  • 騰訊雲資料庫TDSQL與中國人民大學最新聯合研究成果被SIGMOD 2022接收並將通過長文形式發表。SIGMOD是國際數據管理與資料庫領域頂尖的學術會議之一,騰訊雲資料庫TDSQL論文已連續多年入選VLDB、SIGMOD、ICDE等國際頂級會議。 本次入選論文題目為:CompressDB: Ena ...
  • 本文介紹什麼是 SQL GROUPING 運算符,如何使用 SQL GROUPING 運算符。GROUPING 指示是否聚合 GROUP BY 列表中的指定列表達式。 本文重點 只使用 GROUP BY 子句和聚合函數是無法同時得出小計和合計的。如果想要同時得到,可以使用 GROUPING 運算符。 ...
  • springboot整合ueditor實現圖片上傳和文件上傳功能 寫在前面: 在閱讀本篇之前,請先按照我的這篇隨筆完成對ueditor的前期配置工作: springboot+layui 整合百度富文本編輯器ueditor入門使用教程(踩過的坑)https://www.cnblogs.com/rain ...
  • 這幾天更新有點小慢,逐漸開始回歸狀態了。儘快把這個後臺做完,要開始vue3了 3.添加修改品牌 用到組件 Dialog 對話框,其中visible.sync這個配置是修改他的顯示隱藏的,label-width是這個標題的寬度 然後上傳頭像的按鈕,upload組件,他有自己的一些樣式記得複製在styl ...
  • 個人對瀑布流佈局理解: 每列的寬度相等而高度不等,且第二行的第一個容器需要放在第一行高度最小的容器下麵,依次類推放置。 附上代碼: 代碼僅實現了瀑布流的佈局方式和 resize 監聽,如果大家有需要,可以自己拓展下:實現監聽滾動事件,頁面滾動載入圖片的功能。 代碼中寫了詳細註釋,可以直接使用。 <! ...
  • 前言 Emmet是一款文本編輯器/IDE的插件,用來快速生成複雜的HTML代碼,只要掌握一些常用的語法(類似於CSS選擇器),就可以減少重覆編碼的工作,真的提升開發效率之利器。 所有的操作都是按下tab鍵即可瞬間完成。 一、相關語法 1. 用.來生成類名 div.aaa 按tab後生成如下: <di ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...