Web标准详解

WEB标准不是某一个标准,而是一系列标准的集合。

网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。

                                        结构标准:相当于人的身体。html就是用来制作网页的。

                                        表现标准: 相当于人的衣服。css就是对网页进行美化的。

                                        行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的。

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能更准确更快速的被解析,从而知道哪些才是重要的内容,那么你的网页在搜索结果中的排名就会大受影响

来自:https://www.jianshu.com/p/cb48f875b6f5
原文地址:https://www.cnblogs.com/iamspecialone/p/11140467.html