返回列表 回复 发帖

[分享] 基础html代码大全参考

1.结构性定义
% U! l7 @2 S! E4 [2 `+ ^) `
9 `% e" T0 H9 G7 I" ^文件类型 <HTML></HTML> (放在档案的开头与结尾) 4 T( d9 t- R- X  F) `
文件主题 <TITLE></TITLE> (必须放在「文头」区块内)
. y- ~* `, S2 G! d7 n文头 <HEAD></HEAD> (描述性资料,像是「主题」) & x9 A  w' i& O! X& x) M
文体 <BODY></BODY> (文件本体)   A8 B) _! {" s) b$ w. `3 D8 n
(由浏览器控制的显示风格)
/ O& Z. G& G, t# v标题 <H?></H?> (从1到6,有六层选择) 5 J7 _# M  Y" {# N$ H) C
标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?> , O/ _( `: x0 X; {3 m1 P3 D0 Y
区分 <DIV></DIV>
) z& I9 [0 |1 Y3 @区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
8 g" \' ]/ a8 g2 W, g7 i引文区块 <BLOCKQUOTE></BLOCKQUOTE> (通常会内缩) 0 ?, C( E/ t+ J9 C- ?
强调 <EM></EM> (通常会以斜体显示) # _% Q7 t! J: Q
特别强调 <STRONG></STRONG> (通常会以加粗显示)
: g/ \* I- V% Y1 P( A1 f引文 <CITE></CITE> (通常会以斜体显示) % M) X( E! P5 [4 O6 A! k
码 <CODE></CODE> (显示原始码之用)
- f- f' e1 y/ R6 T: ~9 A2 f样本 <SAMP></SAMP> 1 i% B4 A2 ?* D% P
键盘输入 <KBD></KBD>
3 k0 Y9 P1 a8 ]  c& q3 W变数 <VAR></VAR>
7 {" p- V; Q% @5 `5 p定义 <DFN></DFN> (有些浏览器不提供) + D$ i, \4 E& f, x
地址 <ADDRESS></ADDRESS> : z& z& w+ f& v
大字 <BIG></BIG> & H/ q6 r, h* ~$ o4 t+ _# H# _
小字 <SMALL></SMALL> , Z# w! {9 t2 t/ N2 z
与外观相关的标签(作者自订的表现方式) ! e/ [! R: R, B+ u" d9 d
加粗 <B></B> ( O" J3 a8 ]" _1 J7 \  J+ T
斜体 <I></I> 6 ?( u; M2 s$ L( Q. _! {8 d
底线 <U></U> (尚有些浏览器不提供)
1 P- v9 {: g% B/ v删除线 <S></S> (尚有些浏览器不提供) , l9 b1 r/ \5 j; w1 P- ]
下标 <SUB></SUB> ; }) {) r6 c0 L$ Q% p
上标 <SUP></SUP> 5 C! t: U6 g6 \$ l& L
打字机体 <TT></TT> (用单空格字型显示)
* P9 S+ g4 o# h% X5 v预定格式 <PRE></PRE> (保留文件中空格的大小)
4 N5 w1 ]4 s! l% q" G' f4 [预定格式的宽度 <PRE WIDTH=?></PRE>(以字元计算) ) O: V7 j5 ]8 c% g, p+ X! N& z! t" W
向中看齐 <CENTER></CENTER> (文字与图片都可以)
+ |3 _, r) d* P* Z+ r' V2 j闪耀 <BLINK></BLINK> (有史以来最被嘲弄的标签)
2 C# v3 q1 l8 X7 y% ^字体大小 <FONT SIZE=?></FONT>(从1到7)
) n" d9 u5 o7 ^5 \改变字体大小 <FONT SIZE=+|-?></FONT>
8 z7 ?; r0 G0 I  d基本字体大小 <BASEFONT SIZE=?> (从1到7; 内定为3)
6 b; E- l. v& Z4 y+ K0 k% {字体颜色 <FONT COLOR="#$$$$$$"></FONT>
* D: \( a: f9 }- S- Z, h" B3 t
3 Z+ z$ l$ Y! X% X2.连结与图形 : L9 e/ f' K5 B/ l9 J, L  }

# r$ @% u) G- B连结 <A href="/URL"></A>
. `) W( t9 L( I连结到锚点 <A HREF="URL#***"></A>(如果锚点在另一个档案) ' W: E$ ^6 k) Z, _$ _; g
<A HREF="#***"></A> (如果锚点目前的档案)
( H3 g) _2 Z, V; Q! H8 Y7 Y连结到目的视框 <A href="/URL" TARGET="***"></A> 4 ^7 H% g1 v$ M' X! v
设定锚点 <A NAME="***"></A> - ?  [. ]+ C1 X4 K# T' W  ~# v
图形 <IMG src="/URL">
7 c8 }- \" Q$ `  ~图形看齐方式 <IMG src="/URL" ALIGN=TOP|BOTTOM|MIDDLE>
2 U0 E8 x9 j8 @( H图形看齐方式 <IMG src="/URL" ; y9 o( k  p) w$ F9 Q8 Q" |6 l2 J
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> ' ?. k2 H6 r2 _5 r5 M# A
取代文字 <IMG src="/URL" ALT="***"> (如果没有办法显示图形则显示此文字)
4 {4 d" Q9 d! H# Z0 p- m点选图 <IMG src="/URL" ISMAP> (需要CGI程式)
7 W- w; X& B4 |5 K% o3 ]% R% hN2.0 点选图 <IMG src="/URL" USEMAP="URL"> $ l* k8 K- Q1 e( _9 j. ~
N2.0 地图 <MAP NAME="***"></MAP>(描述地图) 9 |- o5 p' T( A5 Y1 k7 f
N2.0 段落 <AREA SHAPE="RECT" COORDS=",,," href="/URL"|NOHREF> " D& {+ j1 g4 X, f; Q' B
3.0 大小 <IMG src="/URL" WIDTH="?" HEIGHT="?">(以pixels为单位) N1.0 图形边缘 <IMG src="/URL" BORDER=?> (以pixels为单位)
( |, l; [2 A/ S" I7 L8 EN1.0 图形边缘空间 <IMG src="/URL" HSPACE=? VSPACE=?> (以pixels为单位) $ l1 `. l* Q1 n
N1.0 低解析度图形 <IMG src="/URL" LOWsrc="/URL">
5 _- @# I" b1 o' WN1.1 用户端拉 <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">(使用端自动更新 )   {. x% h6 `: F# r
N2.0 内嵌物件 <EMBED src="/URL"> (将物件插入页面)
# p- e* M2 T* C7 RN2.0 内嵌物件大小 <EMBED src="/URL" WIDTH="?" HEIGHT="?"> + s( G7 h; l3 S
  Z  h8 A- Q7 L5 w* C
3.分隔; z! Y0 s# K9 m/ r. U7 g- ~2 K. C) A' O
5 _* H" w/ G) c( x9 @: [; V9 W
段落 <P> (通常是两个return) 5 J1 R: }* u. k& G* t6 S
3.0 段落 <P></P> (新定义成容器型标签) 6 l6 ?6 Y# V, c/ ^8 w% l) n% P
3.0 文字看齐方式 <P ALIGN=LEFT|CENTER|RIGHT></P> ) d8 `* ]4 w7 V' R
换行 <BR> (一个return) $ a1 D# I( ^6 o# v
N1.0 文字部份看齐方式<BR CLEAR=LEFT|RIGHT|ALL>(与图形合用时)
) y& x( K9 y+ T  M2 o; G9 P0 L2 ^横线 <HR> 9 `( {* B' G: W  m& u8 O  j4 w
N1.0 横线对齐 <HR ALIGN=LEFT|RIGHT|CENTER> : Y6 B/ G' d; l" x
N1.0 横线厚度 <HR SIZE=?> (以pixels为单位) % e: O+ }* E/ Q8 }
N1.0 横线宽度 <HR WIDTH=?> (以pixels为单位) ! J/ r( Y, _; t# M9 s
N1.0 横线比率宽度 <HR WIDTH=%> (以页宽为100%)
5 o) U9 f9 s$ \" F% v8 |: M. @N1.0 实线 <HR NOSHADE> (没有立体效果) : w- ^2 ?9 k+ h- N. j, W
N1.0 不可换行 <NOBR></NOBR> (不换行)
& H, T7 n6 C( A+ E9 FN1.0 可换行处 <WBR> (如果需要,可在此断行) 8 n9 B2 B! x' ~4 C, z5 v
列举 (可以巢状列举)
7 b7 ?" L6 w; _/ m" u2 n5 O2 W无次序式列举 <UL><LI></UL> (<LI> 放在每一项前)
* `. r6 X  Q/ n- s6 ]; E; }N1.0 公布式列举 <UL TYPE=DISC|CIRCLE|SQUARE>(定义全部的列举项)
' K- X: @, y- v8 g) k<LI TYPE=DISC|CIRCLE|SQUARE>(定义这个及其後的列举项)   H2 V9 F: j1 I& v  \
有次序式列举 <OL><LI></OL> (<LI> 放在每一项前)
: {% D  c# d8 ~' ^; n$ WN1.0 数标型态 <OL TYPE=A|a|I|i|1> (定义全部的列举项)
4 T+ V' i. [  w, Y% P0 C! S  ?<LI TYPE=A|a|I|i|1> (定义这个及其後的列举项)
, J. R3 a6 g! ^: PN1.0 起始数字 <OL value=?> (定义全部的列举项)
6 ]" P6 I: C+ c1 u<LI value=?> (定义这个及其後的列举项) 2 x+ S5 E5 ?' E* _' ^9 ~* X
定义式列举 <DL><DT><DD></DL>(<DT>项目, <DD>定义)
% O4 ?. \5 G9 v8 S表单式列举 <MENU><LI></MENU>(<LI> 放在每一项前) 1 u8 q. K" I- O' T7 T7 q
目录式列举 <DIR><LI></DIR> (<LI> 放在每一项前)
* [. h5 J+ ]/ F4 _3 s) W) m/ P背景与颜色 1 P% [. m5 P! n; f6 z, v! R' x
3.0 重复排列的背景 <BODY background="/URL"> 7 D, p$ b: w* e, A  i7 M
N1.1+ 背景颜色 <BODY BGCOLOR="#$$$$$$"> (依序为红、绿、蓝)
, t! W* F' @4 J7 E' MN1.1+ 文字颜色 <BODY TEXT="#$$$$$$"> / n: T/ x' b  K. e1 [* U0 I
N1.1+ 连结颜色 <BODY LINK="#$$$$$$">
# h- a# ]1 J+ G, O4 Q2 mN1.1+ 看过的连结 <BODY VLINK="#$$$$$$"> - W+ x3 |7 u, c4 F; a9 Y
N1.1 使用中的连结 <BODY ALINK="#$$$$$$">
) x& {5 u8 u6 D( n. R
1 P4 V* Q* t5 l: B+ g4.特殊字元(以下标签需用小写) " h/ d7 W3 r+ w8 B; Y4 s6 J+ ]
6 y7 `0 w% D; K; d. v
特别符号 &#?; (其中 ? 代表 ISO 8859-1 的编码) % k& J: E+ [' Y+ f2 z
< < > > & & " " 6 g. P, v7 d  S4 l  y
注册商标TM ?
8 j* x. J1 I; M" JN1.0+ 注册商标TM ?
1 X: s: [, n4 L0 w: m著作权符号 ?
. M6 y' S% ^& W1 r" n  g5 J) zN1.0+ 著作权符号 ?
+ f) \6 S( E* W2 W' F$ f2 B3 Q; N: S% _8 `$ ]; H0 ^' U7 M
5.表单 (通常需要与CGI程式配合) ! \, w2 n9 L4 D( G: {8 v# J2 Q

, G9 N1 S+ T# ]8 r. `9 m5 g定义表单 <FORM ACTION="URL" METHOD=GET|POST></FORM> ; r4 v6 i6 A+ B2 c2 z# b
N2.0 上传档案 <FORM ENCTYPE="multipart/form-data></FORM> ! L5 N! q3 ~% d- L( Q$ u
输入栏位 <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET"> 3 ~$ \2 ~. S, @
栏位名称 <INPUT NAME="***"> % ^# I9 R$ w9 w2 [
栏位内定值 <INPUT value="***">
, z/ D( m, S* `. n( X已选定 <INPUT CHECKED> (适用於checkboxes与 radio boxes)
: Y: n' \. s' `栏位宽度 <INPUT SIZE=?> (以字元数为单位)   v& E2 Y/ y$ j; `" T: D2 i; s
最长字数 <INPUT MAXLENGTH=?> (以字元数为单位)
) c! p- D3 g! j0 c下拉式选单 <SELECT></SELECT> 2 s& o8 I: m0 o
下拉式选单名称 <SELECT NAME="***"></SELECT> - r2 j' U6 M& K7 c
选单项目数量 <SELECT SIZE=?></SELECT>
4 l/ V) Z3 ~% E; @/ E  i5 J多选式选单 <SELECT MULTIPLE> (多选)   A. O; N+ m- E5 A: q8 S: I
选项 <OPTION> 5 r; k( o' ^% X& Y. o# r5 D
内定选项 <OPTION SELECTED> 8 B* L5 k  M" t, o" @! }
文字输入区 <TEXTAREA ROWS=? COLS=?></TEXTAREA>
# [: R2 D1 x6 N" ^输入区名称 <TEXTAREA NAME="***"></TEXTAREA> % x) R7 j4 o( @; m
N2.0 输入区换行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
7 a9 e# {  U4 C$ E5 I* i  y8 d% O& D( N
6.表格
, y+ q- e5 o/ Q" [; X5 f$ k  I2 T. M0 X1 F6 O; C2 K7 {
3.0 定义表格 <TABLE></TABLE> , T( ], ?$ ]7 [  u) i
3.0 表格框线 <TABLE BORDER></TABLE> (有或没有)
$ s  K: V9 H/ g- Z9 |: ]& p( n( wN1.1 表格框线 <TABLE BORDER=?></TABLE>(可以设定数值)
9 k+ {: y5 h3 sN1.1 储存格左右留白 <TABLE CELLSPACING=?>
$ Q* z+ g6 c. @! P3 T; e8 z, o; fN1.1 储存格上下留白 <TABLE CELLPADDING=?>
) J/ [, l  f# ~1 [7 U! mN1.1 表格宽度 <TABLE WIDTH=?> (以pixels为单位)
" ^1 d& w, ?0 hN1.1 宽度比率 <TABLE WIDTH=%> (页宽为100%)
; ^* E1 ^+ a# q( ~7 W$ P4 {% X3.0 表格列 <TR></TR>
! g& C) k% s9 Q) z3.0 表格列内容看齐 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
4 C. i2 J8 z" S* T$ ~3.0 储存格 <TD></TD> (须与列并用)
: q  U& M* P# C+ S% i) t0 e6 p3.0 储存格内容看齐 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> * V% J& E! N) Y8 `9 g" K
3.0 不换行 <TD NOWRAP> * k, ]* g' Q( G. J5 P. @2 m/ g- K
N3.0 储存格背景颜色 <TD BGCOLOR=#$$$$$$>
$ F9 u( ~6 Y) A3.0 储存格横向连接 <TD COLSPAN=?>
) a. g# v5 w$ b& g( Y1 T9 O3.0 储存格纵向连接 <TD ROWSPAN=?> * Q( ?; e: Z& L0 [7 E8 r8 P
N1.1 储存格宽度 <TD WIDTH=?> (以pixels为单位) - e* w' L9 K" }) _$ b; R' e
N1.1 储存格宽度比率 <TD WIDTH=%> (页宽为100%) - ]% _4 f  m* R4 O: j+ p- n( K
3.0 表格标题 <TH></TH> (跟<TD>一样,不过会对中并加粗)
7 p, f6 S4 x9 V: [7 X! w3.0 表格标题对齐 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
& |  m/ S! g+ O. f  F# k& w) M" ^  q3.0 表格标题不换行 <TH NOWRAP>
" V/ p4 h: Z) U% c2 a+ x3.0 表格标题占几栏 <TH COLSPAN=?> ' h+ d8 ?: O- L- J* u/ M- z
3.0 表格标题占几列 <TH ROWSPAN=?> 2 Z5 [3 q$ P% G2 ~) I! A
N1.1 表格标题宽度 <TH WIDTH=?> (以pixels为单位)
! F+ I* Y( e, G! C. b; mN1.1 表格标题比率宽度<TH WIDTH=%> (页宽为100%) * y3 u- {4 }- X. l0 ?
3.0 表格抬头 <CAPTION></CAPTION>
- Z: {7 L- Q0 N( D- u* L6 l3.0 表格抬头看齐 <CAPTION ALIGN=TOP|BOTTOM>(在表格之上/之下)
5 Q+ F8 ?6 L1 V+ ]+ K视框 (定义与控制萤幕上的特定区域) : b1 c6 F/ O+ y! u! N0 i
N2.0 视框格式总定义 <FRAMESET></FRAMESET> (取代<BODY>) ( b9 z% r& |/ m; v' E
N2.0 视框行长度分配 <FRAMESET ROWS=,,,></FRAMESET>(pixels 或 %) 5 \# V/ M- Y8 y5 |# S
N2.0 视框行长度分配 <FRAMESET ROWS=*></FRAMESET> (* = 相对大小)
' g# t/ P! v$ z  \N2.0 视框栏宽度分配 <FRAMESET COLS=,,,></FRAMESET>(pixels 或 %)
- T! A! s* H# a8 e$ tN2.0 视框栏宽度分配 <FRAMESET COLS=*></FRAMESET> (* =相对大小) 3 m! ^6 W, G+ k  d& i
N2.0 定义个别视框 <FRAME> (定义个别视框) ) ~- H- H% ]" C* M/ m, t2 \
N2.0 个别视框内容 <FRAME src="/URL"> 4 j' A% C6 [( G7 d9 B
N2.0 个别视框名称 <FRAME NAME="***"|_blank|_self|_parent|_top>
8 A5 T3 e# G' \: L8 K1 iN2.0 边缘宽度 <FRAME MARGINWIDTH=?> (「左」与「右」边界)
8 Y- B0 H5 T( D% X2 j" RN2.0 边缘高度 <FRAME MARGINHEIGHT=?> (「天顶」与「地底」边界) 1 @# a$ `, V/ w; d% t2 Z
N2.0 卷动条 <FRAME SCROLLING="YES|NO|AUTO">   M4 L! ]) H" {7 g
N2.0 不可改变大小 <FRAME NORESIZE> / w% h' K0 i  n" B3 r6 O7 i
N2.0 无视框时的内容 <NOFRAMES></NOFRAMES>(如果浏览器不提供视框功能的话)
怨去吹箫,狂来说剑,两样销魂味。
好东西啊,不错不错,存上先,用的时候复制粘贴
返回列表