html常用标记 - 爱码网

一：html常用标记

＜html＞

<head>

＜title＞标题＜title＞

css的具体内容

</style>

javascript的具体内容

</script>

＜/head＞

＜body＞

..........文件内容..........

＜/body＞

＜/html＞

1.文件标题

＜title＞..........＜/title＞

2.文件更新--＜meta＞

【1】10秒后自动更新一次

＜meta http-equiv="refresh" content=10＞

【2】10秒后自动连结到另一文件

＜meta http-equiv="refresh" content="10；URL=欲连结文件之URL"＞

3.查询用表单--＜isindex>

若欲设定查询栏位前的提示文字：

＜isindex prompt="提示文字"＞

4.预设的基准路径--＜base>

＜base href="放置文件的主机之URL"＞

?后面带的是参数，也就是用户提交处理的时候所带的参数。

就是url和其携带参数的分隔符

1.版面

1.标题文字＜h# align=”对其方式”＞..........＜/h#＞ #=1~6；h1为最大字，h6为最小字

属性align用来设置标题子在页面中的对齐方式，；left(左对齐);center(居中);right(右对齐)

2.字体变化＜font＞..........＜/font＞

【1】字体大小＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大,3是默认值。该属性也可以用+n和-n作为相对值指定。

【2】指定字型

＜font size=”数字” face="字型名称"color=”颜色”＞

..........

＜/font＞

【3】文字颜色

＜font color=#rrggbb＞

..........

＜/font＞

rr：表红色（red）色码

gg：表绿色（green）色码

bb：表蓝色（blue）色码

3.显示小字体＜small＞..........＜/small＞

4.显示大字体＜big＞..........＜/big＞

5.粗体字＜b＞..........＜/b＞

6.斜体字＜i＞..........＜/i＞

7.打字机字体＜tt＞..........＜/tt＞

8.底线＜u＞..........＜/u＞

9.删除线＜strike＞..........＜/strike＞

10.下标字＜sub＞..........＜/sub＞

11.上标字＜sup>..........＜/sup＞

12.文字闪烁效果＜blink＞..........＜/blink＞

<cite></cite>引用;

<strong></strong>; 加粗

<em></em>强调。

13.换行＜br＞这个标记用来标记一个换行动作。在HTML文件中可以用它调整行间距。

14.分段＜p align=”对齐方式”＞…….＜/p＞

15.文字的对齐方向＜p align="#"＞ #号可为 left：表向左对齐（预设值）; center：表向中对齐 ;right：表向右对齐 ;P.S.＜p align="#"＞之后的文字都会以所设的对齐方式显示，直到出现另一个＜p align="#"＞改变其对齐方向，或遇到＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。

16.分隔线＜hr＞

【1】分隔线的粗细＜hr size=点数＞

【2】分隔线的宽度＜hr size=点数或百分比＞

【3】分隔线对齐方向＜hr align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐

【4】分隔线的颜色＜hr color=#rrggbb＞

【5】实心分隔线＜hr noshade＞

17.向中对齐＜center＞..........＜/center＞

18.依原始样式显示＜pre＞..........＜/pre＞

19.＜body＞指令的属性

【1】背景颜色 -- bgcolor ＜body bgcolor=#rrggbb＞

【2】背景图案 -- background ＜body background="图形文件名"＞

【3】设定背景图案不会卷动 -- bgproperties ＜body bgproperties=fixed＞

【4】文件内容文字的颜色 -- text ＜body text=#rrggbb＞

【5】超连结文字颜色 -- link ＜body link=#rrggbb＞

【6】正被选取的超连结文字颜色 -- vlink ＜body vlink=#rrggbb＞

【7】已连结过的超连结文字颜色 -- alink ＜body alink=#rrggbb＞

20.注解＜!--..........--＞21.特殊字元表示法

21.滚动

Marquee:大帐幕

滚动内容(图片或文字)

</marquee>

22.<bgsound src=”音乐文件名” loop=”循环次数(-1为无限循环)”/>

23.插入多种音频和视频格式

Embed:嵌入

2.符号语法

特殊符号	HTML代码
＜	＆lt
＞	＆gt
&	＆amp
"”(英文半角)	＆quot
空白	＆nbsp
商标符号	&trade
注册符号	&reg
×	&times
版权符号	&copy

3.图片

1.插入图片＜img src="图形文件名"＞

2.设定图框 -- border ＜img src="图形文件名" border=点数＞

3.设定图形大小 – width和height ＜img src="图形文件名" width=宽度点数 height=高度点数＞

4.设定图形上下左右留空 – vspace和hspace ＜img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数＞

5.图形附注＜img src="图形文件名" alt="说明文字"＞

6.预载图片

＜img src="高解析度图形文件名" lowsrc="低解析度图形文件名"＞ P.S.两个图的图形大小最好一致

7.影像地图（Image Map）＜img src="图形文件名" usemap="#图的名称"＞＜map name="图的名称"＞

＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞

＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞＜/map＞

【1】定义形状 -- shape

shape=rect：矩形; shape=circle：圆形; shape=poly：多边形。

【2】定义区域 -- coords

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标

例：＜area shape=rect coords=100,50,200,75 href="URL"＞

b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度

例：＜area shape=circle coords=85,155,30 href="URL"＞

c.任意图形（多边形）：将图形之每一转折点座标依序填入

例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"＞

4.表格

表格应该包括标题，表头组，表身组，表尾组

【1】标题<caption></caption>说明了这个表格是什么内容的数据。

【2】表头组可以包含多个表头<th></th>用以说明每列数据的共性。

【3】表身<tbody></tbody>组包含了具体的数据，并往往以多行多列的形式表现出来。

【4】表尾组<tfoot></tfoot>一般对表格进行注解。虽然显示时表尾组显示在表格的最后一行，但实际编写代码时应该写在表头组与表身组之间。

定义表格＜table＞..........＜/table＞

<1>每一对<table></table>代表一个表格

<2>每一对<tr></tr>代表一行

<3>每一对<td></td>表示一个单独的单元格。

【1】设定边框的厚度 -- border

＜table border=点数＞

【2】设定格线的宽度 – cellspacing【外边距】

＜table cellspacing=点数＞

【3】设定资料与格线的距离 – cellpadding【内边距】

＜table cellpadding=点数＞

【4】调整表格宽度 -- width

＜table width=点数或百分比＞

【5】调整表格高度 -- height

＜table height=点数或百分比＞

【6】设定表格背景色彩 -- bgcolor

＜table bgcolor=#rrggbb＞

【7】background属性用于设置表格图片的路径。

【8】设定表格边框色彩 -- bordercolor

＜table bordercolor=#rrggbb＞

<1>可以通过bordercolorlight属性设置高亮区颜色。

<2>通过bordercolordark属性设置暗调区颜色。

【9】rules属性常用来设置单元格之间的边框。None代表无；cols代表竖向表框;rows代表横向边框;all代表显示所有边框。

2.显示格线＜table border＞

3.表格标题

＜caption＞..........＜/caption＞

表格标题位置 -- align

＜caption align="#"＞

#号可为 top：表标题置于表格上方（预设值）

#号可为bottom：表标题置于表格下方

4.定义列＜tr＞

5.定义栏位

《1》＜td＞：靠左对齐

《2》＜th＞：靠中对齐ⅱ粗体（头标签）

【1】水平位置

-- align ＜th align="#"＞

#号可为 left：向左对齐

#号可为center：向中对齐

#号可为right：向右对齐

【2】垂直位置

-- valign＜th align="#"＞

#号可为top：向上对齐

#号可为middle：向中对齐

#号可为bottom：向下对齐

【3】栏位宽度 -- width

＜th width=点数或百分比＞

【4】栏位垂直合并 -- rowspan

＜th rowspan=欲合并栏位数＞

【5】栏位横向合并 -- colspan

＜th colspan=欲合并栏位数＞

6.行高度设置的优先性高于表格，低于单元格。

5.清单

一、目录式清单

＜dir＞

＜li＞项目1 </li>

＜li＞项目2 </li>

＜li＞项目3 </li>

＜/dir＞

P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）

二、选项式清单

＜menu＞

＜li＞项目1 </li>

＜li＞项目2 </li>

＜li＞项目3 </li>

＜/menu＞

三、有序号的清单

＜ol＞

＜li＞项目1 </li>

＜li＞项目2 </li>

＜li＞项目3 </li>

＜/ol＞

【1】序号形式

-- type ＜ol type=#＞或＜li type=#＞

#号可为 A：表以大写英文字母AⅱBⅱCⅱD...作为项目编号

#号可为a：表以小写英文字母aⅱbⅱcⅱd... 作为项目编号

#号可为I：表以大写罗马数字作为项目编号

#号可为i：表以小写罗马数字作为项目编号

#号可为1：表以阿拉伯数字作为项目编号（预设值）

【2】起始数字

-- start ＜ol start=欲开始计数的序数＞

【3】指定编号

-- value ＜li value=欲指定的序数＞

四、无序号的清单

＜ul＞

＜li＞项目1 </li>

＜li＞项目2 </li>

＜li＞项目3 </li>

＜/ul＞

【1】项目符号形式

-- type ＜ul type=#＞或＜li type=#＞

#号可为 disc：实心圆点（预设值） circle：空心圆点 square：实心方块

【2】原始清单

-- plain ＜ul plain＞

【3】清单排列方式

《1》—warp 清单垂直排列＜ul warp = vert＞

《2》清单水平排列＜ul warp = horiz＞

五、定义式清单

＜dl＞

＜dt＞项目1 </dt>

＜dd＞项目1说明 </dd>

＜dt＞项目2 </dt>

＜dd＞项目2说明 </dd>

＜dt＞项目3 </dt>

＜dd＞项目3说明</dd>

＜/dl＞

紧密排列 -- compact ＜dl compact＞ P.S.如此可使＜dt＞的内容与＜dd＞的内容在同一行，仅以数格空白相隔而不换行，但若＜dt＞的文字超过一定的长度后，compact的作用就消失了！

6.表单

一、基本架构

＜form action="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL" method="get或post"＞

.......... .......... ..........

＜/form＞

二、输入文件型表单

＜form action="URL" method="post"＞

＜input/＞

..........

＜/form＞

【1】栏位类型

-- type ＜input type=#＞

#号可为 text：文字输入

#号可为 password：密码

#号可为 checkbox：多选按钮

#号可为 radio：单选钮

#号可为 submit：接受按钮

#号可为 reset：重设按钮

#号可为 image：图形按钮

#号可为 hidden：隐藏栏位

【2】栏位名称

-- name ＜input name="资料栏名"＞ P.S.若type为submit和reset则name不必设定

【3】文件上的预设值

-- value ＜input value="预设之字串"＞

【4】设定栏位的宽度

-- size ＜input size=字元数＞

【5】限制最大输入字串的长度

-- maxlength ＜input maxlength=字元数＞

【6】预设checkbox或radio的初值

-- checked ＜input type=checkbox checked＞＜input type=radio checked＞

【7】指定图形的URL

-- src ＜input type=image src="图档名"＞

【8】图文对齐

-- align ＜input type=image align="#"＞

#号可为 top：文字对齐图片之顶端

#号可为middle：文字对齐图片之中间

#号可为buttom：文字对齐图片之底部

三、选择式表单

四、＜form action="URL" method="post"＞

＜select＞

＜option＞＜option＞

..........

＜/select＞

＜/form＞

A、＜select＞的属性

【1】栏位名称 -- name ＜select name="资料栏位名"＞

【2】设定显示的选项数 -- size ＜select size=个数＞

【3】多重选项 -- multiple ＜select multiple＞

B、＜option＞的属性

【1】定义选项的传回值 -- value ＜option value="传回值"＞

【2】预先选取的选项 -- selected ＜option selected＞

四、多列输入文字区表单

＜form action="URL" method="post"＞

＜textarea＞ .......... .......... ＜/textarea＞

＜/form＞

【1】文字区的变数名称

-- name ＜textarea name=变数名称＞

【2】设定文字输入区宽度

-- cols ＜textarea cols=字元数＞

【3】设定文字输入区高度

-- rows ＜textarea rows=列数＞

【4】输入区设定预设字串

＜textarea＞预设文字＜/textarea＞

【5】自动换行与否 –

- wrap ＜textarea wrap=#＞

#号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值）

#号可为virtual：表输入的文字在超过栏宽时会自动换行，没有换行符号

#号可为phisical：表输入的文字在超过栏宽时会自动换行，并且会显示换行符号。

【6】上传文件到服务器，可以采用表单的文件域控件。

【7】上传的数据不一定需要浏览者填写，这时可以用隐藏域控件传输数据。

【8】<fieldset></fieldset>非常适合对表单功能分组，其功能标题用<legend></legend>标签描述。

【9】表单控件都有name属性和id属性，都是用于编程时是对控件的引用，在页面中id的值不能重复，而name属性的值可以重复。

【10】<lable></lable>中的文字可以选定控件。

7.链接

一、连结至其他文件

＜a href="URL"＞说明文字或图片＜/a＞

target:_ self(自我覆盖，默认)_blank(创建新窗口打开新页面)_top(在浏览器的整个窗口打开，将会忽略所有的框架结构)_parent(在上一级窗口打开)

title:提示内容

二、连结至文件内之某一处（外部连结）（锚）

《1》起点

＜a href="档名#名称"＞..........＜/a＞

《2》终点＜a name="名称"＞

三、frame的超链接

【1】开启新的浏览器来显示链接文件 -- _blank ＜a href="URL" target=_blank＞

【2】显示链接文件於目前的frame -- _self ＜a href="URL" target=_self＞

【3】以上一层的分割视窗显示链接文件 -- _parent ＜a href="URL" target=_parent＞

【4】以全视窗显示链接文件 -- _top ＜a href="URL" target=_top＞

【5】以特定视窗显示链接文件 --＜a href="URL" target="特定视窗名称"＞

8.FRAME(frame)【帧】

一、分割视窗指令＜frameset＞..........＜/frameset＞

【1】垂直（上下）分割 -- rows

＜frameset rows=#＞

#号可为点数：如欲分割为100,200,300三个视窗，则

＜frameset rows=100,200,300＞；

#亦可以*号代表，如＜frameset rows=*,500,*＞

#还可以为百分比：如＜frameset rows=30%,70%＞，各项总和最好为100%

【2】水平（左右）分割

-- cols ＜frameset cols=点数或百分比＞

二ⅱ指定视窗内容

-- ＜frame＞

＜frameset cols=30%,70%＞

＜frame＞＜frame＞

＜/frameset＞

【1】指定视窗的文件名称 -- src ＜frame src=HTML档名＞

【2】定义视窗的名称 -- name

＜frame name=视窗名称＞

【3】设定文件与上下边框的距离

-- marginheight

＜frame marginheight=点数＞

【4】设定文件与左右边框的距离

-- marginwidth

＜frame marginwidth=点数＞

【5】设定分割视窗卷轴

-- scrolling

＜frame scrolling=#＞

#号可为 yes：固定出现卷轴

#号可为no：不出现卷轴

#号可为auto：自动判断文件大小需不需要卷轴（预设值）

【6】锁住分割视窗的大小

-- noresize ＜frame noresize＞