语义-alt和title属性

当越来越多的浏览器开发商想占据浏览器市场时,他们总会做出很多不按规则的事来,就好比今天我们拿alt、title两属性来说,在Mac、Windows下面他们的渲染就不一样。其实主要还是今天在一张图片为了alt和title纠结时,才打算写这篇文章的。

PS:我这里说的alt和title是指属性

alt属性

在不能正常显示图像时对该图像进行描述,我的表达估计不太好,但是并不像很多文章里面说:光标移到图像上时显示的提示语。非常明确指出他的用途,而在windows下面你会看到他被渲染进鼠标移上提示语。

alt属性必须在100个英文字符以内相当于50个中文字符,这代表着你必须要很简略的文字描述图像的意思。

也有很多人把alt属性当作SEO优化属性来做,比如:有张宝宝照片,也许你可以看到类似这么一串XHTML

<img src="baobao.jpg" alt="宝宝 宝宝生日 小宝宝 大宝宝 没宝宝 有宝宝" />

这得注意,因为现在的Spam越来越聪明,反而会把你当成垃圾网站来处理。

我们说alt属性要简略,如果你做不到建议你留空:alt=””,为什么呢?alt属性是为了不正常显示图像时起到作用的,如果你觉得对一张图片这样描述:“某某某CEO穿着黑色西装、红色领带、站在某某大楼外、仰望天空?”对于阅读者来说有用的话,那你就做吧!如果说无法三言两语解释图像,可以考虑为空,然后以独立的文字来说明,这样的效果会更好一些,绝大多数图像展示页面都是这样做。

title属性

title属性更多出现在a标签上,当然我们这里不讨论在html、head、script、base、meta等等中的title属性。

针对a标签title属性很好的用途,即为链接提供更加详细的描述。而如果展示这串描述在不同的平台也不一样,但这已经是早期浏览器的情况,至少现在绝大多数都是鼠标移到后出现提示。

为了效果破坏属性值?真的值吗?

有了达到酷酷的效果,您可能会看到这样XHTML:

<a href="/" title="图片大小:100KB<br />图片来源:新华社<br />More...">宝宝</a>

曾经何时我也写过类似XHTML,但是我发现这是一种非常错误的写法,属性值嵌套XHTML标签,如果网页放到屏幕阅读器上,是不是也把“<br />”也读给用户听呢?后来我使用的做法是将“<br />”替换成”。”,然后通过脚本做渲染你所需要的效果。

参考资料

让DW开发更高效

做ASP开发时我的首选是Dreamweaver(简称:DW)编辑器,其主要在HTML、CSS、JavaScript编写都非常优秀,而其中代码着色、代码提示高效开发帮助非常大。说点我经常使用的工具,估计在高手面前也是小巫见大巫,因为我也只是用用几个最常用小工具:(PS:大部分选项都可以通过在“编辑”》“首先参数”找得到。)

一、站点

  1. 像资源管理器一样的文件树型结构,文件分布一目了然。
  2. 文件重命名后自动重新引用。当我要对某个CSS进行重命名时,所有引用该CSS的页面也相应跟着变,我就不需要一个个改CSS引用。
  3. 链接检查,帮助你检查所有失效的链接,非常有帮助的一个功能喔。
  4. 当然还可以设置测试服务器,轻松按下F12查看实际效果。

二、源代码格式

我向来对代码的缩进要求很严格,因此使用“应用源代码格式”功能完全满足我的要求,当然了,每个人的风格不一样,那么你也可以通过“标签库编辑器”修改相应标签的格式。

三、代码着色

DW代码着色真的无可挑剔。当然如果你不喜欢她默认的配置方案,你也可以通过“代码颜色”选项修改你的风格。

四、代码编辑区

默认是按9px来显示代码大小的,但是对于长期工作在电脑面前来说大一点的字体对眼镜是有益无害的。通过“字体”选项卡上修改。

五、代码提示

这部分我得重点提,HTML、CSS已经很优秀,响应速度快、丰富。

对于JavaScript脚本在CS4新版本已经做了非常多改进,特别是对一些JavaScript框架的支持,例如:JQuery

对于已经做开发很久,我相信很多人都已经有自己的一些库了,那么如果能够让这些库也能出现在代码提示列表当中的话,那么提高开发效率、失误度会大大降低。

DW是通过configuration\CodeHints的XML文件实现代码提示,而且在DW帮助文档里面是有提到CodeHints.xml文件的。至于相应标签的意思我不详解,通过观察自带的可以揣摩出相应标签的意思。

那么既然DW是通过一个叫CodeHints.xml来实现代码提示,当然咱们也可以通过自己写个类似的并实现我们所需要的提示内容。但注意它并不是放在configuration\CodeHints目录下面,而是放于:

win7之前系统:
C:\Documents and Settings\用户\Application Data\Adobe\Dreamweaver CS4\zh_CN\Configuration
或者
C:\Documents and Settings\All Users\Application Data\Adobe\Dreamweaver CS4\zh_CN\Configuration
win7系统:
C:\Users\Administrator\AppData\Roaming\Adobe\Dreamweaver CS4\zh_CN\Configuration

自行新建一个叫:codehints文件夹并把你编写的XML放入该文件夹,文件名无限制。另外需要注意的是每次修改XML文件后,需要重新启动DW才会生效喔。

简单列出一些相应的XML标签解释:

标签名 描述
function 按下Ctrl+Space可直接在列表中找到
pattern 提示字符,也是关键字
doctypes 文档类型,注意:点号要用-来代替,例如:ASP-VB、ASP-JS
icon 提示列表中的小图标
source 代码类型,比如:ASP、CSS、JS
menu 相当于一个菜单的集合,可以添加相应的method子节点。
classpattern 和pattern一样
additionaldismisschars 设置以什么字符显示该菜单的方法列表。例如:Request.Get其中的点号

参考资料

© 2017 卡片机色彩 沪ICP备13032872号-3

Theme by cipchk

to top