HTML技巧100例(一)

最新推荐文章于 2021-06-10 15:54:14 发布
最新推荐文章于 2021-06-10 15:54:14 发布
阅读量632 收藏 1
点赞数
分类专栏： HTML 文章标签： html dreamweaver 浏览器 javascript 搜索引擎 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangkunls/article/details/1139009
版权

1. 链接控制

  • 返回前页：使用OnClick="history.go(-1)"，如

    返回主页：使用OnClick='top.location.href="../chinamail.html"'，如

2. 链接提示

  • 在链接语句中增加

    OnMouseOver="window.status='这里是 ...'; return true" OnMouseOut="window.status=''; return true"

    如： 3. 背景音乐

    • 显示操作面板：在相应地方加<embed src="aladdin.mid" width="140" height="35" autostart=true controls="middleconsole">

      不显示操作面板：在页中任意地方加<embed src="aladdin.mid" hidden=true autostart=true loop=true>

      或<embed src="tt.ram" autostart="true" loop="2" width="80" height="30">

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

    4. 设置主页的缺省字符语言为简体中文(适用于Netscape)

    • 在HTML文件的Head部分中加入<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=cn-gb">

    5. 链接的不同方式

    • 在帧里显示：在链接处加target="main"语句，其中main为帧名

      整页显示：在链接处加target="_top"语句

      开新窗口：在链接处加target="resource window"语句，如<A HREF="index.htm" TARGET="resource window"></A>

    6. 强制主页每次都不进行缓存，而从服务器上重读

    • 在Head部分加
      <MEAT HTTP-EQUIV="Pragma" CONTENT="no-cache">

      这样一来，浏览器将不考虑cacke中的内容而强制重新读入您的页面,等于用户使用Reload。

      如果在您有计数器的页中使用，不管从什么地方返回这页
      计数器都能加一。不过可能造成用户的反感。

      如果在BBS程序中使用，可以实现不用Reload就可更新页的功能。

    7. 自动刷新

    • 定时刷新：<META HTTP-EQUIV="Refresh" content="10; URL=http://自己的URL">

      幻灯片效果：语句类似上面，但在页面1中URL指向页面2，而页面2指向页面3 ...
      页面n指回页面1，即可实现循环显示页面的效果

    8.提前载入图片

    • 如果您的站点中后面的页有大图形需要显示，您不妨在第一页中提前载入。把语句：
      <img src="image.jpg" width=0 height=0> ,其中width,height要设置为0， 放在第一页HTML中的任何地方。

      如果您的访问者在第一页停留的时间足够长，当他进入第二页时，图象会立即显示出来

    9. 自动连接

    • 在预定时间后自动连入另一个指定的页面。
      方法：
      在<title>...</title>中加入以下一行：
      <meta http-equiv="refresh" content="10"; url="otherpage.htm">
      其中10代表10秒后自动连接。

       

    10. 自动换行：

    • 在主页中自动换行以适应不同的浏览器或分辨率。
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    11. 用单像素的GIF文件控控制文本位置

    要想准确的控制HTML中的文本位置，可以做一个1*1的透明图(如Blank.gif)。然后在HTML中加入代码：
    <img src="Blank.gif" hspace=100>
    改变数字100，即可控制

    12. 容器标记

    <BLOCKQUOTE></BLOCKQUOTE>标记可以把网页上所有的对象都包括起来，但不能对它加入变量。

    13.设定图形大小

    为使您的Web页在图形下载完之前，能够立即显示文字内容。
    在您的主页中的图形元素中加入文件大小变量：
    <img src="image.jpg" width=xxxx height=yyy>
    xxx,yyy是您的图形的真实像素

    14. 移动文字

    这在主页上是常用的，其制作方法很简单。
    <marquee>要移动的文字</marquee>
    1.移动 的方向：<direction=!> ！=left, right
    2.移动的方式：<bihavior=!> !=scroll ,side,alternate
    3.循环次数：<loop=!> !=次数。若未指定则循环不止。
    4 循环速度：<scrollamount=!> !=数

    15.如何去掉主页超链接的下划线?

    把下列语句放在<head>...</head>之间
    <style>
    A {text-decoration: none}
    }
    </style>
    <script language="javascript">
    var contents = true;
    </script>

    更简单的是
    <style>
    <!--
    a {text-decoration:none}
    a:hover {color: red;text-decoration:underline}
    -->
    </style>

    16. 浮动背景（背景图像不滚动 ）

    当你拉住下拉条时，背景不动。（会使浏览速度减慢。:-( ）加入：
    <body backgroud="#ffff" bgproperties="fixed">

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

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

    18. 测试浏览器类别并自动装入不同的网页

    目前微软和网景的浏览器并不能完全兼容所有网页,有的在某种浏览器里非常漂亮,而用其它浏览器查看时却一团糟。如果你需要测试浏览器,可以加入以下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>

    19. 定义本网页的关键字

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

    20. 在网页中加入E-mail链接并显示预定的主题

    <a href=mailto:cnshell@163.com?subject=hello>

    21. 隐藏在状态栏里出现的链接信息

    当指向一个链接时，该链接的信息会出现在浏览器状态栏里，如果需要隐藏信息，可以如下设置：
    <a href="

    http://www.yy0736.com" onMouseOver="window.status='none';return true">test</a>
    　　如果想要指向一个链接时，浏览器状态栏里出现特定的信息，把none 改成你需要的文字即可。

    22. 在网页中将表单提交给自已的电子邮箱

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

    23. 隐藏免费计数器的的图标

    许多网友使用免费计数器，它能帮助你分析网站的流量，如果你想隐藏该服务图标，可以把服务代码中的width=88 height=31都改为1即可。

    24. 在网页中加入最后修改日期

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

    25. 打开一个新的浏览器窗口并设置窗口的属性

    如果你需要在载入站点的同时,再打开另一个新窗口,加入以下代码即可:

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

    26.怎样判断服务器使用的操作系统?

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

    27. 怎样提高站点在搜索引擎中被搜索到的机会?

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

    28. 如何测试网站的下载速度?

    准备一个能读秒的表,比如跑步表,这样精度高些,当然也可以使用普通的表.

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

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

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

    29. 如何让站点自动跳转到另一页?

    加入以下代码到HTML文件中即可：
    <meta http-equiv="refresh" content="5;url=http://www.yufeng21.com/index.htm">
    　　content中的"5"为停留的秒数，http://www.yufeng21.com/index.htm 是将要跳转的页面。

    30.怎样让广告随机出现?

    当你想展示许多广告,但页面空间不够时,你可以让广告随机出现,你只需要加入一段代码.网上有这样的代码，搜索…… 

微技术
关注
专栏目录
【GeoDa实用技巧100例】001：GeoDa中文版下载、图文安装教程
「 刘一哥与GIS的故事」
07-10 6450
GeoDa是一个专门用来处理空间自相关分析的一个开源软件。相比ArcGIS，它功能更加强大，数据分析精度更加精确，表现方式更加多样。本文讲解GeoDa V1.20中文版下载、图文安装教程。
100个网页实例框架
06-27
适合刚入门的新手做网页。有很多实例可以用。html、php等语言做网页。。
HTML模版100例
06-28
HTML模版100例
HTML技巧100例(三)
fastboot
08-29 777
61. 制作动态页面的步骤是怎样的?第一步：设计页面及寻找页面需要的材料；第二步：完成普通页面的制作，此时无须涉及动态主页内容；第三步：为页面文字增加层叠样式表，以改变文字颜色，链接等；第四步：为页面增加交互性内容，如cgi,javascirpt,activeX控件等，这是把页面动态的关键；第五步：测试动态页面以适应更多浏览器；第六步：发布动态页面并在上面标明该页是动态页面
HTML技巧100例
Qi_jianzhou的资料室
01-11 1712
HTML技巧100例fade_sea 发表于 2005-12-4 0:30:021. 链接控制 返回前页：使用OnClick="history.go(-1)"，如 返回主页：使用OnClick=top.location.href="../chinamail.html"，如 2. 链接提示 在链接语句中增加OnMouseOver="window.status=这里是 ...; return
100个网页实例
09-06
100个网页实例，可以为web学习提供资料，有大部分的布局
Html实例100例
云之巢的博客
03-17 8089
1、简单Html程序 1 <html> 2 <head> 3 <title>我的第一个HTML</title> 4 </head> 5 <body> 6 <p>body 元素内容会显示在浏览器中。</p> 7 <p...
WPS表格技巧100例
04-09
### WPS表格技巧100例 #### 一、基本方法 **1. 快速获取帮助，学习实用教程** WPS Office 提供了多种免费的帮助渠道，方便用户快速解决问题和学习新技能： - **快捷键帮助**：按下 `F1` 键，可以立即弹出WPS ...
HTML经典技巧100例
10-25
以上就是从“HTML经典技巧100例”文件中提取的关键知识点。这些技巧涵盖了从基本的HTML标记到更高级的JavaScript应用，旨在帮助开发者更好地理解和运用HTML语言。希望这些知识点能够对你有所帮助。
html代码实例
zhangkongzhongyun的专栏
09-25 736
http://www.admin5.com/html/html_tutorials/100_html_examples.html
HTML100款模板
08-02
100款HTML的模板，采用DIV+CSS编写，完全兼容IE6+，Firefox等浏览器，符合W3C标准规范
初级 网页模板 100个实例
09-22
该资料里包含100个网页模板 适合初学者或者想再提高自身布局及HTML css代码的童鞋。
HTML语言源代码实例
06-17
HTML语言源代码实例，具有丰富的HTML语言实例，适合新手学习HTML用
仿100度html界面
05-20
自己编写的，欢迎大家参考
100个经典html+css模版下载
04-10
100个经典xhtml+css模版下载，很适合对JSP网页制作。。
国外HTML+CSS网页模板（100套）
10-21
国外HTML+CSS网页模板（100套）国外HTML+CSS网页模板（100套）
html+经典布局案例,HTML + CSS 经典布局(示例代码)
weixin_31596631的博客
06-10 709
/*@base-width 容器宽度 可以为 px 或 百分比*/@base-width: 100%;/** @fix-width-l 左侧固定宽度 可以为 px 或 百分比* @fix-width-r 右侧固定宽度 可以为 px 或 百分比*/@fix-width-l: 300px;@fix-width-r: 300px;@bg-color1: blue;@bg-color2: red;@b...
100多个经典常用的网站模板大全实例演示和下载
weixin_30723433的博客
06-30 1537
推荐模板/Template11-07二当家的网站后台模板源码08-29黑色技术微博客响应式模板08-22html5绿色通用的APP页面下载08-07绿色大气的教育培训手机模板08-06在线自学平台课程展示模板08-06设计超棒的奢侈品商城模板08-02英盛网在线教育培训机构手机版出炉07-31淘宝开放平台bootstrap响应式模板07-28杭州边卓信息技术公司官网模板0...
拥抱HTML5：28个必备特征与技巧
"这篇文章主要介绍了HTML5的一些新特性、窍门和技巧，包括新的Doctype、图形元素（The Figure Element）以及元素的新定义。这些内容有助于开发者更好地理解和使用HTML5来创建更加语义化和功能丰富的网页。" 一、新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值