HTML技巧100例 | |
1. 链接控制
2. 链接提示
3. 背景音乐
4. 设置主页的缺省字符语言为简体中文(适用于Netscape)
5. 链接的不同方式
6. 强制主页每次都不进行缓存,而从服务器上重读
7. 自动刷新
8.提前载入图片
9. 自动连接
10. 自动换行:
11. 用单像素的GIF文件控控制文本位置 要想准确的控制HTML中的文本位置,可以做一个1*1的透明图(如Blank.gif)。然后在HTML中加入代码: 12. 容器标记 <BLOCKQUOTE></BLOCKQUOTE>标记可以把网页上所有的对象都包括起来,但不能对它加入变量。 13.设定图形大小 为使您的Web页在图形下载完之前,能够立即显示文字内容。 14. 移动文字 这在主页上是常用的,其制作方法很简单。 15.如何去掉主页超链接的下划线? 把下列语句放在<head>...</head>之间 更简单的是 16. 浮动背景(背景图像不滚动 ) 当你拉住下拉条时,背景不动。(会使浏览速度减慢。:-( )加入: 或用CSS样式表定义: 17. 让背景图像不平铺 18. 测试浏览器类别并自动装入不同的网页 目前微软和网景的浏览器并不能完全兼容所有网页,有的在某种浏览器里非常漂亮,而用其它浏览器查看时却一团糟。如果你需要测试浏览器,可以加入以下JavaScript代码并保存单独一个网页: <script language="JavaScript"> 19. 定义本网页的关键字 在网页中加入关键字,可以供某些搜索站台机器人的使用,它们会利用该关键字为你的网站做索引,这样,当别人用关键字搜索网站时,如果你的网页包含该关键字,那么就可以被列出了,定义本网页关键字,可以加入以下代码: 20. 在网页中加入E-mail链接并显示预定的主题 <a href=mailto:cnshell@163.com?subject=hello> 21. 隐藏在状态栏里出现的链接信息 当指向一个链接时,该链接的信息会出现在浏览器状态栏里,如果需要隐藏信息,可以如下设置: 22. 在网页中将表单提交给自已的电子邮箱 表单提交需要CGI程序的支持,但你也可以利用E-mail 提交,当你设计好表单后,把action 内容加入邮件地址即可,如下: 23. 隐藏免费计数器的的图标 许多网友使用免费计数器,它能帮助你分析网站的流量,如果你想隐藏该服务图标,可以把服务代码中的width=88 height=31都改为1即可。 24. 在网页中加入最后修改日期 在body 中加入以下代码即可: 25. 打开一个新的浏览器窗口并设置窗口的属性 如果你需要在载入站点的同时,再打开另一个新窗口,加入以下代码即可: <script language="JavaScript"> 期中pop.htm可以设置为你的htm文件,对于设置新窗口的属性,对照以下设置: popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto'); width:宽,height:高,resizable:是否允许访客缩放新窗口,scrollbars:如果文本超过一屏,是否生成滚动条,status:是否显示状态栏,menubar:是否显示菜单,location:是否显示地址栏. 以上所有属性使用格式为:属性=yes或者no.而width和height两个属性为:width=#pixels,height=#pixels. 26.怎样判断服务器使用的操作系统? 在浏览器地址栏里,输入要察看的服务器地址,一定要包含目录和文档名字,然后回车,出现请求页面,试着把文档名改为大写格式,如果返回该页面不存在,那么可能该服务器使用的操作系统为unix或macintosh,如果页面内容返回,那么可能该服务器为windwos操作系统,因为windows对大小写不敏感. 27. 怎样提高站点在搜索引擎中被搜索到的机会? 当你把自己站点登记到搜索引擎中后,并不表示你的站点就会被经常搜索到,如何提高这个几率呢,很简单,你的主页一般会有一个标题,一般设置在<title></title>中间,这时,你可以在设置完标题后,跟着把关键字也设置在这里,比如: 28. 如何测试网站的下载速度? 准备一个能读秒的表,比如跑步表,这样精度高些,当然也可以使用普通的表. 首先我们测试纯文本的下载时间,打开浏览器,关闭下载图片功能,然后连接上网,在地址栏输入站点地址,回车后,计时开始,当全部文本内容下载完后,停止计时. 如果你要测试整个站点下载速度,打开图片下载功能,如果你站点含有JavaScript,也要在浏览器选择为支持,同上,打入地址,回车,计时开始,当所有内容下载完后,停止计时. 经过以上两种测试,你就会对自己站点的连接下载速度,作到心中有数了. 29. 如何让站点自动跳转到另一页? 加入以下代码到HTML文件中即可: 61. 制作动态页面的步骤是怎样的? 第一步:设计页面及寻找页面需要的材料; 第二步:完成普通页面的制作,此时无须涉及动态主页内容; 第三步:为页面文字增加层叠样式表,以改变文字颜色,链接等; 第四步:为页面增加交互性内容,如cgi,javascirpt,activeX控件等,这是把页面动态的关键; 第五步:测试动态页面以适应更多浏览器; 第六步:发布动态页面并在上面标明该页是动态页面(dhtml)。 62. 如何让访问者单击加入站点书签? 总希望访问者能能把你的站点,加入到他们的书签里,这里有个好办法: 在<HEAD></HEAD>部分加入: <script language="JavaScript"><!-- function addbookmark() {window.external.AddFavorite("http://www.yy0736.com","夜鹰在线");} //--> 然后在<BODY></BODY>部分加入: <script language="JavaScript"> 63. 是否可以利用大写体来书写HTML标签元素? 对于大多数HTML标签元素,你可以利用大写体或小写体及两者的混合体来书写标签元素。比如: <html></html>和<HTML></HTML>同等有效。 但如果是特殊字符的标签元素,你只能使用小写体。比如版权的字符的标签元素是:© 显示©,如果写成©,那么页面将完全显示©。 64. 如何在页面利用单击来关闭浏览窗口? 在<BODY></BODY>部分加入以下代码: <a href="javascript:window.close()">关闭窗口</a> 65.如何为页面设置访问口令? 有时候你需要为某一页设置密码,以让合适的人进来。在<head></head>部分加入: <script language="JavaScript"><!--var pd="" var rpd="bullbat" pd=prompt("请您输入密码:","")if(pd!=rpd){ alert("您的密码不正确...")history.back()}else{alert("您的密码正确!")window.location.href="flash.htm"} 在以上代码中,"bullbat"就是正确的密码。"flash.htm"是当输入正确密码后链接的页面。这种设置口令的方法并不安全,因为只要访问者查看页面源代码就能知道设置的密码了。 66.如何为访问者设置正确的软件下载链接? 与其它链接一样,都使用<a></a>标签。但对于软件下载链接,你需要这样设置: <a href="/wbzx.zip">下载wbzx.zip (188kb)</a> 67. 如何删除图片链接的蓝色边框? 如果我们设置了图片为一个链接,会发现图片四周出现了蓝色边框。要删除边框,需要在图片标签里加上border="0"。如:<img src="/dog.jpg" border="0"> 68. 如何为链接提供一个按钮? <form ACTION="cnshell.htm" METHOD="GET"> <p><input TYPE="submit" VALUE="单击这里" NAME="cnshell"></p> </form> 69.如何知道站点的流量来至那里? 如果你拥有站点服务器的管理权,那么这是个很简单的问题,查查服务器日志就可以了。但目前你没有那权力,不过可以由第三方提供流量数据。易数是个不错的选择,链接到站点http://best.netease.com/申请,然后把代码加入到页面即可。当你想知道流量时,单击易数图标,在统计页面中,单击分析即可。 70.如何让浏览器正确显示word文件格式? 为了正确处理word等格式,你需要在HTML文件中设置好该文件类型,比如: <meta http-equiv="Content-Type" content="Application/msword"> 还有其它经常设置的文件类型: Application/msword Microsoft Word Document application/pdf PDF Documentapplication/wordperfect6.0 WordPerfect 6.0 Documentapplication/zip ZIP archiveaudio/x-wav WAV audio formataudio/midi MIDI audio formataudio/x-pn-realaudio RealAudioimage/gif GIF image formatimage/jpeg JPEG image formatimage/png PNG image formattext/html HTML documenttext/plain Plain textvideo/mpeg MPEG video formatvideo/quicktime QuickTime video formatvideo/x-msvideo AVI video format 71.如何知道自己的图片被其它网站使用? 如果你为自己站点的图片起了一个独特的名字,也就是不容易重名,比如tt124.jpg.那么链接到站点:http://www.altavista.com/,在搜索栏里输入tt124.jpg.然后开始查找,如果有站点采用了tt124.jpg图片,该站点就会被列出。AltaVista搜索引擎是一个以机器人搜寻为主的站点,它的机器人会不停地把整个网络的页面作上索引,所以,你可以在那里找到和你相关的任何东西,把你的名字的拼音输输入看看,找到什么啦。 72.如何缩进文本段落? 在<head></head>部分加入: P { text-indent: 1% } P标签为HTML文本段落的标签,1%为缩进的范围。 72. 如何正确使用分隔线? 如果你使用FrongPage98,这里我再假设你需要分隔页面左右两部分内容,先利用表格工具拖出三个横行表格,把内容分别放置到左右两个单元,然后把中间的单元的宽度设置为1个Pixels,并填入所需要的颜色。你还需要把所有表格及单元的大小单位都设置为Pixels即可。 73.为什么有的站点下载很慢? 因为网页用了过多的图片,为了追求COOL的效果用了大量的Java Applet,过多使用<TABLE>,这些都是不可取的。对于图片必须要用的压缩再用,对于Java Applet绝对不用,它会让机器配置低的访问者的硬盘狂读不止。对于需要的动态页面,可利用CSS和JavaScript实现。 74. 如何让字体显示的更舒服? 这需要利用到CSS(层叠样式表),目前约定俗成的字体是:{ font-family:宋体(GB); font-size: 9pt; line-height: 16px },把这段代码加入到<head></head>之间。如: <head> font-family:宋体(GB)是设置的字体;font-size: 9pt是字体的大小;line-height: 16px是文本行的上下间隔。 75. 如何让网页兼容IE和NN两种浏览器? 完全的兼容是不可能的。目前IE浏览器占有量大大超过NN浏览器,所以你只需要兼容IE浏览器即可。当然你也可以制作两套网页,利用JavaScript来检测不同浏览器以装入相应网页。 76. 如何正确使用字体? 设置文本字体是网页制作中很重要的的环节,但因为并不是每一位访问者都有你设置的字体,所以尽量使用操作系统默认的字体宋体,黑体,楷体。对于其它类型字体可以用图形方式实现。 78.如何制作繁体版本网页? 如果你使用E-Port的网页作坊工具制作页面,那就可以利用工具菜单下的GB转BIG5来把简体网页变成繁体网页。如果你用其它工具也可以利用网页作坊的GB转BIG5来制作繁体网页,利用网页作坊打开页面,点选工具菜单下的GB转BIG5转换网页并保存。要注意的是,你需要把原<meta http-equiv="Content-Type" content="text/html; charset=gb2312">中的charset=gb2312改为charset=big5,这样,访问者的浏览器就会自动识别了。(E-Port的网页作坊下载地址:http://e-port.soim.net/) 77. 利用水平线(HR)制作垂直线? 插入HR很简单:<hr size="1">。如何让它垂直呢,更简单:<hr size="100" width="1"> 78. 与其它站点交换连接需要什么? 当然,你首先要有一个个人站点,然后准备好两个站点LOGO。一般来说,400x40和88x31两种LOGO是必需的,其它也可以准备一个100x31的LOGO。400x40的LOGO用于象网盟这样的广告交换站点,88x31和100x31用于个人站点之间的交换。 79. 如何让下拉式菜单中的链接来打开一个新的窗口? 先把下拉式菜单设置好,如: <form method="POST"> 然后把<select name="D1" size="1">改为 <select onChange="javascript:window.open(this.options[this.selectedIndex].value)">即可。 80. 如何正确对齐文本? 有时,我们需要对一段文本的左右,上下的边距(指文本至浏览器的距离)加以指定以使文本正确对齐,CSS(层叠样式表)提供这样的功能: 在<head></head>中加入 <style> .tt为类名,以便你在HTML标签中应有。而在{ }中的属性及指分别为边距左,右,上,下的距离。当它们的边距都相等时比如都是60px,可以简写为:.tt { margin: 60px }. 当在文本中引用了该CSS,你会发现文本对的非常整齐。 81.如何正确使用图片格式? 目前在网络上的图片准标准格式为JPG和GIF。当图片颜色数很多时,就选择JPG,它的压缩比高,而GIF适合颜色数少的图片。 82. 如何在网页上显示访问者系统信息? 把以下代码加入到<Body></Body>: 83. 如何正确放置JavaScript? JavaScript为动态主页的实现工具,一般来说JavaScript放置于<head></head>或者<body></body>之间。对于放置在<body></body>之间的JavaScript,你需要把它放置在适当位置。如果你用FrontPage98工具,先把光标移到想放置JavaScript的地方,然后选择Insert/Advanced/script,在打开的文本框中输入JavaScript,这样就放置好了。预览页面,JavaScript出现在你放置的地方。你也可以把JavaScript放置到表格中,这样可以精确定位。 84. 个人站点需要那些交互功能? 交互是网络的魅力所在,作为个人站点也需要这些交互性的工具,以便和访问者随时进行沟通。以下是目前个人站点必备的交互工具: 留言板-让访问者给你的站点提提意见; 聊天室-一个即时的对话场所,特别可以对一个特定主题组办一个网络讨论; 搜索引擎-当站点内容过多时,搜索引擎可以让访问者快速找到想看的内容; 85. 如何点击一个链接同时在两个frame 内变化? 对于一个由topFrame、leftFrame、mainFrame 构成的页面,如果想在leftFrame 中点击链接,同时在其他两个frame 内变化,代码如下: 86. 打印按钮 87. 查看源码按钮 <input type=button name="view" value="查看源码" onClick=''window.location="view-source:" +window.location.href'' style="font-size:9pt"> 88. 如何去掉页面滚动条? 在body 中加入样式表控制,代码如下: 89.如何在Dreamweaver 插入空格? 在FrontPage 中,插入空格只需要在选定的文本前按下键盘空格键就可以了,但在Dreamweaver 中不行。空格的标签是可以开启HTML Source 视窗直接加入标签,也可以在指定的文本前,按下Ctrl+Shift+Space。 90. 如何在DW中设置Flash 动画的背景透明? 在SWF文件的属性面板中,点parameters,添加参数wmode,值选择transparent; 91. 如何正确使用分隔线? 这里我再假设你需要分隔页面左右两部分内容,先利用表格工具拖出三个横行表格,把内容分别放置到左右两个单元,然后把中间的单元的宽度设置为1个pixels(像素),并填入所需要的颜色。你还需要把所有表格及单元的大小单位都设置为pixels 即可。 92. 如何让浏览器正确显示word 文件格式? 为了正确处理word 等格式,你需要在HTML文件中设置好该文件类型,比如: application/msword Microsoft Word Document 93. 如何实现一个页面两种颜色链接变化? 在CSS中设置不同的CLASS类,如下例所示: 94. DW中如何准确地定位层? 就目前来说,还没有好的方法实现非常精确地定位使得层在编辑中和浏览中的位置不变,即便是使用“标尺”和“网格”辅助定位,仍然会有差别,而且在IE和NC中显示的层的位置会有偏差,大约偏差3个象素。最好的方法是对照浏览器的显示来调整层的位置。 95. 怎样把别人网页上的背景音乐保存下来? A:浏览该网页后,在你的 Windows/Temporary Internet Files 文件夹下可以找到该背景音乐的缓存文件,拷贝出来即可使用。如果还是找不见该文件,可以打开网页的源文件,找到音乐文件的 URL 路径,用“蚂蚁”等 FTP 软件进行下载。 96. 避免有人从你分帧的主页的帧中径直进入网站,而不是从 index.htm 中进入? A:在帧中的网页的<head></head>之间加入以下脚本代码: 97. IE5.0 的部分快捷键:
98. 如何使网页在不同分辩率下都全屏铺开? 用表格(不要使用层),做好内容后,将最外表格设置宽为100%,再适当调整。 99. 如何定时关闭网页? 在head区加入 <SCRIPT LANGUAGE="javascript"> setTimeout('window.close();',2000); 表示两秒后自动关闭窗口。 100. 如何实现不提示,直接关闭窗口? (1) 直接关闭,无任何提示: 在<body></body>内加以下代码: <object id=closes type="application/x-oleobject" 在要显示“关闭窗口”文字或图片或按钮的位置加以下代码: <a href="#" onClick="closes.Click();"><img name="bu1" src="/bu1.gif" width="31" height="31" border="0" alt="关闭窗口"></a> <a href="#" onClick="closes.Click();">关闭窗口</a> <input name="button" type=button id="btn" onClick="closes.Click();" value="关闭窗口">
(2) 有提示框显示是否确认关闭: <a href="javascript:window.opener=null;window.close();">内容</a> <a href="javascript:window.close();">关闭窗口</a> 或关闭按钮: <input name="button" type=button id="btn" onClick="javascript:self.close();" value="关闭窗口">
|
HTML技巧100例
最新推荐文章于 2022-10-06 11:00:37 发布