帮助排行榜

口袋妖怪网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 1406|回复: 4

HTML代码的使用.

[复制链接]

177

主题

7977

帖子

7803

积分

贵宾

威望
12
帅气
1
聪明
5
强壮
0
美丽
3
可爱
1
星沙
0
金钱
119299
发表于 2009-7-7 03:26:16 | 显示全部楼层 |阅读模式

文字标签

基本语法:<font>文字〈/font〉

可通过参数改变文字的大小,颜色,字体,粗细等等,如

<FONT style="FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: 黑体">文字</FONT>

效果:文字


注解:
style=" ; ",这里是设置文字的样式,各属性用分号隔开即可
font-size:字的大小,px是像素,说明文字大小18像素
color:这个不用多说了是颜色,可以用英文(red,blue,black,white,..)表示,同样可以用16进制格式表示color:#ffffff(#号加6位数字) f
font-family:看都看得出是字体了


同样还有简易的方法,如:

<FONT color=#cfcf88 size=7>文字</FONT>

效果:文字

可以简单的不用style直接用以上的来设置文字的颜色和大小
size:字号,1到7可以选择


加粗,倾斜,下划线,删除线

放在<font></font>标签中间

加粗:<b></b>或者<strong></strong>

如:<FONT style="FONT-SIZE: 20px"><STRONG>文字</STRONG></FONT>

效果:文字


倾斜:<i></i><EM></EM>

下划线:<u></u>

删除线:<STRIKE></STRIKE>


段落

标签:<p></p>

可以设置段落的样式,对齐方式如

<P align=right>文字</P>

注解:align为对齐方式,可选left,center,right,justify

讲到这就要和上面讲到的换行对应一下,回车符对应的是<p></p> |3
而shift+回车对应的则是换行符<br>


图片标签

基本语法:<img src=图片地址> (这是个不成对出现的标签)

原始图片<IMG src="http://ydxyya.bay.livefilestore.com/y1pfn1ozeGZE3R_q3pbLuRIepUFkbKmWxOoSOBHLkfsGmaCCE7y-jilc2gv42dltNsZNiqQp0IbpYWl3Cu8s3p_iWHt-0-sjtkh/%E5%9C%B0%E7%8B%B1%E5%B0%91%E5%A5%B305.JPG">


可以通过属性设置图片的大小:

通过样式控制大小

<IMG style="WIDTH: 96px; HEIGHT: 92px" src=http://ydxyya.bay.livefilestore.com/y1pfn1ozeGZE3R_q3pbLuRIepUFkbKmWxOoSOBHLkfsGmaCCE7y-jilc2gv42dltNsZNiqQp0IbpYWl3Cu8s3p_iWHt-0-sjtkh/%E5%9C%B0%E7%8B%B1%E5%B0%91%E5%A5%B305.JPG>


另外还可以还可以直接设置图片大小:

<IMG width=50 height=50 src=http://ydxyya.bay.livefilestore.com/y1pfn1ozeGZE3R_q3pbLuRIepUFkbKmWxOoSOBHLkfsGmaCCE7y-jilc2gv42dltNsZNiqQp0IbpYWl3Cu8s3p_iWHt-0-sjtkh/%E5%9C%B0%E7%8B%B1%E5%B0%91%E5%A5%B305.JPG>




超级连接标签

语法: <A href="地址">连接对象</A>

<A href=http://www.pokemon.name/>PMGBA</A>

效果:PMGBA


同样连接对象也可以是图片

如: <A href=http://www.pokemon.name/><IMG width=50 height=50 src=http://ydxyya.bay.livefilestore.com/y1pfn1ozeGZE3R_q3pbLuRIepUFkbKmWxOoSOBHLkfsGmaCCE7y-jilc2gv42dltNsZNiqQp0IbpYWl3Cu8s3p_iWHt-0-sjtkh/%E5%9C%B0%E7%8B%B1%E5%B0%91%E5%A5%B305.JPG></A>

效果:



播放器标签

播放器代码其实是很复杂的,这里就介绍最常用的简易标签

基本语法: <embed src=歌曲地址>

可设置参数:

width=300
heigth=50(当然也可以通过style样式,来设置大小)
loop=-1(循环次数,-1就是无限循环,1为播放一次结束)
autostart=1/0(1为自动播放,0为手动开始)
hidden=1/0(是否隐藏播放器)
showstatusbar=1/0(是否显示歌曲状态拦)

常见的就是上面的那些,具体的还有下面这些

showcontrols 属性:是否显示控制栏(包括播放控件及可选的声音和位置控件);
showaudiocontrols 属性:是否在控制栏显示声音控件(静音按钮和音量滑块);
showpositioncontrols 属性:是否在控制栏显示位置控件(包括向后跳进、快退、快进、向前跳进、预览播放列表中的每个剪辑);
showtracker 属性:是否显示搜索栏;
showdisplay 属性:是否显示显示面板(用来提供节目与剪辑的信息);
showcaptioning 属性:是否显示字幕显示面板;
showgotobar 属性:是否显示转到栏;
showstatusbar 属性:是否显示状态栏;

随便写一个:

<embed src=歌曲地址 width=300 height=48 showstatusbar=1 loop=-1 autostart=1>

这就是个长为300 高48 显示状态条 无限循环 自动的播放器



移动效果

语法: <marquee> 移动对象</marquee>

对象可是文字,图片,表格,播放器等等

同样可以通过设置图片大小的两种方法来设置对象活动的区域(注意,长和宽至少有一项是必须设置的)

width=300 height=300

或者style="width:300px;height:300px"

常用的参数可选的:

behavior:可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是slide,那么文本就移动到文档上,并停留在页边距上。如果设定为alternate,则文本从一边移动到另一边。如果设定为scroll,文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有:silide,alternate,scroll。 

direction:用于设定文本滚动的方向,可以设定的值有:left,right ,up,down。此属性不是必须使用的。

scrollamount:用于设定每个连续滚动文本后面的间隔,用来控制移动速度的,该间隔用像素表示。此属性不是必须使用的。

scrolldelay:用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。同样是用来控制滚动速度的,数值越大,速度越慢,如无特别的需要,推荐使用上边的书香控制!

如: <marquee width=100 height=100 direction=up> 插入文字</marquee>

插入文字


文本框标签

基本语法: <TEXTAREA></TEXTAREA>

<TEXTAREA style="WIDTH: 100px; HEIGHT: 100px">文字</TEXTAREA>

好像清风里直接贴文本框有点小问题,请嵌入表格中使用,没有一定基础不推荐使用这组标签,


表格标签

终于讲到了这个,着是最复杂的一个了,不单是语法,更是效果最多样化的,可以说html贴最精华的部分也就在这了

<TABLE>

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE>

可以看出是四层的标签

<td>这里控制单元格属性
<tr>控制行属性
<table>控制表格属性

width:宽度(适用于table和td)
height:高度(适用于table,tr,td)
cellSpacing:单元间距,单元格与表格边线、两单元格之间的距离(适用与table)
cellPadding:单元边距,单元格内的内容距单元格边线的距离(适用于table)
border:边框厚度(适用于table)
bgcolor:背景色(适用于table和td,两个可同时设置)
background:背景图片(实用于table和td,两个可同时设置,不要与背景色重复使用)


下面举几个简单的例子:

1.最简单的在图片上写字

<table bordercolor=#841a00 height=280 cellPadding=1 width=580 background=http://xmbljg.bay.livefilestore.com/y1p0q3lSd8PYyY890XUFpYFQtGoWNw3yvMyhN4O2hd7_gzFFRIbJ1tFOBLWvrgQOT3L5hU48QDNDqC5Grfch8-TQCla_DGNOQLD/4092851920090508234719042.jpg border=2>

<tbody>

<tr>

<td>输入文字 </td></tr></tbody></table>

效果:

输入文字


如不需要边框的话 边框厚度设置成0就好了,就会出现下面的效果:

<table bordercolor=#841a00 height=280 cellPadding=1 width=580 background=http://xmbljg.bay.livefilestore.com/y1p0q3lSd8PYyY890XUFpYFQtGoWNw3yvMyhN4O2hd7_gzFFRIbJ1tFOBLWvrgQOT3L5hU48QDNDqC5Grfch8-TQCla_DGNOQLD/4092851920090508234719042.jpg border=0>

<tbody>

<tr>

<td>输入文字 </td></tr></tbody></table>

输入文字


2.背景填充色:

<TABLE borderColor=aqua height=150 cellSpacing=10 width=400 bgColor=yellow border=30>

<TBODY>

<TR>

<TD bgColor=white>输入文字</TD></TR></T></TBODY></TABLE>

输入文字


对齐方式

讲了上面的那么多,大家应该注意到一个很重要的问题,就是对齐方式的问题,对齐方式会直接影响到实际效果:

align:横向对齐 常用到有left,right,center

因为适用对象很多(主要有<p>,<table><td>,<marquee>),所以单独拿出来讲!

如: <p align=center>段落内容<p>
(段落内可以是任何内容,表格,文字,播放器,图片,走马灯,段落等等)

如放在 <talbe>内,则可以控制整个表格相对于外部的对齐方式
放字<td>内则控制单元格内部的内容相对表格的对齐方式


valign:纵向对齐 常用到的属性有top,center,bottom

适用对象(<table>,<td><marquee>)

如: <td valign=top>段落内容<td>

写到这,标签基本上算是讲完了

[此贴子已经被作者于2009-7-7 4:54:19编辑过]

177

主题

7977

帖子

7803

积分

贵宾

威望
12
帅气
1
聪明
5
强壮
0
美丽
3
可爱
1
星沙
0
金钱
119299
 楼主| 发表于 2009-7-7 03:28:00 | 显示全部楼层

算是整理好了..

[此贴子已经被作者于2009-7-8 2:08:36编辑过]
回复 支持 反对

使用道具 举报

68

主题

5812

帖子

5057

积分

冲浪者

金灿灿的金坷垃

威望
4
帅气
0
聪明
0
强壮
0
美丽
0
可爱
1
星沙
0
金钱
19216
发表于 2009-7-7 10:53:00 | 显示全部楼层
好的......
这下很多新人应该知道怎么插入图片了.........
【我不知道自己是不是在潜水】
回复 支持 反对

使用道具 举报

10

主题

150

帖子

182

积分

捉虫少年

威望
0
帅气
0
聪明
21
强壮
3
美丽
6
可爱
1
星沙
0
金钱
951
发表于 2009-7-7 11:24:00 | 显示全部楼层
在论坛里插入图片不用这样弄吧楼上的
回复 支持 反对

使用道具 举报

177

主题

7977

帖子

7803

积分

贵宾

威望
12
帅气
1
聪明
5
强壮
0
美丽
3
可爱
1
星沙
0
金钱
119299
 楼主| 发表于 2009-7-7 12:12:00 | 显示全部楼层
这些代码不适合新人使用的 只会对有一定基础的人有所帮助

当然也可以当作学习参考的资料.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|PMGBA ( 闽ICP备06006686号  

GMT+8, 2016-12-10 11:12 , Processed in 0.295907 second(s), 33 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表