学习前端的过程中到处充斥着Web标准、可用性、可访问性这些词,那么到底它们指的是什么呢?

一、什么是Web标准

简单的说,Web标准就是我们在学习前端中接触最多的HTML、CSS、JavaScript三者的集合。网页主要分三个部分:结构(Structure)、表现(Presentation)、行为(Behavior)。对应的标准也分三个方面:结构化标准语言---XHTML和XML,表现标准语言---CSS,行为标准---对象模型DOM和ECMAScript等。

为什么要制定这些标准,这些标准有什么优点呢?

1. 提升代码效率

Web标准提倡结构和表现分离,也就是说HTML只用来形成网页的结构,而网页的布局、表现方式用CSS完成,这样就有效地精简了HTML代码。浏览器向服务器发送HTML文件请求时,下载文件的时间就减少了。

   2.易于维护

将页面的样式和布局信息保存在不同的文件中有力与对网页的维护,当需要对网页进行样式改版升级时,不需要改动HTML文件,只在CSS文件中更改元素的样式即可。

3.可访问性

上网用户中有一些视力受损的人,他们需要屏幕阅读器将网页内容读出来。以语义化的HTML标签编写的网页可以使屏幕阅读器知道网页的结构及各部分的大概功能,如<nav>标签表示导航,<aside>标签表示侧边栏等,使使用者更便捷地与网页交互,更快地抓住网页主要表现内容。

4.设备兼容性

这是最近比较流行的响应式设计,追求页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。这也是HTML与CSS分离带来的便利,同样的HTML文件,通过CSS3 Media Query 媒体查询,就可以根据屏幕的尺寸等调整CSS样式,使网页内容能更清晰地展现出来。

5. 搜索引擎(网页爬虫)

语义化的HTML文件更容易被网页爬虫解析,从而在搜索结果中能准确地得到你的网页,并影响网页的排名。

二、可用性,可访问性

前面提到,可访问性就是指无论用户是否健康,是否有部分身体缺陷都能正常地访问网站,理解网站的内容。例如视力受损的用户需要屏幕阅读器浏览网页,没有鼠标的用户要靠键盘与网页交互,以及大量使用移动设备访问网页的用户。

可访问性好的网页有以下几个特征:

1. HTML语义化、结构化

2.有可替代内容

3.用HTML定义基本交互

要实现网页的可访问性,需要网页开发者运用“渐进增强”、“平稳退化”的原则。

“渐进增强”就是用一些额外的信息包裹原始数据,实现这个要求需要“三步走战略”。第一步:要使用正确的,带有语义化的HTML标签来表示内容。第二步:将HTML于CSS分离,用CSS包装内容的样式,及时去掉这个表示层,文档的内容也依然可以访问(只是缺乏些色彩而已)。第三步:分离JavaScript,将网页的行为与结构和表现分离,这样即使浏览器的JavaScript功能关闭后,仍能访问网页的主要内容。

大部分实现了“渐进增强”的网页都符合“平稳退化”的原则。“平稳退化”简单说就是在没有JavaScript的情况下仍能访问网页。

三、总结

了解Web标准有利于养成良好的网页开发的习惯,并做出具有高访问性的网站,让更多的用户看到你的成果。

Web标准及网站的可用性、可访问性的更多相关文章

  1. 深入理解Web标准(网站标准)

    深入理解Web标准(网站标准)   我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而 ...

  2. 对Web标准的理解。可用性和可访问性

    一Web标准 简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentat ...

  3. 理解Web标准(网站标准)

    我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...

  4. web标准的可用性和可访问性

    在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成 ...

  5. WEB可用性、可访问性、可维护性

    可用性 (Usability) 可用性是一个多因素概念,涉及到容易学习.容易使用.系统的有效性.用户满意度,以及把这些因素与实际使用环境联系在一起针对特定目标的评价. 可访问性 (Accessibil ...

  6. web标准

    仔细看看所有的前端招聘要求,几乎所有的都要求对web标准有深刻的理解. web标准,是一系列标准的集合.对前端来说,因为网页是由结构.表现和行为组成.对应的就有结构化标准语言,主要包括XHTML和XM ...

  7. 【转】Web标准中的常见问题

    本文转自http://www.tracefact.net/Misc/Common-Problems-Of-Web-Standard.aspx 引言 大概在2004年的时候,Web标准的概念藉由一本名为 ...

  8. 爆牙齿的 Web 标准面试题 【转藏】

    <!DOCTYPE html> <html lang="zh-CN"><head> <meta http-equiv="cont ...

  9. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

随机推荐

  1. Linux学习笔记 -- 目录与文件的管理

    目录结构 Linux的目录结构为树状结构,最顶级的目录为根目录 “/”. 其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们. 在开始本教程前我们需要先知道什么是. 绝对路径与相对路径 绝 ...

  2. git学习3 - 克隆远程库到本地 将本地库上传到git

    如何克隆远程版本库到本地 git clone URL 如何用命令将本地项目上传到git 1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 (注意: cd C:/U ...

  3. verilog 之语法学习

    1.使用非基数表示的十进制视为有符号数.使用基数表示的十进制被视为无符号数. 2.线网中的值被解释为无符号数,整型寄存器中的值被解释为有符号的二进制补码数,. 3.如果选择表达式的值为 x.z,或越界 ...

  4. 一种js异步处理方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 关闭PdfReader右侧工具栏的方法

    1.首先单次关闭工具栏 点击视图-显示/隐藏-工具窗格,关闭右侧工具栏,但下次打开pdf还会出来,所以: 2.记住设置状态 编辑-首选项-文档-记住工具窗格当前状态

  6. WebRTC相关的基础知识点

    这里主要用来记录自己整理的和webRTC相关的一些基本的知识点,后续整理的一些基础和零碎的知识点都会更新在这里.内容大部分来自于webRTC官网.w3c以及一些前辈们的博客中的文章和相关书籍等. 20 ...

  7. Reading RxJava Marble Diagrams

    ------>表示一个Observable(承时间推移,由左入右,左边item先发射) ------>上面的图形,表示这个Observable发射的item ------>上的的|( ...

  8. scala 在vim中的语法高亮

    https://github.com/derekwyatt/vim-scala 提供了一个选择 看install手册,发现两个命令都是必须的. mkdir -p ~/.vim/{ftdetect,in ...

  9. spring中二个重要点

    spring核心主要两部分: (1)aop: 面向切面编程,扩展功能不是修改源代码实现 (2)ioc: 控制反转

  10. 常用的软件设计模式的Java实现——让编程从野生到飞起

    常用的软件设计模式的Java实现——让编程从野生到飞起_野生技术协会_科技_bilibili_哔哩哔哩  https://www.bilibili.com/video/av7596511/