基于HTML5的移动门户网站的设计与实现外文翻译资料

3： Getting Started with HTML

Every developer knows at least something about HTML. It has become all-pervasive in recent years, and the chances are good that you have at least seen some HTML, even if you have never needed to write any. In this chapter, I am going back to the basics of HTML to make sure you get the fundamentals right—beginning with what HTML is for and how it works. Ill define the basic terminology HTML uses and show you some of the core HTML elements that pretty much every web page uses. As its name suggests, HTML is a markup language. This markup takes the form of elements applied to content, typically text. In the following sections, Ill explain the different aspects of HTML elements, explain how you can configure the elements with attributes, and describe the set of global attributes that can be used on all HTML elements. Table 3-1 provides the summary for this chapter.

Using Elements

Listing 3-1 shows a simple example of an HTML element applied to some text. Listing 3-1. Example of an HTML Element I like lt;codegt; appleslt;/codegt; and oranges. I have shown the element in bold—it has three parts. The first two are called tags. The start tag is lt;codegt;, and the end tag is lt;/codegt;. Between the tags is the elements content (in this case, the word apples). Together, the tags and the content form the code element, as shown in Figure 3-1.

Figure 3-1. The anatomy of an HTML element Elements are the way you tell the browser about your content. The effect of the element is applied to the element contents. Each of the HTML elements has a different and quite specific meaning—the code element, for example, represents a fragment of computer code.

Tip Element names are not case sensitive—browsers will recognize lt;CODEgt; and lt;codegt;, and even lt;CoDegt;, as start tags for the code element. In general, the convention is to adopt a single case format and stick to it. In recent years, the more common style has been to use lowercase characters throughout. This is the format I will use in this book.

HTML defines different types of element that fulfill various roles in an HTML document—the code element is an example of a sematic element. Semantic elements allow us to define the meaning of our content and the relationships between different parts of the content. Ill explain more about this in Chapter 8. You can see the effect of the code element in Figure 3-2.

Figure 3-2. The effect of the code element displayed in a broswer Notice that the browser doesnt display the element tags—its job is to interpret your HTML and render a view to the user that takes your elements into account. THE SEPARATION OF PRESENTATION AND CONTENT Some HTML elements have an impact on presentation—meaning that when the browser encounters one of these elements, it will change the way the content is displayed to the user. The code element is a good example. As Figure 3-1 shows, when the browser encounters the code element, it displays the enclosed content using a fixed-width font. The use of HTML elements to manage the way content is presented is now strongly discouraged. The idea is that you use HTML elements to define the structure and meaning of your content and Cascading Style Sheets (CSS) to control the way the content is presented to the user. Well come to CSS in Chapter 4. The elements that do affect presentation tend to be those that originated in the early versions of HTML, when the idea of separating presentation and content were not so rigorously enforced. Browsers will apply a default presentation style to these elements, such as the fixed-width font that is typically used for the code element. As Ill explain in Chapter 4, you can use CSS to override those default styles.

Understanding the Elements

Used in This Chapter To provide a refresher on HTML, I need to use some elements that I dont describe until later chapters. Table 3-2 lists these elements, along with a brief description and the chapter in which you can find full details.

Using Empty Elements You are not required to place any content between the start and end tags. If you dont, you create an empty element, like the one shown in Listing 3-2. Listing 3-2. An Empty HTML Element I like lt;codegt;lt;/codegt; apples and oranges. Not all elements make sense when they are empty (and code is one of these), but even so, this is still valid HTML.

Using Self-Closing Tags

You can express empty elements more concisely by using a single tag, as shown in Listing 3-3. Listing 3-3. Expressing an Empty Element Using a Single Tag I like lt;code/gt; apples and oranges. You combine the start and end tag into one—the stroke character (/), which is usually used to signify the start of the end tag, is placed at the end of the single tag. The element in Listing 3-2 and the element in Listing 3-3 are equivalent—the single tag is a more concise way of expressing the empty element. Using Void Elements There are some elements that must be expressed using a single tag—the HTML specification makes it illegal to place any content in them. These are known as void elements. One such element is hr, which is a grouping element and is used to denote a paragraph-level break in the content. (Youll see the other grouping elements in Chapter 9.) You can use void elements in one of two ways—the first is to specify only a start tag, as shown in Listing 3-4.

Listing 3-4. Specifying a Void Element Using Just a Start Tag I like apples and oranges. lt;hrgt; Today was warm and sunny. The browser knows that hr is a void element and doesnt expect to see a closing tag. You can also include a stroke to make the element consistent with empty elements, as shown in Listing 3-5.

Listing 3-5. Expressing Void Elements Using the Empty Element Structure I like apples and oranges. lt;hr /gt; Toda

剩余内容已隐藏，支付完成后下载完整资料

---

第三章 初探HTML

开发人员多少都知道一点HTML。近年来它的身影随处可见，即便是那些从不需要写HTML代码的人，也很可能见过一些。为了读者打好基础，本章将回头介绍HTML的基本知识——就从HTML的目标及其工作原理讲起吧。我会解释一些HTML中的基本术语，并且介绍一些几乎所有网页都要用到的核心元素。

顾名思义，HTML是一种标记语言。其标记以应用于文档内容（例如文本）的元素为其存在形式。在后面的各节中，我会解释各种HTML元素的区别，以及使用各种属性配置这些元素的方法，并且介绍一组可用于所有HTML元素的全局属性。

3.1 使用元素

I like lt;codegt; appleslt;/codesgt; and oranges.

这里用粗体标明元素。该元素分为三部分。其中有两部分称为标签（tag）：开始标签lt;codegt;和结束标签lt;/codegt;。夹在两个标签之间的事元素的内容（本例中为单词apples）。两个标签连同它们之间的内容构成了code元素。

元素是一种用来向浏览器说明文档内容的工具。其效果体现在内容之上。不同的元素有不同的确切含义。例如，前述code元素代表的是计算机代码片段。

HTML定义了各种各样的元素，它们在HTML文档中起着各不相同的作用。Code元素是语义元素的一个例子。语义元素可以用来说明内容的含义以及内容的不同部分之间的关系。第8章还会对此做进一步说明。

注意，浏览器不会显示元素的标签，它的任务是解读HTML文档，然后向用户呈现一个体现了HTML元素作用的视图。

3.1.1了解本章用到的元素

为了让读者对HTML有个初步的认识，我需要用到一些后面章节才会讲到的元素。

3.1.2使用空元素

元素的开始和结束标签之间并非一定要有内容。没有内容的元素称为空元素。

例如：I like lt;codegt;lt;/codegt;apples and oranges.

有些元素为空时没有意义（code就是其中之一），即便如此，它也是有效的HTML代码。

3.1.3使用自闭合标签

空元素可以更简洁的只用一个标签表示。

例如：I like lt;codegt;lt;/codegt;apples and oranges.

此例将开始标签和结束标签合二为一。通常用来表示结束标签开始的斜杠符号（/）在此被放到标签的末尾。上面例子中的元素等价，但只用一个标签的表示法更为简洁。

3.1.4使用虚元素

有些元素只能使用一个标签表示，在其中放置任何内容都不符合HTML规范。这类元素称为虚元素，hr就是这样一个元素。它是一种组织性元素，用来表示内容中段落级别的终止。虚元素有两种表示法。第一种只是用开始标签，如例子：

例如：I like lt;codegt;lt;/codegt;apples and oranges.

lt;hrgt;

Today was warm and sunny.

浏览器知道hr是虚元素，所以不会等待其结束标签出现。第二种表示法在此基础上加了一个斜杠符号，其形式与空元素一致。如下：

例如：I like lt;codegt;lt;/codegt;apples and oranges.

lt;hr/gt;

Today was warm and sunny.

我更喜欢这种表示法，并且会在本书中采用。顺便提一句，hr元素也是一个具有呈现形式含义的元素，它会显示为一条横线（这也是其名称的由来）。

3.2 使用元素属性

元素可以用属性（attribute）进行配置。如下应用到a元素上的一个属性。这个元素用来生成超链接。点击超链接就会加载另一个HTML文档。

例如：I like lt;a href=”/apples.html”gt;appleslt;/agt; and oranges.

属性只能用在开始标签或单个标签上，不能用于结束标签。属性具有名称和值两部分。

有一些全局属性可用于所有HTML元素，本章稍微将有介绍。除了这些全局属性，元素还有用来提供其特有配置信息的专有属性。href属性就限于a元素，它配置的是超链接的目的URL。 a元素定义了一批专有属性，它们会在第8章中得到说明。

3.2.1一个元素应用多个元素

一个元素可以应用多个属性，这些属性间以一个或多个空格分隔即可。示例如下：

例如：I like lt;a class=”link” href=”/apples.html” id=”firstlink”gt;appleslt;/agt; and oranges.

这些属性的顺序未作要求，全局属性和元素专有属性可随意交错。上面的例子就是这样做的，其中class和id是全局属性。

3.2.2使用布尔属性

有些属性属于布尔属性，这种属性不需要设定一个值，只需要将属性名添加到元素中即可，如下所示：

例如：Enter your name: lt;input disabledgt;

此例中的布尔属性是disabled，元素中只添加了该属性的名称。 input元素为用户在HTML表单中输入数据提供了一种手段。添加disabled属性可以阻止用户输入数据。布尔属性有一点小古怪，它以本来存在而不是用户为其设定的值对元素进行配置。上例中并未这样设置disabled=”true”，仅仅是添加了disabled这个词而已。为布尔属性指定一个空字符串(“”)或属性名称字符串作为其值也有同样的效果，如下所示：

例如：Enter your name: lt;input disabled=””gt;

Enter your name: lt;input disabled=”disabled”gt;

3.2.3使用自定义属性

用户可自定义属性，这种属性必须是以data-开头。如下所示：

例如：Enter your name: lt;input disabled=”true” data-creator=”adam” data-purpose=”collection”gt;

这个属性的恰当名称是作者定义属性，有事又称扩展属性。不过我更喜欢使用自定义属性这个常见得多的名称。

自定义属性是对HTML4中“浏览器应当忽略不认识的属性”这种广泛应用的技巧的正式规定。在这类属性名称之前添加前缀data-是为了避免与HTML的未来版本中可能增加的属性名冲突。自定义属性与CSS和JavaScript结合起来很有用。

3.3创建HTML文档

元素和属性不会孤立存在，他们使用来标记HTML文档内容的。要创建一个HTML文档，最简单的方法是传建一个文本文件，并将其文件扩展名设置成为这类文件规定的.html。这个文件可以从磁盘载入浏览器，也可以从WEB服务器载入。

在本章中，HTML文档都是针对浏览器创建的。这样看待HTML文档较为省事，而且HTML文档最常见的使用方式也是浏览器查看。但是还有其他情况需要考虑。用于处理HTML稳当的各种软件有一个共同的名称叫做用户代理。浏览器是最流行的用户代理，但不是唯一的一种。

非浏览器类用户代理现在还很少，以后可能会躲起来。在HTML5中更加强调将内容与呈现形式分开，正是因为认识到HTML内容并不总是被显示给用户看。本书尽管说的还是浏览器（因为这是最重要，最强势的一类用户代理），但是最好还是记住：你的HTML文档有可能会给别的一些软件处理。

HTML文档具有特定的结构，最起码要有一些关键性的元素。本书绝大多数示例均为完整的HTML文档，这样读者很快就能轻松看出元素的应用方式和效果。为了给你一个初步印象，在此我要先带你看一个基本的HTML文档。代码清单中所有的HTML元素都会在后边各章节进行的详细的讲解，本章提供了他们的相关参照信息。

尽管本书讲的是HTML,但我要是不提一下XHTML的话那就太不负责了。符合HTML的语法的文档不一定符合XML语法，因此用标准的XML解析程序处理HTML文档可能会遇到麻烦。

为了解决这个问题，可以使用XHTML，她是HTML 的XML序列化形式（这就是说，衣服和XML规范的方式来表达文档的内容以及HTML元素和属性，以便XML解析程序处理）。此外，也可以创建既是有效HTML文档也是有效XML文档的多语文档，不过这要求使用HTML语法的一个子集。本书不讲XHTML，想了解更多XHTML方面的信息的读者可以参阅这个网址：http//wiki.whatwg.org/wiki/HTML-vs.-XHTML.。

3.3.1外层结构

HTML文档的外层结构由两个元素确定：DOCTYPE和html，如代码清单所示。

代码清单3—11 HTML文档的外层结构

lt;!DOCTYPE HTMLgt;

lt;htmlgt;

lt;!-- elements go here --

lt;/htmlgt;

上例中的DOCTYPE元素让浏览器明白其处理的是HTML文档。这是用布尔属性HTNL表达的：

lt;!DOCTYPE HTMLgt;

紧跟着DOCTYPE元素的是html元素的开始标签。它告诉浏览器：自此直到html

结束标签，所有元素内容都应作为HTML处理。用了DOCTYPE元素之后又接着使用html元素看起来有点奇怪，其实早在HTML标准刚开始崭露头角的时候，具有同等地位的还有一些别的标记语言，文档中可能会混合使用多种标记语言。

如今HTML语言已成为占绝对优势的标记语言，即使在文档中省略DOCTYPE和html元素，绝大多数浏览器仍会假定自己处理的是HTML文档。不过这并不意味着不必在使用这两股元素。这是因为他们有着重要的用途，而且依赖浏览器的默认行为模式就像轻信陌生人一样不靠谱-多数情况下事情很顺利，但冷不防就会出岔子。关于DOCTYPE和HTNL元素详见第七章。

3.3.2元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部，如代码清单3-12所示。

代码清单3-12 在HTML文档中添加HEAD元素

lt;!DOCTYPE HTMLgt;

lt;htmlgt;

lt;headgt;

lt;!-- metadata goes here --gt;

lt;titlegt;Examplelt;/titlegt;

lt;/headgt;

lt;/htmlgt;

这个清单中的元素少到不能再少，只有title元素一项。按说HTNL文档中都应该包含title元素，但是没有的话浏览器通常也不会在意。大多数浏览器把title元素的内容显示在其窗口的滥觞或用来显示文档的标签页的标签位置上。第七章会详细解说head元素和title元素，以及可以放在head元素中的所有其他元数据元素。

提示：代码清单也演示了HTML文档中注释的写法。注释以标签《！--开头，以-- gt;结尾。浏览器会忽略这两个标签之间的一切内容。

除了可以包含使用说明HTML文档的元素，head元素还能用来规定文档与外部资源的关系，定义内嵌CSS样式，放置和载入脚本程序。第七章会有详细讲解。

3.3.3内容

稳当的第三部分是文档内容，这也是最后一个部分放在body元素中，如代码清单3-13中所示：

代码清单3-13，在HTML文档中加入bady元素

lt;!DOCTYPE HTMLgt;

lt;htmlgt;

lt;headgt;

lt;!-- metadata goes here --gt;

lt;titlegt;Examplelt;/titlegt;

lt;/headgt;

lt;bodygt;

lt;!-- content and elements go here --gt;

I like lt;codegt;appleslt;/codegt; and oranges.

lt;/bodygt;

lt;/htmlgt;

Body元素告诉浏览器该向用户显示文档的哪些部分。自然，本书大部分篇幅都花在那些需要放在body元素之中的东西上面。把body元素加进来后，HTML文档的基本框架也已成型。

<stron

剩余内容已隐藏，支付完成后下载完整资料</stron

---

资料编号：[153858]，资料为PDF文档或Word文档，PDF文档可免费转换为Word