Archive for category Html

SEO优化正确使用alt属性和title属性

正确的使用alt text属性和title属性不仅可以提高图片的搜索能力,对用户体验上也是很有帮助。

alt

替换文字(alt text)是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。所以替换文字是用来替代图像而不是提供额外说明文字的。Alt text在IE浏览器中还起到了title的作用——鼠标经过时的文字提示。IE浏览器给了大家一个误导,在IE中ALT会变成文字提示是因为IE不标准。这一点Firefox做的就比较好。

title

title是对图片的说明和额外补充,如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。但由于错误的引导,很多初学者就在img标签内只加了alt属性。

下面看个例子,我们可以更清楚的看清alt text和 title之间的区别:

//*图片不显示
<img src=”abc.jpg” width=”400″ height=”104″ alt=”引导线网页制作网”>  
<img src=”abc.jpg” width=”239″ height=”104″ title=”引导线网页制作网” />
//*图片显示
<img src=”abc.png”  title=”引导线网页制作网” />
<img src=”abc.png”  alt=”引导线网页制作网” />
 
在IE7或8以下浏览器中,这四句代码,鼠标经过图片时,都会出现文字提示。

而在Firefox浏览器中,前三句代码,鼠标经过图片时,都会出现文字提示,最后一句代码,鼠标经过图片不会显示文字提示(如下图所示)。

也就是说当图片不能显示时,鼠标经过图片时会显示替换文字的内容,而当图片可以显示时,鼠标经过图片时,替换文字就不会显示出来了。

现在我们已经知道alt text和title有什么不同了,那么我们怎样才能正确使用它们呢?

1. alt text和title对访问者都很重要(alt text对搜索引擎会更重要一些),所以在定义img对象时,最好将alt text和title属性都写全,保证在各种浏览器中都能正常使用。

2. 在alt text和title中包含关键字,并且二者内容最好不一样。

3. 不要在alt text和title中堆积关键字,否则可能会导致搜索引擎惩罚。

其实,图片提示提示(tool tip),原来只是title属性实现的,之前因为IE的不标准,被误导了,以为是alt

  • Share/Bookmark

firefox不支持的一个javascript

今天刚发现的,类似

<script type=”text/javascript”>
function dosubmit(){
    var form_obj=document.getElementById(‘abc’);
    form_obj.submit();
}
dosubmit();
</script>

在firefox里并不能得到执行,而在IE里是可以的

解决方法是,用

<script>document.abc.submit()</script>

这样更简洁的脚本替换

  • Share/Bookmark

Tags: , , ,

javascript submit()方法不能传submit名称值的解决

改变了批量表单的提交方式,用javascript submit()方法实现,可以有效减少form表单数量,但由于使用的是button按钮,其它表单元素不能再次包含name=”submit”,否则会报错不执行

在javascript函数内也不能再次定义这个值,否则也是报错

解决办法是用多个类似<input type=”submit” name=”submit” onclick=”login(abc)” value=”登陆”>的标签,而不是使用button标签来触发

因为在表单里,只有被点击的submit会被提交

而在<button>里调用表单提交函数的话,会造成没被点击的submit也被提交,结果是报错

不知道这样理解对不对

  • Share/Bookmark

Tags: , ,

通过网页按钮启动本地程序

<SCRIPT language=JavaScript>
function Run(strPath) {
exe.value=strPath;
try {
var objShell = new ActiveXObject(“wscript.shell”);
objShell.Run(strPath);
objShell = null;
}
catch (e){alert(‘找不到文件”‘+strPath+’”(或它的组件之一)。请确定路径和文件名是否正确,而且所需的库文件均可用。’)

}
}
</SCRIPT>

请输入要运行的程序:<br><input name=exe type=text size=20 value=”regedit”><BUTTON onclick=”Run(exe.value)”>确定</BUTTON><BUTTON onclick=exe.value=”";>重新输入</BUTTON><br>
<BUTTON onclick=”Run(‘notepad’)”>记事本</BUTTON><br>
<BUTTON onclick=”Run(‘mspaint’)”>画图板</BUTTON><br>
<BUTTON onclick=”Run(‘calc’)”>计算器</BUTTON><br>
<BUTTON onclick=”Run(‘cmd’)”>cmd</BUTTON><br>
<BUTTON onclick=”Run(‘Regedit’)”>Regedit</BUTTON><br>
<BUTTON onclick=”Run(‘Msconfig’)”>Msconfig</BUTTON><br>
<BUTTON onclick=”Run(‘file:///D:/Program%20Files/Winamp/WINAMP.EXE’)”>WINAMP</BUTTON><br>
<BUTTON onclick=”Run(‘IEXPLORE.EXE’)”>IE</BUTTON><br>
<BUTTON onclick=”Run(‘..’)”>..</BUTTON><br>
<BUTTON onclick=”Run(‘%windir%’)”>%windir%</BUTTON><br>
<BUTTON onclick=”Run(‘%temp%’)”>%temp%</BUTTON><br>
<BUTTON onclick=”Run(‘file:///D:/Program%20Files/Tencent/qq.EXE’)”>WINAMP</BUTTON>

前提要求有两个:

一、安装 wscript.shell:

在cmd下运行: 
         regsvr32 WSHom.Ocx 安装
         regsvr32 WSHom.Ocx  /u   卸载

二、internet选项:

安全->自定义级别->对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本

开启这一项

  • Share/Bookmark

Tags: , , , , , , ,

浏览器脚本之Navigator对象

Navigator 对象包含有关浏览器的信息。

注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。

IE: Internet Explorer, F: Firefox, O: Opera.

Navigator 对象集合

集合 描述 IE F O
plugins[] 返回对文档中所有嵌入式对象的引用。

该集合是一个 Plugin 对象的数组,其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息,其中包括它所支持的 MIME 类型的列表。

虽然 plugins[] 数组是由 IE 4 定义的,但是在 IE 4 中它却总是空的,因为 IE 4 不支持插件和 Plugin 对象。

4 1 9

Navigator 对象属性

属性 描述 IE F O
appCodeName 返回浏览器的代码名。 4 1 9
appMinorVersion 返回浏览器的次级版本。 4 No No
appName 返回浏览器的名称。 4 1 9
appVersion 返回浏览器的平台和版本信息。 4 1 9
browserLanguage 返回当前浏览器的语言。 4 No 9
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。 4 1 9
cpuClass 返回浏览器系统的 CPU 等级。 4 No No
onLine 返回指明系统是否处于脱机模式的布尔值。 4 No No
platform 返回运行浏览器的操作系统平台。 4 1 9
systemLanguage 返回 OS 使用的默认语言。 4 No No
userAgent 返回由客户机发送服务器的 user-agent 头部的值。 4 1 9
userLanguage 返回 OS 的自然语言设置。 4 No 9

Navigator 对象方法

方法 描述 IE F O
javaEnabled() 规定浏览器是否启用 Java。 4 1 9
taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。 4 1 9

Navigator 对象描述

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器,但其他实现了 JavaScript 的浏览器也支持这个对象。

Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。

顺便提一个,在Firefox中,即navigator.appName=Netscape时,是支持另一个东西的,即navigator.language

其它的三个language倒是不支持

  • Share/Bookmark

Tags: , , , , , , ,

base href 标签的使用方法

base href即指定了网页的基链,当点了链接后,跳出的网页地址是 http://yourdomain.com/1.php 或 http://yourdomain.com/1.php,它就是在这些相对路径的文件前加上基链接指向的地址。比如你的链接是这么写的:<a href=”1.php”>。如果目标文件中的链接没有指定target属性,就用base标记中的target属性。
常在框架结构中用,如左右两个框架,把左边的框架中文件里的连接都显示在右边的框架里。只要用base标记,把其target属性值写为右框架名称,这就不用再为左框架里的文件中的每一个连接都指定target属性。
base href标记其他说明:
1、当使用时,BASE 元素必须出现在文档的 HEAD 内,在任何对外部源的引用之前。
2、此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。
3、此元素不会被渲染。
4、此元素不需要关闭标签。
5、base标签其实还是有用处的,比如<base href=”_blank”>将使得本页所有的链接都在新页打开,这样就不必在每个链接处都以上target=”_blank” 。
IE7中注意:
1 、<html>之前不能加入额外的输出字符。否则IE7就对 base 不进行解析。
2、< base >是一个链接基准标记,用以改变文件中所有链接标记的参数默认值。它只能适应于文件的开头部分,即标记< head >与< /head >之间。

  • Share/Bookmark

Tags: , , , , , ,

How to use the html tag HTTP-EQUIV “IMAGETOOLBAR”

This meta tag is used to facilitate how to handle images and photos when you use Internet Exlorer. If you want your images and photos to be visible constantly, it is best not to use this meta tag. 
Using this imagetoolbal tag doesn’t influence your ranking with the search engines. The title of your page the keywords and the description tag do influence your ranking.

&lt;meta http-equiv="imagetoolbar" content="value"&gt;

Example meta tag http-equiv=”imagetoolbar”

 

 Add the following meta tag in the source of your webpage. The difference in spelling at the end of the tag is either you use     ” /> = xml or “> = html.
&lt;meta http-equiv="imagetoolbar" content="yes"&gt;&lt;meta http-equiv="imagetoolbar" content="no"&gt;

 

Where should you add this imagetoolbar tag?

You may add this meta tag to all of your webpages, so not only in the first index page. Make sure that on every page relevant meta tags are added.  Add keywords and phrases that are relevant and correspond to the text and the language on that specific page. It might be a lot of work to add specific meta tags to each page but you will notice in time that it works!

Meta tags Summary – Important SEO things to remember

We suggest that you use the Meta tags in your index.htm or index.html page. Than in all other important pages and last but not least in all the pages of your website. Make sure to put some extra effort in it, it will attract extra visitors to your webpage. Create relevant different meta tags for each and every page.
  • Share/Bookmark

Tags: , , , , , , , , , , ,

Usemap用法

<img border=0 src=”images/banner.jpg” alt=”MBT Shoes” usemap=”#MAP” />
<MAP name=Map>
<AREA href=”mbt-mens-styles-c-106.html” alt=”Men’s MBT Shoes” shape=rect coords=423,49,687,225 ywaOnclickOverride=”true”>
<AREA href=”mbt-womens-styles-c-97.html” alt=”Women’s MBT Shoes” shape=rect coords=82,49,346,225 ywaOnclickOverride=”true”>
</MAP>

格式如上,用于图片描点加链接,可加alt属性

  • Share/Bookmark

Tags: , , ,

Bookmark Us功能代码

<a href=”javascript:window.external.AddFavorite(location.href, document.title);”>Bookmark Us</a>

<a onclick=”window.external.AddFavorite(location.href, document.title);”>Bookmark Us</a>

后者不是链接形式

  • Share/Bookmark

Tags: , , ,

Meta标签说明

Meta标签是用来描述网页属性的一种语言,标准的Meta标签可以便于搜索引擎排序,提高搜索引擎网站权重排名。要想网站做的更符合搜索引擎标准就必须了解meta标签的,下面给大家讲讲meta标签含义与使用方法:

1、META标签的keywords
写法为:<meta name=”Keywords” content=”信息参数” />
meat标签的Keywords的的信息参数,代表说明网站的关键词是什么。

2、META标签的Description
<meta name=”Description” content=”信息参数” />
meat标签的Description的信息参数,代表说明网站的主要内容,概况是什么。

3、META标签的http-equiv=Content-Type content=”text/html
http-equiv=Content-Type代表的是HTTP的头部协议,提示浏览器网页的信息,
<meta http-equiv=”Content-Type” content=”text/html; charset=信息参数” />
meat标签的Description的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;
meat标签的Description的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;
meat标签的Description的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;
meat标签的Description的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;
meat标签的Description的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;
meat标签的Description的信息参数如UTF-8时,代表世界通用的语言编码;

4、META标签的generator
<meta name=”generator” content=”信息参数” />
meat标签的generator的信息参数,代表说明网站的采用的什么软件制作。

5、META标签的author
<meta name=”author” content=”信息参数”>
meat标签的author的信息参数,代表说明网页版权作者信息。

6、META标签的http-equiv=”Refresh”
<Meta http-equiv=”Refresh” Content=”时间; Url=网址参数”>
meat标签的Refresh代表多少时间网页自动刷新,加上Url中的网址参数就代表,多长时间自动链接其他网址。

7、META标签的HTTP-EQUIV=”Pragma” CONTENT=”no-cache”
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定,访

问者将无法脱机浏览。

8、META标签的COPYRIGHT
<META NAME=”COPYRIGHT” CONTENT=”信息参数”>
meat标签的COPYRIGHT的信息参数,代表说明网站版权信息。

9、META标签的http-equiv=”imagetoolbar”
<meta http-equiv=”imagetoolbar” content=”false” />
指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

10、META标签的Content-Script-Type
<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
W3C网页规范,指明页面中脚本的类型。
11、META标签的revisit-after
<META name=”revisit-after” CONTENT=”7 days” >
revisit-after代表网站重访,7 days代表7天,依此类推。

12、META标签的Robots
<meta name=”Robots” contect=”信息参数”>
Robots代表告诉搜索引擎机器人抓取哪些页面
  其中的属性说明如下:

  信息参数为all:文件将被检索,且页面上的链接可以被查询;

  信息参数为none:文件将不被检索,且页面上的链接不可以被查询;

  信息参数为index:文件将被检索;

  信息参数为follow:页面上的链接可以被查询;

  信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;

  信息参数为nofollow:文件将不被检索,页面上的链接可以被查询。

13、META标签的<meta http-equiv=”windows-Target” contect=”_top”>
代表页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用,设置有:_blank、_top、_self、_parent。

14、META标签的set-cookie
<meta http-equiv=”set-cookie” contect=”Mon,12 May 2001 00:20:00 GMT”>
代表Cookie设定,如果网页过期,存盘的cookie将被删除,需要注意的也是必须使用GMT时间格式;

  • Share/Bookmark

Tags: , , , , , , , , , , , , , , ,