快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

伟德国际1949始于英国_酒文化网进入



HTML 是开拓 Web 利用的根基。今朝已经稀有以千亿的应用 HTML 说话编写的网页。HTML 说话的规范也赓续在演进和更新。HTML 说话虽然上手对照简单,然则若何开拓出组织优越、布局清晰和可掩护性高的 HTML 文档,对很多 Web 开拓职员来说,也是一个值得探究的话题。跟着 Ajax 利用的盛行,一种称为“富含语义的 HTML(Semantic HTML)”的最佳实践,徐徐被广大年夜 Web 开拓职员所推重。这种实践的主要思惟是还 HTML 以原先面貌,只应用 HTML 来伟德国际1949始于英国描述文档的布局,而把与展示相关的部分从 HTML 文档中剥离出去,交给 CSS 来处置惩罚。本文将具体先容这一最佳实践,涉及的内容包括 HTML 规范的演化历史、保举应用的 HTML 元素和属性、一系列详细的最佳实践和微款式。

下面从富含语义的 HTML 的简要先容开始,所涉及的内容包括 HTML 规范历史以及它与 CSS 和 JavaScript 的关系。

富含语义的 HTML 先容

富含语义的 HTML(Semantic HTML)指的是编写 HTML 文档的一种很好的实践。这种实践要求在编写 HTML 文档时,尽可能的应用 HTML 规范中定义的与文档布局相关的富含语义的元素,而避免应用与展示相关的元素,将展示相关的内容交给 CSS 去处置惩罚。经由过程利用这种实践,可以将 HTML 文档的布局与展示分离,使两者达到疏松耦合。这种疏松耦合带来的好处是使得布局和展示可以分手自力变更,不会杂糅在一路。当只必要改动 Web 利用的外不雅时,抱负环境下,Web 利用的 HTML 文档都不必要改动,只必要改动 CSS 文件即可。

Ajax 利用的盛行,从一个方面推动了这种实践的盛行。今朝的 Web 2.0 利用都要求快速上线,并且以渐进的要领赓续推出新功能,即所谓的“永世 beta 版(perpetual beta)”。这种需求对付 Web 利用的架构有对照高的要求。只有在各个部分疏松耦合的环境下,快速添加新功能或改进已有功能才是可能的。富含语义的 HTML 的实践匆匆进了 Web 利用的疏松耦合,是以越来越被广大年夜 Web 开拓职员所吸收。别的,HTML 说话自身的演化成长,也从一个侧面反应出了这个趋势。下面将从简要先容 HTML 说话的历史开始,并先容富含语义的 HTML 与 CSS 和 Ajax 利用的关系。

HTML 的历史

HTML 说话从出生之日起不停在赓续演化,其规范的版本也有很多。HTML 的成长历史可以简要地概括如下。

HTML 最初的草案 HTML 最早应用在欧洲核子能钻研机构中,用来方便钻研职员应用和共享文档。在 1991 年呈现的关于 HTML 的最早的阐明中,HTML 中共包孕 22 个元素,此中的 13 个保留到了 HTML 4 中。因为 HTML 最初是用来描述科学文档的,这 22 个元素基础都是用来描述文档的布局的。比如用来表示文档之间的超链接;

表示文档中的段落;、、、、 和用来表示不合级其余标题。 HTML 2.0HTML 2.0 规范在 1995 年 11 月宣布为 RFC 1866。2.0 规范中增添了和与表单提交相关的 、 和等元素。HTML 3.2HTML 3.2 规范在 1997 年 1 月作为 W3C 的保举规范宣布。恰是在这个版本中,由 Netscape 和微软的 Internet Explorer 引入的很多与展示相关的元素被规范化。这些元素包括 、、、、、 和等。这些元素使得 HTML 页面的布局与展示被杂糅在一路。HTML 4.01HTML 4.01 规范在 1999 年 12 月作为 W3C 的保举规范宣布,并于 2000 年 5 月成为国际标准。HTML 4.01 规范试图办理 HTML 3.2 规范中引入的与展示相关的元素的问题,与此同时,又必要斟酌规范的向后兼容性。HTML 4.01 规范把许多与表示相关的元素标记为废弃的,不保举应用。同时引入了三种“风格(flavor)”。在“严格(Strict)”风格中,废弃的元素是不能应用的;在“过渡性(Transitional)”风格中,废弃的元素是可以应用的;在“框架(Frameset)”风格中,只容许应用与框架相关的元素。HTML 5作为 HTML 规范的下一个版本,HTML 5 引入了更多富含语义的元素,如表示网站的导航栏, 表示文档中的章节;与此同时,在 HTML 4.01 中被废弃的一些元素,如和等被移除了。

从上面列出的 HTML 规范的历史中可以看出,HTML 从仅包孕表示文档布局的元素,到后来引入了与展示相关的元素,再到今朝两者并存,以及下一个版本中展示相关的元素部分被移除。HTML 规范的成长趋势是与展示相关的元素将慢慢消掉。HTML 文档应该描述文档本身,而不应该描述文档若何展示给用户。HTML 规范的成长以一种螺旋式上升的要领实践着这个最初的目标。

富含语义的 HTML 与 CSS

在 HTML 中,与展示相关的元素的引入,主如果因为当时并没有好的要领来指明 HTML 文档中元素的样式。比如将一段文本用加粗或倾斜的字体来显示。在 CSS 广泛利用之前,只能经由过程 HTML 元素或属性来实现。由此引入了和这样的元素。跟着 CSS 规范在浏览器中获得广泛的支持,Web 开拓职员有了更好的要领来指明 HTML 文档中元素的样式。比如将一段文本加粗显示可以应用 CSS 语法 {font-weight : bold;} 来实现。恰是因为 CSS 的呈现与盛行,富含语义的 HTML 实践才成为可能。

富含语义的 HTML 与 Ajax 利用

今朝 Ajax 利用异常盛行,越来越多的利用采纳 Ajax 技巧来前进自身的用户体验。Ajax 虽然是基于原有的 HTML、JavaScript 和 CSS 等技巧,然则它从新定义了这三种技巧在 Web 利用开拓中的定位。一个范例的 Ajax 利用的布局如 图 1 所示。

图 1. Ajax 利用的范例布局图

在 图 1 中可以看到,Ajax 利用由三个部分组成,分手是布局、展示和行径。布局指的是利用的基础内容布局,由 HTML 来描述;展示指的是利用的外不雅,包括颜色、字体大年夜小等样式,由 CSS 来描述;行径指的是利用与用户的交互,包括界面的部分刷新、处置惩罚与办事器真个交互等,由 JavaScript 来描述。在这三个部分中,由 HTML 描述的文档布局是全部 Ajax 利用的根基,CSS 经由过程各类选择器为文档利用样式,而 JavaScript 则经由过程 DOM 操作来改动文档布局。

富含语义的 HTML 为 Ajax 利用供给了描述布局的最佳要领。在开拓 Ajax 利用时,从一系列富含语义的 HTML 文档启程,将为后面的开拓打下优越的根基。HTML 规范中元素和属性浩繁,而富含语义的 HTML 的实践则保举应用 HTML 规范中表示文档布局和富含语义的元素和属性。下面将具体先容这些保举应用的元素和属性,同时也会评论争论那些不建议应用的与展示相关的元素和属性,并阐明若何用 CSS 调换它们。

HTML 元素与属性

下面将先容 HTML 4.01 规范中的一些紧张的元素与属性。这些元素与属性大年夜致上分成两类,一类是表示文档布局和富含语义的,是保举应用的;另一类是与文档的展示相关的,是不保举应用的,而应该用 CSS 来实现响应的展示效果。

文档布局和富含语义的元素

文档布局和富含语义的元素的先容见 表 1。

表 1. 文档布局和富含语义的元素先容

元素

阐明

、、、、 和

、、、、 和等六个元素用来表示不合级其余标题。 表示紧张性最高的, 表示紧张性最低的。浏览器对付不合紧张性的标题会有默认的显示样式,一样平常是经由过程字体大年夜小来区分。当必要表示文档中每个部分的标题时,保举应用这六个元素。

元素用来表示文档中的一个段落。HTML 文档中的自然段落保举应用该元向来表示。

和两个元素用来表示对文档中文本的强调。在强调性方面, 要高于 。浏览器一样平常把中的文本显示为斜体,把中的文本显示为粗体。

和元素用来表示缩写词,此中表示一样平常的缩写词,如“Inc.”是“incorporated”的缩写;而表示由首字母组成的缩写词,如“UN”是“United Nations”的缩写。这两个元素的文本是缩写词本身,一样平常经由过程 title 属性来阐明完备的词组。如 UN。

和元素用来表示文档中的引用。假如在文档中必要引用其它人说过的话或是来自其它文献资料的内容,应该应用这两个元素。 用来表示较长的引用,一样平常自成一个段落; 则表示较短的引用,一样平常嵌在原始文本中。两个元素的 cite 属性用来给出引用文本的出处(URI)。浏览器平日会把显示在缩进的块中,伟德国际1949始于英国会为元素的内容添加引号。下面给出两个元素的示例:Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.;

As Abraham Lincoln said, all men are created equal.

、、

和元素用来表示列表型的内容。 表示的是无序列表; 表示的是有序列表;

表示列表中的条款。

、、

和元素分腕表示术语及其描述。 表示和对的列表。

元素表示对外部资料的引用。与和元素不合的是, 里面包孕的是资料的名称,而不是内容。如 JavaScript 高档法度榜样设计

元素表示法度榜样源代码。假如必要在 HTML 文档中嵌入一段谋略机代码,应该应用该元素。如 System.out.println("Hello World!");

与展示相关的元素和属性

与展示相关的元素和属性的先容见 表 2。 表 2 中给出了响应的 CSS 替代实现要领。

表 2. 展示相关的元素和属性先容

元素或属性

阐明

替代实现

元素用来将文档中的一个部分居中显示。

将一个元素水平居中显示的要领有很多。此中一种做法是应用自动空缺边,即:{margin : 0 auto;}

元素用来设置文本的字体。如 Font

应用 CSS 来实现:{font : bold 12px;}

和元素用来实现在文本中心划线的效果。如 Sample。

应用 CSS 来实现:{text-decoration:line-through;}

元素用来实现在文本下添加下划线的效果。如 Sample

应用 CSS 来实现:{text-decoration:underline;}

元素用来实现文本加粗的效果。

应用 CSS 来实现:{font-weight : bold;}

元素用来实现文本倾斜的效果。

应用 CSS 来实现:{font-style: italic;}

元素用来表示与打字机效果一样的等宽字体显示。如 Sample

应用 CSS 中的 font 来设置等宽字体。

元素用来使得文本的字体变大年夜。

应用 CSS 来实现:{font-size : 200%;}

元素用来使得文本的字体变小。

应用 CSS 来实现:{font-size : 50%;}

元素用来在页面上添加一条水平线。

可以用

元素代替 。经由过程设置

的大年夜小和背景颜色来达到同样的效果。

@color

color 属性用在顶用来表示字体的颜色。

应用 CSS 来实现:{color : red;}

@bgcolor

bgcolor 属性用来设置元素的背景颜色。

应用 CSS 来实现:{background-color : red;}

@align

align 属性用来设置元素内容的水平对齐要领。根据所利用的元素的不合,其可选的值也不合。

必要根据不合的元素选用不合的 CSS 样式。一样平常环境下,可以用 text-align 来代替。

@valign

valign 属性用来设置表格中一行的垂直对齐要领。

根据属性的值不合,应用不合的 CSS。如 valign = bottom 的环境,可以采纳绝对定位并设置 bottom 为 0 来实现。

@face, @size

face 和 size 都是元素的属性,分手用来表示字体家族和大年夜小。

应用 CSS 来实现:{font-family : verdana; font-size : 12px;}

上面先容的这些元素和属性,为编写富含语义的 HTML 文档供给了最根基的构建元素。除此之外,在编写富含语义的 HTML 文档时,还有很多不错的最佳实践可以参考。运用这些实践,将可以从加倍宏不雅的角度来看待富含语义的 HTML。下面将详细先容这些实践。

最佳实践

在编写富含语义的 HTML 文档时,有一些对照好的做法可以借鉴。遵照这些做法,将赞助避免很多常见的问题。这些好的实践包括在编写 HTML 文档之前必要选用相宜的 DTD,编写完成之后必要验证 HTML 文档的语法,在编写历程中必要选用得当的元素和 class 属性来表示语义等。下面将详细先容若何在详细的 HTML 文档编写历程中利用这些最佳实践。

选用相宜的 DTD

HTML 文档中的文档类型声明(Document type declaration,DTD)用来声明该文档所应用的 HTML 规范的版本。该声明可以赞助浏览器确定若何显示该文档。今朝主流的 HTML 规范版本是 4.01,同时 HTML 4.01 供给三种风格,是以对照常用的 HTML 文档类型声明有 表 3 中所示的三种。

表 3. HTML 4.01 规范对应的 DTD 阐明

文档类型

文档类型声明

阐明

HTML 4.01 严格型

不容许应用废弃的与展示相关的元素与属性

HTML 4.01 过渡型

可以应用所有元素和属性

HTML 4.01 框架型

可以应用与框架相关的元素和属性

对付富含语义的 HTML 文档来说,平日来说是不应该应用与展示相关的元素与属性的。是以,HTML 4.01 严格型的文档类型声明是最得当的。不过有些文档布局语义,只应用 HTML 4.01 严格型中规定的元素和属性的话,是无法实现的。(关于这一点的详细阐明,见 绕开“灰色地带”)。综合来说,对照好的协调规划是应用 HTML 4.01 过渡型的文档类型声明,然则在文档中避免应用废弃的元素和属性。假如可以确定 HTML 4.01 严格型中规定的元素和属性已经足伟德国际1949始于英国够的话,应用该类型的文档类型声明是最好不过的选择。

必要阐明的是,今朝的浏览器都有很强的容错性和向后兼容性。是以,即便没有精确的声明文档类型,浏览器也能精确的显示。但这并不料味着可以放弃应用精确的文档类型声明。

验证你的 HTML

在选择好了文档类型声明之后,别的一个必须要做的步骤是应用 HTML 语法验证器来验证 HTML 文档。W3C 供给了一个 HTML 文档验证器。该验证器可以根据 URL 来验证,也可以验证用户上传的 HTML 文件或是直接输入的 HTML 代码。该验证器会根据文档的类型声明进行校验,并给出具体的信息。可以根据验证的结果进一步的改动 HTML 文档。 图 2 中给出了对一段不相符 HTML 4.01 严格型语法的 HTML 文档进行验证的结果。

图 2. 应用 W3C HTML 语法验证器的结果

图 2 中的 HTML 文档在元素中应用了属性 start,是以不相符 HTML 4.01 严格型规范。假如改成 HTML 4.01 过渡型的文档类型声明便是合法的。

应用相宜的元素

HTML 4.01 规范中供给了不少语义富厚的元素,应该把这些元素利用在得当其语义的地方。大年夜多半 Web 开拓职员对付常用的 HTML 元素对照认识,应用也较多。对付一些不太常见的元素则很少应用,而用其它元向来代替。比如

和就在很多环境下被用来代替其它元素。虽然将

和和 CSS 相结合,都可以达到预期的显示效果,然则这样会削弱文档本身的语义。 代码清单 1 和 清单 2 中给出两种 HTML 文档的写法。 代码清单 1 中应用元素,并经由过程 class 属性为 header 来注解该元素的语义是“标题”。这种环境下,采纳 代码清单 2 中给出的做法,应用 HTML 规范供给的元素会更相宜。由于本身就已经包孕了“标题”的语义,就不必要再经由过程 class 属性来阐清楚明了。

清单 1. 差错的 HTML 元素选择

标题

内容

清单 2.伟德国际1949始于英国 精确的 HTML 元素选择

标题

内容

避免差错的元素应用

对付 HTML 中的元素,浏览器会有默认的展示样式。比如元素,平日来说浏览器会以缩进的要领来显示此中被引用的文本;而元素,浏览器则会把此中的文本显示为斜体。这种默认的展示样式会造成一种差错的元素应用要领,即为了达到某种展示效果而应用该元素,而轻忽元素本身的语义。比如盼望将一段文本以缩进的要领显示,就应用元素,纵然该段文本并非是引用自外部文档的。

这种要领的问题在于过分依附于浏览器的默认样式而漠视元素的语义。一旦浏览器的默认样式发生变更或是被其它 CSS 样式所改动,蓝本预期的展示效果就无法实现。

应用富含语义的 class 属性

HTML 元素的 class 属性为应用 CSS 来改动元素的样式供给了切入点。一个好的 class 属性可以为已有的 HTML 元素增添语义。比如中, 本身的语义是表示标题,而经由过程应用 important 这样一个 class 属性的值,进一步阐明该标题是对照紧张的。可以经由过程 CSS 为该标题添加加粗、不合的颜色等样式来凸起该语义。对付类似

和这样并没有附加语义,而只是纯真作为容器应用的 HTML 元向来说,好的 class 属性可以为其添加语义。比如

,经由过程 class 属性就为该

添加语义,阐明其表示的是一段择要。

一个好的 class 属性值应该要阐明其对应的 HTML 元素的感化,而不应该阐明该元素的展现样式。因为 class 属性会在 CSS 中作为选择器来应用,是以很轻易就误用一些表示展现样式的名称。比如 redTextBlueBorder 这样的名称,虽然清晰的描述了其展现样式是血色翰墨加上蓝色边框,然则并没有描述元素的感化,是不好的名称。假如必要对样式进行改动,比如改成蓝色翰墨加上血色边框,那么名称也必要响应的改动,变成 blueTextRedBorder。一个好的名称,在所描述的元素的感化没有变更时,即便展现的样式发生改变,就不必要改动。

绕开“灰色地带”

只管保举应用表示文档布局和富含语义的 HTML 元素和属性来编写 HTML 文档,然则在有些环境下,不得不应用与展示相关的元素和属性来完成特定的功能。这是实践富含语义的 HTML 中的“灰色地带”。下面枚举几个常见的环境:

有序列表元素的属性 start 和

元素的 value 属性在 HTML 4.01 严格型文档类型声明中是被废弃的。然则这两个属性是用来节制有序列表的数字编号顺序的惟一要领。

元素在 4.01 严格型文档类型声明中是不被容许的。

和元素虽然是与展示相关,然则在 HTML 4.01 严格型文档类型声明中仍旧是合法的。

在很多时刻, 元素被用来作为结构的手段。然而从语义上来说, 更得当用来显示表格型的数据。保举的要领是应用

元向来进行页面结构。CSS 3 中引入了繁杂的网格结构。

恰是因为上面所述这些“灰色地带”的存在,平日来说,今朝最适用的是 HTML 4.01 过渡型文档类型声明。

之前关于富含语义的 HTML 的先容,都是从基础元素和属性的角度启程,下面将先容富含语义的 HTML 组件:微款式。

微款式(Microformat)

微款式(Microformat)是满意特定模式的有组织的 HTML 片断,用来描述网页中富含语义的实体。在编写 HTML 文档时,常常会必要包孕某些富含语义的实体,包括人、事故、评论、地舆位置和小我简历等。比如在小我博客中常常会包括作者本人的基础信息。微款式定义了描述这些实体的 HTML 应该具有的款式。经由过程应用微款式,这些实体的语义得以在 HTML 中保留。微款式是富含语义的 HTML 这一指示原则的优越实践。它将对语义的保留提升到了 HTML 片断的层次。微款式应用富含语义的 HTML 元素和 class 属性。下面经由过程一个实例来阐明微款式的用法。

hCard 是一种用来描述人、公司、组织机构和地点的微款式。 代码清单 3 中给出了一个实例。

清单 3. hCard 微款式实例

成富

事情:

东北旺西路8号

海淀区,

北京市,

100193

中国

事情8245xxxx

家庭138xxxxxxx

电子邮件:

chengfbj@cn.ibm.com

在 代码清单 3 中,微款式 hCard 应用了

和这两个通用 HTML 元素,加上富含语义的 street-address、postal-code、country-name、tel 和 email 等 class 属性。 代码清单 3 中的 HTML 片断清晰的表达了“人”这样一个实体的语义。Web 开拓职员可以应用不合的样式来显示这样一个实体。

在编写 HTML 文档时,假如必要描述的实体已经有相关的微款式的规范,应该按照响应的规范来应用相宜的 HTML 元素和 class 属性。

至此,关于富含语义的 HTML 的主要内容就已经先容完毕,下面先容一些相关的其它话题。

其它话题

下面先容与富含语义的 HTML 相关的其它话题,主要与可造访性(Accessibility)相关。

可造访性

可造访性指的是网页内容应该可以被残障人士所造访。对付掉明的用户来说,他必要应用屏幕涉猎器这样的设备来读取网页的内容。富含语义的 HTML 文档可以有效的为屏幕涉猎器供给语义信息,从而赞助它更好的将文档的含义传达给用户。因为文档的展示对用户是弗成见的,是以文档的语义就显得尤为紧张。

比如,在文档中常常必要对一段翰墨进行着重强调。假如应用与展示相关的元素,可以写成 Text。平日来说,浏览器会用粗体来显示这段文本,从而传达给用户强调的语义。然则对付屏幕涉猎器来说,它并不能很好的理解所要传达的语义,可能是表示强调,也可能只是用粗体显示的通俗文本。然则应用 Text 的话就不一样了,由于元素本身就包孕了强调的语义,屏幕涉猎伟德国际1949始于英国器可以采纳相宜的要领来传达出来,比如加重朗读时的语调等。

富含语义的 HTML 文档也能更好的被搜索引擎所理解。

总结

本文具体先容了今朝 Ajax 利用开拓中的一个最佳实践“富含语义的 HTML”,即 HTML 文档应该只表示 Web 利用的布局,而不是展示。在编写 HTML 文档的时刻,应该只管即便应用 HTML 规范中表示文档布局和富含语义的元素和属性。本文中先容了 HTML 规范的历史以及规范中哪些元素和属性是保举应用的。与此同时,还给出了一系列编写 HTML 文档时的最佳实践。着末,先容了微款式以及可造访性相关的内容。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: