HTML标记参考资料

当前位置 : 首页 > 网页制作 > CSS > HTML标记参考资料

HTML标记参考资料

来源: 作者: 时间:2016-02-19 09:07
网站建设与网页设计参考资料HTML标签详解HTML文档结构<html> //网页解析开始<head> //网页头部定义开始<title>标题<title> //定义标题显示于浏览器的标题栏内</head> //网页头部定

与参考资料

HTML标签详解

HTML文档结构

<html>                                //网页解析开始

<head>                                //网页头部定义开始

<title>标题<title>                  //定义标题显示于的标题栏内

</head>                               //网页头部定义结束

<body>                                //网页主体定义开始

网页主体内容

</body>                               //网页主体定义结束

</>                               //网页解析结束

以下是具体标记说明。

1.文件标题

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

2.文件更新--<meta>

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

<meta http-equiv="refresh"content=10>

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

<meta http-equiv="refresh"content="10;URL=欲连结文件之URL">

【3】设定网页过渡效果。如进入和退出效果

如:<metahttp-equiv="page-enter"content="revealtrans(duration=2,transition=2)">

各单词的含义如下:

equiva(equivalent):等效,等效的;

page-enter或page-exit:表示页面的过渡操作;

revealtrans:显示;表示网页显示的效果;

duration:持续,后面的数字表示显示的时间;

transition:转换,过渡,后面的数字表示网页过渡效果,你可以输入1-25的数字

4.预设的基准路径--<base><base href="放置文件的主机之URL">

版面

1.标题文字<h#>..........</h#>#=1~6;h1为最大字,h6为最小字

2.字体变化<font>..........</font>

【1】字体大小<font size=#>..........</font>#=1~7;数字愈大字也愈大

【2】指定字型<font face="字型名称">..........</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>

13.换行<br>

14.分段<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<bodybgcolor=#rrggbb>

【2】背景图案--background<bodybackground="图形文件名">

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

【4】文件内容文字的颜色--text<bodytext=#rrggbb>

【5】超连结文字颜色--link<bodylink=#rrggbb>

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

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

20.注解<!--..........--> (点表示注释部分)

符号

语法

&lt

&gt

&

&amp

"

&quot

空白(空格)

&nbsp

版权

& copy

注册商标

& reg

英镑

& pound;

21.特殊字元表示法(常见有以下几个)

 

 

 

 

 

 

图片相关属性

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.(地图链接)影像地图(ImageMap)

<img src="图形文件名"usemap="#图的名称">

<map name="图的名称">

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

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

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

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

【1】定义形状shape=rect:矩形shape=circle:圆形shape=poly:多边形

【2】定义区域coords

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

例:<area shape=rectcoords=100,50,200,75 href="/URL">

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

例:<area shape=circlecoords=85,155,30 href="/URL">

c.任意图形(多边形):将图形之每一转折点座标依序填入

例:<area shape=polycoords=232,70,285,70,300,90,250,90,200,78  href="/URL">

表格相关属性

1.定义表格<table>..........</table>

【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】设定表格边框色彩--bordercolor

<table  bordercolor=#rrggbb>

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】垂直位置--align<th align="#">#号可为

     top:向上对齐middle:向中对齐

     bottom:向下对齐

【3】栏位宽度--width

     <th width=点数或百分比>

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

     <th rowspan=欲合并栏位数>

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

<th colspan=欲合并栏位数>

清单列表相关属性

一、目录式清单

<dir><li>项目1<li>项目2<li>项目3</dir>P.S.目录式清单每一个项目不能超过20个字元(即10个中文字)

二、选项式清单<menu><li>项目1<li>项目2<li>项目3</menu>

三、有序号的清单<ol><li>项目1<li>项目2<li>项目3</ol>

【1】序号形式--type<oltype=#>或<litype=#>#号可为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>项目2<li>项目3</ul>

【1】项目符号形式--type<ul type=#>或<li type=#>#号可为disc:实心圆点(预设值)circle:空心圆点square:实心方块

【2】原始清单--plain<ul plain>

【3】清单排列方式--warp《1》清单垂直排列<ul warp=vert>《2》清单水平排列<ulwarp=horiz>

五、定义式清单<dl><dt>项目1<dd>项目1说明<dt>项目2<dd>项目2说明<dt>项目3<dd>项目3说明</dl>

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

表单相关属性

一、基本架构<form action="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL"method="get或post">..............................</form>

二、输入文件型表单<form action="URL"method="post"><input><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=checkboxchecked><input type=radiochecked>

【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:表输入的文字在超过栏宽时会自动换行

链接

一、连结至其他文件<a  href="/URL">说明文字或图片</a>

二、连结至文件内之某一处(外部连结)

《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="特定视窗名称">如right

_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件
_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架

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>

<noframe> </noframe> 不支持框架显示。

Tag:
网友评论

<