首页登陆欢迎您!
首页登陆 > 前端 > 唯有 90 时代的 Web 开垦者才记得那些

唯有 90 时代的 Web 开垦者才记得那些

时间:2019-12-13

唯有 90 时代的 Web 开垦者才记得那个

2016/04/26 · 根底手艺 · 2 评论 · WEB

本文由 伯乐在线 - dcscodelife 翻译,艾凌风 校稿。未经许可,防止转发!
阿尔巴尼亚语出处:holman。招待参预翻译组。

你已经强行把 <blink> 标签放入<marquee> 标签呢?最近Pique斯动画专业室拿到了装有荣誉,但是在 90 时代那个做准则是Computer动漫的伟大创举。通过整合三种标签,你成为了一个先行者。三个创意Infiniti的人。三个令全数人都崇拜的人。

在 90 时期,你已然是三个网页开辟者。

在立时,你通晓自个儿是三个卓绝的人物。伴随你而来的是极度大量的技革,从那个时候开首,大家还未赶趟做出喜好,技巧就早就开首复制开来了。

让我们先放下 jQuery,抛开非关系型数据库不谈:我们有更首要的事体要探究。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>『{$Think.config.web_name}管理平台』By ThinkPHP {$Think.version}</TITLE>
<load  file="../Public/css/{$Think.config.web_css_style|getDefaultStyle}.css" />
<style>
html{overflow-x : hidden;}
</style>
<base target="main" />
</HEAD>

Iframe用法精析

1×1.gif

1×1.gif 应有获得庞大的格莱美大奖。或然普利策新闻奖。也许近似六年级体育课上公布的拔尖进步奖。除了链式链表,它是计算机科学史上最关键的做到。它不是大家应得的今后,而是大家要求的前途(直到盒子模型通透到底代替了它)。

只要您尚未不熟稔大家的 1×1.gif 小把戏,请看上边:

图片 1

你能看到它吧,让大家加大学一年级些:

图片 2

The 1×1.gif

那个 1×1.gif – 要么 spacer.gif,大概 transparent.gif – 仅仅是一个长度宽度都以三个像素的透明 GIF 图像。

JavaScript

<IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

1
<IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

通过地点的代码,你能够把成分放置在页面包车型地铁其他义务上。

JavaScript

<TABLE> <TR> <TD><IMG SRC="1x1.gif" WIDTH=300> <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT> </TR> <TR> <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi"> </TR> </TABLE>

1
2
3
4
5
6
7
8
9
<TABLE>
  <TR>
    <TD><IMG SRC="1x1.gif" WIDTH=300>
    <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT>
  </TR>
  <TR>
    <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi">
  </TR>
</TABLE>

1×1.gif 让您毫不费事地在页面包车型客车其余位放置成分。直到明天了却,它仍然为独占鳌头的垂直居瓜月素的办法。

JavaScript

          

1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

图表对于你来说是还是不是太高端了?《HTML For Dummies》是还是不是截至第四章才介绍 <IMG> 标签?现在好了,你是幸运的:&nbsp; 标签来了!

您能够对友好说,“笔者清楚全部 HTML 实体编码。这些鸡骨支床的靓仔来此处干嘛的?”

听着,笔者相亲的精通的宜人的读者对象,那是二个现行反革命的后生未有予以丰硕重视的翻新:不断重复 &nbsp;。很像 1×1.gif 的小把戏,你能随随意便地扩展 &nbsp; 并用在别的你须要的地点:

JavaScript

PLEASE SIGN <BR>       MY GUESTBOOK BELOW: <HR><HR>

1
2
3
PLEASE SIGN  <BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MY GUESTBOOK BELOW:
<HR><HR>

在 90 时期,假诺作者每写下一个 &nbsp; 就得到五美分,笔者就能有充裕的钱支付来自U.S.在线的每月超额支出账单了。

<body >
<div id="menu" >
<TABLE cellpadding=0 cellspacing=0 >
<tr>
 <td height='5' colspan=7 ></td>
</tr>
<TR >
 <th ><IMG SRC="../Public/images/home.gif" WIDTH="16" HEIGHT="16" BO大切诺基DE奥德赛="0" ALT="" align="absmiddle"> <present name="Think.get.title"> {$Think.get.title}</present><notpresent name="Think.get.title">后台首页</notpresent> </th>
</TR>
<iterate id="item" name="menu" >
<eq name="item['group_id']" value="$menuTag">
<eq name="item['access']" value="1" >
<TR >
 <TD><div ><IMG SRC="../Public/images/comment.gif" WIDTH="9" HEIGHT="9" BORDER="0" align="absmiddle" ALT=""> <A name']}/index/" id="{$key}">{$item['title']}</A></div></TD>
</TR>
</eq>
</eq>
</iterate>
<tr>
 <td height='5' colspan=7 ></td>
</tr>
</TABLE>
</div>
<script language="JavaScript">
<!--
 function refreshMainFrame(url)
 {
  parent.main.document.location = url;
 }

<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe>

点下划线,边界效应

在 HTML 快走到她的纯金时代的错误疏失时,CSS 进场了,它带给了二个剧情和体制分离的世界,自此大家也发轫不停地管理劫难。

奋不管不顾身地自然是用 CSS 来删除链接的下划线效果。风度翩翩夜之间,整个因特网都沦为了这么些方式所带给的泥泞之中,文本看起来像链接,链接看起来像文本。你不清楚点哪个地方,不过漆黑并不曾持续多长期,因为大家注解了光标效果(你还从未活到你的鼠标有十贰个火球尾巴的时候)。

高档技巧的应用是这么斐然,以致于大概大家全部人都从意气风发在那以前就选拔CSS。笔者依旧在 2002 年的生龙活虎份 index.shtml(对,正是SSI)文书档案中发觉了证据:

JavaScript

<style type="text/css"> <!-- a:hover {text-decoration: none; color: #000000} --> </style>

1
2
3
4
5
<style type="text/css">
<!--
a:hover {text-decoration: none; color: #000000}
-->
</style>

正是它了!当然,那是 CSS 的内嵌样式。这么些样式令你的鼠标滑过链接时,删除链接的下划线并且链接的文字变黑。从今以后,交互作用式网址诞生了。

 if (document.getElementsByTagName("a")[0].href)
 {
refreshMainFrame(document.getElementsByTagName("a")[0].href);  
 }
//-->
</script>
</body>
</html>

<IFRAME>用于安装文本或图表的更换图像和文字框或器皿。

DHTML 动态超文本标志语言

就在我们具备了除去链接下划线的本事后,大家决定把它和四个强有力成效整合起来,那么些功效正是在页面加载的时候弹出七个音信框 alert("Welcome to my website!")。组合 CSS 和 JavaScript 的双面力量,大家拿到了一个本事怪兽:DHTML。

DHTML,表示“布满式 HTML”,这是网页开拓工具的万丈成就。它将经受住时间的核实,它能够使大家达成广大效率,举个例子雪花从页面顶上部分飘落下来,或许创设可折叠的菜单,动态的图片地图,又只怕除了选取语义标签 <div>,我们还是能够自定义 <marquee> 标签。

DHTML 支持 Web 开辟从业余爱好发展到二个三思后行的正式领域。相近 Dynamic Drive 那样的网址使您能够独自经过复制粘贴多个 50 行的代码块,就能够解决别的难题,而没有须要自身再出主意立异的缓和方法。实际上, DHTML 正是不行时代的 Facebook Bootstrap 框架。


BORDER

像素字体

老新时代的电脑显示器不是一点都不小。笔者的意趣是,即便自从阴极射线管显示器 CRT 诞生后,显示屏的尺码的确异常的大,然则它们的分辨率不高。因而,为了丰富利用像素,我们亟须用 6 个像素点来表示任性字符。

图片 3

从字里行间大家得以看看,当直面着那些轻便的无法再简单的字体,并且当发掘到这一个字体都以由像素结合的时候,Web 开采者们会渴望成为一个漫音乐家。所以您会在运行漫面上来看那多少个离奇的等距像素插图,那个开拓者的年月和金钱假诺投到那一个新上市的互连网企业会时有产生更多的股票总市值,并非萧条在安装 Photoshop 软件上。

<IFRAME BORDER="3"></IFRAME>

按钮

自己信赖大伙儿因而讨厌IE浏览器,都以因为IE浏览器屏弃了那时候那种最纯粹的样子

IE 4.0 是浏览器的不可偏废化身。它有着动态桌面。具有通道 Channels。对,就是伟大的人的平坦大路,那是最酷的能力,在此以前一贯未有在市道上被使用过,一点都未曾。同理可得,IE 4 太卓越了,无论你是或不是向往它,你都应该把它装到你的微型机上。

当您归属精英团队时,你深远通晓完美的价值,你有豆蔻梢头种与生俱来的冲动,你想告诉每二个你相逢的人你的调整。你,也可是唯有您有无法贫乏严正地做叁个宏伟的操纵。譬喻决定你的顾客使用什么浏览器浏览你的网址。

图片 4

这几个开关四处可以预知。宛如军人衣性格很顽强在费劲艰苦或巨大压力面前不屈上的绶带:向大家揭穿着他俩为了前段时间的光荣,曾经是如何努力大战的逸事。换句话说,无论你用哪贰个编辑器(当然是 FrontPage 98),无论你的 Web 服务器是如何(蠢人,当然是 吉优Cities),无论是 Web 环的哪位部分(那一个开关无论如何都将拉长你的网址排行)

自身牵记这段美好的时刻。最近大家在 Javascript上进展抽象,在空虚之上又扩充抽象。我们照旧都不知道什么正确地举办总计。每当想起大家什么走到前些天这一步,都令人十一分震憾。

让大家骄矜地举起酒杯,帮大家叁个忙:复制一批 &nbsp; 到你的下一个代码提交中,让您的团体成员非常意外吧。

1 赞 收藏 2 评论

设定围绕图像和文字框的边缘宽度

至于笔者:dcscodelife

图片 5

简单介绍还未有赶趟写 :) 个人主页 · 笔者的稿子 · 10 ·  

图片 6

FRAMEBODER

<IFRAME FRAMEBODER="0"></IFRAME>

设置边框是不否为3维(0=否,1=是)

HEIGHT,WIDTH

<IFRAME HEIGHT="31" WIDTH="88"></IFRAME>

设质边框的大幅和可观

SCROLLING

<IFRAME SCROLLING="NO"></IFRAME>

是或不是有滚动条(YES,NO,AUTO卡塔尔国

SRC

<IFRAME SRC="GIRL.GIF"></IFRAME>

钦点IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

“画中画”效果--谈IFRAME标签的采用

纵观时下网址,本来网速就有些慢,可是大约每页都要放什么Banner,栏目图片,版权等一大堆近似的事物,当然,出于网址风格统一、广告效应的内需,本无可非议,可到底让顾客的钱袋为那一个“点缀“的东西”日益消得钱憔悴”了,有未有法子,让那一个相同的事物叁遍下载后就无须再下载,而只下载那八个剧情有浮动区域的网页内容呢?

答案很自然:应用Iframe标志!

 

 

风流洒脱、Iframe标志的运用

提及Iframe,可能您曾经将之扔到“被忘记的角落”了,可是,提起其兄弟Frame就不会不熟悉了。Frame标识即帧标识,大家所说的多帧结构就是在三个浏览器窗口中显得五个HTML文件。将来,大家际遇风流浪漫种很具体的事态:如有二个课程,是生龙活虎节意气风发节地上,每页末尾做多个“上生机勃勃节“、“下生机勃勃节“的链接,除了每节教程内容不一之外,页面此外一些内容都以同等的,如若意气风发页风华正茂页地做笨页面,那犹如太令人恨到骨头里去了,这时候胡思乱想,假若有一种方法让页面别的地点不改变,只将课程做成大器晚成页意气风发页的剧情页,不含其它内容,在点击上下翻页链接时,只变动教程内容部分,别的保持不变,那样,一是省时,另则现在如教程有个山高水低的转移,也很便利,不致于牵一发而动全军了;更关键的是将那么些广告Banner、栏目列表、导航等大致每页的都有个别东西只下载叁回后就不再下载了。 Iframe标识,又叫浮动帧标识,你能够用它将八个HTML文书档案嵌入在八个HTML中显得。它分歧于Frame标记最大的特征即这些符号所援用的 HTML文件不是与其余的HTML文件相互独立显示,而是能够直接嵌入在一个HTML文件中,与那么些HTML文件内容交互作用融合,成为一个完完全全,其余,还是能够反复在三个页面内显示同风姿罗曼蒂克内容,而没有必要再次写内容,三个形象的譬喻即“画中画“电视机。

今昔我们谈一下Iframe标识的接收。

Iframe标识的应用格式是:

 

 

复制代码代码如下:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

 

src:文件的渠道,既可是HTML文件,也得以是文本、ASP等;

width、height:"画中画"区域的宽与高;

scrolling:当SRC的钦赐的HTML文件在钦点的区域不显不完时,滚动选项,假如设置为NO,则不现身滚动条;如为Auto:则自动现身滚动条;如为Yes,则展现;

FrameBorder:区域边框的增幅,为了让“画中画“与相近的从头到尾的经过相融合,常设置为0。

比如:

 

 

复制代码代码如下:

<Iframe src="";; width="250" height="200" scrolling="no" frameborder="0"></iframe>

 

二、父窗体与浮动帧之间的彼此决定 在脚本语言与对象档期的顺序中,包蕴Iframe的窗口我们誉为父窗体,而浮动帧则称为子窗体,弄清那三头的涉及很要紧,因为要在父窗体中访问子窗体或相反都必须要清楚对象等级次序,技艺透过程序来探访并垄断(monopoly卡塔尔(قطر‎窗体。

1、在父窗体中访谈并调整子窗体中的对象

在父窗体中,Iframe即子窗体是document对象的八个子对象,可以直接在剧本中访问子窗体中的对象。

现今就有一个主题素材,即,大家怎么着来决定那些Iframe,这里必要讲一下Iframe对象。当大家给这一个符号设置了ID 属性后,就可透过文书档案对象模型DOM对Iframe所含的HTML举行豆蔻梢头多种决定。

举例说在example.htm里停放test.htm文件,并垄断test.htm里一些符号对象:

 

 

复制代码代码如下:

<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>

test.htm文件代码为:

<html>

<body>

<h1 id="myH1">hello,my boy</h1>

</body>

</html>

 

如小编辈要转移ID号为myH1的H1标识里的文字为hello,my dear,则可用:

document.myH1.innerText="hello,my dear"(其中,document可省)

在example.htm文件中,Iframe标识对象所指的子窗体与日常的DHTML对象模型朝气蓬勃致,对目的访谈调节方式一样,就不再赘述。

2 、在子窗体中拜候并操纵父窗体中对象

在子窗体中大家能够通过其parent即父(双亲)对象来拜候父窗口中的对象。

如example.htm:

 

 

复制代码代码如下:

<html>

<body onclick="alert(tt.myH1.innerHTML)">

<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>

<h1 id="myH2">hello,my wife</h1>

</body>

</html>

 

万后生可畏要在frame1.htm中访问ID号为myH第22中学的标题文字并将之改为"hello,my friend",我们就能够这么写:

parent.myH2.innerText="hello,my friend"

此地parent对象就表示当前窗体(example.htm所在窗体卡塔尔,要在子窗体中访问父窗体中的对象,无风姿洒脱例外都经过parent对象来拓宽。

Iframe就算内嵌在另多个HTML文件中,但它保持相对的独门,是一个“独立王国“哟,在单生机勃勃HTML中的性格同样适用于浮动帧中。

试想一下,通过Iframe标识,我们可将那多少个不改变的内容以Iframe来表示,那样,不必再次写相符的故事情节,这有一些象程序设计中的进程或函数,减省了有一点繁琐的手工业劳动!其余,至关心珍重要的是,它使页面的更换更为实用,因为,不必因为版式的调动而校正每一个页面,你只需更正二个父窗体的版式就可以了。

有几许要潜心,Nestscape浏览器不协助Iframe标志,但在脚下IE的天下,那就像是也无大碍,普遍应用Iframe标志,既为本人(网址卡塔尔(قطر‎着了想,又为网上老铁节省了网费,何乐而不为?

例子

 

 

复制代码代码如下:

<iframe src="页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是还是不是有滚动条能够填no或yes" ></iframe>

<IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300></IFRAME>

 

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

用了iframe后 发掘滚动条白璧微瑕 想用2个图片来取代↑↓

有道是怎么落到实处啊?

回答:

用下列代码替换网页的

 

 

复制代码代码如下:

<title>..</title>

<SCRIPT LANGUAGE="javascript">

function scroll(n)

{temp=n;

Out1.scrollTop=Out1.scrollTop+temp;

if (temp==0) return;

setTimeout("scroll(temp)",80);

}

</SCRIPT>

<TABLE WIDTH="330">

<TR>

<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >

<DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">

文字

文字

 

文字

 

文字

 

文字

 

 

</DIV>

</TD>

<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1卡塔尔国" onmouseout="scroll(0卡塔尔(قطر‎" onmousedown="scroll (-3卡塔尔" BO汉兰达DE宝马X5="0" ALT="按下鼠标速度会更加快!"></TD>

</TR>

<TR>

<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1卡塔尔国" onmouseout="scroll(0卡塔尔国" onmousedown="scroll(3卡塔尔" BO昂CoraDERAV4="0" WIDTH ="15" HEIGHT="21" ALT="按下鼠标速度会更加快!"></TD>

</TR>

</TABLE>

 

内框架Iframe的使用

利用Iframe能够在壹位表格内调用三个外界文件,是那多少个有效的。本网址在众多页面上都使用了iframe效果。

前几天我们学一下Iframe标志的使用。

Iframe标志的利用格式是:

 

 

复制代码代码如下:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe>

src:文件的不二秘诀,既不过HTML文件,也能够是文件、ASP等;

width、height:"内部框架"区域的宽与高;

scrolling:当SRC的钦赐的HTML文件在钦赐的区域不显不完时,滚动选项,假若设置为NO,则不现身滚动条;如为Auto:则自动现身滚动条;如为Yes,则展现;

FrameBorder:区域边框的上涨的幅度,为了让“内部框架“与周边的剧情相融合,常设置为0。

name:框架的名字,用来进展甄别。

比如:

<Iframe src="" width="250" height="200" scrolling="Auto" frameborder="0" name="main"></iframe>

当您想用父框架调节个中框架时,能够使用: target="框架的名字"来决定。

IFrame也能够编写文字

有未有想过除了表单(<form>卡塔尔之外还会有别的的网页元素得以编写制定文字吗?只要使用IFrame的隐瞒的一个属性就能够使IFrame成为多少个文本编辑器。

<html>

<body onload="editer.document.designMode='On'">

<IFrame ID="editer"></IFrame>

</body>

</html>

里面designMode属性表示IFrame的设计方式的意况(开/关),还在犹豫什么吗,快试试吧!

上一篇:HTML5的在线视频播放方案 下一篇:没有了