Web标准发展建议与好的实例之了解基础变化

2016-01-29 12:40 10 1 收藏

Web标准发展建议与好的实例之了解基础变化,本系列Web标准发展建议与好的实例系列文章将向朋友们介绍Web标准是如何使一个开发者建设网站更加的节省时间与金钱,如何使浏览者获得更好的浏览经历,以及他们的原因。同时,本文还涉及到一些方法,准则和好的实例用来帮助您建设一个对尽可能多的人都充满亲和力的高质量的网站。

【 tulaoshi.com - Html 】

在学习中遇到问题可以到 论坛 发贴交流!

引用

用<q来标记简短的单行引用。Web浏览器会自动识别在<q 之间的内容。不幸的是,IE不能识别,并且有些时候, <q会引起一些可访问性的问题。正因为如此,一些人建议尽量不要使用 <q,手动的插入引用标记。在一个包含适当的类的 <span中加入单行的引用内容,那么就可以用CSS来给引用设计样式了,但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag 关于处理<q相关问题的看法。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

对于那些一段或者好几段的长篇引用,就应当使用 <blockquote了。CSS可以用来定义引用的样式。注意,一段文章是不可以直接放在 <blockquote中的,引用的内容还必须包含在一个元素中,通常是<p。

属性cite既可以与<q 一起用,也可以与<blockquote一起用,用来提供引用内容的来源地址。需要注意的是,如果你使用 <span来代替 <q标记引用内容,那么你就不能使用 cite属性了。

例如:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

<p我的座佑名<q cite="http://www.x5.com.cn/" 别人的高标准,是我的基本要求。</q.</p我的座佑名别人的高标准,是我的基本要求。

<p我的座佑名<span class="quote"&#8220;别人的高标准,是我的基本要求。&#8221;</span.< /p我的座佑名别人的高标准,是我的基本要求。

<blockquote cite='http://www.w3cn.org/'

<p&#8220;我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时, 我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战", 为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的, 每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备, 例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽; 针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。 这是一种恶性循环,是一种巨大的浪费。&#8221;</p</blockquote

我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如 1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。

强调

<em 是用作强调的,<strong是用作重点强调的。 大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。

例如:
<p<em强调</em 的文本通常用斜体显示,然而, <strong特别强调</strong 的文本通常以粗体显示。</p强调的文本通常用斜体显示, 然而,特别强调的文本通常以粗体显示。

表格

XHTML中的表格不应用来布局。然而如果是为了标记列表的数据,就应该使用表格了。为了使数据表格有更强的访问性,了解和使用各种构造表格的组件就很重要了。比如表格标题 (<th)、摘要(summary 属性)和首部说明 ( <caption标签).

例如:
<table class="举例" summary="1999年到2003年,列表显示中国的平均人口增长率。"
<caption中国的年均人口的增长, 1999-2003</caption
<thead
<tr
<td&#160;</td
<th scope="col"1999</th
<th scope="col"2000</th
<th scope="col"2001</th
<th scope="col"2002</th
<th scope="col"2003</th
</tr
</thead
<tbody
<tr
<th人口</th
<td scope="row"8 861 426</td
<td scope="row"8 882 792</td
<td scope="row"8 909 128</td
<td scope="row"8 940 788</td
<td scope="row"8 975 670</td
</tr
<tr
<th增长</th
<td scope="row"7 104</td
<td scope="row"21 366</td
<td scope="row"26 368</td
<td scope="row"31 884</td
<td scope="row"34 882</td
</tr
</tbody
</table

中国的年均人口的增长, 1999-2003   1999 2000 2001 2002 2003 人口 8 861 426 8 882 792 8 909 128 8 940 788 8 975 670 增长 7 104 21 366 26 368 31 884 34 882

想了解更多的关于表格及其使用的细节, 请参阅Tables in HTML documents 和 HTML Techniques for Web Content Accessibility Guidelines 1.0.

相关文章:

SimpleQuiz
一个很好的资源,告诉您如何用语义化的方法来标记

来源:http://www.tulaoshi.com/n/20160129/1487075.html

延伸阅读
标签: Web开发
混淆文档类型(DOCTYPE) 完全不写、写的不正确、或放错地方。我曾见过HTML 4.0 Transitional被用在XHTML网页和框架页中,还看到过在开头的html标签后写DOCTYPE声明和一些不完整的声明。 为什么?有两个原因。首先,文档声明是必须的,在W3C HTML 4.01 spec和W3C XHTML 1.0 spec里都有说明。第二,浏览器会根据指定的文档类型去显示和渲染网...
标签: Web开发
HTML为中心的前端开发也差不多是web标准的意思。它们的共同点就在于分离思想。 1、HTML是基础 2、CSS依靠选择符提供视觉; 3、Javascript 依靠HTML事件去驱动行为; 4、DOM提供API修改HTML DOM结构的API给javascript调用; 5、AJAX提供XMLHTTP API建立客户端和服务器端的通信,而且是异步通讯; 6、XHTML是用XML重...
标签: Web开发
1、DOM WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色,那就可以在javascript中用document.all[]访问这个TABLE。但DOM也有所不同,因为浏览器厂商之间的竞争,各浏览器厂商都开发...
标签: Web开发
前言: 最近在给一个电子商务网重构的时候,用ul li写了个导航,感觉挺有实用价值的,所以写出来给朋友瞧瞧。 实例效果图: 整体观察思考: 左下角是圆角,右上角也是圆角,中间可以平铺背景,这图的结构也可以看成左中右的结构,标题距离宽度差不多,我考虑用 ul li来写。 ul为整体平铺背景。 li设置固定...
标签: Web开发
在最开始学习web标准的时候有这么一条: 把所有和&特殊符号用编码表示 : 任何小于号(),不是标签的一部分,都必须被编码为& l t ; 任何大于号(),不是标签的一部分,都必须被编码为& g t ; 任何与号(&),不是实体的一部分的,都必须被编码为& a m p; 注:以上字符之间无空格。 而在我们平时的工作中经常...

经验教程

264

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部