HTML/HTML5/XHTML/XML/XPath小结

HTML小结

HTML 代表 Web 的结构层。HTML 文档由嵌套的 HTML 元素构成,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码,元素的内容是开始标签与结束标签之间的内容,而标签又可以含有属性。某些 HTML 元素具有空内容(empty content),也被称为空元素,空元素在开始标签中进行关闭(以开始标签的结束而结束),例如定义换行的<br/>标签以及在页面中创建水平线的<hr/>标签等。当显示页面时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行都会被算作一个空格,但定义预格式化文本<pre>标签中的内容除外。大多数 HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器显示时,通常会以新行来开始(和结束)。例如<h1><p><ul><table>等。内联元素在显示时通常不会以新行开始。例如<b><td><a><img>等。HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。HTML <span> 元素是内联元素,可用作文本的容器。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

很多标签都可以用来改变文本的外观,并为文本关联其隐藏的含义。总地来说,这些标签可以分成两类:基于内容的样式(contentbased style)和物理样式(physical style)。基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上。请注意这里面的区别。基于内容的标签赋予含义,而不是格式化。因此,它们对于自动处理来说非常重要;计算机并不关心文档的外观如何。

因为字体样式是通过语义线索来指定的,因此浏览器可以为用户选择一种合适的显示样式。由于不同地点的样式各种各样,所以使用基于内容的样式可以帮助你确保自己的文档对广大范围的读者来说都是有意义的。这一点在专门供那些盲人和残疾人所使用的浏览器上显得尤其重要,因为他们的显示选项可能和我们传统的文本根本不同,或者在某方面具有非常大的局限性。

当前的 HTML 和 XHTML 标准并没有为每一个基于内容的标签都定义一种格式;它们仅仅规定必须用与文档中普通文本不同的方式来显示基于内容的样式。标准甚至没有要求这些基于内容的样式彼此之间都要用不同的方式显示。在实际应用中,你可能会发现很多这样的标签和传统的印刷有着非常明显的关系,它们有着相似的含义和显示样式,而且在多数浏览器中都以相同的样式和字体来显示。

使用 HTML/XHTML 基于内容的样式标签时要遵从一些规则,因为仅仅是简单地想想文本该如何显示,而不必知道这些文本的含义是什么,是十分容易的。一旦你开始使用基于内容的样式之后,文档将会更加一致,而且可以更好地帮助执行自动搜索和内容编辑。这些标签是:

  • <abbr>
  • <acronym>
  • <cite>
  • <code>
  • <dfn>
  • <em>
  • <kbd>
  • <samp>
  • <strong>
  • <var>

在讨论基于内容的样式标签时,我们经常用到“意图”这个词。这是因为由标签传达的含义比浏览器显示文本的方式更为重要。然而,在某些情况下,可能是出于合法性或者版权等方面的原因的考虑,你希望文本以某种特殊的方式来显示(例如斜体或加粗)。在这种情况下,就可以对文本使用物理样式。

虽然其他文字处理系统的趋势是精确地控制样式和外观,但是在使用 HTML 或 XHTML 时,除非极少情况下,都应该避免使用物理标签。应当尽可能地向浏览器提供上下文信息,并使用基于内容的样式。尽管现在浏览器不过是以斜体或者粗体字来显示这些文本,但是将来的浏览器和各种文档生成工具可能会以非常有创建的方式来利用这些基于内容的样式。

当前的 HTML/XHTML 标准一共提供了 9 种物理样式,包括粗体(bold)、斜体(italic)、等宽(monospaced)、下划线(underlined)、删除线(strikethrough)、放大(larger)、缩小(smaller)、上标(superscripted)和下标(subscripted)文本。这些标签是:

  • <b>
  • <big>
  • <i>
  • <s>
  • <small>
  • <strike>
  • <sub>
  • <sup>
  • <tt>

提示:请记住这些物理样式标签对紧接的文本产生的强烈效果。要实现在整个文档范围内对文本显示的全面控制,请使用样式表。

HTML标题

标题(Heading)是通过 <h1> – <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

HTML注释

您也许会在 HTML 中偶尔发现条件注释:

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

HTML样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

HTML表格

大多数浏览器会把表头<th>显示为粗体居中的文本。

在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框:

浏览器可能会这样显示:

注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

在浏览器中显示如下:

单元格边距(Cell padding)与单元格间距(Cell spacing):

HTML超链接

超链接(hyper text),或者按照标准叫法称为锚(anchor),是使用 <a> 标签标记的,可以用两种方式表示。锚的一种类型是在文档中创建一个热点,当用户激活或选中(通常是使用鼠标)这个热点时,会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分,或触发某些与因特网服务相关的操作,例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个标记,该标记可以被超链接引用。锚的这两种类型都使用同样的标签;也许这就是它们拥有同样的名称的原因。但是我们发现,如果将它们区分开,把提供热点和超链接地址的锚看作“链接”,而用于标记文档的目标部分的锚称为“锚”,那么您将更容易理解这两种类型的锚。假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

HTML <meta> 元素

元数据(metadata)是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。下面的 meta 元素定义页面的描述:

下面的 meta 元素定义页面的关键词:

name 和 content 属性的作用是描述页面的内容。

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标(target):

<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:

如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。

实例

JavaScript:

VBScript:

HTML字符实体

在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。字符实体类似这样:

如需显示小于号,我们必须这样写:&lt; 或 &#60;。HTML 中的常用字符实体是不间断空格(non-breaking space):&nbsp;。

提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

HTML框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。框架结构标签(<frameset>)定义如何将窗口分割为框架,每个 frameset 定义了一系列行或列,rows/columns 的值规定了每行或每列占据屏幕的面积。框架标签(<frame>)定义了放置在每个框架中的 HTML 文档。在下面的这个例子中,我们设置了一个三列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的50%,第三列被设置为占据浏览器窗口的25%。HTML 文档 “frame_a.htm” 被置于第一个列中,HTML 文档 “frame_b.htm” 被置于第二个列中,而 HTML 文档 “frame_c.htm” 被置于第三个列中:

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize=”noresize”。为不支持框架的浏览器添加 <noframes> 标签。

重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

内联标签(<iframe>)可用作链接的目标(target)。链接的 target 属性必须引用 iframe 的 name 属性:

实例

XHTML小结

XHTML(可扩展超文本标记语言)是以 XML 格式编写的 HTML,是一种必须正确标记且格式良好的标记语言。与 HTML 相比最重要的区别:

文档结构

  • XHTML DOCTYPE 是强制性的
  • <html> 中的 XML namespace 属性是强制性的
  • <html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

  • XHTML 元素必须正确嵌套
  • XHTML 元素必须始终关闭
  • XHTML 元素必须小写
  • XHTML 文档必须有一个根元素

属性语法

  • XHTML 属性必须使用小写
  • XHTML 属性值必须用引号包围
  • XHTML 属性最小化也是禁止的

HTML5小结

 

基本的注意事项 – 有用的提示:

假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

请始终将正斜杠添加到子文件夹。假如这样书写链接:href=”http://www.w3school.com.cn/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href=”http://www.w3school.com.cn/html/”。



发表评论

电子邮件地址不会被公开。 必填项已用*标注