Web标准详解——可访问性、可用性、可维护性

1、Web标准的三个规范

(1)结构(Structure)

①HTML
HTML英语意思是:Hypertext Marked Language,即超文本标记语言,使用HTML语言描述的文件,需要通过WWW浏览器显示出效果。是一种最为基础的语言。所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。所谓标记,就是它采用了一系列的指令符号来控制输出的效果,这些指令符号用“<标签名字属性>”来表示。

②XHTML
XHTML是HTML向XML的过渡语言,删除了部分表现层的标签,标准要求提高,有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。

③XML
XML(eXtensible Markup Language)即可扩展标记语言,最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然XML占用的空间比二进制数据要占用更多的空间,但XML极其简单易于掌握和使用。

(2)表现(Behaivor)

表现标准语言主要包括CSS(Cascading Style Sheets)层叠式样式表,通过CSS样式表,W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言,通过CSS样式可以使页面的结构标签更具美感、网页外观更加美观。

(3)行为(Presentation)

行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,标准主要包括对象模型(如W3C DOM)、ECMAScript并要求这三部分分离。

①DOM
DOM是Document Object Model文档对象模型的缩写。DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

②ECMAScript
ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言(JAVAScript)

2、Web标准示例

<P> 我写的不是HTML代码,是寂寞。<br><br> 我说:<br>不要迷恋哥,哥只是一个传说

在这段代码当中,第一眼看上去没有明显的语法错误。是的,在html 4.01 strict下是完全正确的,但是在Web标准下,就是xhtml 1.0 strict下就是错误的,不合乎规范。xhtml有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。所以,代码中的<P>要匹配一个</p>, <br>要改成<br/>,其次所有标签必须小写,所以<P>也是错误的,要改成<p>;最后&nbsp;空格符必须包含在容器当中,也是错误的。

考点1.html 4.01与Web标准xhtml 1.0的差别

起初,我以为如果能回答到上面所说的错误基本能拿满分了,其实不然,回答完上面的只能及格。Web标准要求的结构与表现分离,而考题当中运用了 控制缩进,是错误的,我们应该应用Css来控制文本的缩进,所以 应该删掉。

考点2.结构与表现分离

最后,还有一处错误,题目当中连续使用两个<br>来制造了两个段落,<br>是强制折行标签,这样做确实达到了两个段落的效果,但是后期段间距不易控制,我们应该合理运用标签。所以正确的做法是我们应该应用两个<p>标签来表示两个段落。

考点3.合理运用标签

所以,在XHTML标准下,正确的修改应该是:

<p>我写的不是HTML代码,是寂寞。</p><p>我说:<br/>不要迷恋哥,哥只是一个传说</p>

这样就完美了吗?不是,还有加分点,为了更符合Web标准,我们应该适当的的运用标签语义化。也就是“我"说的话,可以用<q>标签标注。

<p>我写的不是HTML代码,是寂寞。</p><p>我说:<br/><q>不要迷恋哥,哥只是一个传说</q></p>

这样就足够了,标签语义化也应该合理的运用,过分使用也会显得太画蛇添足。当然,如果还要添加,“我”字可以用<cite>(<cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。)标注,“HTML”可以用<abbr>(缩写,属性为title全称)标注:

<p><cite>我</cite>写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>代码,是寂寞。</p><p><cite>我</cite>说:<br/><q>不要迷恋哥,哥只是一个传说</q></p>

加分点:标签语义化

综上,我们使用Web标准去编写代码,就像我前面说的,目的是write less,do more。我们的代码更加规范,更加合乎标准,我们的页面就更容易被搜索引擎抓取收录。

web标准有关XHTML代码规范:

1.所有的标记都必须要有一个相应的结束标记;

以前在HTML中,你可以打开许多标签,但在XHTML中这是不合法的。XHTML要求有
严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。

2.所有标签的元素和属性的名字都必须使用小写;

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示 :
  任何小于号(<),不是标签的一部分,都必须被编码为& l t ;
  任何大于号(>),不是标签的一部分,都必须被编码为& g t ;
  任何与号(&),不是实体的一部分的,都必须被编码为& a m p;
6.给所有属性赋一个值,XHTML规定所有属性都必须有一个值,没有值的就重复本身。

7.不要在注释内容中使“--”,“--”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。

3、对W3C的认识

W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范:包含如下几点

1.对于结构的要求

1)标签字母要小写

2)标签要闭合

3)标签不允许随意嵌套

2.对于css和js的要求

1)尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。

2)样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版。

3)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。

4、Web标准之可访问性、可用性、可维护性

1)可用性:

产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量。可用性好意味着产品质量高,是企业的核心竞争力。

2)可维护性:

一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本,成本低则可维护性好。二是代码是否容易被人理解,是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码,对企业的长期发展非常重要。

3)可访问性:

在《Web Content Accessibility Guidelines 1.0(Web内容可访问性指南)》里,对可访问性的描述是:Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明:提高可访问性也能让普通用户更容易理解Web内容。具体而言,要考虑以下两方面:

  • 无论用户是否残障,都得通过用户代理(User Agent)来访问Web内容。因此要提高可访问性,首先得考虑各种用户代理 :桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。在Google, 专门聘请了一些残障雇员,来帮助提高产品的可访问性。
  • 还得考虑用户访问Web内容时的环境限制 。比如:嘈杂的环境、过暗或过亮的房间、或者是免提等各种情况。这是更高一层次的可访问性要求,做到了,能造就产品在特定领域的核心竞争力。

实现可用性、可访问性的方法

  • 逐步强化你的网站功能,同时对支持性进行测试。运用“渐进增强”和“平稳退化”原则开发网站。
  • 允许用户关闭有问题的增强功能。
  • 提供相同内容或功能的替代版本。
  • 就客户端需要支持的技术向你的客户提出建议,并举例说明哪些公司的产品支持这些技术。

四个可访问性标准(WCAG 2.0)

  • 可感知:人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如,图像应该有文本对应体。
  • 可操作:人们可以与 web 应用程序或内容进行交互。例如,用户应该可以不用鼠标也能与某个网站进行交互,并且可以通过屏幕阅读器来进行导航。
  • 可理解:使用者可以弄懂页面内容和用户界面。例如,正文不应该比它需要的更加复杂,且网站应以可预测的方式来运行。
  • 健壮性:所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务,这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如,不同设备上的浏览器能够一起使用网站,且导航应该是一致的。

web标准的优点:

  • 代码的效率
    在HTML文件中使用最精简的代码,而把样式和页面布局信息包含进CSS文件中。则放在服务器上的文件越小,下载文件需要的时间就越短。
  • 易于维护
    页面的样式和布局信息保存在单独的CSS文件中,如果你想改变站点的外观时,仅需要在单独的CSS文件中做出更改即可。整站统一css则可带来巨大的便利。
  • 可访问性
    上网用户中那些视力受损的人,通过屏幕阅读器使用键盘命令将网页的内容读给他们听。以语义化的HTML(结构和表现相分离的HTML)编写的网页文件,就可以让此类用户更容易导航,且网页文件中的重要信息也更有可能被这些用户找到。
  • 设备兼容性
    纯HTML,无附加样式信息,可以针对具有不同特点(如屏幕尺寸等)的设备而被重新格式化,只需要引用一套另外的样式表即可。同时,CSS本身也可以让你为不同的呈现方式和媒体类型(如在屏幕上阅读网页,打印网页,在移动设备上阅读网页等)规定不同的样式表。
    *网络爬虫/搜索引擎:搜索引擎使用“爬虫”,解析你的网页。语义化的HTML能更准确更快速的被解析,从而知道哪些才是重要的内容,那么你的网页在搜索结果中的排名就会大受影响

本文系参考以下文章整理:
web标准-可用性、可维护性、可访问性
深入理解Web标准(网站标准)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容

  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,136评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,415评论 1 3
  • 【七月未央】20170915学习力6期践行D123 ❶小熊宝宝-洗澡。今天七月很安静地坐在我旁边,听我读书。我翻开...
    七妈_haiyan阅读 500评论 0 50
  • 1、《城池》 我曾一度以为自己感情的城池固若金汤, 没想到只你一个眼神, 让我的城池碎无全瓦。 2、《咆哮的心情》...
    伦小让阅读 416评论 0 3