你的位置:首页 > 软件开发 > 网页设计 > HTML小技巧的一些小技巧

HTML小技巧的一些小技巧

发布时间:2017-10-20 10:00:21
转自CSDN:1.怎样定义网页语言(字符集)? 在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以 ...

转自CSDN:

1.怎样定义网页语言(字符集)?          
  在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以在HTML代码状态下找到: 

<meta http-equiv="Content Type" content="text/html; charset=gb2312"> 

 把charset=gb2312改换成其它语言代码即可,比如英文harset=en. 

2.怎样防止别人把你的网页放到框架里? 
  因为框架(frame)的缘故,有许多人把别人的网页放置到自己的框架里,使之成为自己的一页。如果你要防止别人这样做,可以加入下列JavaScript代码即可,它会自动监测,然后跳出别人的框架。 

<script language="JavaScript"> 
if (self!=top) window.top.location.replace(self.location); 
</script> 

3.怎样设置字体? 
  在制作网页过程中,大家都喜欢使用漂亮的字体。但是,如果访客浏览器没有安装同样的字体,看到你的网页会是很普通的字体。如何防止这种情况出现呢?大家知道字体设置的标签是Font,而它有个属性是Face,该属性是定义字体的,你可以这样设置:,访客的浏览器就会按照Face定义的字体顺序设置已安装的字体。目前动态主页有种技术,可以把字体信息用向量格式存储,然后利用访客本身机器含有的公共信息库把字体快速的组装起来,这样,就不用担心访客是否安装有某种字体了。 

4.怎样在网页中加入注释?               
  在共同开发网页中,加入注释是防止分工被搞混淆或者注释某段代码特殊的含义,加入注释的格式是: 

<!-宇风多媒体论坛-->。 

5.怎样测试浏览器并自动装入所需要的网页? 
  目前微软和网景的浏览器并不能完全兼容所有网页,有的在某种浏览器里非常漂亮,而用其它浏览器查看时却一团糟。如果你需要测试浏览器,可以加入以下JavaScript代码并保存单独一个网页: 

<script language="JavaScript"> 
function TestBrowser(){ 
ie = ((navigator.appName == 
"Microsoft Internet Explorer") & &  
(parseInt(navigator.appVersion) >= 3 )) 
ns = ((navigator.appName == "Netscape") & &  
(parseInt(navigator.appVersion) >= 3 )) 
if (ns) { 
setTimeout(''location.href="nn4.htm"'',10); 
} else { 
setTimeout(''location.href="ie4.htm"'',10); 


</script> 

6.怎样让链接没有下划线? 

<style type="text/css"> 
<!-- 
a{ text-transform: none; text-decoration: none;} 
a:hover { text-decoration:underline } 
//--> 
</style> 

7.怎样在网页中加入E-mail链接并显示预定的主题? 
<a href=mailto:cnshell@163.com?subject=hello> 


8.怎样让背景图像不滚动 
<body background="cnshell.gif" bgproperties="fixed"> 

或用CSS样式表定义: 
<style type="text/css"> 
<!-- 
body { background-image: url(image/bg.gif); background-attachment: fixed} 
--> 
</style> 

9.怎样让背景图像不平铺? 
 CSS样式表定义: 
<style type="text/css"> 
<!-- 
body { background-image: url(image/bg.gif); background-repeat: no-repeat} 
--> 
</style> 

10.怎样定义本网页的关键字? 
  在网页中加入关键字,可以供某些搜索站台机器人的使用,它们会利用该关键字为你的网站做索引,这样,当别人用关键字搜索网站时,如果你的网页包含该关键字,那么就可以被列出了,定义本网页关键字,可以加入以下代码: 
<meta name="keywords" content="html,dreamweaver,flash,css"> 
  content 所包含的就是关键字,你可以自行设置。 
  这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如: 
<meta name="keywords" content="dreamweaver,dreamweaver,dreamweaver"> 

11.怎样链接本网页的对象? 
  有时链接发生在一个网页里,比如页面上半部分列出了目录,下部分就列出了内容,而单击目录任何一个项目都可以跳到指定部分,可以在要被链接的内容部分设置如下方式: 
<a name="#1"></a> 
  而要链接到以上设置的部分,可以如下编制: 
<a href="index.htm#t1">t1</a> 

12.怎样为不支持框架结构的浏览器指定内容? 
  为了防止不支持框架结构的浏览器访问你的网页,可以在你的网页中加入以下内容: 
<body> 
<noframes> 
本网页是框架结构,请下载新的浏览器浏览 
</noframes> 
</body> 

13.怎样删除表格边框? 
   删除表格的边框,你可以在表格的属性中加一句border="0" 即可。 
   或把border设置为如下代码: 
<body><table border="0" width="100%"> 
<tr> 
<td width="100%"></td></tr> 
</table></body> 
注:(其实两种性质是一样的) 

14.怎样隐藏在状态栏里出现的LINK信息? 
  大家知道,当你指向一个链接时,该链接的信息会出现在浏览器状态栏里,如果需要隐藏信息,可以如下设置: 
<a href="http://www.yufeng21.com" onMouseOver="window.status ... return true">test</a> 
  如果想要指向一个链接时,浏览器状态栏里出现特定的信息,把none 改成你需要的文字即可。 

15.怎样在网页中加入多媒体文件? 
 有些多媒体文件无需其他程序就可以播放,而有许多多媒体文件需要外部程序的帮助,当浏览器下载不支持的格式时会调用外部程序。如果浏览器没有安装这种外部程序,那么浏览器会自动去下载;如果你需要加入多媒体格式,可设置如下代码: 
<embed src='/images/loading.gif' data-original="tt.ram" autostart="true" loop="2" width="80" height="30"> 

  对于不支持embed 标签的浏览器,可以改用标签。 

16.怎样在网页中加入电子邮件表单提交? 
  表单提交需要CGI程序的支持,但你也可以利用E-mail 提交,当你设计好表单后,把action 内容加入邮件地址即可,如下: 
<form method="post" action="mailto:cnshell@163.com" enctype="text/plain"> 

17.怎样隐藏热讯分析的图标? 
  热讯分析是许多网友使用的服务,它能帮助你分析网站的流量,如果你想隐藏该服务图标,可以把服务代码中的width=88 height=31都改为1即可。 

18.怎样在网页中加入最后修改日期? 
  在body 中加入以下代码即可: 
<script Language="JavaScript"> 
document.write 
("最后修改日期" + document.lastModified); 
</Script> 

19.创建一个吸引人站点的步骤是怎样的? 
   要创建一个吸引人的站点,请考虑以下建议: 

1)谁该是你的访客,是喜欢音乐的,还是喜欢玩游戏的;2)是什么内容能吸引这些人,更快更新的信息,还是提供更多的下载;3)如何让访客停留呢,当然不要用BUG,比如让访客的机器死机;4)是什么能让访客再来呢,比如说明天有好东西,记得来呀,不过别骗人;5)制定自己的目标,实现它;6)征求大家的意见,然后逐步改进. 

20.如何创建一个调查表? 
   越来越多的站点需要交互性来吸引访客,当论坛失去新意后,建立一个调查表,可以让访客选择你设置的问题,并让访客马上看到结果. 

连接站  有时侯,你设置的一段文本在IE4里浏览良好,但到NN4浏览器里,发现一段文本变成了一行文本,实在令人心烦,这时,你只需对照NN4浏览器里的文本,在需要分行的地方加入<BR>元素即可,这不会影响在IE4里的浏览。 

21.如何打开一个新的浏览器窗口并设置窗口的属性? 
   如果你需要在载入站点的同时,再打开另一个新窗口,加入以下代码即可: 

<script language="JavaScript"> 
<!-- 
var gt = unescape('%3e');var popup = null;var over = "Launch Pop-up Navigator";popup = window.open('', 'popupnav', 'width=160,height=160,resizable=1,status=yes,menubar=no,scrollbars=yes');if (popup != null) {if (popup.opener == null) {popup.opener = self; }popup.location.href = 'pop.htm';} 
//--> 
</script> 

期中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. 

22.怎样判断服务器使用的操作系统? 
   在浏览器地址栏里,输入要察看的服务器地址,一定要包含目录和文档名字,然后回车,出现请求页面,试着把文档名改为大写格式,如果返回该页面不存在,那么可能该服务器使用的操作系统为unix或macintosh,如果页面内容返回,那么可能该服务器为windwos操作系统,因为windows对大小写不敏感. 

23.怎样提高站点在搜索引擎中被搜索到的机会? 
   当你把自己站点登记到搜索引擎中后,并不表示你的站点就会被经常搜索到,如何提高这个几率呢,很简单,你的主页一般会有一个标题,一般设置在<title></title>中间,这时,你可以在设置完标题后,跟着把关键字也设置在这里,比如: 
<title>宇风多媒体-china,love,dhtml,yufeng21,yahoo</title>.因为搜索引擎会首先察看站点的标题,并把标题作为你站点的关键字,当你把关键字也设置在了标题中后,搜索引擎也会加入这些关键字,这比其它所有的方法都好,唯一缺点,你站点标题变长了. 

24.如何测试网站的下载速度? 
   准备一个能读秒的表,比如跑步表,这样精度高些,当然也可以使用普通的表. 

首先我们测试纯文本的下载时间,打开浏览器,关闭下载图片功能,然后连接上网,在地址栏输入站点地址,回车后,计时开始,当全部文本内容下载完后,停止计时. 

如果你要测试整个站点下载速度,打开图片下载功能,如果你站点含有JavaScript,也要在浏览器选择为支持,同上,打入地址,回车,计时开始,当所有内容下载完后,停止计时. 

经过以上两种测试,你就会对自己站点的连接下载速度,作到心中有数了. 

25.如何让站点自动跳转到另一页? 
   加入以下代码到HTML文件中即可: 
<meta http-equiv="refresh" content="5;url=http://www.yufeng21.com/index.htm"> 
   
content中的"5"为停留的秒数  可能你的站点被其它站点连接,如何知道呢,访问搜索引擎站点: 
    在搜索窗口中,输入:+link:yoursite.com-host:yoursite.com 
  这样,包含你站点连接的页面被列出,当然,你也可能什么都没有找到。 

28.如何避免自己的图片被其它站点利用? 
   为图片起一个很怪的名字,这样可以避免被搜索到,还可以利用photoshop的水印功能加密.当然,你也可以在自己的图片上加上一段版权文字,比如标明自己的名字-cnshell.因为文字体来就在图片上,除非使用人截取图片.不然就是侵权了. 

29.如何不利用表格而准确的分隔图片和文字? 
   在页面中想要分隔图片和文字,利用表格是非常好的方法,你还可以制做一个透明的gif图形,因为图形是透明的,你就可以拿来分隔图片和文字了,当然要注意透明图的大小. 

30.如何跳到页面的顶部? 
   当浏览者浏览到页面底部后,你需要提供一个单击,让浏览者方便的跳到页面顶部,加入以下代码: 
<a href="#top">返回顶部</a> 

31.有什么简单的方法编写Cookie? 
   cookie 是信息小甜饼,记录着浏览者的信息,你可以利用meta 标签编写最简单的cookie 并加入到页面中:
<meta http-equiv="Set-Cookie" content="MyVar=你的页面过期了;expires=Thursday,15-4-99 00:00 GMT+8:00; PATH=/"> 

32.如何在一个站点不同页面间播放同一种声文件? 
   大家有这样的经验,当你访问一个站点首页时,会听到该页设置的背景声音文件,比如一段音乐。当你链接到该站点另一页时,音乐就停止了。如何让声音不断呢。其实,你只需要建立一个上下框架结构的网页,把声音文件建立在下框架里,并把下框架的宽度设置为一个像素,而上框架里是页面内容,当访问者离开站点首页时,因下框架内容未变,所以,声音不会间断。大家还要注意两点,第一,把框架的边框设置为0;第二,隐藏声音文件的播放界面,然后把上下两个框架的背景设置为相同。 

33.如何让访问者能更多的单击付费旗帜广告? 
   拥有个人站点的网友都会去申请一些付费的广告,以得到一些网费补助。但很可惜,即使你经常请求访问者为了支持本站建设,请单击旗帜广告。遗憾的结果是,还是很少有人单击。要想让访问者能更多单击你的旗帜广告,有两种方法: 

第一种:强化印象 

让那个旗帜广告一直出现在访问者面前,让他不得不好奇的单击一下。你可以建立一个上下框架的页面,把旗帜广告放置在任意一个框架里。这样,只要访问者不离开你的站点,旗帜广告会一直出现在他们的面前。还要提醒你,不要在广告下面写上“为了本站发展,请单击广告”,你要让访问者知道这个广告会带给他们某种信息,而不是为了你才单击。 

第二种:有代价的单击 

如果你拥有某种十分吸引人的信息,而你想在不收费的情况下,得到某种利益(请允许这样说),你可以让访问者必需单击旗帜广告,才能获得信息。 

34.如何在NN4和IE4浏览器中浏览相同效果的字体? 
   我们制作页面时,利用IE4浏览器浏览时,一切很正常。但用NN4浏览时,发行细体字变成了粗体字了。这是因为,当你页面包含一段粗体字时,此时你复制了一段文本到该粗体字的周围,你会发现复制的文本也变成了粗体字,当然此时也可以再把它设置为你想要的字体大小,如果这样做了,我上面说的情况就会出现。你需要复制文本到页面空白处,这样文本不具有任何属性,然后拖动文本到合适的地方进行你需要的文本字体设置。这种情况多出现在利用FrontPage98编写网页。 

35.如何让提交表单后打开一个新窗口显示提交结果? 
   如果你的站点上有邮件列表服务,每当访问者订阅并按下订阅按钮后。因为邮件列表需要订阅确定,而这种服务多为第三方提供的,所以订阅确定页会连接到服务商的页面。这样有时会照成访问者离开了站点。你可以按下面的代码设置,让访问者单击了订阅按钮后,会打开一个新的窗口显示订阅确定。 

<form action="http://www.popchina.com/cgi-popchina/mailist.pl&qu ... t;a" method=post> 

其中在你的代码中加入:target="a" 

36.如何防止页面源代码被复制? 
   如果你的页面包含一个自行设计的JavaScript小程序,如何防止它被别人复制使用呢。其实你不可能完全阻止他人引用,但你可以采用适当的方法尽量维护自己的权益: 

第一.版权声明 
在源代码中加入一段版权解释-<!----本源代码版权所有,请勿复制。---->,并把源代码利用E-Mail寄一份给自己,以确定时间,为以后与别人交涉做好证据准备。 

第二.工具加密 
你也可以利用工具软件加密源代码。我以前用过 Web Protector 2.0,觉得还不错。 

37.如何清除页面中的框架结构? 
   在链接属性中加入target="_top" 如下设置: 
<a href="http://www.yufeng21.com" target="_top">宇风多媒体</a> 
   当你单击了这个链接,页面所有框架被清除并以该链接内容替代。 

38.如何防止站点页面被任意链接? 
   有许多好站点的页面被其它站点任意链接,如果你不希望别人直接链接到站点内部去,你可以经常更换页面文件名。比如每十天改一次,这样可以有效防止别人的任意链接。缺点是让直接访问着无所适从。 

39.如何创建一个下拉菜单? 
   我们在主页中常会用到下拉菜单,一般来说,它需要CGI程序支持。你也可以利用JavaScript编写一个。 

<head> 
<script LANGUAGE="JavaScript">function formHandler(){var URL = document.form.site.options[document.form.site.selectedIndex].value;window.location.href = URL;} 
</script> 
</head> 
<body> 
<form name="form"><select NAME="site" SIZE="1" onChange="formHandler()"><option value="请选择">请选择</option><option value="http://www.yufeng21.com/">分栏内容</option><option value="http://www.yufeng21.com/">分栏内容</option><option value="http://www.yufeng21.com/">分栏内容</option><option value="mailtocnshell@163.net">给我写信</option></select></form> 
</body> 

40.如何避免页面电子函件地址被搜索到? 
  经常会收到不请自来的垃圾信,如果你拥有一个站点并发布了你的E-Mail 链接,那么其他人会利用特殊工具搜索到这个地址并加入到他们的数据库中。要想避免E-Mail 地址被搜索到,可以在页面上不按标准格式书写E-Mail 链接,比如:cnshell at 163.com,它等同与cnshell@163.com。 

41.如何给站点加入计数器并进行设置? 
   要给站点加入计数器需要第三方提供服务,目前这种服务非常多,而一般申请免费主页空间时会提供计数器服务。计数器格式如下: 

<img src='/images/loading.gif' data-original="http://ip/cgi-bin/count.exe?dd=A;df=tiantao|ft=0"border="0" ... t="19" align="top"> 

  期中dd表示计数器的数字字体形状,一般可以选择A,B,C,D,E,F六种;df表示计数器的记录文件名字,一般为申请者的用户名字;ft表示字体的立体效果,可以为任意数字;计数器还包含md(定义计数器最大位数),display(计数器功能)等属性。 

42.创建一个好站点应具备什么知识? 
   ⑴HTML的使用技能;⑵WEB图形的使用;⑶JavaScript编程;⑷站点的布局计设计;⑸管理站点的能力;⑹写作能力,为站点内容服务;⑺对WEB服务器的了解。 

43.如何使图片与浏览器窗口无缝接合? 
   大家有时候发现想把一幅图片与浏览器窗口边框无缝接合很难,总会有点距离。这是因为你没有设置页面边距,在你的页面<BODY>中加入以下代码: 

topmargin="0" leftmargin="0" 

topmargin为与浏览器窗口顶部距离,此时为O,图片与浏览器窗口无缝接合。 

leftmargin="0"为与浏览器窗口左边距离,此时为0。 

44.如何建立一个站点的搜索引擎系统? 
   如果你的站点有许多内容,你希望访问者能很快找到他想要的信息。那么你需要建立一个搜索引擎。连接到网站网络特  在<head></head>部分加入: 
p { text-indent: 1% } 
 p 标签为HTML文本段落的标签,1%为缩进的范围 

89.如何点击一个链接同时在两个frame 内变化? 
  对于一个由topFrame、leftFrame、mainFrame 构成的页面,如果想在leftFrame 中点击链接,同时在其他两个frame 内变化,代码如下: 
<a href="x1.htm" onclick="parent.topFrame.location.href=''x2.htm''" target="mainframe"> 
90.前进、后退和刷新 
  <a href="javascript:history.back()">后退</a> 
  <a href="javascript:history.go()">前进</a> 
  <a href="javascript:location.reload()">刷新</a> 

91.打印按钮 
<form> 
<input name="Print" onClick="window.print();return false" type="button" value="Print"> 
</form>  

92.查看源码按钮 
<input type=button name="view" value="查看源码" onClick=''window.location="view-source:" +window.location.href'' > 

93.如何去掉页面滚动条? 
  在body 中加入样式表控制,代码如下: 
<body bgcolor="#000000" leftmargin="0" topmargin="0" > 

94.如何在Dreamweaver 插入空格? 
  在FrontPage 中,插入空格只需要在选定的文本前按下键盘空格键就可以了,但在Dreamweaver 中不行。空格的标签是  可以开启HTML Source 视窗直接加入标签,也可以在指定的文本前,按下Ctrl+Shift+Space。 

95.如何在DW中设置Flash 动画的背景透明? 
  在SWF文件的属性面板中,点parameters,添加参数wmode,值选择transparent; 
  或者直接修改网页的代码,在标志SWF文件属性的代码中添加: 
   <param name="wmode" value="transparent"> 

96.如何正确使用分隔线? 
  这里我再假设你需要分隔页面左右两部分内容,先利用表格工具拖出三个横行表格,把内容分别放置到左右两个单元,然后把中间的单元的宽度设置为1个pixels(像素),并填入所需要的颜色。你还需要把所有表格及单元的大小单位都设置为pixels 即可。 

97. 如何让浏览器正确显示word 文件格式? 
  为了正确处理word 等格式,你需要在HTML文件中设置好该文件类型,比如: 
<meta http-equiv="Content-Type" content="application/msword"> 
  还有其它经常设置的文件类型: 
application/msword Microsoft Word Document 
application/pdf PDF Document 
application/wordperfect6.0 WordPerfect 6.0 Document 
application/zip ZIP archive 
audio/x-wav WAV audio format 
audio/midi MIDI audio format 
audio/x-pn-realaudio RealAudio 
image/gif GIF image format 
image/jpeg JPEG image format 
image/png PNG image format 
text/html HTML document 
text/plain Plain text 
video/mpeg MPEG video format 
video/quicktime QuickTime video format 
video/x-msvideo AVI video format 

98.如何实现一个页面两种颜色链接变化? 
  在CSS中设置不同的CLASS类,如下例所示: 
a.r:link{text-decoration:none;color:#000066} 
a.r:visited{text-decoration:none;color:#333333} 
a.r:hover{color:#0000ff;text-decoration:underline} 
a.r1:link{text-decoration:none;color:#000066; font-weight:bold} 
a.r1:visited{text-decoration:none;color:#000066; font-weight:bold} 
a.r1:hover{color:#FF0000; font-weight:bold} 
a.r2:link{text-decoration:none;color:#ffffff} 
a.r2:visited{text-decoration:none;color:#ffffff} 
a.r2:hover{color:#000000;} 

99.DW中如何准确地定位层? 
  就目前来说,还没有好的方法实现非常精确地定位使得层在编辑中和浏览中的位置不变,即便是使用“标尺”和“网格”辅助定位,仍然会有差别,而且在IE和NC中显示的层的位置会有偏差,大约偏差3个象素。最好的方法是对照浏览器的显示来调整层的位置。 

100.怎样把别人网页上的背景音乐保存下来? 
    A:浏览该网页后,在你的 Windows\Temporary Internet Files 文件夹下可以找到该背景音乐的缓存文件,拷贝出来即可使用。如果还是找不见该文件,可以打开网页的源文件,找到音乐文件的 URL 路径,用“蚂蚁”等 FTP 软件进行下载。 

101.避免有人从你分帧的主页的帧中径直进入网站,而不是从 index.htm 中进入? 
    A:在帧中的网页的<head></head>之间加入以下脚本代码: 
      <Script language="JavaScript"> 
        if (top==self) 
         self.location.href="index.htm"; 
      </Script> 
      这样,当有人从帧中进入网站时,就会自动重定向到主页文件 index.htm。 

102.IE5.0 的部分快捷键: 
    A:打开查找功能:Ctrl+F 
    关闭浏览器窗口:Ctrl+W 
    打开地址栏下拉列表框:F4 
    刷 新:F5 
    将当前Web页保存到收藏夹列表:Ctrl+D 
    打开当前 IE 窗口的一个拷贝:Ctrl+N 
    停止下载当前网页:Esc 
    光标迅速移动到网页的开头:Home 
    光标迅速移动到网页的尾部:End 
    打开新的地址键入窗口:Ctrl+O 
    打开收藏夹:Ctrl+I 
    打开历史记录文件夹:Ctrl+H 
    打开浏览器设定的默认主页:Alt+HOME  

103.如何使网页在不同分辩率下都全屏铺开? 

    用表格(不要使用层),做好内容后,将最外表格设置宽为100%,再适当调整。 

104.如何定时关闭网页? 

    在head区加入 

    <SCRIPT LANGUAGE="javascript"> 

    setTimeout('window.close();',2000); 
    </SCRIPT> 

    表示两秒后自动关闭窗口。  

105.如何实现不提示,直接关闭窗口? 


直接关闭,无任何提示 

<a href="javascript:window.opener=null;window.close()">内容</a>  

有提示框显示是否确认关闭 

<a href="javascript:window.close();">关闭窗口</a>

 

原标题:HTML小技巧的一些小技巧

关键词:html,dreamweaver,flash,css

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。