HTML介绍

来源：互联网发布：python 股票分析编辑：程序博客网时间：2024/05/17 22:16

2016.02.25 - 02.26
个人英文阅读练习笔记，原文地址：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction

在开始前
欲理解本文，使用浏览器来实践其中的内容可能会让您感觉更加舒畅。如果您还知道如何创建和编辑文本文件，可以测试本文呈现的例子。

Web浏览器中的网页的内容最根本的是文字。但网页中的内容在大多数时间都是风格文本而非纯文本。如今，网页设计者可以访问许多中不同的字体、字体尺寸、颜色、甚至字母表（例如，西班牙语，日语，俄语），且浏览器能够准确的展示它们大部分。网页还可能包含图片、视频片段以及背景音乐。它们可能包含下拉菜单、搜索框或可以根据它去访问别的页面（不管是在同一个网站还是在其它网站）的链接。一些网站甚至允许访问者自定义页面的显示以容纳用户个人偏好的设置和要求（如光亮要求、听力不太好或色盲）。页面常包含当页面剩余内容仍旧是静态时可以移动（滑动）的内容框。

一个典型的网页基于集中技术（如CSS，JavaScript, Flash, AJAX, JSON）来控制终端用户的所见，但最根本的技术的是开发者用HTML来写网页，若没有HTML则没有网页。浏览器通过阅读HTML内容开始将网页展示在客户端设备上。

W3C（万维网联盟，World Wide Web Consorium）和WHATWG（网络超文本应用技术工作组，Web Hypertex Application Working Group）维护HTML的国际标准和规格。WHATWG以不断发展”具有活力的标准”对待HTML，然而W3C同时工作于HTML演变（HTML 5.1）和HTML“快照”（最近是HTML5）。

HTML规格定义了一种可以用比较宽松的HTML语法或较严格的XML语法（扩展标记语言，Extensible Markup Language）来编写程序的语言。HTML也适用于网页应用程序的需求。HTML只描述内容的含义，不作风格和格式化。使用CSS可以定义HTML所描述内容的外观和布局。

此文提供介绍HTML的内容。若您曾对屏幕上网页浏览器内容背后的内容感到好奇过，那么此文就是学习开始的地方。

HTML的历史

物理学家Tim Berners-Lee在CERN（欧洲核研究组织），在20世纪80年代为科学家们想出了一种在因特网上分享文件的方法。在那之前，因特网通信被限制为纯文本，使用诸如邮件、FTP（文件传输协议）以及基于用户网讨论板这样的技术。HTML使用的内容模式存储在中央服务其中，但可被转移到可用浏览器查看的局域工作站中，这样就能够很简单的访问到内容和被标记“rich”的内容（诸如复杂的文本格式和图片）。HTML是从SGML衍生的，SGML是一种语法及其复杂用于标记或绑定文件中内容（文本或图形）的语言；自HTML5起，HTML不在打算延续SGML的语法。

什么是HTML

HTML是一种标记语言。当编辑者给出指令修订原稿时会对原稿做出标记（通常用蓝色铅笔），标记一词正是这一过程的描述。HTML中的”标记”的含义有所不同：一种用特定语法指示Web浏览器如何展示网页的语言。再一次，HTML根据“陈述”（用于展示每种类型内容的指令）分离“内容”（字，图片，视频，音频等）。HTML使用预定义元素集来定义内容类型。元素包含一个或多个包含或表达内容的“标签”。标签被角括号（< >）封闭起来，且后面的那个封闭标签的角括号以反斜扛（/）开始（即< / >）。“< keyword> … < /keyword>”中的keyword就是一个标签。

基本的HTML代码结构如下所示：

<html><head>    <title>Page title here</title></head><body>    This is sample text...    <!-- We use this syntax to write comments -->    <!-- Page content and rest of the tage here...-->    <!-- This is the actual area that gets show in the browser --></body></html>

大多数的浏览器都允许用户查看任何网页的HTML代码。如在Firefox中，按Ctrl + U就可以查看页面源代码。对于复杂的页面，初学者将发现其源代码几乎不可读，但只要您花一些时间来看一个简单页面的代码并将其和页面代码渲染比较一下，您就能够迅速理解其中的语法机制。

段落元素由开始标签””和封闭标签”“组成。以下包含在HTML段落元素中的样例代码显示一个段落。记住浏览器不会在一行中连续显示多于一个空格字符。

<p>You are beginning to learn HTML.</p>

该内容在浏览器中显示如下：
You are beginning to learn HTML.

在CodePEN中打开。在JSFIDDLE中打开。

浏览器使用标签作为如何展示标签内内容的指示器。

元素包含的内容通常也能够包含其它元素。如，强调元素（””)能够被嵌在段落元素中，用来对单词或词组进行强调：

<p>You are <em>beginning</em> to learn HTML.</p>

在浏览器中展示该内容如下：

You are beginning to learn HTML.

在CodePEN中打开。在JSFIDDLE中打开。

一些元素不能包含其它元素。如图像标签（”< img>”）指定内容的文件名（图片）作为属性：

<img src="smileyface.jpg" alt="Smiley face">

在XHTML（一种实现了HTML元素的XML概要）中，您会常放置一个前下划线在结束角括号以用来只是一个空元素的结束。

本文剩余部分将进入关于本模块所介绍的更多的细节。然而，若您想在行动中看到HTML，查看Mozilla Thimble，它是一种在线的交互编辑器，能够帮助您学习如何编写HTML。同样，查看HTML元素列表中的可用元素和它们的使用方法。

02.26

元素 - 最基本的构建块

HTML由一系列元素组成，这些元素定义了它们的内容的语义的含义。元素包含两个匹配标签且内容都被包含在两个标签中。如””元素表明一个段落；”< img>元素表明一张图片。见HTML 元素页面查看完整的列表。注：一些标签是自封闭的且不包含任何内容。

大多数元素可以包含其它元素，如此形成层叠结构。一个非常简单但完整的网页如下所示：

<html>    <head>        <title A minimal web page</title>    </head>    <body>        <p>You are in the beginning stage of learning HTML.</p>    </body></html>

可见，< html>元素围绕文件的剩余部分，< body>元素围绕了页面的内容。该结构常被看做是从树干(< html>)分支（在该例中指的是< body>和）出来的结构。该层次结构被称为DOM（文件对象模型，document object model）。

HTML文件由纯文本编写。可以用能够保存纯文本的任何编辑器（如Notepad，Notepad++或者Sublime Text）编写HTML代码，但大多数的HTML作者更喜欢用可以高亮语法和展示DOM的编辑器。您可以使用大写字符来书写标签名，但W3C推荐使用小写字母来书写。

HTML可以附加特定含义的内容，该内容开始于小于符号（”<”）且结束于大于符号（”>“)。这样的标记被称为标签。确保封闭标签，虽然有的标签默认关闭，然而对于其它非默认关闭的标签来说就可能产生错误（若忘记了封闭标签）。

以下是一个简单的例子：

<p>This is text within a paragraph.</p>

在该例中有一个开始标签和封闭标签。封闭标签以小于符号开始再紧跟前斜划线最后以大于符号结束的标签。HTML中的大多数元素都以开始和封闭标签书写。欲编写有效的代码，必须合适的嵌套开始和封闭标签，即以开始标签顺序相反的顺序书写封闭标签。

以下是一个有效代码的例子：

<em>I<strong>really</strong>mean that</em>.

以下是一个无效代码的例子：

<!--Invalid:--><em>I<strong>really</em>mean that</strong>.

在有效代码的例子中，内层的元素在外层的元素之前封闭。

一些元素不包含任何文本内容或任何的其它元素。这些空元素不需要封闭标签。以下是一个例子：

<img src="smileyface.jpg" alt="Smiley face">

XHTML中的空元素通常在标签大于符号前加一个前斜划线表封闭。

<img src="smileyface.jpg" alt="Smiley face"/>

在HTML中，该斜划线再Firefox中的含义是未实现，所以不应该使用该斜划线。在HTML模型下不要封闭空元素。

属性

开始标签可能会包含额外的信息，正如前面的例子所示。这样的信息被称为属性。属性通常由两部分组成：

属性名
属性值
一些属性可能只有一个值。它们是Boolean属性，它们可以只指定属性名或让属性值为空的方式被简写。因此，以下例子中的3条代码具有相同含义：

<input required="required"<input required=""><input required>

属性值由单个单词或数字组成，但必须用引号（单引号或双引号）关闭包含空格的值。许多开发者常用引号来这样避免错误：

<p class=foo bar> <!--(Beware , this probably does not mean what you think it means.)-->

在该例中，值被假定为”foo bar”，没有使用引号，该代码的含义为：

<p class="foo" bar="">

命名字符引用

命名字符引用（常被称为实体）被用来打印在HTML中具有特定意义的字符。如HTML解释小于和大于符号作为标签分隔符。当想在文本中展示大于字符时，可以使用命名字符引用。您需要知道一下四种命名字符引用：

&gt;表示大于符号（>）&lt;表示小于符号（<）&amp;表示&符号&quot;表示双引号

这里还有更多的实体，但以上四个是最重要的，因为他们代表HTML中具有特殊含义的字符。

注释和文件类型

HTML有一种嵌入注释（当所编写的页面被渲染在浏览器中时该内容不显示）的机制。注释对解释标记模块代码很有用，以给其它可能会继续工作在该页面的人一个笔记，或者提醒自己该些模块代码的含义。HTML注释用以下的符号封闭:

<!-- This is comment text -->

除了标签、文本内容和实体外，HTML在文件的第一行必须包含文件类型（doctype）的声明。该文件类型声明不是一个HTML标签，而是用于告之浏览器该页面是用哪一个版本的HTML所编写的。

在HTML5中，只有一个如下形式的声明：

<DOCTYPE html>

文件类型有一个长的和曲折的历史，但现在只需要知道文件类型是用来告知浏览器根据W3C标准来解释HTML和CSS代码并不要假设是20世纪90年代的IE浏览器。（见quirks mode）

在HTML 4.01中，文件类型被涉及DTD（文件类型定义，Document Type Definition），因为它基于SGML。在HTML 4.01中有3种不同的文件类型：严格（strict），过渡（transitional），以及框架集（frameset）。

严格DTD包含所有的HTML元素和属性，但是并不提出和启用元素（如字体）。框架集不被允许。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD// HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

过渡的DTD包含了所有的元素和属性，包括提出和启用元素（如字体）。框架集不被允许。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

框架集DTD允许框架集内容，否则跟HTML 4.01过渡型相同。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"

一个完整的小型文件

将这些内容集合在一块就可以形成一个极小的HTML文件样例。您可以将以下这段代码复制到一个文本编辑器中，并将该文件保存为myfirstdoc.html，并将其载入到一个浏览器中。确保用UTF-8编码保存该文件。因为该文件没有使用任何的风格，所以它看起来会非常的朴素，但这一切不是才刚刚开始么。

<!DOCTYPE html><html lang="en"><head>    <title>A tiny document</title></head><body>    <h1>Main heading in my document</h1>    <!-- Note that it is "h" + "1", not "h" + the letters "one" -->    <p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p></body></html>

[2016.02.25 - 21.23]

0 0