HTML 菜鸟进阶教程 !.doc_咨信网zixin.com.cn

资源描述

一、什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签 HTML 文档 = 网页 HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容： <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> 例子解释 <html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落二、HTML 基础基本的 HTML 标签 - 四个实例HTML 标题 HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。实例 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> HTML 段落 HTML 段落是通过 <p> 标签进行定义的。实例 <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML 链接 HTML 链接是通过 <a> 标签进行定义的。实例 <a href="">This is a link</a> 注释：在 href 属性中指定链接的地址。 HTML 图像 HTML 图像是通过 <img> 标签进行定义的。实例 <img src="w3school.jpg" width="104" height="142" /> 注释：图像的名称和尺寸是以属性的形式提供的。三、HTML 元素 HTML 文档是由 HTML 元素定义的。 HTML 元素 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。开始标签元素内容结束标签 <p> This is a paragraph </p> <a href="default.htm" > This is a link </a> <br /> 注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。 HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性提示：您将在本教程的下一章中学习更多有关属性的内容。嵌套的 HTML 元素大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。 HTML 文档由嵌套的 HTML 元素构成。 HTML 文档实例 <html> <body> <p>This is my first paragraph.</p> </body> </html> 上面的例子包含三个 HTML 元素。 HTML 实例解释 <p> 元素： <p>This is my first paragraph.</p> 这个 <p> 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：This is my first paragraph。 <body> 元素： <body> <p>This is my first paragraph.</p> </body> <body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。元素内容是另一个 HTML 元素（p 元素）。 <html> 元素： <html> <body> <p>This is my first paragraph.</p> </body> </html> <html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。元素内容是另一个 HTML 元素（body 元素）。不要忘记结束标签即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML： <p>This is a paragraph <p>This is a paragraph 上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。注释：未来的 HTML 版本不允许省略结束标签。空的 HTML 元素没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。 HTML 提示：使用小写标签 HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。 W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。四、HTML 属性属性为 HTML 元素提供附加信息。 HTML 属性 HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。属性实例 HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定： <a href="">This is a link</a> 更多 HTML 属性实例属性例子 1: <h1> 定义标题的开始。 <h1 align="center"> 拥有关于对齐方式的附加信息。 TIY : 居中排列标题属性例子 2: <body> 定义 HTML 文档的主体。 <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。 TIY : 背景颜色属性例子 3: <table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容） <table border="1"> 拥有关于表格边框的附加信息。 HTML 提示：使用小写属性属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。始终为属性值加引号属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如： name='Bill "HelloWorld" Gates' HTML 属性参考手册我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：完整的 HTML 参考手册下面列出了适用于大多数 HTML 元素的属性：属性值描述 Class classname 规定元素的类名（classname） Id id 规定元素的唯一 id style style_definition 规定元素的行内样式（inline style） title text 规定元素的额外信息（可在工具提示中显示）如需更多关于标准属性的信息，请访问： HTML 标准属性参考手册五、HTML 标题在 HTML 文档中，标题很重要。 HTML 标题标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。 <h1> 定义最大的标题。<h6> 定义最小的标题。实例 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> 注释：浏览器会自动地在标题的前后添加空行。注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。标题很重要请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 HTML 水平线 <hr /> 标签在 HTML 页面中创建水平线。 hr 元素可用于分隔内容。实例 <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> 提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。 HTML 注释可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释是这样写的：实例  注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。提示：合理地使用注释可以对未来的代码编辑工作产生帮助。 HTML 提示 - 如何查看源代码您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？” 如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。来自本页的实例标题如何在 HTML 文档中显示标题。隐藏的注释如何在 HTML 源代码中插入注释。水平线如何插入水平线。 HTML 标签参考手册 W3School 的标签参考手册提供了有关这些标题及其属性的更多信息。您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。标签描述 <html> 定义 HTML 文档。 <body> 定义文档的主体。 <h1> to <h6> 定义 HTML 标题 <hr> 定义水平线。 <!--> 定义注释。六、HTML 段落可以把 HTML 文档分割为若干段落。 HTML 段落段落是通过 <p> 标签定义的。实例 <p>This is a paragraph</p> <p>This is another paragraph</p> 注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）不要忘记结束标签即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：实例 <p>This is a paragraph <p>This is another paragraph 上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。注释：在未来的 HTML 版本中，不允许省略结束标签。提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。 HTML 折行如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签： <p>This is<br />a para<br />graph with line breaks</p> <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。 <br> 还是 <br /> 您也许发现 <br> 与 <br /> 很相似。在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。 HTML 输出 - 有用的提示我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。（这个例子演示了一些 HTML 格式化方面的问题）来自本页的实例 HTML 段落如何在浏览器中显示 HTML 段落。换行在 HTML 文档中使用换行。在 HTML 代码中的排版一首唐诗浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等）。更多实例更多段落段落的默认行为。 HTML 标签参考手册 W3School 的标签参考手册提供了有关 HTML 元素及其属性的更多信息。标签描述 <p> 定义段落。 <br /> 插入单个折行（换行）。七、HTML 文本格式化如何查看 HTML 源码您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？你有没有看过一些网页，并且想知道它是如何做出来的呢？要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。文本格式化标签标签描述 <b> 定义粗体文本。 <big> 定义大号字。 <em> 定义着重文字。 <i> 定义斜体字。 <small> 定义小号字。 <strong> 定义加重语气。 <sub> 定义下标字。 <sup> 定义上标字。 <ins> 定义插入字。 <del> 定义删除字。 <s> 不赞成使用。使用 <del> 代替。 <strike> 不赞成使用。使用 <del> 代替。 <u> 不赞成使用。使用样式（style）代替。 “计算机输出”标签标签描述 <code> 定义计算机代码。 <kbd> 定义键盘码。 <samp> 定义计算机代码样本。 <tt> 定义打字机代码。 <var> 定义变量。 <pre> 定义预格式文本。 <listing> 不赞成使用。使用 <pre> 代替。 <plaintext> 不赞成使用。使用 <pre> 代替。 <xmp> 不赞成使用。使用 <pre> 代替。引用、引用和术语定义标签描述 <abbr> 定义缩写。 <acronym> 定义首字母缩写。 <address> 定义地址。 <bdo> 定义文字方向。 <blockquote> 定义长的引用。 <q> 定义短的引用语。 <cite> 定义引用、引证。 <dfn> 定义一个定义项目。八、HTML 编辑器使用 Notepad 或 TextEdit 来编写 HTML 可以使用专业的 HTML 编辑器来编辑 HTML： Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor 不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。通过记事本，依照以下四步来创建您的第一张网页。步骤一：启动记事本如何启动记事本：开始所有程序附件记事本步骤二：用记事本来编辑 HTML 在记事本中键入 HTML 代码： <!DOCTYPE HTML> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落</p> </body> <./html> 步骤三：保存 HTML 在记事本的文件菜单选择“另存为”。当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。在一个容易记忆的文件夹中保存这个文件，比如 w3school。步骤四：在浏览器中运行这个 HTML 文件启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。结果应该类似这样：我的第一个标题我的第一个段落 HTML 样式 HTML CSS 通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。如何使用样式当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。 <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> 内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 <p style="color: red; margin-left: 20px"> This is a paragraph </p> 标签描述 <style> 定义样式定义。 <link> 定义资源引用。 <div> 定义文档中的节或区域（块级）。 <span> 定义文档中的行内的小块或区域。 <font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 <basefont> 定义基准字体。不赞成使用。请使用样式。 <center> 对文本进行水平居中。不赞成使用。请使用样式。十、HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 HTML 超链接（链接）超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式：通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签延伸阅读：什么是超文本？ HTML 链接语法链接的 HTML 代码很简单。它类似这样： <a href="url">Link text</a> href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。实例 <a href=" W3School</a> 上面这行代码显示为：Visit W3School 点击这个超链接会把用户带到 W3School 的首页。提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 HTML 链接 - target 属性使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档： <a href=" target="_blank">Visit W3School!</a> HTML 链接 - name 属性 name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。命名锚的语法： <a name="label">锚（显示在页面上的文本）</a> 提示：锚的名称可以是任何你喜欢的名字。提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。实例首先，我们在 HTML 文档中对锚进行命名（创建一个书签）： <a name="tips">基本的注意事项 - 有用的提示</a> 然后，我们在同一个文档中创建指向该锚的链接： <a href="#tips">有用的提示</a> 您也可以在其他页面中创建指向该锚的链接： <a href=" 在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。具体效果：有用的提示基本的注意事项 - 有用的提示：注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href=" HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=" 提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。 HTML 链接标签标签描述 <a> 定义锚。十一、HTML 图像通过使用 HTML，可以在文档中显示图像。图像标签（<img>）和源属性（Src）在 HTML 中，图像由 <img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是： <img src="url" /> URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于的 images 目录中，那么其 URL 为浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。替换文本属性（Alt） alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。 <img src="boat.gif" alt="Big Boat"> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项 - 有用的提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。图像标签标签描述 <img> 定义图像。 <map> 定义图像地图。 <area> 定义图像地图中的可点击区域。十二、HTML 表格你可以使用 HTML 创建表格。表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 在浏览器显示如下： row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格和边框属性如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格： <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> 表格的表头表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本： <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 在浏览器显示如下： Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格中的空单元格在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table> 浏览器可能会这样显示： row 1, cell 1 row 1, cell 2 row 2, cell 2 注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td> </td> <td>row 2, cell 2</td> </tr> </table> 在浏览器中显示如下： row 1, cell 1 row 1, cell 2 row 2, cell 2 表格标签表格描述 <table> 定义表格 <caption> 定义表格标题。 <th> 定义表格的表头。 <tr> 定义表格的行。 <td> 定义表格单元。 <thead> 定义表格的页眉。 <tbody> 定义表格的主体。 <tfoot> 定义表格的页脚。 <col> 定义用于表格列的属性。 <colgroup> 定义表格列的组。十三、HTML 列表 HTML 支持有序、无序和定义列表无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。 <ul> <li>Coffee</li> <li>Milk</li> </ul> 浏览器显示如下： Coffee Milk 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 <ol> <li>Coffee</li> <li>Milk</li> </ol> 浏览器显示如下： Coffee Milk 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> 浏览器显示如下： Coffee Black hot drink Milk White cold drink 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。标签描述 <ol> 定义有序列表。 <ul> 定义无序列表。 <li> 定义列表项。 <dl> 定义定义列表。 <dt> 定义定义项目。 <dd> 定义定义的描述。 <dir> 已废弃。使用 <ul> 代替它。 <menu> 已废弃。使用 <ul> 代替它。十四、HTML 块 HTML <div> 和 <span> 可以通过 <div> 和 <span> 将 HTML 元素组合起来。 HTML 块元素大多数 HTML 元素被定义为块级元素或内联元素。编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>, <p>, <ul>, <table> HTML 内联元素内联元素在显示时通常不会以新行开始。例子：<b>, <td>, <a>, <img> HTML <div> 元素 HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 HTML <span> 元素 HTML <span> 元素是内联元素，可用作文本的容器。 <span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 HTML 分组标签 HTML 分组标签标签描述 <div> 定义文档中的分区或节（division/section）。 <span> 定义 span，用来组合文档中的行内元素。十五、HTML 布局网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。网站布局大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！ HTML 布局 - 使用 <div> 元素 div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局：实例 <!DOCTYPE html> <html> <head> <style type="text/css"> div

展开阅读全文