HTML学习笔记

zoukankan html css js c++ java

HTML学习笔记
摘自：http://www.w3school.com.cn/html/

HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1: <html>

2: <body>

3:

4: <h1>My First Heading</h1>

5:

6: <p>My first paragraph.</p>

7:

8: </body>

9: </html>

例子解释

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

1: <html>

2:

3: <body>

4:

5: <h1>This is heading 1</h1>

6: <h2>This is heading 2</h2>

7: <h3>This is heading 3</h3>

8: <h4>This is heading 4</h4>

9: <h5>This is heading 5</h5>

10: <h6>This is heading 6</h6>

11:

12: <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

13:

14: </body>

15: </html>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

1: <html>

2: <body>

3:

4: <p>这是段落。</p>

5: <p>这是段落。</p>

6: <p>这是段落。</p>

7:

8: <p>段落元素由 p 标签定义。</p>

9:

10: </body>

11: </html>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

1: <html>

2: <body>

3:

4: <a href="http://www.w3school.com.cn">

5: This is a link</a>

6:

7: </body>

8: </html>

注释：在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

1: <html>

2: <body>

3:

4: <img src="/i/eg_w3school.gif" width="300" height="120" />

5:

6: </body>

7: </html>

注释：图像的名称和尺寸是以属性的形式提供的。

HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 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 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

2: "http://www.w3.org/TR/html4/loose.dtd">

3:

4: <html>

5:

6: <body>

7:

8: <h1 align="center">This is heading 1</h1>

9:

10: <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>

11:

12: </body>

13: </html>

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

1: <html>

2: <head>

3: <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

4: <meta http-equiv="Content-Language" content="zh-cn" />

5: </head>

6:

7: <body bgcolor="yellow">

8: <h2>请看: 改变了颜色的背景。</h2>

9: </body>

10:

11: </html>

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

1: name='Bill "HelloWorld" Gates'

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

1: <html>

2:

3: <body>

4: <p>hr 标签定义水平线：</p>

5: <hr />

6: <p>这是段落。</p>

7: <hr />

8: <p>这是段落。</p>

9: <hr />

10: <p>这是段落。</p>

11: </body>

12: </html>

提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML 注释

1: <html>

2:

3: <body>

4:

5: 

6:

7: <p>这是一段普通的段落。</p>

8:

9: </body>

10: </html>

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签。

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

1: <html>

2:

3: <body>

4:

5: <p>

6: To break<br />lines<br />in a<br />paragraph,<br />use the br tag.

7: </p>

8:

9: </body>

10: </html>

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

<html>

<body>

<h1>春晓</h1>

<p>

春眠不觉晓，

处处闻啼鸟。

夜来风雨声，

花落知多少。

</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>

</body>

</html>

HTML 文本格式化实例
文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化
<html>

<body>

<b>This text is bold</b>

<br />

<strong>This text is strong</strong>

<br />

<big>This text is big</big>

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This text contains

<sub>subscript</sub>

<br />

This text contains

<sup>superscript</sup>

</body>

</html>
预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。
<html> <body> <pre> 这是预格式文本。它保留了空格和换行。 </pre> <p>pre 标签很适合显示计算机代码：</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>
“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。
<html> <body> <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> <p> <b>注释：</b>这些标签常用于显示计算机/编程代码。 </p> </body> </html>
地址
此例演示如何在 HTML 文件中写地址。
<!DOCTYPE html> <html> <body> <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> </body> </html>
缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。

1: <html>

2:

3: <body>

4:

5: <abbr title="etcetera">etc.</abbr>

6: <br />

7: <acronym title="World Wide Web">WWW</acronym>

8:

9: <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

10:

11: <p>仅对于 IE 5 中的 acronym 元素有效。</p>

12:

13: <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

14:

15: </body>

16: </html>
文字方向
此例演示如何改变文字的方向。

1: <html>

2:

3: <body>

4:

5: <p>

6: 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

7: </p>

8:

9: <bdo dir="rtl">

10: Here is some Hebrew text

11: </bdo>

12:

13: </body>

14: </html>

块引用
此例演示如何实现长短不一的引用语。

1: <html>

2:

3: <body>

4:

5: 这是长的引用：

6: <blockquote>

7: 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

8: </blockquote>

9:

10: 这是短的引用：

11: <q>

12: 这是短的引用。

13: </q>

14:

15: <p>

16: 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

17: </p>

18:

19: </body>

20: </html>
删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。

1: <html>

2:

3: <body>

4:

5: <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

6:

7: <p>大多数浏览器会改写为删除文本和下划线文本。</p>

8:

9: <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

10:

11: </body>

12: </html>

文本格式化标签

1: 标签描述

2: <b> 定义粗体文本。

3: <big> 定义大号字。

4: <em> 定义着重文字。

5: <i> 定义斜体字。

6: <small> 定义小号字。

7: <strong> 定义加重语气。

8: <sub> 定义下标字。

9: <sup> 定义上标字。

10: <ins> 定义插入字。

11: <del> 定义删除字。

12: <s> 不赞成使用。使用 <del> 代替。

13: <strike> 不赞成使用。使用 <del> 代替。

14: <u> 不赞成使用。使用样式（style）代替。

“计算机输出”标签

1: 标签描述

2: <code> 定义计算机代码。

3: <kbd> 定义键盘码。

4: <samp> 定义计算机代码样本。

5: <tt> 定义打字机代码。

6: <var> 定义变量。

7: <pre> 定义预格式文本。

8: <listing> 不赞成使用。使用 <pre> 代替。

9: <plaintext> 不赞成使用。使用 <pre> 代替。

10: <xmp> 不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

1: 标签描述

2: <abbr> 定义缩写。

3: <acronym> 定义首字母缩写。

4: <address> 定义地址。

5: <bdo> 定义文字方向。

6: <blockquote> 定义长的引用。

7: <q> 定义短的引用语。

8: <cite> 定义引用、引证。

9: <dfn> 定义一个定义项目。

HTML CSS

实例

HTML中的样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

1: <html>

2:

3: <head>

4: <style type="text/css">

5: h1 {color: red}

6: p {color: blue}

7: </style>

8: </head>

9:

10: <body>

11: <h1>header 1</h1>

12: <p>A paragraph.</p>

13: </body>

14:

15: </html>

没有下划线的链接
本例演示如何使用样式属性做一个没有下划线的链接。

1: <html>

2: <head>

3: <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

4: <meta http-equiv="Content-Language" content="zh-cn" />

5: </head>

6:

7: <body>

8:

9: <a href="/example/html/lastpage.html" style="text-decoration:none">

10: 这是一个链接！

11: </a>

12:

13: </body>

14: </html>

链接到一个外部样式表
本例演示如何 <link> 标签链接到一个外部样式表。

1: <html>

2:

3: <head>

4: <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >

5: </head>

6:

7: <body>

8: <h1>我通过外部样式表进行格式化。</h1>

9: <p>我也一样！</p>

10: </body>

11:

12: </html>

如何使用样式

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

外部样式表

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

1: <head>

2: <link rel="stylesheet" type="text/css" href="mystyle.css">

3: </head>

内部样式表

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

1: <head>

2: <style type="text/css">

3: body {background-color: red}

4: p {margin-left: 20px}

5: </style>

6: </head>

内联样式

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

1: <p style="color: red; margin-left: 20px">

2: This is a paragraph

3: </p>

标签描述 <style> 定义样式定义。 <link> 定义资源引用。 <div> 定义文档中的节或区域（块级）。 <span> 定义文档中的行内的小块或区域。 <font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 <basefont> 定义基准字体。不赞成使用。请使用样式。 <center> 对文本进行水平居中。不赞成使用。请使用样式。

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

实例

创建超级链接
本例演示如何在 HTML 文档中创建链接。

1: <html>

2:

3: <body>

4:

5: <p>

6: <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

7:

8: <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

9:

10: </body>

11: </html>

将图像作为链接
本例演示如何使用图像作为链接。

1: <html>

2:

3: <body>

4: <p>

5: 您也可以使用图像来作链接：

6: <a href="/example/html/lastpage.html">

7: <img border="0" src="/i/eg_buttonnext.gif" />

8: </a>

9: </p>

10:

11: </body>

12: </html>
在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。

1: <html>

2:

3: <body>

4:

5: <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

6:

7: <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

8:

9: </body>

10:

11: </html>
链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分

1: <html>

2:

3: <body>

4:

5: <p>

6: <a href="#C4">查看 Chapter 4。</a>

7: </p>

8:

9: <h2>Chapter 1</h2>

10: <p>This chapter explains ba bla bla</p>

11:

12: <h2>Chapter 2</h2>

13: <p>This chapter explains ba bla bla</p>

14:

15: <h2>Chapter 3</h2>

16: <p>This chapter explains ba bla bla</p>

17:

18: <h2><a name="C4">Chapter 4</a></h2>

19: <p>This chapter explains ba bla bla</p>

20:

21: <h2>Chapter 5</h2>

22: <p>This chapter explains ba bla bla</p>

23:

24: <h2>Chapter 6</h2>

25: <p>This chapter explains ba bla bla</p>

26:

27: <h2>Chapter 7</h2>

28: <p>This chapter explains ba bla bla</p>

29:

30: <h2>Chapter 8</h2>

31: <p>This chapter explains ba bla bla</p>

32:

33: <h2>Chapter 9</h2>

34: <p>This chapter explains ba bla bla</p>

35:

36: <h2>Chapter 10</h2>

37: <p>This chapter explains ba bla bla</p>

38:

39: <h2>Chapter 11</h2>

40: <p>This chapter explains ba bla bla</p>

41:

42: <h2>Chapter 12</h2>

43: <p>This chapter explains ba bla bla</p>

44:

45: <h2>Chapter 13</h2>

46: <p>This chapter explains ba bla bla</p>

47:

48: <h2>Chapter 14</h2>

49: <p>This chapter explains ba bla bla</p>

50:

51: <h2>Chapter 15</h2>

52: <p>This chapter explains ba bla bla</p>

53:

54: <h2>Chapter 16</h2>

55: <p>This chapter explains ba bla bla</p>

56:

57: <h2>Chapter 17</h2>

58: <p>This chapter explains ba bla bla</p>

59:

60: </body>

61: </html>
跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。
1: <html>

2:

3: <body>

4:

5: <p>被锁在框架中了吗？</p>

6:

7: <a href="/index.html"

8: target="_top">请点击这里！</a>

9:

10: </body>

11: </html>
创建电子邮件链接
本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

1: <html>

2:

3: <body>

4:

5: <p>

6: 这是邮件链接：

7: <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

8: </p>

9:

10: <p>

11: <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

12: </p>

13:

14: </body>

15: </html>
创建电子邮件链接 2
本例演示更加复杂的邮件链接。

1: <html>

2:

3: <body>

4:

5: <p>

6: 这是另一个 mailto 链接：

7: <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

8: </p>

9:

10: <p>

11: <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

12: </p>

13:

14: </body>

15: </html>

HTML 链接标签

标签描述 <a> 定义锚。

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

<a href="http://www.w3school.com.cn/">Visit W3School</a>

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

1: <html>

2:

3: <body>

4:

5: <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

6:

7: <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

8:

9: </body>

10:

11: </html>

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="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

基本的注意事项 - 有用的提示：

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

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

HTML 图像

通过使用 HTML，可以在文档中显示图像。

实例

插入图像
本例演示如何在网页中显示图像。

1: <!DOCTYPE HTML>

2: <html>

3:

4: <body>

5:

6: <p>

7: 一幅图像：

8: <img src="/i/eg_mouse.jpg" width="128" height="128" />

9: </p>

10:

11: <p>

12: 一幅动画图像：

13: <img src="/i/eg_cute.gif" width="50" height="50" />

14: </p>

15:

16: <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>

17:

18: </body>

19: </html>

从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。

1: <html>

2:

3: <body>

4:

5: <p>

6: 来自另一个文件夹的图像：

7: <img src="/i/ct_netscape.jpg" />

8: </p>

9:

10: <p>

11: 来自 W3School.com.cn 的图像：

12: <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />

13: </p>

14:

15: </body>

16: </html>

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

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

更多实例

背景图片
本例演示如何向 HTML 页面添加背景图片。

1: <html>

2:

3: <body background="/i/eg_background.jpg">

4:

5: <h3>图像背景</h3>

6:

7: <p>gif 和 jpg 文件均可用作 HTML 背景。</p>

8:

9: <p>如果图像小于页面，图像会进行重复。</p>

10:

11: </body>

12: </html>

排列图片
本例演示如何在文字中排列图像。

1: <html>

2:

3: <body>

4:

5: <h2>未设置对齐方式的图像：</h2>

6:

7: <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>

8:

9: <h2>已设置对齐方式的图像：</h2>

10:

11: <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

12:

13: <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

14:

15: <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

16:

17: <p>请注意，bottom 对齐方式是默认的对齐方式。</p>

18:

19: </body>

20: </html>

浮动图像
本例演示如何使图片浮动至段落的左边或右边。

1: <html>

2:

3: <body>

4:

5: <p>

6: <img src ="/i/eg_cute.gif" align ="left">

7: 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

8: </p>

9:

10: <p>

11: <img src ="/i/eg_cute.gif" align ="right">

12: 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

13: </p>

14:

15: </body>

16: </html>

调整图像尺寸
本例演示如何将图片调整到不同的尺寸。

1: <html>

2:

3: <body>

4:

5: <img src="/i/eg_mouse.jpg" width="50" height="50">

6:

7: <br />

8:

9: <img src="/i/eg_mouse.jpg" width="100" height="100">

10:

11: <br />

12:

13: <img src="/i/eg_mouse.jpg" width="200" height="200">

14:

15: <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

16:

17: </body>

18: </html>

为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。

1: <html>

2:

3: <body>

4:

5:

6: <p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>

7:

8: <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>

9:

10: <img src="/i/eg_goleft.gif" alt="向左转" />

11:

12: <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>

13:

14: <img src="/i/eg_goleft123.gif" alt="向左转" />

15:

16: </body>

17: </html>

制作图像链接
本例演示如何将图像作为一个链接使用。

1: <html>

2:

3: <body>

4: <p>

5: 您也可以把图像作为链接来使用：

6: <a href="/example/html/lastpage.html">

7: <img border="0" src="/i/eg_buttonnext.gif" />

8: </a>

9: </p>

10:

11: </body>

12: </html>

创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

1: <html>

2: <body>

3:

4: <p>请点击图像上的星球，把它们放大。</p>

5:

6: <img

7: src="/i/eg_planets.jpg"

8: border="0" usemap="#planetmap"

9: alt="Planets" />

10:

11: <map name="planetmap" id="planetmap">

12:

13: <area

14: shape="circle"

15: coords="180,139,14"

16: href ="/example/html/venus.html"

17: target ="_blank"

18: alt="Venus" />

19:

20: <area

21: shape="circle"

22: coords="129,161,10"

23: href ="/example/html/mercur.html"

24: target ="_blank"

25: alt="Mercury" />

26:

27: <area

28: shape="rect"

29: coords="0,0,110,260"

30: href ="/example/html/sun.html"

31: target ="_blank"

32: alt="Sun" />

33:

34: </map>

35:

36: <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

37:

38: </body>

39: </html>

把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。

1: <!DOCTYPE html>

2: <html>

3:

4: <body>

5:

6: <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>

7:

8: <a href="/example/html/html_ismap.html">

9: <img src="/i/eg_planets.jpg" ismap />

10: </a>

11:

12: </body>

13: </html>

图像标签

标签描述 <img> 定义图像。 <map> 定义图像地图。 <area> 定义图像地图中的可点击区域。

HTML 表格

实例

表格
这个例子演示如何在 HTML 文档中创建表格。

1: <html>

2:

3: <body>

4:

5: <p>每个表格由 table 标签开始。</p>

6: <p>每个表格行由 tr 标签开始。</p>

7: <p>每个表格数据由 td 标签开始。</p>

8:

9: <h4>一列：</h4>

10: <table border="1">

11: <tr>

12: <td>100</td>

13: </tr>

14: </table>

15:

16: <h4>一行三列：</h4>

17: <table border="1">

18: <tr>

19: <td>100</td>

20: <td>200</td>

21: <td>300</td>

22: </tr>

23: </table>

24:

25: <h4>两行三列：</h4>

26: <table border="1">

27: <tr>

28: <td>100</td>

29: <td>200</td>

30: <td>300</td>

31: </tr>

32: <tr>

33: <td>400</td>

34: <td>500</td>

35: <td>600</td>

36: </tr>

37: </table>

38:

39: </body>

40: </html>

表格边框
本例演示各种类型的表格边框

1: <html>

2:

3: <body>

4:

5: <h4>带有普通的边框：</h4>

6: <table border="1">

7: <tr>

8: <td>First</td>

9: <td>Row</td>

10: </tr>

11: <tr>

12: <td>Second</td>

13: <td>Row</td>

14: </tr>

15: </table>

16:

17: <h4>带有粗的边框：</h4>

18: <table border="8">

19: <tr>

20: <td>First</td>

21: <td>Row</td>

22: </tr>

23: <tr>

24: <td>Second</td>

25: <td>Row</td>

26: </tr>

27: </table>

28:

29: <h4>带有很粗的边框：</h4>

30: <table border="15">

31: <tr>

32: <td>First</td>

33: <td>Row</td>

34: </tr>

35: <tr>

36: <td>Second</td>

37: <td>Row</td>

38: </tr>

39: </table>

40:

41: </body>

42: </html>

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1: <table border="1">

2: <tr>

3: <td>row 1, cell 1</td>

4: <td>row 1, cell 2</td>

5: </tr>

6: <tr>

7: <td>row 2, cell 1</td>

8: <td>row 2, cell 2</td>

9: </tr>

10: </table>

在浏览器显示如下：

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

1: <table border="1">

2: <tr>

3: <td>Row 1, cell 1</td>

4: <td>Row 1, cell 2</td>

5: </tr>

6: </table>

表格的表头

表格的表头使用 <th> 标签进行定义。

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

1: <table border="1">

2: <tr>

3: <th>Heading</th>

4: <th>Another Heading</th>

5: </tr>

6: <tr>

7: <td>row 1, cell 1</td>

8: <td>row 1, cell 2</td>

9: </tr>

10: <tr>

11: <td>row 2, cell 1</td>

12: <td>row 2, cell 2</td>

13: </tr>

14: </table>

在浏览器显示如下：

表格中的空单元格

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

1: <table border="1">

2: <tr>

3: <td>row 1, cell 1</td>

4: <td>row 1, cell 2</td>

5: </tr>

6: <tr>

7: <td></td>

8: <td>row 2, cell 2</td>

9: </tr>

10: </table>

浏览器可能会这样显示：

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

1: <table border="1">

2: <tr>

3: <td>row 1, cell 1</td>

4: <td>row 1, cell 2</td>

5: </tr>

6: <tr>

7: <td> </td>

8: <td>row 2, cell 2</td>

9: </tr>

10: </table>

在浏览器中显示如下：
没有边框的表格

本例演示一个没有边框的表格。
1: <html>

2:

3: <body>

4:

5: <h4>这个表格没有边框：</h4>

6: <table>

7: <tr>

8: <td>100</td>

9: <td>200</td>

10: <td>300</td>

11: </tr>

12: <tr>

13: <td>400</td>

14: <td>500</td>

15: <td>600</td>

16: </tr>

17: </table>

18:

19: <h4>这个表格也没有边框：</h4>

20: <table border="0">

21: <tr>

22: <td>100</td>

23: <td>200</td>

24: <td>300</td>

25: </tr>

26: <tr>

27: <td>400</td>

28: <td>500</td>

29: <td>600</td>

30: </tr>

31: </table>

32:

33: </body>

34: </html>
表格中的表头(Heading)
本例演示如何显示表格表头。
1: <html>

2:

3: <body>

4:

5: <h4>表头：</h4>

6: <table border="1">

7: <tr>

8: <th>姓名</th>

9: <th>电话</th>

10: <th>电话</th>

11: </tr>

12: <tr>

13: <td>Bill Gates</td>

14: <td>555 77 854</td>

15: <td>555 77 855</td>

16: </tr>

17: </table>

18:

19: <h4>垂直的表头：</h4>

20: <table border="1">

21: <tr>

22: <th>姓名</th>

23: <td>Bill Gates</td>

24: </tr>

25: <tr>

26: <th>电话</th>

27: <td>555 77 854</td>

28: </tr>

29: <tr>

30: <th>电话</th>

31: <td>555 77 855</td>

32: </tr>

33: </table>

34:

35: </body>

36: </html>
空单元格
本例展示如何使用 " " 处理没有内容的单元格。
1: <html>

2:

3: <body>

4:

5: <table border="1">

6: <tr>

7: <td>Some text</td>

8: <td>Some text</td>

9: </tr>

10: <tr>

11: <td></td>

12: <td>Some text</td>

13: </tr>

14: </table>

15:

16: <p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>

17:

18: <p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>

19:

20: <p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>

21:

22: <p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>

23:

24: </body>

25: </html>
带有标题的表格
本例演示一个带标题 (caption) 的表格
1: <html>

2:

3: <body>

4:

5: <h4>这个表格有一个标题，以及粗边框：</h4>

6:

7: <table border="6">

8: <caption>我的标题</caption>

9: <tr>

10: <td>100</td>

11: <td>200</td>

12: <td>300</td>

13: </tr>

14: <tr>

15: <td>400</td>

16: <td>500</td>

17: <td>600</td>

18: </tr>

19: </table>

20:

21: </body>
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
1: <html>

2:

3: <body>

4:

5: <h4>横跨两列的单元格：</h4>

6: <table border="1">

7: <tr>

8: <th>姓名</th>

9: <th colspan="2">电话</th>

10: </tr>

11: <tr>

12: <td>Bill Gates</td>

13: <td>555 77 854</td>

14: <td>555 77 855</td>

15: </tr>

16: </table>

17:

18: <h4>横跨两行的单元格：</h4>

19: <table border="1">

20: <tr>

21: <th>姓名</th>

22: <td>Bill Gates</td>

23: </tr>

24: <tr>

25: <th rowspan="2">电话</th>

26: <td>555 77 854</td>

27: </tr>

28: <tr>

29: <td>555 77 855</td>

30: </tr>

31: </table>

32:

33: </body>

34: </html>
表格内的标签
本例演示如何显示在不同的元素内显示元素。
1: <html>

2:

3: <body>

4:

5: <table border="1">

6: <tr>

7: <td>

8: <p>这是一个段落。</p>

9: <p>这是另一个段落。</p>

10: </td>

11: <td>这个单元包含一个表格：

12: <table border="1">

13: <tr>

14: <td>A</td>

15: <td>B</td>

16: </tr>

17: <tr>

18: <td>C</td>

19: <td>D</td>

20: </tr>

21: </table>

22: </td>

23: </tr>

24: <tr>

25: <td>这个单元包含一个列表：

26: <ul>

27: <li>苹果</li>

28: <li>香蕉</li>

29: <li>菠萝</li>

30: </ul>

31: </td>

32: <td>HELLO</td>

33: </tr>

34: </table>

35:

36: </body>

37: </html>
单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
1: <html>

2:

3: <body>

4:

5: <h4>没有 cellpadding：</h4>

6: <table border="1">

7: <tr>

8: <td>First</td>

9: <td>Row</td>

10: </tr>

11: <tr>

12: <td>Second</td>

13: <td>Row</td>

14: </tr>

15: </table>

16:

17: <h4>带有 cellpadding：</h4>

18: <table border="1"

19: cellpadding="10">

20: <tr>

21: <td>First</td>

22: <td>Row</td>

23: </tr>

24: <tr>

25: <td>Second</td>

26: <td>Row</td>

27: </tr>

28: </table>

29:

30: </body>

31: </html>
单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
1: <html>

2:

3: <body>

4:

5: <h4>没有 cellspacing：</h4>

6: <table border="1">

7: <tr>

8: <td>First</td>

9: <td>Row</td>

10: </tr>

11: <tr>

12: <td>Second</td>

13: <td>Row</td>

14: </tr>

15: </table>

16:

17: <h4>带有 cellspacing：</h4>

18: <table border="1"

19: cellspacing="10">

20: <tr>

21: <td>First</td>

22: <td>Row</td>

23: </tr>

24: <tr>

25: <td>Second</td>

26: <td>Row</td>

27: </tr>

28: </table>

29:

30: </body>

31: </html>
向表格添加背景颜色或背景图像
本例演示如何向表格添加背景。
1: <html>

2:

3: <body>

4:

5: <h4>背景颜色：</h4>

6: <table border="1"

7: bgcolor="red">

8: <tr>

9: <td>First</td>

10: <td>Row</td>

11: </tr>

12: <tr>

13: <td>Second</td>

14: <td>Row</td>

15: </tr>

16: </table>

17:

18: <h4>背景图像：</h4>

19: <table border="1"

20: background="/i/eg_bg_07.gif">

21: <tr>

22: <td>First</td>

23: <td>Row</td>

24: </tr>

25: <tr>

26: <td>Second</td>

27: <td>Row</td>

28: </tr>

29: </table>

30:

31: </body>

32: </html>
向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景。
1: <html>

2:

3: <body>

4:

5: <h4>单元背景：</h4>

6: <table border="1">

7: <tr>

8: <td bgcolor="red">First</td>

9: <td>Row</td>

10: </tr>

11: <tr>

12: <td

13: background="/i/eg_bg_07.gif">

14: Second</td>

15: <td>Row</td>

16: </tr>

17: </table>

18:

19: </body>

20: </html>
在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
1: <html>

2:

3: <body>

4:

5: <table width="400" border="1">

6: <tr>

7: <th align="left">消费项目....</th>

8: <th align="right">一月</th>

9: <th align="right">二月</th>

10: </tr>

11: <tr>

12: <td align="left">衣服</td>

13: <td align="right">$241.10</td>

14: <td align="right">$50.20</td>

15: </tr>

16: <tr>

17: <td align="left">化妆品</td>

18: <td align="right">$30.00</td>

19: <td align="right">$44.45</td>

20: </tr>

21: <tr>

22: <td align="left">食物</td>

23: <td align="right">$730.40</td>

24: <td align="right">$650.00</td>

25: </tr>

26: <tr>

27: <th align="left">总计</th>

28: <th align="right">$1001.50</th>

29: <th align="right">$744.65</th>

30: </tr>

31: </table>

32:

33: </body>

34: </html>
框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
1: <html>

2: <body>

3:

4: <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

5:

6: <p>Table with frame="box":</p>

7: <table frame="box">

8: <tr>

9: <th>Month</th>

10: <th>Savings</th>

11: </tr>

12: <tr>

13: <td>January</td>

14: <td>$100</td>

15: </tr>

16: </table>

17:

18: <p>Table with frame="above":</p>

19: <table frame="above">

20: <tr>

21: <th>Month</th>

22: <th>Savings</th>

23: </tr>

24: <tr>

25: <td>January</td>

26: <td>$100</td>

27: </tr>

28: </table>

29:

30: <p>Table with frame="below":</p>

31: <table frame="below">

32: <tr>

33: <th>Month</th>

34: <th>Savings</th>

35: </tr>

36: <tr>

37: <td>January</td>

38: <td>$100</td>

39: </tr>

40: </table>

41:

42: <p>Table with frame="hsides":</p>

43: <table frame="hsides">

44: <tr>

45: <th>Month</th>

46: <th>Savings</th>

47: </tr>

48: <tr>

49: <td>January</td>

50: <td>$100</td>

51: </tr>

52: </table>

53:

54: <p>Table with frame="vsides":</p>

55: <table frame="vsides">

56: <tr>

57: <th>Month</th>

58: <th>Savings</th>

59: </tr>

60: <tr>

61: <td>January</td>

62: <td>$100</td>

63: </tr>

64: </table>

65:

66: </body>

67: </html>
表格标签
```
表格                   描述
<table>                定义表格
<caption>            定义表格标题。
<th>                定义表格的表头。
<tr>                定义表格的行。
<td>                定义表格单元。
<thead>                定义表格的页眉。
<tbody>                定义表格的主体。
<tfoot>                定义表格的页脚。
<col>                定义用于表格列的属性。
<colgroup>            定义表格列的组
```
查看全文

相关阅读:
数组的操作
 数据类型的判断
 插入排序法
 数组
 文件路径
 POJ 1149 PIGS（最大流）
POJ 2186 Popular Cows（强联通+缩点）
POJ 1463 Strategic game（二分图最大匹配）
POJ 2761 Feed the dogs（平衡树or划分树or主席树）
POJ 2528 Mayor's posters（线段树）

原文地址：https://www.cnblogs.com/pengdonglin137/p/3505771.html

例子解释

HTML 标题

HTML 段落

HTML 链接

HTML 图像

HTML 元素语法

空的 HTML 元素

HTML 提示：使用小写标签

HTML 属性

属性例子 1:

属性例子 2:

属性例子 3:

始终为属性值加引号

HTML 水平线

HTML 注释

HTML 折行

HTML 输出 - 有用的提示

HTML 文本格式化实例

文本格式化标签

“计算机输出”标签

引用、引用和术语定义

HTML CSS

实例

如何使用样式

外部样式表

内部样式表

内联样式

HTML 链接

实例

HTML 链接标签

HTML 超链接（链接）

HTML 链接语法

HTML 链接 - target 属性

HTML 链接 - name 属性

命名锚的语法：

实例

基本的注意事项 - 有用的提示：

实例

图像标签（<img>）和源属性（Src）

替换文本属性（Alt）

基本的注意事项 - 有用的提示：

更多实例

图像标签

HTML 表格

实例

表格

表格和边框属性

表格的表头

表格中的空单元格

表格标签