html入门教程1
什么是 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 文档也被称为网页
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
将上面的代码保存为a.html，然后用浏览器打开，就会出现My First Heading和My first paragraph.
例子解释
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
html入门教程2
您需要什么
在 w3school，您不需要任何工具就可以学习 HTML。- 您不需要任何 HTML 编辑器
- 您不需要 web 服务器
- 您不需要网站
编辑 HTML
在本教程中，我们使用纯文本编辑器来编辑 HTML。我们认为这是学习 HTML 的最佳方式。然而，专业的 web 开发者常常对 Dreamweaver 或 FrontPage 这样的 HTML 编辑器情有独钟，而不是编写纯文本。
创建自己的测试网页
如果您希望直接学习 HTML，请跳过本章的其余内容。如果您希望在自己的电脑上创建一个测试页面，那么只需要把下面的三个文件拷贝到桌面。
（右键点击每个链接，然后选择“目标另存为”或“链接另存为”）
mainpage.htm
page1.htm
page2.htm
在您将这些文件拷贝完成之后，可以双击名为 “mainpage.htm” 的文件，会立即看到您的第一个网站。
使用您的测试网站来学习
我们建议您使用文本编辑器（比如记事本）来编辑您的 web 文件，通过这种方式来实验在 W3school 中学到的所有知识。注释：如果您的测试网页包含了您没有学过的 HTML 标记，那么不用慌。您将在下面的章节中学到所有这些内容。
.htm 还是 .html 文件后缀？
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。我们在实例中使用 .htm。这只是长久以来形成的习惯而已，因为过去的很多软件只允许三个字母的文件后缀。不过对于新的软件，使用 .html 完全没有问题.
-----------
html入门教程3-基本的 HTML 标签
本章向您讲解 HTML 标签的概念，通过实例向您演示最常用的 HTML 标签。
提示：不要担心本章中您还没有学过的例子，您将在下面的章节中学到它们。
提示：学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。
提示：不要担心本章中您还没有学过的例子，您将在下面的章节中学到它们。
提示：学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。
什么是 HTML 标签
- HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
- HTML 标签由开始标签和结束标签组成
- 开始标签是被括号包围的元素名
- 结束标签是被括号包围的斜杠和元素名
- 某些 HTML 元素没有结束标签，比如 <br />
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="http://www.w3school.com.cn">This is a link</a>亲自试一试
注释：在 href 属性中指定链接的地址。
（您将在本教程稍后的章节中学习更多有关属性的知识）。
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。实例
<img src="w3school.jpg" width="104" height="142" />亲自试一试
注释：图像的名称和尺寸是以属性的形式提供的。
-------------
html入门教程4-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入门教程5-HTML 属性
属性为 HTML 元素提供附加信息。
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href="http://www.w3school.com.cn">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 推荐标准中推荐小写的属性/属性值。
而 XHTML 要求使用小写的属性/属性值。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
HTML 属性参考手册
我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：完整的 HTML 参考手册
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
HTML 标准属性参考手册
---------------
html入门教程6-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 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释是这样写的：
实例
<!-- This is a comment -->亲自试一试
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
提示：合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML 提示 – 如何查看源代码
您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
HTML 标签参考手册
W3School 的标签参考手册提供了有关这些标题及其属性的更多信息。您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。
| 标签 | 描述 | ||
|---|---|---|---|
| <html> | 定义 HTML 文档。 | ||
| <body> | 定义文档的主体。 | ||
| <h1> to <h6> | 定义 HTML 标题 | ||
| <hr> | 定义水平线。 | ||
| <!–> | 定义注释。 |
---------------------
html入门教程7-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入门教程8-html文本格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
下面有很多例子，您可以亲自试试：
下面有很多例子，您可以亲自试试：
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入门教程9-HTML 样式
style 属性用于改变 HTML 元素的样式。
亲自试一试
This text is in Verdana and red This text is in Times and blue This text is 30 pixels high
亲自试一试
HTML 的 style 属性
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
您可以在我们的 CSS 教程中学习关于样式和 CSS 的所有知识。
在我们的 HTML 教程中，我们将使用 style 属性向您讲解 HTML 样式。
不赞成使用的标签和属性
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。这里传达的信息很明确：请避免使用这些被废弃的标签和属性！
应该避免使用下面这些标签和属性：
| 标签 | 描述 |
|---|---|
| <center> | 定义居中的内容。 |
| <font> 和 <basefont> | 定义 HTML 字体。 |
| <s> 和 <strike> | 定义删除线文本 |
| <u> | 定义下划线文本 |
| 属性 | 描述 |
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
HTML 样式实例 – 背景颜色
background-color 属性为元素定义了背景颜色：<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>亲自试一试
style 属性淘汰了“旧的” bgcolor 属性。
亲自试一试：设置背景颜色的旧方法
HTML 样式实例 – 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：<html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>亲自试一试
style 属性淘汰了旧的 <font> 标签。
亲自试一试：设置字体的旧方法
HTML 样式实例 – 文本对齐
text-align 属性规定了元素中文本的水平对齐方式：<html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>亲自试一试
style 属性淘汰了旧的 “align” 属性。
亲自试一试：设置居中对齐的旧方法
--------------
html入门教程10-html链接
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
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>
上面这行代码显示为：Visit W3School点击这个超链接会把用户带到 W3School 的首页。
提示：”链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 – target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
亲自试一试HTML 链接 – name 属性
name 属性规定锚（anchor）的名称。name 属性用于创建 HTML 内部的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
命名锚的语法：
<a name="label">Text to be displayed</a>提示：锚的名称可以是任何你喜欢的名字。
实例
HTML 文档内部的已命名的锚：<a name="tips">Useful Tips Section</a>
然后，我们创建指向相同文档中“有用的提示”部分的链接：<a href="#tips">Visit the Useful Tips Section</a>或者，创建从另一个页面指向该文档中“有用的提示”部分的链接：
<a href="http://www.w3school.com.cn/html_links.htm#tips"> Visit the Useful Tips Section </a>在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
具体效果：有用的提示
基本的注意事项 – 有用的提示：
注释：请始终将正斜杠添加到子文件夹。假如这样书写链 接：href=”http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.w3school.com.cn /html/”。提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
更多实例
- 在新的浏览器窗口打开链接
- 本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。
- 链接到同一个页面的不同位置
- 本例演示如何使用链接跳转至文档的另一个部分
- 跳出框架
- 本例演示如何跳出框架，假如你的页面被固定在框架之内。
- 创建电子邮件链接
- 本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
- 创建电子邮件链接 2
- 本例演示更加复杂的邮件链接。
HTML 链接标签
| 标签 | 描述 |
|---|---|
| <a> | 定义锚。 |
-----------------
html入门教程11-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>row 2, cell 1</td>
<td></td>
</tr>
</table>
在浏览器显示如下：| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
<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> </td>
</tr>
</table>
在浏览器中显示如下：| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
基本的注意事项 – 有用的提示：
<thead>, <tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。更多实例
- 没有边框的表格
- 本例演示一个没有边框的表格。
- 表格中的表头(Heading)
- 本例演示如何显示表格表头。
- 空单元格
- 本例展示如何使用 “ ” 处理没有内容的单元格。
- 带有标题的表格
- 本例演示一个带标题 (caption) 的表格
- 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。
- 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。
- 单元格边距(Cell padding)
- 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
- 单元格间距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加单元格之间的距离。
- 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景。
- 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景。
- 在表格单元中排列内容
- 本例演示如何使用 “align” 属性排列单元格内容,以便创建一个美观的表格。
- 框架(frame)属性
- 本例演示如何使用 “frame” 属性来控制围绕表格的边框。
表格标签
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
----------------
html入门教程12-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入门教程13-HTML 表单和输入
HTML 表单用于搜集不同类型的用户输入。
表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form> ... input 元素 ... </form>
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。<form> First name:浏览器显示如下：<input type="text" name="firstname" /><br /> Last name:<input type="text" name="lastname" /></form>
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。<form>浏览器显示如下：<input type="radio" name="sex" value="male" />Male <br /><input type="radio" name="sex" value="female" />Female </form>
注意，只能从中选取其一。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<form>浏览器显示如下：<input type="checkbox" name="bike" />I have a bike <br /><input type="checkbox" name="car" />I have a car </form>
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。<form name="input"浏览器显示如下：action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.asp” 的页面。该页面将显示出输入的结果。
更多实例
- 复选框
- 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
- 单选按钮
- 本例演示如何在 HTML 中创建单选按钮。
- 简单的下拉列表
- 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
- 另一个下拉列表
- 本例演示如何创建一个简单的带有预选值的下拉列表。（编者注：预选值指预先指定的首选项。）
- 文本域(Textarea)
- 本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
- 创建按钮
- 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
- Fieldset around data
- 本例演示如何在数据周围绘制一个带标题的框。
表单实例
- 带有输入框和确认按钮的表单
- 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
- 带有复选框的表单
- 此表单包含两个复选框和一个确认按钮。
- 带有单选按钮的表单
- 此表单包含两个单选框和一个确认按钮。
- 从表单发送电子邮件
- 此例演示如何从表单发送电子邮件。
表单标签
| 标签 | 描述 | ||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <form> | 定义供用户输入的表单 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <input> | 定义输入域 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <textarea> | 定义文本域 (一个多行的输入控件) | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <label> | 定义一个控制的标签 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <fieldset> | 定义域 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <legend> | 定义域的标题 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <select> | 定义一个选择列表 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <optgroup> | 定义选项组 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <option> | 定义下拉列表中的选项 | ||||||||||||||||||||||||||||||||||||||||||||||||||
| <button> | 定义一个按钮 | ||||||||||||||||||||||||||||||||||||||||||||||||||
html入门教程14-HTML 图像
通过使用 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 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。图像标签
| 标签 | 描述 | |
|---|---|---|
| <img> | 定义图像。 | |
| <map> | 定义图像地图。 | |
| <area> | 定义图像地图中的可点击区域。 |
------------
html入门教程15-HTML 背景
好的背景使站点看上去特别棒。
实例
- 搭配良好的背景和颜色
- 一个背景颜色和文字颜色搭配良好的例子，使页面中的文字易于阅读。
- 搭配得不好的背景和颜色
- 一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。
（可以在本页底端找到更多实例。）
背景（Backgrounds）
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。<body以上的代码均将背景颜色设置为黑色。bgcolor="#000000"> <bodybgcolor="rgb(0,0,0)"> <bodybgcolor="black">
背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。<bodyURL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。background="clouds.gif"> <bodybackground="http://www.w3school.com.cn/clouds.gif">
提示：如果你打算使用背景图片，你需要紧记一下几点：
- 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
- 背景图像是否与页面中的其他图象搭配良好。
- 背景图像是否与页面中的文字颜色搭配良好。
- 图像在页面中平铺后，看上去还可以吗？
- 对文字的注意力被背景图像喧宾夺主了吗？
基本的注意事项 – 有用的提示：
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
更多实例
- 可用性强的背景图像
- 背景图像和文字颜色使页面文本易于阅读的例子。
- 可用性强的背景图像 2
- 另一个背景图像和文字颜色使页面文本易于阅读的例子。
- 可用性差的背景图像
- 背景图像和文字颜色使页面文本不易阅读的例子.
- -----------------
html入门教程16-HTML颜色
颜色由红色、绿色、蓝色混合而成。
颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
Color Color HEX Color RGB #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255) 颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
Color Color HEX Color Name #F0F8FF AliceBlue #FAEBD7 AntiqueWhite #7FFFD4 Aquamarine #000000 Black #0000FF Blue #8A2BE2 BlueViolet #A52A2A Brown Web安全色
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
216 跨平台色
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
No comments:
Post a Comment