以文本方式查看主题

-  动网先锋论坛  (http://2007.hnzqw.com/index.asp)
--  网页特效  (http://2007.hnzqw.com/list.asp?boardid=59)
----  [外网资料]★启步学代码★  (http://2007.hnzqw.com/dispbbs.asp?boardid=59&id=42731)

--  作者:白云悠悠
--  发布时间:2007/10/10 18:58:22

--  [外网资料]★启步学代码★




收集自外网(供初学HTML代码的朋友参考)

启步学代码(1)

  在网上经常见到很多精彩漂亮的网页和贴图。这些佳作都是用各种代码和软件
  编辑出来的。很想学一点,可是看教材头就晕,入门难呵!后来采用从简入手,边学边测试,才学到一点点东东。没有专业知识,如何启步呢?只要你会电脑系统操作和26个英文字母就可以了。先看一遍HTML语言教材,看不懂也无关系,以
后回来再学习。学本领,读书还是要的。
  简略认识一下HTML代码。HTML是一种用来制作超文本文档的简单标记语言,与
普通文档不同,它可以加入文字、图片、声音、动画、影视等内容,可以从一个文
件跳转到另一个文件,与世界各地主机的文件连接,通过WWW浏览器显示出效果。它
的特点是用一对小尖括弧(“< 和 >")作为标签。所谓标签,就是它采用了一系列
的指令符号来控制输出的效果,这些指令符号用“<标签名字 属性>”来表示。而
且大部份是成对的双标签,即首标签和尾标签。
  可以用实际例子来理解标签的含义。我们要在页面上显示“网络世界”四个红色隶书大字,就必须用下面文字设置代码。
<font style=font:40pt face=隶书 color=ff0000>网络世界</font>

  显示结果:
网络世界

  这组文字设置代码在网络世界前面的是“始标签”,在网络世界后面的是“尾
标签”。始标签有一个标签名字和三个属性内容。尾标签在标签名字前加一斜杆即
可,不用标记属性内容。对照说明:

<font style=font:60pt face=隶书 color=ff0000>
网络世界
</font>

代码的第一行标签名 字号大小 什么字体 字的颜色
代码的第二行 文字内容
代码的第三行 尾标签

  在“网络世界”4个字前面加一个移动始标签<marquee>,后面加一个尾标签
</marquee>,这4个字就能移动了。
移动标签代码:
<marquee>网络世界</marquee>。
只有名称,没有其他属性内容时,系统默认从右向左走。显示结果:

网络世界

  增加移动标签的属性内容和属值,就能实现其他移动的方向和速度。例如为上
面“网络世界”四个大字从左向右走编一组代码:

<marquee direction=right scrollamount=2>
<font style=font:60pt face=隶书 color=ff0000>网络世界</font>
</marquee>
网络世界
代码的第一行是移动的始标签,内有标签名marquee和两个属性内容,即
direction=right移动方向和scrollamount=2移动速度。
代码的第二行和第三行是一组有三个属性内容的文字设置标签。“始标签 ”和文字内容以及“尾标签”都套在移动标签内。
代码的第四行是移动标签的结尾标签。

记住:HTML标签是成对的,前面有一个始标签,后面必须有一个尾标签,不可多也
不可少。 只有少数几个标签可以单独使用,如过行<br>代码就不用尾标签。

启步学习代码先从三个内容入手:
(一)文字设置或叫布局。
(二)表格(图框)设置。
(三)常用代码语句的应用。



--  作者:白云悠悠
--  发布时间:2007/10/10 19:02:29

--  (二)





收集自外网(供初学HTML代码的朋友参考)

启步学代码(2

先来学文字设置


文字设置三要素(三属值):

style=font:30pt    字的大小
color=navy    字的颜色
face=幼圆    那一种字体

文字设置的一组代码:

<font style=font:30pt face=隶书 color=ff0000>锦绣中华</font>

显示效果如下:
锦绣中华


相同的文字设置代码,三要素改变了,显示效果就不同。


<font style=font:40pt face=华文新魏 color=red>锦绣中华</font>

显示效果如下:

锦绣中华



<font style=font:80pt face=华文彩云 color=ff0000>锦绣中华</font>

显示效果如下:

锦绣中华
  

  你可以把(文字设置的一组代码)复制到记事本去,改为你喜欢的文字内容,让
后用回复的方式试贴,粘贴时注意先选择[HTML]标签,同时把自动修正的钩去掉。



设置字体大小还有一种叫标题字体。

<h#> ... </h#> #=1, 2, 3, 4, 5, 6,

<h1>人间正道是沧桑</h1>

人间正道是沧桑


<h2>人间正道是沧桑</h2>

人间正道是沧桑


<h3>人间正道是沧桑</h3>


人间正道是沧桑


<h4>人间正道是沧桑</h4>


人间正道是沧桑


<h5>人间正道是沧桑</h5>


人间正道是沧桑

<h6>影画世界论坛</h6>


人间正道是沧桑

标题字体默认黑色宋体,
故只有字体大小的变化。



常用字体代码

宋体 黑体   楷体_GB2312   仿宋_GB2312   新宋体   幼圆 隶书

方正舒体  华文新魏 华文行楷   华文细黑  华文彩云  方正姚体


 


常用颜色代码

      
#FF0000#FFFFf0#0000F#008000#FF00FF#FFF000

      
#008000#00FFFF#FFf000#993333#FFFF00#000099

      
#000066#009933#F00000#FFCC00#0099FF#33CCCC

      
#FFCCFF#33CC33#CC0000#3333CC#9900CC#993333

      
#993333#006600#FF9900#00CCFF#66FF33#003300


--  作者:白云悠悠
--  发布时间:2007/10/10 19:05:37

--  (三)





收集自外网(供初学HTML代码的朋友参考)

启步学代码(

文字显示位置的控制

文字显示位置分别为:

水平方向(align),垂直方向(valign)

水平方向即左中右:

left(左对齐)

center(居中)

RIGHT(右对齐)

垂直方向即靠顶和靠底

top(靠顶)、bottom(靠底)等。




水平方向即左中右的代码:

<p align=left><font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>

<p align=CENTER><font style=font:15pt face=黑体 color=fff000>表示居中</font></P>

<p align=RIGHT><font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>

显示效果如下:



向左对齐

示居中

向右对齐

 



实例:



明月朋友



祝你生日快乐!



20060228






















实例代码:

<CENTER>

<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58386410_22232948.jpg border=18>

<TBODY>
<TR>
<td align=center valign=top><br>
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
<p align=left>明月朋友</P><br>
<p align=CENTER>祝你生日快乐!</P><br><br><br><br>
<p align=RIGHT>20060228</P></B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>

 




垂直方向(valign)靠顶的代码:

<TD align=LEFT valign=top>居左靠顶</TD>
<TD align=center valign=top>居中靠顶</TD>
<TDalign=RIGHT valign=top>居右靠顶</TD>

垂直方向valign)靠底的代码:

<TD align=LEFT valign=bottom>居左靠底</TD>
<TD align=center valign=bottom>居中靠底</TD>
<TD align=RIGHT valign=bottom>居右靠底</TD>

  文字输出位置垂直方向的代码是设置在单元格里(TD),方便易用。但我只能在一个单元格中设一组代码。

实例如下:


居左靠顶的代码

align=LEFT valign=top




















代码:

<CENTER>

<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>

<TBODY>
<TR>
<TD align=LEFT valign=top><FONT style="FONT-SIZE: 25pt" face=华文行楷
color=#fff000><B>
居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B></FONT>

</TD></TR></TOBDY></TBODY></TABLE></CENTER>



文字输出位置垂直方向的实例二:










居右靠底的代码

align=RIGHT valign=bottom



















居右靠底的代码:


<CENTER>

<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg
border=18>

<TBODY>

<TR>

<TD align=RIGHT valign=BOTTOM><FONT style="FONT-SIZE: 25pt" face=华文行楷
color=#fff000><B>

居左靠顶的代码<BR><h3>align=RIGHT valign=BOTTOM</h3></B> </FONT>

</TD></TR></TOBDY></TBODY></TABLE></CENTER>

 


文字(或图片)放置的位置,还可以用空格(&nbsp;)和空行(BR)调整;

用代码编辑绝对位置挂贴(外部定位)等办法。


--  作者:白云悠悠
--  发布时间:2007/10/10 19:57:04

--  (四)





收集自外网(供初学HTML代码的朋友参考)

启步学代码(4

文字移动属性的设置


<marquee>内容文字或图片</marquee>

上面是最简单的移动标签。把它复制粘贴发表结果如下:


内容文字或图片



移动属性值主要的有几个内容:

移动方向  <DIRECTION=#>

速  度  <SCROLLAMOUNT=#>

方  式  <BIHAVIOR=#>

循  环  <LOOP=#>

延  时  <SCROLLDELAY=#>




启步先学方向和速度。

移动方向

direction=left  从右向左移

direction=right  从左向右移

direction=down  从上向下移

direction=up   从下向上移



移动代码:-文字从右向左移


<marquee scrollAmount="2" width="563">文字从右向左移!</marquee>


显示效果:


文字从右向左移!




移动代码:-文字从左向右移


<marquee scrollAmount="2" direction=right width="563">文字从左向右移!</marquee>


显示效果:


文字从左向右移!




移动代码:-文字从下向上移


<marquee scrollAmount="2" direction=up height="100">文字从下向上移!</marquee>


显示效果:


文字从下向上移!




移动代码:-文字从上向下移


<marquee scrollAmount="2" direction=down height="100">文字从上向下移!</marquee>


显示效果:


文字从上向下移!




移动代码:-文字左右往返移动


<marquee scrollAmount="12" behavior="alternate" width="563">文字往返移动!</marquee>


显示效果:


文字往返移动!




移动代码:-文字上下往返移动


<marquee scrollAmount="12" direction=up behavior="alternate"
height="150">文字往返移动!</marquee>


显示效果:


文字往返移动!





文字图片走四方的代码:


<table borderColor="#fff000" height="420" cellSpacing="1" cellPadding="10" width="650" border="3">
<tbody><td bgColor="#000000" width="650" height="420">

<marquee scrollAmount="3" direction="down" behavior="alternate" height="400">
<marquee scrollAmount="3" behavior="alternate" width="630">

<img src="http://www.dabaoku.com/gif/164/gif001.gif" orig_onmouseout="null" orig_onmouseover="null" width="65" height="128">

<font color="#fff000" size="3"><b>
欣赏文字图片走四方</b></font>

<img src="http://homediy.myrice.com/gif/cat/cat004.gif" orig_onmouseout="null" orig_onmouseover="null" width="79" height="78">

</marquee>
</marquee>

</td></tr></tbody></table>





 


文字图片走四方

欣赏文字图片走四方


--  作者:雪踪
--  发布时间:2007/10/11 0:04:08

--  

版主辛苦。
--  作者:麒子
--  发布时间:2007/10/17 8:59:10

--  
          谢谢白云悠悠版主,麒子收藏了!
--  作者:风铃草
--  发布时间:2007/10/17 13:03:32

--  
白云版主辛苦了!
--  作者:友情周末
--  发布时间:2007/10/19 0:05:29

--  友情复:(白云悠悠)白云版主辛苦了!
以下内容含脚本,或可能导致页面不正常的代码
说明:上面显示的是代码内容。您可以先检查过代码没问题,或修改之后再运行.