.NET，你忘记了么？（五）——非主流使用者的HTML

在文章伊始，本人先发表声明，由于从小语文较差，所以为文章起名字也成了我最痛苦的事情之一，所以为了方便，我就不换名字了，虽然，本文叫做HTML,你忘记了么？更为合适。

在上文中，我写了一些非主流标签的使用，本文，让我们将非主流进行到底，看看那些非主流使用者。

本文中，我所指的非主流使用者并不是说，那些涂着浓妆，摆着怪异表情的网络非主流MM，而专指一些我们没有注意到的使用者。比如，使用非PC端上网用户，如视觉障碍用户。

好，让我们步入今天的话题。

 

1. 从头开始，<link>引入CSS。

让我们先来看一句常见的代码：

<link rel="stylesheet" href="../hr.css" type="text/css">

<link>标签我相信大多数人都不陌生，当我们需要在一个HTML页面中去引用另一个外部的文件，例如CSS的时候，那么就需要用link标签将其引入。那么这段代码有什么问题么？

先来看我把这段代码翻译成他所等价的一行：

<link rel="stylesheet" href="../hr.css" type="text/css" media="all">

两者之间的差距是media属性。让我们先来了解一下media属性，media属性指定了一些终端设备，然后允许浏览器根据不同的终端设备去下载不同的外部文件。如果上面的代码，标准应该怎么样去写呢？

<link rel="stylesheet" href="../hr.css" type="text/css" media="all">
<link rel="stylesheet" href="../hrhandheld.css" type="text/css" media="handheld">
<link rel="stylesheet" href="../hrprint.css" type="text/css" media="print">
<link rel="stylesheet" href="../hrtv.css" type="text/css" media="tv">

了解我的意思了么？我的意思就是说，我们应该考虑不同的终端设备，然后为不同的终端设备去引用不同的CSS样式。

这一点，不知道，您曾经注意过了么？那些非主流的终端设备，您想过为他们指定一些样式文件么？

 

2. title属性

这个属性我相信没有人会不知道这个属性。最常见的用处：

<img src="~/Love.img" title="Love" />

alt对于我们来说也许并不常用，我们都有眼睛，都会去根据自己的视觉去判断这张图片的作用和内容。但是，别忘了，那些为了节省网络流量而禁止Image的人，也别忘了那些视觉有问题，使用读屏器的人，如果我们忽略了这个属性，那么对于他们来说确实是件比较痛苦的事。

看这样一个页面：

这是腾讯的一条体育新闻，我们先不妨假设自己是个视觉有障碍的残疾人，你正在读这条新闻，突然之间冒出了这样的一张图，你会什么感觉呢？也许会想，这个图究竟记录着什么？这个图究竟是什么意思？这个图究竟是做什么的？带着十万个不爽，没办法，跳过去继续读。但是使用了title呢？

这又是一个什么感觉。读屏器会告诉你，伊万输球非常失望，你可以点击看其他的精彩组图。你这时才很清楚，原来是这样！

所以，在引用一个Image，或者是Menu的时候，你是否忘记了这个title属性呢？同理，你是否忘记了<a>中的Title属性呢？你是否忘记了那些非主流的使用者呢？

 

3. 关于窗口弹出问题。

在我们使用javascript中，我们很常用的一个函数有个window.open(****);

在超链接中，有个属性叫target。

在这里，我们就来讨论一下关于打开新窗口的问题。

对于我们来讲，打开新窗口大不了就点个小小的叉就可以了！但是，对于视觉有障碍的人来说，莫名其妙弹出个新窗口，然后长期以往，几十个窗口摆在他们面前，我们试想一下，如果你不识字，几十个窗口摆在你面前，你知道该去关哪个页面么？

因此，沙沙在这里给出个建议，尽量避免弹出新窗口，如果别人需要弹出新窗口，那么让他们在“新窗口打开链接”就好了……

呵呵！请时刻记着残障人士……  他们看页面真的不容易。

 

4. 关于大图像的显示问题

如果您是大富，那您肯定不会理解我们普通老百姓的苦衷。

当你使用手机去上网时，按流量计费。当打开一个页面，这个页面有一个很大的图片的时候，你会不会为这个图片所造成的流量暗暗心疼呢？如果是个美女，我认了……  可是，如果是芙蓉姐姐，我却多花了几毛钱，哥们们，赚点钱不容易……

玩笑归玩笑，但是这点的确要值得我们注意。

也就是说页面的流量问题，那我们该如何解决呢？方式有很多：比如我们可以创建超链接，让用户去自行打开。或者创建图像的缩略图，让用户去预览，然后打开。

程序员兄弟们？流量问题要注意……

 

5. 页面布局的先后问题

我们考虑这样一种布局方式：

<div id="menu" style="float:right"></div>
<div id="content"></div>

 这段代码在显示的时候是menu浮动到屏幕右侧，然后content上移将原来menu的位置占有。这样对于我们来说没有问题！

但是请考虑考虑PDA上这个页面的显示，他读的时候只会考虑div的顺序，于是乎就是先读menu，然后你需要用滚动条才能找到主要部分content。这样造成的用户体验是不是很差呢？

当然，这个涉及到一个折中性的问题，因为，如果我们才用绝对布局，或者凝胶式布局的话，同样也有着其他的这样或那样的缺点。

在这里，沙沙只是建议大家，要根据不同的用户人群，去选择不同的页面布局方式！

 

6. 再谈视觉障碍人士：ASP.NET的Label控件

朋友们，Label这个控件你们一定不陌生，可是你们在使用的时候，去使用这个属性了么？AssociatedControlID。

写段标准的代码：

<asp:Label ID="LabelUserName" runat="server" 
    AssociatedControlID="TextBoxUserName" Text="用户名："></asp:Label>
<asp:TextBox ID="TextBoxUserName" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="LabelPassword" runat="server" 
    AssociatedControlID="TextBoxPassword" Text="密码："></asp:Label>
<asp:TextBox ID="TextBoxPassword" runat="server" TextMode="Password"></asp:TextBox>

这一点对我们来说无所谓，但是对于那些使用读屏器的残障人士来说很重要，AssiciatedControlID属性将帮助他们将标签和表单正确地关联起来。

韦恩卑鄙补充：ASP.NET中的Label只是HTML中Label控件的一个小封装，而AssiciatedControl属性则是对应的Label中的for属性，Label这个标签本身就是为了其他的HTML控件服务的，如果没有了for(或者AssiciatedControlID)属性，那么这个标签我们还不去使用span或者div将之代替。实际上最早的单选框和多选框都是需要用Label去代理的，否则很难操作。

这个我也只是停留在理论层面，我不是残障人士，也没有见过读屏器是个什么模样。但是，请大家遵守就好了。

 

7.一些乱七八糟的规则

A.请不要将普通文字加上下划线，这个我就不多说了，很多人都会怀疑是超链接的。

B.请不要把两个超链接离得太近，很多近视的人看东西是双影，这个我深有体会。

C.请避免有红色和绿色去区分一些规则，据表明：红绿色盲是最多的。

好了，这一期我就写到这里，也不早了，该睡了，明天还要上班。

小弟才疏学浅，所以不足之处，希望大家多多拍砖。有补充的也希望大家多多指教，我会随时关注并且修改文章。谢谢！