HTML5学习手册
程序员文章站
2023-10-27 09:14:22
[TOC] HTML 简介 HTML 简介 什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 ( ......
目录
- html 简介
- html 高级教程
- html 媒体
- html 5 教程
- html5 表单
- html 参考手册
- html5 参考手册
html 简介
html 简介
<html> <body> <h1>my first heading</h1> <p>my first paragraph.</p> </body> </html>
什么是 html？
- html 是用来描述网页的一种语言。
- html 指的是超文本标记语言 (hyper text markup language)
- html 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- html 使用标记标签来描述网页
html 标签
- html 标记标签通常被称为 html 标签 (html tag)。
- 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 标题（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 属性中指定链接的地址，href是hypertext reference的缩写。
html 图像
html 图像是通过 <img>标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
注释：图像的名称和尺寸是以属性的形式提供的。
html 元素
html 文档是由 html 元素定义的。
html 元素
html 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
注释：开始标签常被称为开放标签（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>this is my first paragraph.</p>
<p> 元素：
这个<p> 元素定义了 html 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：this is my first paragraph。
<body> <p>this is my first paragraph.</p> </body>
<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 标签。
html 属性
属性为 html 元素提供附加信息。
html 属性
- html 标签可以拥有属性。属性提供了有关 html 元素的更多的信息。
- 属性总是以名称/值对的形式出现，比如：name="value"。
- n属性总是在 html 元素的开始标签中规定。
属性实例
html 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3school.com.cn">this is a link</a>
<html> <body> <h1 align="center">this is heading 1</h1> <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p> </body> </html>
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta http-equiv="content-language" content="zh-cn" /> </head> <body bgcolor="yellow"> <h2>请看: 改变了颜色的背景。</h2> </body> </html>
html 提示：使用小写属性，属性和属性值对大小写不敏感。
始终为属性值加引号
- 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
- 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='bill "helloworld" gates'
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 />
-
<hr />标签在 html 页面中创建水平线。 -
hr元素可用于分隔内容。
提示：使用水平线 (
<hr>标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
html 注释
<!-- this is a comment -->
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
html 提示 - 如何查看源代码
右键 --> “查看源文件”（ie）||“查看页面源代码”（firefox）|| 检查元素（safari）
html 段落
- 段落是通过
<p>标签定义的。
<p>this is a paragraph</p> <p>this is another paragraph</p>
注释：浏览器会自动地在段落的前后添加空行。（
<p>是块级元素）
提示：使用空的段落标记<p></p>去插入一个空行是个坏习惯。用<br />标签代替它！但是不要用<br />标签去创建列表
- 不要忘记结束标签
- 即使忘了使用结束标签，大多数浏览器也会正确地将 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 /> 很相似。 在 xhtml、xml 以及未来的 html 版本中，不允许使用没有结束标签（闭合标签）的 html 元素。 即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
html 输出 - 有用的提示
我们无法确定 html 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 html，您无法通过在 html 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，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>
预格式文本
<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>
地址
<!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>
缩写和首字母缩写
<html> <body> <abbr title="etcetera">etc.</abbr> <br /> <acronym title="world wide web">www</acronym> <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p> <p>仅对于 ie 5 中的 acronym 元素有效。</p> <p>对于 netscape 6.2 中的 abbr 和 acronym 元素都有效。</p> </body> </html>
文字方向
<html> <body> <p> 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)； </p> <bdo dir="rtl"> here is some hebrew text </bdo> </body> </html>
块引用
<html> <body> 这是长的引用： <blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote> 这是短的引用： <q> 这是短的引用。 </q> <p> 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 </p> </body> </html>
删除字效果和插入字效果
<html> <body> <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> <p>大多数浏览器会改写为删除文本和下划线文本。</p> <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p> </body> </html>
文本格式化标签
计算机输出”标签
引用、引用和术语定义
html 编辑器
使用 notepad 或 textedit 来编写 html
可以使用专业的 html 编辑器来编辑 html：
- adobe dreamweaver
- microsoft expression web
- coffeecup html editor
不过，我们同时推荐使用文本编辑器来学习 html，比如 notepad (pc) 或 textedit (mac)。我们相信，使用一款简单的文本编辑器是学习 html 的好方法。
通过记事本，依照以下四步来创建您的第一张网页。
当您保存 html 文件时，既可以使用 .htm 也可以使用 .html 扩展名
html cs
通过使用 html4.0，所有的格式化代码均可移出 html 文档，然后移入一个独立的样式表。
- html中的样式
本例演示如何使用添加到 <head> 部分的样式信息对 html 进行格式化。
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>a paragraph.</p>
</body>
</html>
- 没有下划线的链接
本例演示如何使用样式属性做一个没有下划线的链接。
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta http-equiv="content-language" content="zh-cn" /> </head> <body> <a href="www.baidu.com" style="text-decoration:none"> 这是一个链接！ </a> </body> </html>
- 链接到一个外部样式表
本例演示如何<link>标签链接到一个外部样式表。
<html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样！</p> </body> </html>
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
1.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3.内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 css 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px"> this is a paragraph </p>
html 链接
html 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
html 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 我们通过使用 <a> 标签在 html 中创建链接。 有两种使用 <a> 标签的方式： 1.通过使用 href 属性 - 创建指向另一个文档的链接 2.通过使用 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">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
实例
1.首先，我们在 html 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
2.然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
3.您也可以在其他页面中创建指向该锚的链接：
<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> <body> <p> <p><a href="http://www.baidu.com/">打开百度</a> 百度</p> </body> </html>
- 将图像作为链接
<html> <body> <p> 您也可以使用图像来作链接： <a href="http://scimg.jb51.net/allimg/160518/14-16051q51020515.jpg"> <img border="0" src="http://scimg.jb51.net/allimg/160518/14-16051pz1525c.jpg" /> </a> </p> </body> </html>
- 在新的浏览器窗口打开链接
<html> <body> <a href="http://www.w3school.com.cn/" target="_blank">visit w3school!</a> <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。 </p> </body> </html>
- 链接到同一个页面的不同位置
<html> <body> <p>被锁在框架中了吗？</p> <a href="/index.html" target="_top">请点击这里！</a> </body> </html>
- 创建电子邮件链接
<html> <body> <p> 这是另一个 mailto 链接： <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> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body> </html> <html> <body> <p> 这是邮件链接： <a href="mailto:someone@microsoft.com?subject=hello%20again">发送邮件</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body> </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 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
实例
- 插入图像
<!doctype html> <html> <body> <p> 一幅图像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> </p> <p> 一幅动画图像： <img src="/i/eg_cute.gif" width="50" height="50" /> </p> <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p> </body> </html>
- 从不同的位置插入图片
来自另一个文件夹的图像： <img src="/i/ct_netscape.jpg" /> 来自 w3school.com.cn 的图像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
- 背景图片
<html> <body background="/i/eg_background.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 html 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html>
- 排列图片
<html> <body> <h2>未设置对齐方式的图像：</h2> <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已设置对齐方式的图像：</h2> <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>请注意，bottom 对齐方式是默认的对齐方式。</p> </body> </html>
- 浮动图像
<html> <body> <p> <img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p> </body> </html>
- 调整图像尺寸
<img src="/i/eg_mouse.jpg" width="50" height="50">
- 为图片显示替换文本 ```html <p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p> <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p> <img src="/i/eg_goleft.gif" alt="向左转" /> <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
- 创建图像映射
<html> <body> <p>请点击图像上的星球，把它们放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="sun" /> </map> <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> </body> </html>
- 把图像转换为图像映射
<!doctype html> <html> <body> <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p> <a href="/example/html/html_ismap.html"> <img src="/i/eg_planets.jpg" ismap /> </a> </body> </html>
html 表格
你可以使用 html 创建表格。
表格
<table border="1"><th>说明</th><tr><tr>
表格由 <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>
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<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>
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<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>
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<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>
实例
- 没有边框的表格
<h4>这个表格没有边框：</h4> <table> /* 或则是这句<table border="0"> */ <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
- 表格中的表头(heading)
<html> <body> <h4>表头：</h4> <table border="1"> <tr> <th>姓名</th> <th>电话</th> <th>电话</th> </tr> <tr> <td>bill gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>垂直的表头：</h4> <table border="1"> <tr> <th>姓名</th> <td>bill gates</td> </tr> <tr> <th>电话</th> <td>555 77 854</td> </tr> <tr> <th>电话</th> <td>555 77 855</td> </tr> </table> </body> </html>
- 空单元格
<html>
<body>
<table border="1">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td></td>
<td>some text</td>
</tr>
</table>
<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
</body>
</html>
- 带有标题的表格
<html> <body> <h4>这个表格有一个标题，以及粗边框：</h4> <table border="6"> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body>
- 跨行或跨列的表格单元格
<html> <body> <h4>横跨两列的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>bill gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>横跨两行的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <td>bill gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
- 表格内的标签
<html> <body> <table border="1"> <tr> <td> <p>这是一个段落。</p> <p>这是另一个段落。</p> </td> <td>这个单元包含一个表格： <table border="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> </td> </tr> <tr> <td>这个单元包含一个列表： <ul> <li>苹果</li> <li>香蕉</li> <li>菠萝</li> </ul> </td> <td>hello</td> </tr> </table> </body> </html>
- 单元格边距(cell padding)
<html> <body> <h4>没有 cellpadding：</h4> <table border="1"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <h4>带有 cellpadding：</h4> <table border="1" cellpadding="10"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> </body> </html>
- 单元格间距(cell spacing)
<html> <body> <h4>没有 cellspacing：</h4> <table border="1"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <h4>带有 cellspacing：</h4> <table border="1" cellspacing="10"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> </body> </html>
- 向表格添加背景颜色或背景图像
<h4>背景颜色：</h4> <table border="1" bgcolor="red"> <h4>背景图像：</h4> <table border="1" background="/i/eg_bg_07.gif">
- 向表格单元添加背景颜色或者背景图像
<td bgcolor="red">first</td> <td background="/i/eg_bg_07.gif"> second</td>
- 在表格单元中排列内容
<html> <body> <table width="400" border="1"> <tr> <th align="left">消费项目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妆品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">总计</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html>
- 框架(frame)属性
<html> <body> <p><b>注释：</b>frame 属性无法在 internet explorer 中正确地显示。</p> <p>table with frame="box":</p> <table frame="box"> <tr> <th>month</th> <th>savings</th> </tr> <tr> <td>january</td> <td>$100</td> </tr> </table> <p>table with frame="above":</p> <table frame="above"> <tr> <th>month</th> <th>savings</th> </tr> <tr> <td>january</td> <td>$100</td> </tr> </table> <p>table with frame="below":</p> <table frame="below"> <tr> <th>month</th> <th>savings</th> </tr> <tr> <td>january</td> <td>$100</td> </tr> </table> <p>table with frame="hsides":</p> <table frame="hsides"> <tr> <th>month</th> <th>savings</th> </tr> <tr> <td>january</td> <td>$100</td> </tr> </table> <p>table with frame="vsides":</p> <table frame="vsides"> <tr> <th>month</th> <th>savings</th> </tr> <tr> <td>january</td> <td>$100</td> </tr> </table> </body> </html>
表格标签
html 列表
html 支持有序、无序和定义列表
无序列表
无序列表始于 <ul> 标签。每个列表项始于<li>。
<ul> <li>coffee</li> <li>milk</li> </ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
有序列表始于<ol> 标签。每个列表项始于<li> 标签。
<ol> <li>coffee</li> <li>milk</li> </ol>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd> 开始。
<dl> <dt>coffee</dt> <dd>black hot drink</dd> <dt>milk</dt> <dd>white cold drink</dd> </dl>
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表标签
<ol> 定义有序列表。 <ul> 定义无序列表。 <li> 定义列表项。 <dl> 定义定义列表。 <dt> 定义定义项目。 <dd> 定义定义的描述。 <dir> 已废弃。使用 <ul> 代替它。 <menu> 已废弃。使用 <ul> 代替它。
<table border="1"><th>举例</th><tr><tr>
- 不同类型的无序列表
<ul type="disc"> 实心黑点 <ul type="circle"> 圆圈 <ul type="square">实心方块
- 不同类型的有序列表
<ol></ol> 数字列表 <ol type="a"> 字母列表 <ol type="a"> 小写字母 <ol type="i"> 罗马字母 <ol type="i"> 小写罗马
- 嵌套
<h4>一个嵌套列表：</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul>
- 定义列表
<h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
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 分组标签
标签 描述 <div> 定义文档中的分区或节（division/section）。 <span> 定义 span，用来组合文档中的行内元素。
html 布局
- 网页布局对改善网站的外观非常重要。
- 请慎重设计您的网页布局。
网站布局
- 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
-
可以使用
<div>或者<table>元素来创建多列。css 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。提示：即使可以使用 html 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
html 布局 - 使用 <div> 元素
<!doctype html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#eeeeee;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>main title of web page</h1>
</div>
<div id="menu">
<h2>menu</h2>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</div>
<div id="content">content goes here</div>
<div id="footer">copyright w3school.com.cn</div>
</div>
</body>
</html>
html 布局 - 使用表格
<!doctype html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#99bbbb;"> <h1>main title of web page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffff99;width:100px;text-align:top;"> <b>menu</b><br /> html<br /> css<br /> javascript </td> <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;"> content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> copyright w3school.com.cn</td> </tr> </table> </body> </html>
html 布局 - 有用的提示
提示：使用 css 最大的好处是，如果把 css 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
html 布局标签
标签 描述 <div> 定义文档中的分区或节（division/section）。 <span> 定义 span，用来组合文档中的行内元素。
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" 的页面。该页面将显示出输入的结果。
举例
- 文本域 (text field)
<html> <body> <form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form> <p> 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 </p> </body> </html>
- 简单的下拉列表
<html> <body> <form> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat">fiat</option> <option value="audi">audi</option> </select> </form> </body> </html>
<html> <body> <form> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat" selected="selected">fiat</option> <option value="audi">audi</option> </select> </form> </body> </html>
- 文本域(textarea)
<html> <body> <p> this example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> the cat was playing in the garden.
- 创建按钮
<input type="button" value="hello world!">
html 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份html文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- 开发人员必须同时跟踪更多的html文档
- 很难打印整张页面
框架结构标签（