HTML5代码大全文档格式.docx

资源描述

HTML5代码大全文档格式.docx

《HTML5代码大全文档格式.docx》由会员分享，可在线阅读，更多相关《HTML5代码大全文档格式.docx（12页珍藏版）》请在冰豆网上搜索。

HTML5代码大全文档格式.docx

br>

　　　　　　　　　　　　插入一个回车换行符

blockquote>

/blockquote>

　　从两边缩进文本

dl>

/dl>

　　　　　　　　　　创建一个定义列表

dt>

　　　　　　　　　　　　放在每个定义术语词之前

dd>

　　　　　　　　　　　　放在每个定义之前

ol>

/ol>

　　　　　　　　　　创建一个标有数字的列表

li>

　　　　　　　　　　　　放在每个数字列表项之前，并加上一个数字

ul>

/ul>

　　　　　　　　　　创建一个标有圆点的列表

　　　　　　　　　　　　放在每个圆点列表项之前，并加上一个圆点

divalign=?

　　　　　　　　一个用来排版大块HTML段落的标签，也用于格式化表

二、HTML基本语法

文件格式<

html>

/html>

（文件的开头与结尾）

主题<

title>

/title>

（放在文件的开头）

文头区段<

head>

/head>

（描述文件的信息）

内文区段<

body>

/body>

（放此文件的内容）

标题<

/h>

（?

=1~6,改变标题字的大小）

标题对齐<

halign=right,left,center>

字加大<

big>

/big>

字变小<

small>

/small>

粗体字<

斜体字<

底线字<

/u>

上标字<

sup>

/sup>

下标字<

sub>

/sub>

居中<

center>

/center>

居左<

left>

/left>

居右<

right>

/right>

基本字体大小<

basefontsize>

（取值范围从1到7，默认值为3）

改变字体大小<

=1~7）

字体颜色<

fontcolor=#rrggbb>

（RGB色码）

指定字型<

fontface=?

=宋体，楷体等）

网址链结<

设定锚点<

以容易记为原则）

链结到锚点<

（同一份文件）

URL#?

/A>

（锚点不同文件）

显示图形<

图形位置<

align=top,bottom,middle,left,right>

（分别为上、下、中、左、右的位置）

图形取代文字<

alt=?

（无法显示图形时用）

图形尺寸<

width=?

height=?

以像素为单位）

连结图形边线<

border=?

图形四周留白<

hspace=?

vspace=?

段落<

/p>

断行<

/br>

横线<

横线厚度<

横线长度<

与页宽相比较）

实横线<

（无立体效果）

背景图案<

bodybackground=图形文件名>

（图形文件格式为gif和jpg）

背景颜色<

bodybgcolor=#rrggbb>

背景文字颜色<

bodytext=#rrggbb>

未链结点颜色<

bodylink=#rrggbb>

已链结点颜色<

bodyvlink=#rrggbb>

正在链结点颜色<

bodyalink=#rrggbb（RGB色码）

三、具体在做html文件前,我们还有哪些需要做的：

1、网页图象一般有什么要求？

　　受网络传输速度制约，图象要尽量小。

一般每幅最大不要20K。

图象格式一般为gif和jpg两种。

通常单调的可以考虑使用gif压缩。

用jpg处理照片比较合适，因为里面包含许多色彩的缓和变化。

不管是哪种，做好后都应压缩以给图片减肥，但不要压得太多而失真。

压缩可用JPEGOptimizer或ImageOptimizer两种工具，若用photoshop5.5做的图象，保存时直接用SaveForWeb可进行压缩。

另外，Gif格式可作成动画。

2、选择图片的网络存储空间

　　建议各位卖家们事先可以找一个稳定的空间来存放你的图片，以确保你的买家随时可以看到精美漂亮的商品。

注意：

不要把图片存放在免费相册里，因为这些相册的路径一般都是虚拟的，每一次浏览的URL都会改变，这对我们卖家来说是非常不好的。

另外要注意的一点是：

有一些买家反映看到的卖家商品的图片是小叉叉，这是因为一些卖家在用HTML粘贴图片的时候把自己电脑中C盘或者D盘（也就是本地路径）的图片的路径直接直接复制在命令中，这样就会造成卖家自己可以看到这些图片而你的买家们看到的则是叉叉！

所以卖家们在用HTML制作图片的时候一定要注意不要用本地路径直接粘贴图片！

四、练习的例子：

（红色字体部分即可修改成你自己的自定义）

第一：

用HTML来插入一个图片，

Key:

第二：

用HTML来插入一个URL，

点击我进入

第三：

插入url的同时，插入图片，点击图片就可以进入这个url，如做一个插入网园淘艺坊的图片链接代码：

src="

图片链接点击我进入

第四：

插入一段音乐

高山流水：

embedsrc="

width="

72"

height="

25"

autostart="

false"

loop="

align="

absmiddle"

controls="

smallconsole/playbutton/pausebutton/stopbutton"

/embed>

音乐链接点击我进入

1.结构性定义

文件类型<

HTML>

/HTML>

（放在档案的开头与

文件主题<

TITLE>

/TITLE>

（必须放在「文头」区块内）

文头<

HEAD>

/HEAD>

（描述性资料，像是「主题」）

文体<

BODY>

/BODY>

（文件本体）

（由浏览器控制的显示风格）

标题<

/H?

（从1到6，有六层选择）

标题的对齐<

ALIGN=LEFT|CENTER|RIGHT>

区分<

DIV>

/DIV>

区分的对齐<

DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY>

引文区块<

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>

斜体<

/I>

底线<

/U>

（尚有些浏览器不提供）

删除线<

/S>

下标<

SUB>

/SUB>

上标<

SUP>

/SUP>

打字机体<

TT>

/TT>

（用单空格字型显示）

预定格式<

PRE>

/PRE>

（保留文件中空格的大小）

预定格式的宽度<

PREWIDTH=?

（以字元计算）

向中看齐<

CENTER>

/CENTER>

（文字与图片都可以）

闪耀<

BLINK>

/BLINK>

（有史以来最被嘲弄的标签）

字体大小<

FONTSIZE=?

/FONT>

（从1到7）

改变字体大小<

FONTSIZE=+|-?

基本字体大小<

BASEFONTSIZE=?

（从1到7;

内定为3）

字体颜色<

FONTCOLOR="

#$$$$$$"

4.特殊字元（以下标签需用小写）

特别符号&

;

（其中?

代表ISO8859-1的编码）

注册商标TM?

N1.0+注册商标TM?

著作权符号?

N1.0+著作权符号?

5.表单（通常需要与CGI程式配合）

定义表单<

FORMACTION="

METHOD=GET|POST>

/FORM>

N2.0上传档案<

FORMENCTYPE="

multipart/form-data>

输入栏位<

INPUTTYPE="

栏位名称<

INPUTNAME="

***"

栏位内定值<

INPUTvalue="

已选定<

INPUTCHECKED>

（适用於checkboxes与radioboxes）

栏位宽度<

INPUTSIZE=?

（以字元数为单位）

最长字数<

INPUTMAXLENGTH=?

下拉式选单<

SELECT>

/SELECT>

下拉式选单名称<

SELECTNAME="

选单项目数量<

SELECTSIZE=?

多选式选单<

SELECTMULTIPLE>

（多选）

选项<

OPTION>

内定选项<

OPTIONSELECTED>

文字输入区<

TEXTAREAROWS=?

COLS=?

/TEXTAREA>

输入区名称<

TEXTAREANAME="

N2.0输入区换行方式<

TEXTAREAWRAP=OFF|VIRTUAL|PHYSICAL>

6.表格

3.0定义表格<

TABLE>

/TABLE>

3.0表格框线<

TABLEBORDER>

（有或没有）

N1.1表格框线<

TABLEBORDER=?

（可以设定数值）

N1.1储存格左右留白<

TABLECELLSPACING=?

N1.1储存格上下留白<

TABLECELLPADDING=?

N1.1表格宽度<

TABLEWIDTH=?

（以pixels为单位）

N1.1宽度比率<

TABLEWIDTH=%>

（页宽为100%）

3.0表格列<

TR>

/TR>

3.0表格列内容看齐<

TRALIGN=LEFT|RIGHT|CENTERVALIGN=TOP|MIDDLE|BOTTOM>

3.0储存格<

TD>

/TD>

（须与列并用）

3.0储存格内容看齐<

TDALIGN=LEFT|RIGHT|CENTERVALIGN=TOP|MIDDLE|BOTTOM>

3.0不换行<

TDNOWRAP>

N3.0储存格背景颜色<

TDBGCOLOR=#$$$$$$>

3.0储存格横向连接<

TDCOLSPAN=?

3.0储存格纵向连接<

TDROWSPAN=?

N1.1储存格宽度<

TDWIDTH=?

N1.1储存格宽度比率<

TDWIDTH=%>

3.0表格标题<

TH>

/TH>

（跟<

一样，不过会对中并加粗）

3.0表格标题对齐<

THALIGN=LEFT|RIGHT|CENTERVALIGN=TOP|MIDDLE|BOTTOM>

3.0表格标题不换行<

THNOWRAP>

3.0表格标题占几栏<

THCOLSPAN=?

3.0表格标题占几列<

THROWSPAN=?

N1.1表格标题宽度<

THWIDTH=?

N1.1表格标题比率宽度<

THWIDTH=%>

3.0表格抬头<

CAPTION>

/CAPTION>

3.0表格抬头看齐<

CAPTIONALIGN=TOP|BOTTOM>

（在表格之上/之下）

视框（定义与控制萤幕上的特定区域）

N2.0视框格式总定义<

FRAMESET>

/FRAMESET>

（取代<

）

N2.0视框行长度分配<

FRAMESETROWS=,,,>

（pixels或%）

FRAMESETROWS=*>

（*=相对大小）

N2.0视框栏宽度分配<

FRAMESETCOLS=,,,>

FRAMESETCOLS=*>

（*=相对大小）

N2.0定义个别视框<

FRAME>

（定义个别视框）

N2.0个别视框内容<

FRAMESRC="

N2.0个别视框名称<

FRAMENAME="

|_blank|_self|_parent|_top>

N2.0边缘宽度<

FRAMEMARGINWIDTH=?

（「左」与「右」边界）

N2.0边缘高度<

FRAMEMARGINHEIGHT=?

（「天顶」与「地底」边界）

N2.0卷动条<

FRAMESCROLLING="

YES|NO|AUTO"

N2.0不可改变大小<

FRAMENORESIZE>

N2.0无视框时的内容<

NOFRAMES>

/NOFRAMES>

（如果浏览器不提供视框功能的话）

2.连结与图形

连结<

AHREF="

连结到锚点<

URL#***"

（如果锚点在另一个档案）

#***"

（如果锚点目前的档案）

连结到目的视框<

TARGET="

设定锚点<

ANAME="

图形<

IMGSRC="

图形看齐方式<

ALIGN=TOP|BOTTOM|MIDDLE>

取代文字<

ALT="

（如果没有办法显示图形则显示此文字）

点选图<

ISMAP>

（需要CGI程式）

N2.0点选图<

USEMAP="

N2.0地图<

MAPNAME="

/MAP>

（描述地图）

N2.0段落<

AREASHAPE="

RECT"

COORDS="

,,"

HREF="

|NOHREF>

3.0大小<

WIDTH="

HEIGHT="

（以pixels为单位）N1.0图形边缘<

BORDER=?

N1.0图形边缘空间<

HSPACE=?

VSPACE=?

N1.0低解析度图形<

LOWSRC="

N1.1用户端拉<

METAHTTP-EQUIV="

Refresh"

（使用端自动更新）

N2.0内嵌物件<

EMBEDSRC="

（将物件插入页面）

N2.0内嵌物件大小<

3.分隔

段落<

（通常是两个return）

3.0段落<

/P>

（新定义成容器型标签）

3.0文字看齐方式<

PALIGN=LEFT|CENTER|RIGHT>

换行<

BR>

（一个return）

N1.0文字部份看齐方式<

BRCLEAR=LEFT|RIGHT|ALL>

（与图形合用时）

横线<

HR>

N1.0横线对齐<

HRALIGN=LEFT|RIGHT|CENTER>

N1.0横线厚度<

HRSIZE=?

N1.0横线宽度<

HRWIDTH=?

N1.0横线比率宽度<

HRWIDTH=%>

（以页宽为100%）

N1.0实线<

HRNOSHADE>

（没有立体效果）

N1.0不可换行<

NOBR>

/NOBR>

（不换行）

N1.0可换行处<

WBR>

（如果需要，可在此断行）

列举（可以巢状列举）

无次序式列举<

UL>

LI>

/UL>

（<

放在每一项前）

N1.0公布式列举<

ULTYPE=DISC|CIRCLE|SQUARE>

（定义全部的列举项）

LITYPE=DISC|CIRCLE|SQUARE>

（定义这个及其後的列举项）

有次序式列举<

OL>

/OL>

N1.0数标型态<

OLTYPE=A|a|I|i|1>

（定义全部的列举项）

LITYPE=A|a|I|i|1>

（定义这个及其後的列举项）

N1.0起始数字<

OLvalue=?

LIvalue=?

定义式列举<

DL>

DT>

DD>

/DL>

（<

项目,<

定义）

表单式列举<

MENU>

/MENU>

目录式列举<

DIR>

/DIR>

背景与颜色

3.0重复排列的背景<

BODYBACKGROUND="

N1.1+背景颜色<

BODYBGCOLOR="

（依序为红、绿、蓝）

N1.1+文字颜色<

BODYTEXT="

N1.1+连结颜色<

BODYLINK="

N1.1+看过的连结<

BODYVLINK="

N1.1使用中的连结<

BODYALINK="

7.杂项

说明<

--***-->

（浏览器不会显示）

--修改滚动条-->

styletype="

text/css"

body{

scrollbar-face-color:

#330033;

scrollbar-shadow-color:

#FFFFFF;

scrollbar-highlight-color:

scrollbar-3dlight-color:

scrollbar-darkshadow-color:

scrollbar-track-color:

scrollbar-arrow-color:

}

/style>

--修改滚动条结束-->

将上面的代码放在叶子代码的<

之间,颜色可根据自己的需要修改。

滚动条的代码意思如下：

Scrollbar-Face-Color为滚动条表面颜色设定；

Scrollbar-Track-Color为滚动条底板颜色设定；

Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定；

Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定；

Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定；

Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定；

Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。

跑馬燈

marquee>

...<

/marquee>

普通捲動

marqueebehavior=slide>

滑動

marqueebehavior=scroll>

預設捲動

marqueebehavior=alternate>

來回捲動

marqueedirection=down>

向下捲動

marqueedirection=up>

向上捲動

marqueedi

展开阅读全文