文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>[推荐]HTML代码简介

[推荐]HTML代码简介

时间:2007-03-09  来源:jessevictor

〓简介〓
有的时候,感觉高深的东东难懂了,回头看看基础的或许会有意外的收获!你也许做了很久的网页,但是对于什么是HTML?HTML有什么特点?这样简单的问题,你不一定能马上回答出来……

〓正文〓
HTML是 HyperText Tarkup Language的缩写,即超文本标记语言,是在WWW上建立超文本文件的语言,它通过标记和属性对一段文本的语言进行描述,它提供超文本连接,可以指向网络中另一台计算机的文件,HTML还支持在文本中镶入图象,声音,动画等不同格式的文件,HTML还具有强大的排版功能,利用HTML可以制作出任意版面的主页。

HTML有什么特点?
HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,其主要特点如下:
1 简易性,HTML版本升级采用超集方式,从而更加灵活方便。
2 可扩展性,HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。
3 平台无关性。虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上,这也是WWW盛行的另一个原因。

用什么可以编辑HTML?
HTML其实是文本,它需要浏览器的解释,HTML的编辑器大体可以分为三种,
1 基本编辑软件,使用WINDOWS自带的记事本或写字版都可以编写,当然,如果你用WPS来编写,也可以。不过存盘是请使用.htm或.html作为扩展名,这样浏览器就可以解释执行了。
2 半所见即所得软件,这种软件能大大提高开发效率,它可以使你在很短的时间内做出HOMEPAGE,且可以学习HTML,这种类型的软件主要有HOTDOG,还有国产的软件网页作坊。
3 所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,这类软件主要有FRONTPAGE98,DREAMWEAVER。

总类(所有HTML文件都有的)

文件类型 <HTML></HTML> (放在档案的开头与结尾)
文件主题 <TITLE></TITLE> (必须放在「文头」区块内)
文头 <HEAD></HEAD> (描述性资料,像是「主题」)
文体 <BODY></BODY> (文件本体)

结构性定义(由浏览器控制的显示风格)

标题 <H?></H?> (从1到6,有六层选择)
3.0 标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>
3.0 区分 <DIV></DIV>
3.0 区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文区块 <BLOCKQUOTE></BLOCKQUOTE> (通常会内缩)
强调 <EM></EM> (通常会以斜体显示)
特别强调 <STRONG></STRONG> (通常会以加粗显示)
引文 <CITE></CITE> (通常会以斜体显示)
码 <CODE></CODE> (显示原始码之用)
样本 <SAMP></SAMP>
键盘输入 <KBD></KBD>
变数 <VAR></VAR>
定义 <DFN></DFN> (有些浏览器不提供)
地址 <ADDRESS></ADDRESS>
3.0 大字 <BIG></BIG>
3.0 小字 <SMALL></SMALL>

与外观相关的标签(作者自订的表现方式)

加粗 <B></B>
斜体 <I></I>
3.0 底线 <U></U> (尚有些浏览器不提供)
3.0 删除线 <S></S> (尚有些浏览器不提供)
3.0 下标 <SUB></SUB>
3.0 上标 <SUP></SUP>
打字机体 <TT></TT> (用单空格字型显示)
预定格式 <PRE></PRE> (保留文件中空格的大小)
预定格式的宽度 <PRE WIDTH=?></PRE>(以字元计算)
N1.0+ 向中看齐 <CENTER></CENTER> (文字与图片都可以)
N1.0 闪耀 <BLINK></BLINK>
N1.0 字体大小 <FONT SIZE=?></FONT>(从1到7)
N1.0 改变字体大小 <FONT SIZE=+|-?></FONT>
N1.0 基本字体大小 <BASEFONT SIZE=?> (从1到7; 内定为3)
N2.0 字体颜色 <FONT COLOR="#$$$$$$"></FONT>

连结与图形

连结 <A HREF="URL"></A>
连结到锚点 <A HREF="URL#***"></A>(如果锚点在另一个档案)
<A HREF="#***"></A> (如果锚点目前的档案)
N2.0 连结到目的视框 <A HREF="URL" TARGET="***"></A>
设定锚点 <A NAME="***"></A>
图形 <IMG SRC="URL">
图形看齐方式 <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>
N1.0 图形看齐方式 <IMG SRC="URL"
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
取代文字 <IMG SRC="URL" ALT="***"> (如果没有办法显示图形则显示此文字)
点选图 <IMG SRC="URL" ISMAP> (需要CGI程式)
N2.0 点选图 <IMG SRC="URL" USEMAP="URL">
N2.0 地图 <MAP NAME="***"></MAP>(描述地图)
N2.0 段落 <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
3.0 大小 <IMG SRC="URL" WIDTH="?" HEIGHT="?">(以pixels为单位)
N1.0 图形边缘 <IMG SRC="URL" BORDER=?> (以pixels为单位)
N1.0 图形边缘空间 <IMG SRC="URL" HSPACE=? VSPACE=?> (以pixels为单位)
N1.0 低解析度图形 <IMG SRC="URL" LOWSRC="URL">
N1.1 用户端拉 <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">(使用端自动更新 )
N2.0 内嵌物件 <EMBED SRC="URL"> (将物件插入页面)
N2.0 内嵌物件大小 <EMBED SRC="URL" WIDTH="?" HEIGHT="?">

分隔

段落 <P> (通常是两个return)
3.0 段落 <P></P> (新定义成容器型标签)
3.0 文字看齐方式 <P ALIGN=LEFT|CENTER|RIGHT></P>
换行 <BR> (一个return)
N1.0 文字部份看齐方式<BR CLEAR=LEFT|RIGHT|ALL>(与图形合用时)
横线 <HR>
N1.0 横线对齐 <HR ALIGN=LEFT|RIGHT|CENTER>
N1.0 横线厚度 <HR SIZE=?> (以pixels为单位)
N1.0 横线宽度 <HR WIDTH=?> (以pixels为单位)
N1.0 横线比率宽度 <HR WIDTH=%> (以页宽为100%)
N1.0 实线 <HR NOSHADE> (没有立体效果)
N1.0 不可换行 <NOBR></NOBR> (不换行)
N1.0 可换行处 <WBR> (如果需要,可在此断行)

列举 (可以巢状列举)

无次序式列举 <UL><LI></UL> (<LI> 放在每一项前)
N1.0 公布式列举 <UL TYPE=DISC|CIRCLE|SQUARE>(定义全部的列举项)
<LI TYPE=DISC|CIRCLE|SQUARE>(定义这个及其後的列举项)
有次序式列举 <OL><LI></OL> (<LI> 放在每一项前)
N1.0 数标型态 <OL TYPE=A|a|I|i|1> (定义全部的列举项)
<LI TYPE=A|a|I|i|1> (定义这个及其後的列举项)
N1.0 起始数字 <OL value=?> (定义全部的列举项)
<LI value=?> (定义这个及其後的列举项)
定义式列举 <DL><DT><DD></DL>(<DT>项目, <DD>定义)
表单式列举 <MENU><LI></MENU>(<LI> 放在每一项前)
目录式列举 <DIR><LI></DIR> (<LI> 放在每一项前)

背景与颜色

3.0 重复排列的背景 <BODY BACKGROUND="URL">
N1.1+ 背景颜色 <BODY BGCOLOR="#$$$$$$"> (依序为红、绿、蓝)
N1.1+ 文字颜色 <BODY TEXT="#$$$$$$">
N1.1+ 连结颜色 <BODY LINK="#$$$$$$">
N1.1+ 看过的连结 <BODY VLINK="#$$$$$$">
N1.1 使用中的连结 <BODY ALINK="#$$$$$$">

特殊字元(以下标签需用小写)

特别符号 &#?; (其中 ? 代表 ISO 8859-1 的编码)
< < > > & & " "
注册商标TM &reg;
N1.0+ 注册商标TM &reg;
著作权符号 &copy;
N1.0+ 著作权符号 &copy;

表单 (通常需要与CGI程式配合)

定义表单 <FORM ACTION="URL" METHOD=GET|POST></FORM>
N2.0 上传档案 <FORM ENCTYPE="multipart/form-data></FORM>
输入栏位 <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
栏位名称 <INPUT NAME="***">
栏位内定值 <INPUT value="***">
已选定 <INPUT CHECKED> (适用於checkboxes与 radio boxes)
栏位宽度 <INPUT SIZE=?> (以字元数为单位)
最长字数 <INPUT MAXLENGTH=?> (以字元数为单位)
下拉式选单 <SELECT></SELECT>
下拉式选单名称 <SELECT NAME="***"></SELECT>
选单项目数量 <SELECT SIZE=?></SELECT>
多选式选单 <SELECT MULTIPLE> (多选)
选项 <OPTION>
内定选项 <OPTION SELECTED>
文字输入区 <TEXTAREA ROWS=? COLS=?></TEXTAREA>
输入区名称 <TEXTAREA NAME="***"></TEXTAREA>
N2.0 输入区换行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

表格

3.0 定义表格 <TABLE></TABLE>
3.0 表格框线 <TABLE BORDER></TABLE> (有或没有)
N1.1 表格框线 <TABLE BORDER=?></TABLE>(可以设定数值)
N1.1 储存格左右留白 <TABLE CELLSPACING=?>
N1.1 储存格上下留白 <TABLE CELLPADDING=?>
N1.1 表格宽度 <TABLE WIDTH=?> (以pixels为单位)
N1.1 宽度比率 <TABLE WIDTH=%> (页宽为100%)
3.0 表格列 <TR></TR>
3.0 表格列内容看齐 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 储存格 <TD></TD> (须与列并用)
3.0 储存格内容看齐 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 不换行 <TD NOWRAP>
N3.0 储存格背景颜色 <TD BGCOLOR=#$$$$$$>
3.0 储存格横向连接 <TD COLSPAN=?>
3.0 储存格纵向连接 <TD ROWSPAN=?>
N1.1 储存格宽度 <TD WIDTH=?> (以pixels为单位)
N1.1 储存格宽度比率 <TD WIDTH=%> (页宽为100%)
3.0 表格标题 <TH></TH> (跟<TD>一样,不过会对中并加粗)
3.0 表格标题对齐 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 表格标题不换行 <TH NOWRAP>
3.0 表格标题占几栏 <TH COLSPAN=?>
3.0 表格标题占几列 <TH ROWSPAN=?>
N1.1 表格标题宽度 <TH WIDTH=?> (以pixels为单位)
N1.1 表格标题比率宽度<TH WIDTH=%> (页宽为100%)
3.0 表格抬头 <CAPTION></CAPTION>
3.0 表格抬头看齐 <CAPTION ALIGN=TOP|BOTTOM>(在表格之上/之下)

视框 (定义与控制萤幕上的特定区域)

N2.0 视框格式总定义 <FRAMESET></FRAMESET> (取代<BODY>)
N2.0 视框行长度分配 <FRAMESET ROWS=,,,></FRAMESET>(pixels 或 %)
N2.0 视框行长度分配 <FRAMESET ROWS=*></FRAMESET> (* = 相对大小)
N2.0 视框栏宽度分配 <FRAMESET COLS=,,,></FRAMESET>(pixels 或 %)
N2.0 视框栏宽度分配 <FRAMESET COLS=*></FRAMESET> (* =相对大小)
N2.0 定义个别视框 <FRAME> (定义个别视框)
N2.0 个别视框内容 <FRAME SRC="URL">
N2.0 个别视框名称 <FRAME NAME="***"|_blank|_self|_parent|_top>
N2.0 边缘宽度 <FRAME MARGINWIDTH=?> (「左」与「右」边界)
N2.0 边缘高度 <FRAME MARGINHEIGHT=?> (「天顶」与「地底」边界)
N2.0 卷动条 <FRAME SCROLLING="YES|NO|AUTO">
N2.0 不可改变大小 <FRAME NORESIZE>
N2.0 无视框时的内容 <NOFRAMES></NOFRAMES>(如果浏览器不提供视框功能的话)
杂项

说明 <!-- *** --> (浏览器不会显示)
档案型态声明 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
3.0 档案型态声明 <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN">
可搜寻 <ISINDEX> (指示可搜寻的索引项)
N1.0 提示 <ISINDEX PROMPT="***"> (要求输入的提示文字)
送出搜寻条件 <A HREF="URL?***"></a> (其中的问号不是数字,而是「问号」)
基本档案的URL <BASE HREF="URL"> (必须放在「文头」区段内)
N2.0 基本视窗名称 <BASE TARGET="***"> (必须放在「文头」区段内)
相关性 <LINK REV="***" REL="***" HREF="URL"> (必须放在「文头」区段内)
背景资讯 <META> (必须放在「文头」区段内)
浮动帧标记IFRAME,空姐看来哦[/COLOR]

你的网页中一定有Banner,栏目图片,版权等一大堆雷同的东西,出于网站风格统一,本无可厚非,但是有没有办法,让这些雷同的东西一次下载后就不用再下载,而只下载那些内容有变化区域的网页内容呢? 人们首先想到了帧标记Frame,将整个页面划分为若干帧。可是Frame却不能随意指定帧的位置,它至少要有一条边与页面的四边重合,灵活性大受影响。为了能在页面的任何位置嵌入HTML文件,我们可以使用帧标记frame的兄弟浮动帧标记Iframe,虽然Nestscape浏览器不支持Iframe标记,但在时下IE的天下,这似乎也无大碍。
  Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文件嵌入在另一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,甚至可以在同一HTML文件嵌入多个HTML文件。
  在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或子窗体中访问父窗体都必须清楚对象层次,才能通过程序来访问并控制窗体。
下面是浮动帧标记Iframe的各项属性:
  一、基本语法:
  <iframe>……</iframe>
  浮动帧标记Iframe必须成对出现,即有开始标记<iframe>,就必须有结束标记</iframe>。

  二、浮动帧标记Iframe的属性:
  1、文件位置:
  语法:src=url
  说明:url为嵌入的HTML文件的位置,可以是相对地址,也可以是绝对地址。
  示例:<iframe src="iframe.html">
  2、对象名称:
  语法:name=#
  说明:#为对象的名称。该属性给对象取名,以便其他对象利用。
  示例:<iframe src="iframe.html" name="iframe1">
  3、ID选择符:
  语法:id=#
  说明:指定该标记的唯一ID选择符。
  示例:<iframe src="iframe.html" id="iframe1">
  4、容器属性:
  语法:height=# width=#
  说明:该属性指定浮动帧的高度和宽度。取值为正整数(单位为像素)或百分数。
  height:指定浮动帧的高度;
  width:指定浮动帧的宽度。
  示例:<iframe src="iframe.html" height=400 width=400>
  5、尺寸调整:
  语法:noresize
  说明:IE专有属性,指定浮动帧不可调整尺寸。
  示例:<iframe src="iframe.html" noresize>
  6、边框显示:
  语法:frameborder=0、1
  说明:该属性规定是否显示浮动帧边框。
  0:不显示浮动帧边框;
  1:显示浮动帧边框。
  示例:<iframe src="iframe.html" frameborder=0>
     <iframe src="iframe.html" frameborder=1>
  7、边框厚度:
  语法:border=#
  说明:该属性指定浮动帧边框的厚度,取值为正整数和0,单位为像素。为了将浮动帧与页面无缝结合,border一般等于0。
  示例:<iframe src="iframe.html" border=1>
  8、边框颜色:
  语法:bordercolor=color
  说明:该属性指定浮动帧边框的颜色。color可以是RGB色(RRGGBB),也可以是颜色名。
  示例:<iframe src="iframe.html" bordercolor=red>
  9、对齐方式:
  语法:align=left、right、center
  说明:该属性指定浮动帧与其他对象的对齐方式。
  left:居左;
  right:居右;
  center:居中。
  示例:<iframe src="iframe.html" align=left>
     <iframe src="iframe.html" align=right>
     <iframe src="iframe.html" align=center>
  10、相邻间距:
  语法:framespacing=#
  说明:该属性指定相邻浮动帧之间的间距。取值为正整数和0,单位为像素。
  示例:<iframe src="iframe.html" framespacing=10>
  11、内补白属性:
  语法:hspace=# vspace=#
  说明:该属性指定浮动帧内的边界大小。取值为正整数和0,单位为像素。两个属性应同时应用。
  hspace:浮动帧内的左右边界大小;
  vspace:浮动帧内的上下边界大小。
  示例:<iframe src="iframe.html" hspace=1 vspace=1>
  12、外补白属性:
  语法:marginheight=# marginwidth=#
  说明:该属性指定浮动帧的边界大小。取值为正整数和0,单位为像素。两个属性应同时应用。
  marginheight:浮动帧的左右边界大小;
  marginwidth:浮动帧的上下边界大小。
  示例:<iframe src="iframe.html" marginheight=1 marginwidth=1>

——iframe使用语法
<!ELEMENT IFRAME - - (%flow* -- inline subwindow -->
<!ATTLIST IFRAME
%coreattrs; -- id, class, style, title --
Longdesc %URI; #IMPLIED -- link to long description
(complements title) --
Name CDATA #IMPLIED -- name of frame for targetting --
Src %URI; #IMPLIED -- source of frame content --
Frameborder (1|0) 1 -- request frame borders? --
Marginwidth %Pixels; #IMPLIED -- margin widths in pixels --
Marginheight %Pixels; #IMPLIED -- margin height in pixels --
Scrolling (yes |no | auto) auto -- scrollbar or none --
Align %IAlign; #IMPLIED -- vertical or horizontal alignment --
Height %Length; #IMPLIED -- frame height --
Width %Length; #IMPLIED -- frame width --
>
Attribute definitions

Name = cdata [CI]
This attribute assigns a name to the current frame. This name may be used as the target of subsequent links.
longdesc = uri [CT]
This attribute specifies a link to a long description of the frame. This description should supplement the short description provided using the title attribute, and may be particularly useful for non-visual user agents.
src = uri [CT]
This attribute specifies the location of the initial contents to be contained in the frame.
noresize [CI]
When present, this boolean attribute tells the user agent that the frame window must not be resizeable.
scrolling = auto|yes|no [CI]
This attribute specifies scroll information for the frame window. Possible values
auto: This value tells the user agent to provide scrolling devices for the frame window when necessary. This is the default value.
yes: This value tells the user agent to always provide scrolling devices for the frame window.
no: This value tells the user agent not to provide scrolling devices for the frame window.
frameborder = 1|0 [CN]
This attribute provides the user agent with information about the frame border. Possible values:
1: This value tells the user agent to draw a separator between this frame and every adjoining frame. This is the default value.
0: This value tells the user agent not to draw a separator between this frame and every adjoining frame. Note that separators may be drawn next to this frame nonetheless if specified by other frames.
marginwidth = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be greater than zero (pixels). The default value depends on the user agent.
marginheight = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its top and bottom margins. The value must be greater than zero (pixels). The default value depends on the user agent.

Attributes defined elsewhere
id, class (document-wide identifiers)
title (element title)
style (inline style information)

把w3c的原文放在这里并不是想吓唬任何人,只是觉得应该告诉大家学习一门语法的方法。在能力允许的范围内尽可能自己去查阅原版的官方文档,这样你不仅可以拿到最完整的信息,而且这是一个高手成长之路。翻译的东西多半掺有个人想法,以及个人能力的有限都造成这样一种局面:很难在翻译的教材里面找到完整的相关信息,从而使个人的技术水平一直停留在相对低的水平。好了废话说了一大堆就是想和大家分享学习的方法。为了照顾到一些英文水平比较低的朋友,我就简要的做些翻译解释。

Iframe是个比较新的标识。但是从它的参数来说和普通的html标识没有什么大的区别,相
信大家都用过frame(框架)来布局你的网页,其实iframe和frame功能一样,不同的是它是个浮动框架,你可以把iframe布置在你网页中的任何位置,包括<layer>层中,这种极大的自由度可以给网页设计带来很大的灵活性,所以学会使用它是非常必要的。
下面介绍它的主要属性
Name="" 给框架命名,这样就可以使用你的命名为链接中的target属性提供参数
Src="" 当前框架所链接的页面地址
Frameborder="" 浮动框架的边框大小,默认值为1显示边框,一般最好设为0不显示
Marginwidth="" 浮动框架框边与插入页面之间空白的宽度,单位pixels
Marginheight="" 浮动框架框边与插入页面空白的高度,单位pixels
Scrolling="" 滚动条,有3个值:auto自动,yes 总是显示,no 不显示
align="MIDDLE" 可选值为 left, right, top, middle, bottom,作用不大
width=""
height="" 浮动框架的宽及长,单位pixels。
Noresize 浮动框架大小不可变
其它的属性就是id ,class ,title ,style。
举个例子:
<iframe src="yoroml.htm" name="yoroml" width="252" height="875" scrolling="no" frameborder=0 ></iframe>
使用Javascript制作连续滚动字幕[/COLOR]
文/暖阳

  我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的

滚动则是连续的,毫不间断。

  下面小阳为你介绍这是如何实现的。

  为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚
动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论

上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵

,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。

<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a>
<br> <a href="#">链接二</a>
<br> <a href="#">链接三</a>
<br> <a href="#">链接四</a>
<br> <!-- 字幕内容结束 -->
</div>
<!-- 以下是java-script代码 -->
<script language="java-script">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"; //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"; //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer"
style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",10);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
  
这样就完成了,感觉做起来也不难吧。
如何实现Iframe透明 [/COLOR]

tangzehuan(原作)
  第一次发表文章,有什么写不好的地方请多多包涵,另外想借此机会认识一些从事WEB设计的朋友,[email protected] QQ

37878073
  IE5.5和NN6以上的浏览器支持 Frame ,Iframe对象的allowTransparency 方法,如果某对象的背景颜色设置为Transparency的,

它将继承包含它容器的特性。我们可以通过这个特性实现透明背景的开/关。

代码如下:

a.html如下:

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY style="BACKGROUND-COLOR: transparent">
<H1>透明文档</H1>
<P>此IFRAME无背景颜色</P>
<P>BODY:<br><BODY STYLE="background-color:transparent"></P></BODY></HTML>

b.html如下:

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY style="BACKGROUND-COLOR: transparent">
<H1>透明文档</H1>
<P>此IFRAME 设为绿色。</P>
<P>BODY: <br><BODY STYLE="background-color:transparent"></P></BODY></HTML>

如果a.html透明的,它将继承IFRAME的背景颜色 如果容器IFRAME也是透明的,a.html将继承Iframe的父容器的颜色,如果一个对象不透

明,它将覆盖其容器的颜色,默认是透明的。

Internet Explorer 5.5 以上版本允许你设置透明属性,通过设置是否可被透明,你可以改变背景的颜色。[在不设置透明属性的情况下

,默认背景颜色为白色]

IFRAME定义如下:

<IFRAME ID="frame1" SRC="a.html" allowTransparency="true" HEIGHT=180 WIDTH=300> </IFRAME> <IFRAME ID="frame2"

SRC="b.html" allowTransparency="true" STYLE="background-color:#459800" HEIGHT=180 WIDTH=300> </IFRAME>

按钮定义如下:

<INPUT TYPE="button" VALUE="不透明" onclick="turnTransparencyOff()"> <INPUT TYPE="button" VALUE="透明"

onclick="turnTransparencyOn()">

HTML附加命名实体[/COLOR]

Latin Extended-B
&#402; &#402; &#402; Latin small f with hook, =function, =florin, U0192 ISOtech

Greek
Α Α Α Greek capital letter alpha, U0391
Β Β Β Greek capital letter beta, U0392
Γ Γ Γ Greek capital letter gamma, U0393 ISOgrk3
Δ Δ Δ Greek capital letter delta, U0394 ISOgrk3
Ε Ε Ε Greek capital letter epsilon, U0395
Ζ Ζ Ζ Greek capital letter zeta, U0396
Η Η Η Greek capital letter eta, U0397
Θ Θ Θ Greek capital letter theta, U0398 ISOgrk3
Ι Ι Ι Greek capital letter iota, U0399
Κ Κ Κ Greek capital letter kappa, U039A
Λ Λ Λ Greek capital letter lambda, U039B ISOgrk3
Μ Μ Μ Greek capital letter mu, U039C
Ν Ν Ν Greek capital letter nu, U039D
Ξ Ξ Ξ Greek capital letter xi, U039E ISOgrk3
Ο Ο Ο Greek capital letter omicron, U039F
Π Π Π Greek capital letter pi, U03A0 ISOgrk3
Ρ Ρ Ρ Greek capital letter rho, U03A1
Σ Σ Σ Greek capital letter sigma, U03A3 ISOgrk3
Τ Τ Τ Greek capital letter tau, U03A4
Υ Υ Υ Greek capital letter upsilon, U03A5 ISOgrk3
Φ Φ Φ Greek capital letter phi, U03A6 ISOgrk3
Χ Χ Χ Greek capital letter chi, U03A7
Ψ Ψ Ψ Greek capital letter psi, U03A8 ISOgrk3
Ω Ω Ω Greek capital letter omega, U03A9 ISOgrk3
α α α Greek small letter alpha, U03B1 ISOgrk3
β β β Greek small letter beta, U03B2 ISOgrk3
γ γ γ Greek small letter gamma, U03B3 ISOgrk3
δ δ δ Greek small letter delta, U03B4 ISOgrk3
ε ε ε Greek small letter epsilon, U03B5 ISOgrk3
ζ ζ ζ Greek small letter zeta, U03B6 ISOgrk3
η η η Greek small letter eta, U03B7 ISOgrk3
θ θ θ Greek small letter theta, U03B8 ISOgrk3
ι ι ι Greek small letter iota, U03B9 ISOgrk3
κ κ κ Greek small letter kappa, U03BA ISOgrk3
λ λ λ Greek small letter lambda, U03BB ISOgrk3
μ μ μ Greek small letter mu, U03BC ISOgrk3
ν ν ν Greek small letter nu, U03BD ISOgrk3
ξ ξ ξ Greek small letter xi, U03BE ISOgrk3
ο ο ο Greek small letter omicron, U03BF NEW
π π π Greek small letter pi, U03C0 ISOgrk3
ρ ρ ρ Greek small letter rho, U03C1 ISOgrk3
&#962; &#962; &#962; Greek small letter final sigma, U03C2 ISOgrk3
σ σ σ Greek small letter sigma, U03C3 ISOgrk3
τ τ τ Greek small letter tau, U03C4 ISOgrk3
υ υ υ Greek small letter upsilon, U03C5 ISOgrk3
φ φ φ Greek small letter phi, U03C6 ISOgrk3
χ χ χ Greek small letter chi, U03C7 ISOgrk3
ψ ψ ψ Greek small letter psi, U03C8 ISOgrk3
ω ω ω Greek small letter omega, U03C9 ISOgrk3
&#977; &#977; &#977; Greek small letter theta symbol, U03D1 NEW
&#978; &#978; &#978; Greek upsilon with hook symbol, U03D2 NEW
&#982; &#982; &#982; Greek pi symbol, U03D6 ISOgrk3

General Punctuation
&#8226; &#8226; &#8226; bullet, =black small circle, U2022 ISOpub
… … … horizontal ellipsis, =three dot leader, U2026 ISOpub
′ ′ ′ prime, =minutes, =feet, U2032 ISOtech
″ ″ ″ double prime, =seconds, =inches, U2033 ISOtech
&#8254; &#8254; &#8254; overline, =spacing overscore, U203E NEW
&#8260; &#8260; &#8260; fraction slash, U2044 NEW

Letterlike Symbols
&#8472; &#8472; &#8472; script capital P, =power set, =Weierstrass p, U2118 ISOamso
&#8465; &#8465; &#8465; blackletter capital I, =imaginary part, U2111 ISOamso
&#8476; &#8476; &#8476; blackletter capital R, =real part symbol, U211C ISOamso
&#8482; &#8482; &#8482; trade mark sign, U2122 ISOnum
&#8501; &#8501; &#8501; alef symbol, =first transfinite cardinal, U2135 NEW

Arrows
← ← ← leftward arrow, U2190 ISOnum
↑ ↑ ↑ upward arrow, U2191 ISOnum
→ → → rightward arrow, U2192 ISOnum
↓ ↓ ↓ downward arrow, U2193 ISOnum
&#8596; &#8596; &#8596; left right arrow, U2194 ISOamsa
&#8629; &#8629; &#8629; downward arrow with corner leftward, =carriage return, U21B5 NEW
&#8656; &#8656; &#8656; leftward double arrow, U21D0 ISOtech
&#8657; &#8657; &#8657; upward double arrow, U21D1 ISOamsa
&#8658; &#8658; &#8658; rightward double arrow, U21D2 ISOtech
&#8659; &#8659; &#8659; downward double arrow, U21D3 ISOamsa
&#8660; &#8660; &#8660; left right double arrow, U21D4 ISOamsa

Mathematical Operators
&#8704; &#8704; &#8704; for all, U2200 ISOtech
&#8706; &#8706; &#8706; partial differential, U2202 ISOtech
&#8707; &#8707; &#8707; there exists, U2203 ISOtech
&#8709; &#8709; &#8709; empty set, =null set, =diameter, U2205 ISOamso
&#8711; &#8711; &#8711; nabla, =backward difference, U2207 ISOtech
∈ ∈ ∈ element of, U2208 ISOtech
&#8713; &#8713; &#8713; not an element of, U2209 ISOtech
&#8715; &#8715; &#8715; contains as member, U220B ISOtech
∏ ∏ ∏ n-ary product, =product sign, U220F ISOamsb
&#8722; ∑ &#8722; n-ary sumation, U2211 ISOamsb
&#8722; &#8722; &#8722; minus sign, U2212 ISOtech
&#8727; &#8727; &#8727; asterisk operator, U2217 ISOtech
√ √ √ square root, =radical sign, U221A ISOtech
∝ ∝ ∝ proportional to, U221D ISOtech
∞ ∞ ∞ infinity, U221E ISOtech
∠ ∠ ∠ angle, U2220 ISOamso
⊥ ∧ ⊥ logical and, =wedge, U2227 ISOtech
&#8870; ∨ &#8870; logical or, =vee, U2228 ISOtech
∩ ∩ ∩ intersection, =cap, U2229 ISOtech
∪ ∪ ∪ union, =cup, U222A ISOtech
∫ ∫ ∫ integral, U222B ISOtech
∴ ∴ ∴ therefore, U2234 ISOtech
&#8764; &#8764; &#8764; tilde operator, =varies with, =similar to, U223C ISOtech
&#8773; &#8773; &#8773; approximately equal to, U2245 ISOtech
&#8773; ≈ &#8773; almost equal to, =asymptotic to, U2248 ISOamsr
≠ ≠ ≠ not equal to, U2260 ISOtech
≡ ≡ ≡ identical to, U2261 ISOtech
≤ ≤ ≤ less-than or equal to, U2264 ISOtech
≥ ≥ ≥ greater-than or equal to, U2265 ISOtech
&#8834; &#8834; &#8834; subset of, U2282 ISOtech
&#8835; &#8835; &#8835; superset of, U2283 ISOtech
&#8836; &#8836; &#8836; not a subset of, U2284 ISOamsn
&#8838; &#8838; &#8838; subset of or equal to, U2286 ISOtech
&#8839; &#8839; &#8839; superset of or equal to, U2287 ISOtech
⊕ ⊕ ⊕ circled plus, =direct sum, U2295 ISOamsb
&#8855; &#8855; &#8855; circled times, =vector product, U2297 ISOamsb
⊥ ⊥ ⊥ up tack, =orthogonal to, =perpendicular, U22A5 ISOtech
&#8901; &#8901; &#8901; dot operator, U22C5 ISOamsb

Miscellaneous Technical
&#8968; &#8968; &#8968; left ceiling, =apl upstile, U2308, ISOamsc
&#8969; &#8969; &#8969; right ceiling, U2309, ISOamsc
&#8970; &#8970; &#8970; left floor, =apl downstile, U230A, ISOamsc
&#8971; &#8971; &#8971; right floor, U230B, ISOamsc
&#9001; &#9001; &#9001; left-pointing angle bracket, =bra, U2329 ISOtech
&#9002; &#9002; &#9002; right-pointing angle bracket, =ket, U232A ISOtech

Geometric Shapes
&#9674; &#9674; &#9674; lozenge, U25CA ISOpub
Miscellaneous Symbols
&#9824; &#9824; &#9824; black spade suit, U2660 ISOpub
&#9827; &#9827; &#9827; black club suit, =shamrock, U2663 ISOpub
&#9829; &#9829; &#9829; black heart suit, =valentine, U2665 ISOpub
&#9830; &#9830; &#9830; black diamond suit, U2666 ISOpub


相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载