返回列表 回复 发帖

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

1.结构性定义
6 t8 C4 u0 @% N3 s% d4 X, z3 U- K/ F/ R' W& Q
文件类型 <HTML></HTML> (放在档案的开头与结尾) * J# `( d2 o5 e' P
文件主题 <TITLE></TITLE> (必须放在「文头」区块内) * f, g$ \% H* m' X: E- L
文头 <HEAD></HEAD> (描述性资料,像是「主题」) & ^2 f: F: H- |" Y" r
文体 <BODY></BODY> (文件本体) " E+ C4 }9 B" _
(由浏览器控制的显示风格) 5 v  ?$ V! v% m* Z
标题 <H?></H?> (从1到6,有六层选择) ; B% |( G. v7 y) D5 B  c! b; |
标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?> 9 {  I. b! E$ z/ w# p
区分 <DIV></DIV>
; I" H7 ^. \' d( w+ ~& A6 `" H区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
* ?$ U, I6 U2 z" z" @9 O/ a引文区块 <BLOCKQUOTE></BLOCKQUOTE> (通常会内缩) 9 w: D, @7 |" }8 K, h
强调 <EM></EM> (通常会以斜体显示)
! o. s5 P2 a' @( Q% C$ z特别强调 <STRONG></STRONG> (通常会以加粗显示) 7 x* n/ X  P% t, x
引文 <CITE></CITE> (通常会以斜体显示) $ p6 g9 A+ T: ?  m  [# @
码 <CODE></CODE> (显示原始码之用)
0 Q' z. k% J& z+ c4 H样本 <SAMP></SAMP>
( E" }5 O2 b9 \0 F& d7 H键盘输入 <KBD></KBD>
; Z7 v- b& n( y% a9 |变数 <VAR></VAR>
7 v2 A- S0 G( Z+ v2 w  X5 T+ {7 q定义 <DFN></DFN> (有些浏览器不提供)
6 t$ D# F- Y6 Z+ U  P' H! M地址 <ADDRESS></ADDRESS>   X( V6 ]* X) }" p6 I+ E
大字 <BIG></BIG> + q2 r) y0 q2 H' `" k+ K" z
小字 <SMALL></SMALL>
& K$ t8 L1 R! q: ^- a与外观相关的标签(作者自订的表现方式)
; [/ q* j+ m8 C, A3 E加粗 <B></B> ' A" V% v9 O! K6 f7 z' W4 u
斜体 <I></I> + i0 @! x. V2 |
底线 <U></U> (尚有些浏览器不提供)   E, I3 j) d7 J
删除线 <S></S> (尚有些浏览器不提供)
, |/ W& ?7 v# K7 p, o5 }7 k; z) [下标 <SUB></SUB>
* G4 V. l  D& m( Y( O, v/ p上标 <SUP></SUP> $ P* R, |! l" P' f) {
打字机体 <TT></TT> (用单空格字型显示)
' B5 R+ d" p, i" U; o预定格式 <PRE></PRE> (保留文件中空格的大小) 5 s9 k3 F4 Z' x) {! F$ w
预定格式的宽度 <PRE WIDTH=?></PRE>(以字元计算)
0 a3 |- L9 K8 D' Y& {% Q向中看齐 <CENTER></CENTER> (文字与图片都可以) 0 F& c( s! u. R7 l/ ^4 g( X( ~
闪耀 <BLINK></BLINK> (有史以来最被嘲弄的标签)
0 x3 a0 O  }( n4 C, T( k字体大小 <FONT SIZE=?></FONT>(从1到7) ' @) s, ^9 [4 h! U* E4 X. l  K- K( E
改变字体大小 <FONT SIZE=+|-?></FONT>
7 b0 K  Q" @* w, \1 h* g3 C( N基本字体大小 <BASEFONT SIZE=?> (从1到7; 内定为3) 3 C2 q- N- e5 V! S
字体颜色 <FONT COLOR="#$$$$$$"></FONT> ) ~9 [$ Q+ W+ P- r
. O, O5 G" ?; I  X
2.连结与图形 # y- M8 e7 a) _- X- k! z* ^$ l. ?

9 a2 F8 ~* I# p( I$ f3 h% N连结 <A href="/URL"></A> 5 V' p8 z# N$ ]1 p
连结到锚点 <A HREF="URL#***"></A>(如果锚点在另一个档案) 9 \% r* n3 u# Q: S: T+ ~: t  e( Z  ?
<A HREF="#***"></A> (如果锚点目前的档案)
9 e; l% q3 o- m+ L$ Z1 `4 u  z% J连结到目的视框 <A href="/URL" TARGET="***"></A> 4 ]6 ]3 W. D" u/ ]5 T  N! G) f) j" U
设定锚点 <A NAME="***"></A> / r/ @6 G4 t( l2 v
图形 <IMG src="/URL">
- o: Q( D/ c* M8 B8 `图形看齐方式 <IMG src="/URL" ALIGN=TOP|BOTTOM|MIDDLE> " _4 |5 F  ~6 m# t. ], v2 \
图形看齐方式 <IMG src="/URL" 5 R2 z1 s. `: I9 U( G
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
* N* M  T- C: x  U1 R4 n! b. j! U取代文字 <IMG src="/URL" ALT="***"> (如果没有办法显示图形则显示此文字) 8 q5 t. |3 c4 a7 A( G4 e
点选图 <IMG src="/URL" ISMAP> (需要CGI程式)
) s6 r" Z" w- l/ m1 P; [4 [N2.0 点选图 <IMG src="/URL" USEMAP="URL">
; G6 q* o- y' T5 V7 {N2.0 地图 <MAP NAME="***"></MAP>(描述地图)
1 I7 O7 f& O. EN2.0 段落 <AREA SHAPE="RECT" COORDS=",,," href="/URL"|NOHREF> ' [( G* t; i8 q7 a+ `9 v$ o
3.0 大小 <IMG src="/URL" WIDTH="?" HEIGHT="?">(以pixels为单位) N1.0 图形边缘 <IMG src="/URL" BORDER=?> (以pixels为单位) . G* E9 N1 _) J: Z
N1.0 图形边缘空间 <IMG src="/URL" HSPACE=? VSPACE=?> (以pixels为单位)
# Y9 f3 K$ D2 h# r( T9 |' yN1.0 低解析度图形 <IMG src="/URL" LOWsrc="/URL"> - y  Q- ^9 b# q8 ^
N1.1 用户端拉 <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">(使用端自动更新 ) 1 i! V9 ?( \. z# j  T, z5 h& x
N2.0 内嵌物件 <EMBED src="/URL"> (将物件插入页面) - ?% q) T; T) {, H
N2.0 内嵌物件大小 <EMBED src="/URL" WIDTH="?" HEIGHT="?"> . V( Q/ P) B0 p3 d" W* A, s

$ [9 C' a+ k: y% j3.分隔
; R1 ^* w# U0 F2 g) ]: W
1 j# [5 J- T3 I2 \- K$ }; y段落 <P> (通常是两个return) 6 {  T& x- X6 s  h3 I
3.0 段落 <P></P> (新定义成容器型标签) # ^" }9 w' M6 |( g
3.0 文字看齐方式 <P ALIGN=LEFT|CENTER|RIGHT></P>
& D( e: ^/ y% G9 i  t7 h换行 <BR> (一个return) - ~* ?; q2 K8 H
N1.0 文字部份看齐方式<BR CLEAR=LEFT|RIGHT|ALL>(与图形合用时)
; Y, N/ k5 E6 s. r  a# \; _横线 <HR> 8 I0 d6 i9 W- r8 \
N1.0 横线对齐 <HR ALIGN=LEFT|RIGHT|CENTER> ; x& v5 G0 G% h3 @* ~: v
N1.0 横线厚度 <HR SIZE=?> (以pixels为单位)
' H; R, r3 H7 U- y! j2 QN1.0 横线宽度 <HR WIDTH=?> (以pixels为单位) 6 O6 {$ m, t, g  J% E" J3 M
N1.0 横线比率宽度 <HR WIDTH=%> (以页宽为100%) ( B4 S0 O7 O' ^" x5 e
N1.0 实线 <HR NOSHADE> (没有立体效果) # O) }) q! _) J; J; G. d# B6 K
N1.0 不可换行 <NOBR></NOBR> (不换行)
% n0 E' I1 H9 U* g% `% RN1.0 可换行处 <WBR> (如果需要,可在此断行) % o9 ^+ J) }* X2 |6 b+ E1 N
列举 (可以巢状列举) " B" X( O5 S' _, D' D  p4 F& e
无次序式列举 <UL><LI></UL> (<LI> 放在每一项前)
1 I* F! g& |3 y" JN1.0 公布式列举 <UL TYPE=DISC|CIRCLE|SQUARE>(定义全部的列举项) + W9 }, e+ a0 ~2 o! b5 Q2 `) P
<LI TYPE=DISC|CIRCLE|SQUARE>(定义这个及其後的列举项)
) n0 }7 e4 s3 b1 |4 Z0 t有次序式列举 <OL><LI></OL> (<LI> 放在每一项前)
, E' f2 Q  W8 I; }N1.0 数标型态 <OL TYPE=A|a|I|i|1> (定义全部的列举项) / i( w/ t% f( m$ u2 R
<LI TYPE=A|a|I|i|1> (定义这个及其後的列举项)
% h6 |- \: E3 HN1.0 起始数字 <OL value=?> (定义全部的列举项)
6 b9 P( u/ U, K, i<LI value=?> (定义这个及其後的列举项)
& ~6 w5 j/ O) _, [" O, K定义式列举 <DL><DT><DD></DL>(<DT>项目, <DD>定义) : }; g, Y" v! p4 O* c; u
表单式列举 <MENU><LI></MENU>(<LI> 放在每一项前)
2 v5 Y0 g  S# j7 x4 }8 n. {目录式列举 <DIR><LI></DIR> (<LI> 放在每一项前)
0 l6 N/ s9 _2 k6 V& a6 \背景与颜色
, ?" k. n9 t' w3.0 重复排列的背景 <BODY background="/URL">
7 H2 A, U+ y, u3 M# VN1.1+ 背景颜色 <BODY BGCOLOR="#$$$$$$"> (依序为红、绿、蓝) ; b; @/ J1 q- V' I3 v! {# P8 d
N1.1+ 文字颜色 <BODY TEXT="#$$$$$$">
; T6 }3 L; V# H' G& ?N1.1+ 连结颜色 <BODY LINK="#$$$$$$">
( ?6 d) c( D7 n) R: u0 i' LN1.1+ 看过的连结 <BODY VLINK="#$$$$$$">
! o. ^+ a- U6 J2 S& X1 y$ y/ vN1.1 使用中的连结 <BODY ALINK="#$$$$$$"> 7 p1 Q1 ~  Y" r
& x& @4 D9 ]* _3 h
4.特殊字元(以下标签需用小写)
4 f9 ]5 F6 @: ~. |6 }6 W
8 i0 |! O, }3 p9 I8 b8 q( a& W: L特别符号 &#?; (其中 ? 代表 ISO 8859-1 的编码)
6 w1 G+ z$ h( i$ P% Q< < > > & & " " # x6 T2 ~  M, l: l- @+ t: i
注册商标TM ? - o3 {, u8 p7 h( e8 N
N1.0+ 注册商标TM ? : A. P; M  I! G  `. i; }: K0 f
著作权符号 ? 6 Y3 w, b. r/ T+ `* k+ ]+ n. B
N1.0+ 著作权符号 ? 0 L) ~! K' ^$ M

4 `' L* t4 I+ M5.表单 (通常需要与CGI程式配合) ' E7 L3 V: M; a2 D3 z. ~

- i6 {9 h4 c# V9 A. ]& [定义表单 <FORM ACTION="URL" METHOD=GET|POST></FORM>
6 \# _. P! \: o) \* N  wN2.0 上传档案 <FORM ENCTYPE="multipart/form-data></FORM> 0 t3 h9 N/ i; K( c8 }/ b. z
输入栏位 <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
$ v; d7 N& o( |( c# z7 @: K栏位名称 <INPUT NAME="***">
7 U9 K# v) ?- N- f栏位内定值 <INPUT value="***">
- j3 K+ j" \  ^5 k! c- P6 G5 ?0 ~已选定 <INPUT CHECKED> (适用於checkboxes与 radio boxes) : w0 L1 W' w, L$ q* p6 w/ Y7 R, V# c
栏位宽度 <INPUT SIZE=?> (以字元数为单位) & E2 w" R" A7 Y+ M4 w* h
最长字数 <INPUT MAXLENGTH=?> (以字元数为单位)
1 E* X' A/ D) V/ \下拉式选单 <SELECT></SELECT> . H3 d) s. Z2 e! P$ p  ?, Q3 a) O
下拉式选单名称 <SELECT NAME="***"></SELECT> . m1 ]. p+ ~$ V* }
选单项目数量 <SELECT SIZE=?></SELECT> : D6 N0 O9 B6 F5 |. Z7 s! [0 Y9 [
多选式选单 <SELECT MULTIPLE> (多选)
! u( @' G' T+ M) k$ z1 A选项 <OPTION>
1 i% h3 o( a! o1 Y% E' p" |" }内定选项 <OPTION SELECTED>
; t. S3 f2 m4 L4 l文字输入区 <TEXTAREA ROWS=? COLS=?></TEXTAREA>
1 L* ?& Y0 ]  b9 H( C输入区名称 <TEXTAREA NAME="***"></TEXTAREA>
) s+ W2 t, r3 @+ PN2.0 输入区换行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
! C) S3 w3 P8 S1 f; ?6 X) l& F4 i, ^
6.表格 , A$ H8 g% t1 @$ g6 x5 J, o* H; v

: ?* y  h5 m* l+ M# b  b3.0 定义表格 <TABLE></TABLE>
3 ]* l/ A) X* c$ ~- t; c( V3.0 表格框线 <TABLE BORDER></TABLE> (有或没有)
% B7 J6 |4 @" x- r3 ?N1.1 表格框线 <TABLE BORDER=?></TABLE>(可以设定数值) % W  M3 q* P# M
N1.1 储存格左右留白 <TABLE CELLSPACING=?>
- g) \8 W  I3 ~0 w3 v8 FN1.1 储存格上下留白 <TABLE CELLPADDING=?>
* H* |4 u/ O5 I: M" xN1.1 表格宽度 <TABLE WIDTH=?> (以pixels为单位) ) _2 B1 t* ~+ d$ g# t8 f
N1.1 宽度比率 <TABLE WIDTH=%> (页宽为100%)
# {: \3 I, R1 Z  n3.0 表格列 <TR></TR>
; L- S7 u) X; ?$ W; A  T3.0 表格列内容看齐 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
" l$ \: Q& w8 i" ~6 p3.0 储存格 <TD></TD> (须与列并用) - J1 ~8 \7 n! u* M
3.0 储存格内容看齐 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> ' ^4 g5 d  t  S, {3 i) _
3.0 不换行 <TD NOWRAP>
) h" H4 R3 Y3 P/ d" v; dN3.0 储存格背景颜色 <TD BGCOLOR=#$$$$$$>
+ R4 A: J$ g# z) P0 m3.0 储存格横向连接 <TD COLSPAN=?>
% U# _% X4 T& [* A+ L5 \3.0 储存格纵向连接 <TD ROWSPAN=?>
/ ?. h- F+ P6 A3 z& J- B1 A# v4 K, j4 wN1.1 储存格宽度 <TD WIDTH=?> (以pixels为单位)
/ h) y( v  \% o: y3 n) I& GN1.1 储存格宽度比率 <TD WIDTH=%> (页宽为100%) . [- a4 |! D: v4 {4 c
3.0 表格标题 <TH></TH> (跟<TD>一样,不过会对中并加粗) 4 l( L+ s+ f, z+ y0 I7 A% x- S9 J3 a
3.0 表格标题对齐 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
  o2 f8 M* A; z3.0 表格标题不换行 <TH NOWRAP> 9 t; q' J* f4 }( ~& K, l
3.0 表格标题占几栏 <TH COLSPAN=?>
, }0 V  O( M' i; g& r) Y3.0 表格标题占几列 <TH ROWSPAN=?>
% y9 Z2 N2 x4 ~) A/ GN1.1 表格标题宽度 <TH WIDTH=?> (以pixels为单位) - S! X  @% r% D, ^& c3 {% \5 X" D# L
N1.1 表格标题比率宽度<TH WIDTH=%> (页宽为100%) , I. H: ~$ }$ E- @
3.0 表格抬头 <CAPTION></CAPTION>
! v" U6 k  f% s  W: d* L3.0 表格抬头看齐 <CAPTION ALIGN=TOP|BOTTOM>(在表格之上/之下) 5 H3 |4 I0 i8 `1 |- q4 v4 w
视框 (定义与控制萤幕上的特定区域)
- I: E2 k# H0 q& J# KN2.0 视框格式总定义 <FRAMESET></FRAMESET> (取代<BODY>) 0 b2 g7 k' h1 N: }3 W$ n* p
N2.0 视框行长度分配 <FRAMESET ROWS=,,,></FRAMESET>(pixels 或 %) # x5 K6 T! Z4 _
N2.0 视框行长度分配 <FRAMESET ROWS=*></FRAMESET> (* = 相对大小) ; x1 p% ]9 g2 _& y7 j4 o
N2.0 视框栏宽度分配 <FRAMESET COLS=,,,></FRAMESET>(pixels 或 %)
$ o5 e) A5 Z1 P& j% H2 J5 @+ @N2.0 视框栏宽度分配 <FRAMESET COLS=*></FRAMESET> (* =相对大小)
- Q; s, ]. h' a- m7 P: zN2.0 定义个别视框 <FRAME> (定义个别视框) ) Y8 J) [! H) A) r
N2.0 个别视框内容 <FRAME src="/URL"> ; t( [- g1 w9 |6 v8 M' Z
N2.0 个别视框名称 <FRAME NAME="***"|_blank|_self|_parent|_top>
9 M: p8 S: I  {3 n+ u, R+ @N2.0 边缘宽度 <FRAME MARGINWIDTH=?> (「左」与「右」边界) 9 I: s) F, ^" ?+ p* S- I
N2.0 边缘高度 <FRAME MARGINHEIGHT=?> (「天顶」与「地底」边界) : V% a7 r7 \; Q
N2.0 卷动条 <FRAME SCROLLING="YES|NO|AUTO"> & Y4 M0 N, ]. M2 r) X
N2.0 不可改变大小 <FRAME NORESIZE> 3 `! Q( R5 ^3 `0 T. n& l5 D' Y" _
N2.0 无视框时的内容 <NOFRAMES></NOFRAMES>(如果浏览器不提供视框功能的话)
怨去吹箫,狂来说剑,两样销魂味。
好东西啊,不错不错,存上先,用的时候复制粘贴
返回列表