1. HTML介绍
1.1. 什么是HTML
- HTML的全称为Hyper Text Markup Language，译为超文本标记语言。
- 超文本，就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
- 标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。
1.2. 百度百科
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
1.3. 基维百科
超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1982年由蒂姆·伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。
1.4. 发展历史
1980年，蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究，创建了使用于其系统的HTML。Tim Berners-Lee设计的HTML以纯文字格式为基础，可以使用任何文本编辑器处理，最初仅有少量标记（TAG）而易于掌握运用。随着HTML使用率的增加，人们不满足只能看到文字。1993年，还是大学生的马克·安德生在他的Mosaic浏览器加入<img>标记，从此可以在Web页面上浏览图片。但人们认为仅有图片还是不够，希望可将任何形式的媒体加到网页上。因此HTML不断地扩充和发展。
1.5. 标准的版本历史
- 超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日，W3C推荐标准
- HTML 4.0——1997年12月18日，W3C推荐标准
- HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
- HTML 5的第一份正式草案已于2008年1月22日公布，仍继续完善
2. 第一个HTML页面
2.1. 示例
<html> <head> <title>01_helloworld.html</title> </head> <body> <!-- 这是第一个页面 helloworld --> <font color="red">hello world!</font> </body> </html>
示例代码说明：
- html标签：定义 HTML 文档，HTML文档的根标签。
- head标签：定义关于文档的基本信息。
- body标签：定义文档的主体，运行HTML文档时显示的内容。
- title标签：定义文档的标题。在运行网页时，页面顶端显示的内容。
- font标签：定义文字的字体、尺寸和颜色。
2.2. HTML元素（标签）
HTML 标记标签通常被称为 HTML 标签，"HTML 标签" 和"HTML 元素" 通常都是描述同样的意思。（一个 HTML 元素包含了开始标签与结束标签）
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
值得注意的是：
- 不要忘记结束标签
<font color="red">hello world!
-
- 即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。
- HTML文档中，关闭标签是可选的。
- 不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
- HTML空元素
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
- <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
- 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
- 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
- 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
- 推荐使用小写标签
- HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
- 万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
2.3. HTML属性
<font color="red">hello world!</font>
属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性。
- 属性可以在元素中添加附加信息。
- 属性一般描述于开始标签。
- 性总是以名称/值对的形式出现，比如：name="value"。
值得注意的是：
- HTML属性常用引用属性值
- 属性值应该始终被包括在引号内。
- 双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。
- 推荐使用小写属性
- 属性和属性值对大小写不敏感。
- 万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
- 新版本的 (X)HTML 要求使用小写属性。
2.4. HTML注释
<!-- 这是一个注释 -->
- 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
- 浏览器会忽略注释，也不会显示它们。
- 将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。
- 合理地使用注释可以对未来的代码编辑工作产生帮助。
2.5. HTML文档
HTML文档 = 网页
- HTML文档描述网页
- HTML文档包含HTML标签和纯文本
- HTML文档也被称为网页
- HTML文档文件的后缀名为“.html”和“.htm”，两种后缀名没有任何区别。
2.6. HTML基本结构
<html> <head> </head> <body> </body> </html>
2.7. <!DOCTYPE>声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
- <!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
- 总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
各个HTML版本的<!DOCTYPE> 声明应如何书写：
- HTML 5
<!DOCTYPE html>
- HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2.8. HTML头部
- l <head>元素
- <head> 元素包含了所有的头部标签元素。
- 在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
- 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>。
- l <title>元素
- <title> 标签定义了不同文档的标题。
- <title> 在 HTML/XHTML 文档中是必须的。
- l <base>元素
- <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。
- l <link>元素
- < link >标签定义了一个文档和外部资源之间的关系。
- l <style>元素
- <style> 标签定义了HTML文档的样式文件引用地址。
- l <meta>元素
- meta标签描述了一些基本的元数据。
- <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
- META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
- 元数据可以使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
| 属性 | 值 | 描述 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type | 把 content 属性关联到 HTTP 头部。 |
| name | application-name | 把 content 属性关联到一个名称。 |
| scheme | format/URI | HTML5不支持。 定义用于翻译 content 属性值的格式。 |
<meta> 标签使用实例
- 为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 为网页定义描述内容：
<meta name="description" content="Free Web tutorials on HTML and CSS">
- 定义网页作者：
<meta name="author" content="King">
- 每30秒中刷新当前页面：
<meta http-equiv="refresh" content="30">
3. HTML基本元素
3.1. 示例
<!DOCTYPE html> <html> <head> <title>06_基本元素实例.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h1 align="center">春晓</h1> <hr align="center" width="30%"> <p align="center"> 春眠不觉晓， <br> 处处闻啼鸟。<br> 夜来风雨声，<br> 花落知多少。<br> </p> </body> </html>
3.2. HTML标题
<!DOCTYPE html> <html> <head> <title>02_标题元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </body> </html>
在 HTML 文档中，标题很重要。
- 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
- <h1> 定义最大的标题。 <h6> 定义最小的标题。
- 浏览器会自动地在标题的前后添加空行。
- 用户可以通过标题来快速浏览您网页。
3.3. 段落
<!DOCTYPE html> <html> <head> <title>03_段落元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> </body> </html>
- l 段落是通过 <p> 标签定义的。
- l 浏览器会自动地在段落的前后添加空行。
值得注意的是，不要忘记结束标签：
- l 即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来，但不要依赖这种做法。
- l 忘记使用结束标签会产生意想不到的结果和错误。
- l 在未来的 HTML 版本中，不允许省略结束标签。
3.4. 换行
<!DOCTYPE html> <html> <head> <title>04_换行元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p>This is<br>a para<br>graph with line breaks</p> </body> </html>
- l 在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签。
- l <br /> 元素是一个空的 HTML 元素。
- l 由于关闭标签没有任何意义，因此它没有结束标签。
3.5. 水平线
<!DOCTYPE html> <html> <head> <title>05_水平线元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p>hr 标签定义水平线：</p> <hr /> <p>这是段落。</p> <hr /> <p>这是段落。</p> <hr /> <p>这是段落。</p> </body> </html>
- l <hr> 标签在 HTML 页面中创建水平线。
- l hr 元素可用于分隔内容。
4. HTML文本格式化
4.1. HTML文本格式化元素
| 标签 | 描述 |
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
<!DOCTYPE html> <html> <head> <title>07_文本格式化元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <b>这是粗体文字</b><br> <em>这是着重文字</em><br> <i>这是斜体文字</i><br> <small>这是小号字体</small><br> <strong>这是加重字体</strong><br> <sub>这是下标字体</sub><br> <sup>这是上标字体</sup><br> <ins>这是插入字体</ins><br> <del>这是删除字体</del><br> </body> </html>
4.2. HTML“计算机输出”元素
| 标签 | 描述 |
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
<!DOCTYPE html> <html> <head> <title>08_计算机输出元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <code>这是计算机代码</code><br> <kbd>这是键盘码</kbd><br> <samp>这是计算机代码样本</samp><br> <var>这是变量</var><br> <pre>这是预格式文本</pre> </body> </html>
- l 如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS ，这样可能会取得更丰富的效果。
- l <kbd> 标签已废弃，不推荐使用。
- l 被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
4.3. HTML引文、引用及元素定义
| 标签 | 描述 |
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
<!DOCTYPE html> <html> <head> <title>09_引用、引文及标签定义.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. <br> <address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> <br> <bdo dir="rtl"> This text will go right-to-left. </bdo> <br> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> <br> <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p> <br> <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> <br> <dfn>Definition term</dfn> </body> </html>
5. HTML图像元素
5.1. img元素
img元素定义及使用说明：
- l <img> 标签定义 HTML 页面中的图像。
- l <img> 标签有两个必需的属性：src 和 alt。
值得注意的是：
- l 从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
- l 通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
img元素的属性列表:
| 属性 | 值 | 描述 |
| align | top | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 |
| alt | text | 规定图像的替代文本。 |
| border | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 |
| height | pixels | 规定图像的高度。 |
| hspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 |
| ismap | ismap | 将图像规定为服务器端图像映射。 |
| longdesc | URL | HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 |
| src | URL | 规定显示图像的 URL。 |
| usemap | #mapname | 将图像定义为客户器端图像映射。 |
| vspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 |
| width | pixels | 规定图像的宽度。 |
<!DOCTYPE html> <html> <head> <title>10_图像img元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>帅哥,请看这里. <img src="girl.jpg" alt="Smiley face" width="32" height="32"> 我在这里等你哦.</p> <h4>Image with align="middle":</h4> <p>帅哥,请看这里. <img src="girl.jpg" alt="Smiley face" align="middle" width="32" height="32"> 我在这里等你哦.</p> <h4>Image with align="top":</h4> <p>帅哥,请看这里. <img src="girl.jpg" alt="Smiley face" align="top" width="32" height="32"> 我在这里等你哦.</p> <br> <a href="99_biggirl.html"><img src="girl.jpg" title="点击我看大图哦!" alt="liuyan" width="32" height="32"></a> </body> </html>
5.2. map和area元素
map元素定义及使用说明：
- l 用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
- l <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area元素定义及使用说明：
- l 定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）
- l 始终嵌套在 <map> 标签内部。
- l <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。
area元素的属性列表:
| 属性 | 值 | 描述 |
| alt | text | 规定区域的替代文本。如果使用 href 属性，则该属性是必需的。 |
| coords | coordinates | 规定区域的坐标。 |
| href | URL | 规定区域的目标 URL。 |
| nohref | value | HTML5 不支持。 规定没有相关链接的区域。 |
| shape | default | 规定区域的形状。 |
| target | _blank | 规定在何处打开目标 URL。 |
<!DOCTYPE html> <html> <head> <title>11_图像map和area元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <img src="button.jpg" border="0" usemap="#Map"> <map name="Map"> <area shape="circle" coords="171,159,39" href="99_biggirl.html"> </map> </body> </html>
6. HTML链接元素
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
- l 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
- l 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
- l 在标签<a> 中使用了href属性来描述链接的地址。
值得注意的是：
- l 如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
- l 通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。
- l 请使用 CSS 来改变链接的样式。
<a>元素的属性列表：
| 属性 | 值 | 描述 |
| charset | char_encoding | HTML5 不支持。规定目标 URL 的字符编码。 |
| coords | coordinates | HTML5 不支持。规定链接的坐标。 |
| href | URL | 规定链接的目标 URL。 |
| hreflang | language_code | 规定目标 URL 的基准语言。仅在 href 属性存在时使用。 |
| name | section_name | HTML5 不支持。规定锚的名称。 |
| rel | alternate | 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 |
| rev | text | HTML5 不支持。规定目标 URL 与当前文档之间的关系。 |
| shape | default | HTML5 不支持。规定链接的形状。 |
| target | _blank | 规定在何处打开目标 URL。仅在 href 属性存在时使用。 |
<!DOCTYPE html> <html> <head> <title>12_链接元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <a name="top">这是顶端</a><br> <a href="10_图像img元素.html" target="_blank" >百度</a><br> <a href="mailto:82328769@qq.com" >联系我们</a><br> <img src="girl.jpg" /><br> <a name="middle">这是中间</a><br> <img src="biggirl.jpg" /><br/><br> <a href="#top" >回到顶部</a><br> <a href="#middle" >回到中间</a><br> </body> </html>
7. HTML列表元素
7.1. 有序列表
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
- l <ol> 标签定义了一个有序列表. 列表排序以数字来显示。
| 属性 | 值 | 描述 |
| compact | compact | HTML5中不支持，不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。 |
| start | number | HTML5不支持，不赞成使用。请使用样式取代它。 规定列表中的起始点。 |
| type | 1 A a I i | 规定列表的类型。不赞成使用。请使 |
- l <li> 标签定义列表项目。
| 属性 | 值 | 描述 |
| type | 1 | HTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。 规定使用哪种项目符号。 |
| value | number | 不赞成使用。请使用样式取代它。 规定列表项目的数字。 |
<!DOCTYPE html> <html> <head> <title>13_有序列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> </ol> </body> </html>
7.2. 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
- <ul> 标签定义无序列表。
| 属性 | 值 | 描述 |
| compact | compact | HTML5 不支持。HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧。 |
| type | disc | HTML5 不支持。HTML 4.01 已废弃。 规定列表的项目符号的类型。 |
- <li> 标签定义列表项目。
| 属性 | 值 | 描述 |
| type | 1 | HTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。 规定使用哪种项目符号。 |
| value | number | 不赞成使用。请使用样式取代它。 规定列表项目的数字。 |
<!DOCTYPE html> <html> <head> <title>14_无序列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p> <h4>Disc bullets list:</h4> <ul style="list-style-type:disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul style="list-style-type:square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>
7.3. 嵌套列表
- 有序嵌套列表
<!DOCTYPE html> <html> <head> <title>15_嵌套列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>有序嵌套列表:</h4> <ol> <li>咖啡</li> <li>茶 <ol type="a"> <li>红茶</li> <li>绿茶 <ol type="i"> <li>中国</li> <li>非洲</li> </ol> </li> </ol> </li> <li>牛奶</li> </ol> </body> </html>
- 无序嵌套列表
<!DOCTYPE html> <html> <head> <title>15_嵌套列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>无序嵌套列表:</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国</li> <li>非洲</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul> </body> </html>
7.4. 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
- <dl> 标签定义一个描述列表。
- <dt> 标签定义一个描述列表的项目/名字。
- <dd> 标签被用来对一个描述列表中的项目/名字进行描述。
<!DOCTYPE html> <html> <head> <title>16_自定义列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <dl> <dt> 平时爱好: </dt> <dd>- 抽烟</dd> <dd>- 喝酒</dd> <dd>- 烫头</dd> <dt> 喜欢的游戏: </dt> <dd>- 魔兽世界</dd> <dd>- 反恐精英</dd> <dd>- 红色警戒</dd> </dl> </body> </html>
8. HTML表格
8.1. 基本表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML表格元素
| 标签 | 描述 |
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
- l <table> 标签定义 HTML 表格。
| 属性 | 值 | 描述 |
| align | left | HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x) | HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 |
| border | 1 | 规定表格单元是否拥有边框。 |
| cellpadding | pixels | HTML5 不支持。规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels | HTML5 不支持。规定单元格之间的空白。 |
| frame | void | HTML5 不支持。规定外侧边框的哪个部分是可见的。 |
| rules | none | HTML5 不支持。规定内侧边框的哪个部分是可见的。 |
| summary | text | HTML5 不支持。规定表格的摘要。 |
| width | pixels | HTML5 不支持。规定表格的宽度。 |
- l <tr> 标签定义 HTML 表格中的行。
| 属性 | 值 | 描述 |
| align | right | HTML5 不支持。定义表格行的内容对齐方式。 |
| bgcolor | rgb(x,x,x) | HTML5 不支持。HTML 4.01 已废弃。 规定表格行的背景颜色。 |
| char | character | HTML5 不支持。规定根据哪个字符来进行文本对齐。 |
| charoff | number | HTML5 不支持。规定第一个对齐字符的偏移量。 |
| valign | top | HTML5 不支持。规定表格行中内容的垂直对齐方式。 |
- l <td> 标签定义 HTML 表格中的标准单元格。
| 属性 | 值 | 描述 |
| abbr | text | HTML5 不支持。规定单元格中内容的缩写版本。 |
| align | left | HTML5 不支持。规定单元格内容的水平对齐方式。 |
| axis | category_name | HTML5 不支持。对单元格进行分类。 |
| bgcolor | rgb(x,x,x) | HTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色。 |
| char | character | HTML5 不支持。规定根据哪个字符来进行内容的对齐。 |
| charoff | number | HTML5 不支持。规定对齐字符的偏移量。 |
| colspan | number | 规定单元格可横跨的列数。 |
| headers | header_id | 规定与单元格相关联的一个或多个表头单元格。 |
| height | pixels | HTML5 不支持。HTML 4.01 已废弃。 |
| nowrap | nowrap | HTML5 不支持。HTML 4.01 已废弃。 |
| rowspan | number | 设置单元格可横跨的行数。 |
| scope | col | HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。 |
| valign | top | HTML5 不支持。规定单元格内容的垂直排列方式。 |
| width | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。 |
8.2. 带表头的表格
<th> 标签定义 HTML 表格中的表头单元格。HTML 表格有两种单元格类型：
- l 表头单元格 - 包含头部信息（由 <th> 元素创建）
- l 标准单元格 - 包含数据（由 <td> 元素创建）
值得注意的是：
- l <th> 元素中的文本通常呈现为粗体并且居中。
- l <td> 元素中的文本通常是普通的左对齐文本。
| 属性 | 值 | 描述 |
| abbr | text | HTML5 不支持。 规定表头单元格中内容的缩写版本。 |
| align | left | HTML5 不支持。 规定表头单元格内容的水平对齐方式。 |
| axis | category_name | HTML5 不支持。 对表头单元格进行分类。 |
| bgcolor | rgb(x,x,x) | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。 |
| char | character | HTML5 不支持。 规定根据哪个字符来进行内容的对齐。 |
| charoff | number | HTML5 不支持。 规定对齐字符的偏移量。 |
| colspan | number | 规定表头单元格可横跨的列数。 |
| headers | header_id | 规定与表头单元格相关联的一个或多个表头单元格。 |
| height | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。 |
| nowrap | nowrap | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。 |
| rowspan | number | 规定表头单元格可横跨的行数。 |
| scope | col | 规定表头单元格是否是行、列、行组或列组的头部。 |
| valign | top | HTML5 不支持。 规定表头单元格内容的垂直排列方式。 |
| width | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。 |
8.3. 带标题的表格
<caption> 标签定义表格的标题。
l <caption> 标签必须直接放置到 <table> 标签之后。
l 只能对每个表格定义一个标题。
l 通常这个标题会被居中于表格之上。
<!DOCTYPE html> <html> <head> <title>18_带表头的表格.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <table border="1" width="20%"> <tr> <th>名称</th><th>性别</th><th>年龄</th> </tr> <tr> <td>张三</td><td>男</td><td>18</td> </tr> <tr> <td>李四</td><td>女 </td><td>16</td> </tr> </table> </body> </html>
8.4. 跨行或跨列的表格
<!DOCTYPE html> <html> <head> <title>20_跨行或跨列的表格.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>跨两列的表格:</h4> <table border="1"> <tr> <th>名称</th> <th colspan="2">电话</th> </tr> <tr> <td>播客</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html>
8.5. 表格的页眉、主体及页脚
- l <thead> 标签用于组合 HTML 表格的页眉内容。
- l <tbody> 标签用于组合 HTML 表格的主体内容。
- l <tfoot> 标签用于组合 HTML 表格的页脚内容。
通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
值得注意的是：
- l <tbody> 、<tbody>及<tfoot>元素内部必须包含一个或者多个 <tr> 标签。
- l <thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。
<!DOCTYPE html> <html> <head> <title>21_表格的页眉、主体及页脚.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <table border="1"> <thead> <tr> <th>月份</th> <th>收入</th> </tr> </thead> <tfoot> <tr> <td>总和</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>二月</td> <td>$100</td> </tr> <tr> <td>三月</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
9. HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- l 开发人员必须同时跟踪更多的HTML文档
- l 很难打印整张页面
9.1. frame元素
- l 框架结构标签（frameset）
- n 框架结构标签（<frameset>）定义如何将窗口分割为框架。
- n 每个 frameset 定义了一系列行或列。
- n rows/columns 的值规定了每行或每列占据屏幕的面积。
标准属性：
| 属性 | 值 | 描述 |
| class | classname | 规定元素的类名 |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式 |
| title | text | 规定元素的额外信息 |
可选属性：
| 属性 | 值 | 描述 |
| cols | pixels | HTML5 不支持。规定框架集中列的数目和尺寸。 |
| rows | pixels | HTML5 不支持。规定框架集中行的数目和尺寸。 |
- l 框架标签（frame）
- n Frame 标签定义了放置在每个框架中的 HTML 文档。
标准属性：
| 属性 | 值 | 描述 |
| class | classname | 规定元素的类名 |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式 |
| title | text | 规定元素的额外信息 |
可选属性：
| 属性 | 值 | 描述 |
| frameborder | 0 | HTML5 不支持。规定是否显示框架周围的边框。 |
| longdesc | URL | HTML5 不支持。规定一个包含有关框架内容的长描述的页面。 |
| marginheight | pixels | HTML5 不支持。规定框架的上方和下方的边距。 |
| marginwidth | pixels | HTML5 不支持。规定框架的左侧和右侧的边距。 |
| name | name | HTML5 不支持。规定框架的名称。 |
| noresize | noresize | HTML5 不支持。规定无法调整框架的大小。 |
| scrolling | yes | HTML5 不支持。规定是否在框架中显示滚动条。 |
| src | URL | HTML5 不支持。规定在框架中显示的文档的 URL。 |
- l 框架标签（noframes）
- <noframes> 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
- <noframes> 元素插入在 <frameset> 元素中使用。
标准属性：
| 属性 | 值 | 描述 |
| class | classname | 规定元素的类名 |
| dir | rtl | 规定元素中内容的文本方向 |
| id | id | 规定元素的唯一 id |
| lang | language_code | 规定元素中内容的语言代码 |
| style | style_definition | 规定元素的行内样式 |
| title | text | 规定元素的额外信息 |
| xml:lang | language_code | 规定 XHTML 文档中元素内容的语言代码 |
值得注意的是：
- l 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
- l 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
- l 假如添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
示例：
<!DOCTYPE html> <html> <head> <title>22_垂直框架元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <frameset cols="25%,50%,25%"> <frame src="99_frame_a.html"> <frame src="99_frame_b.html"> <frame src="99_frame_c.html"> </frameset> </html>
9.2. iframe元素
- l <iframe> 标签规定一个内联框架。
- l 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
- l 可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。
属性：
| 属性 | 值 | 描述 |
| align | left | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。 |
| frameborder | 1 | HTML5 不支持。规定是否显示 <iframe> 周围的边框。 |
| height | pixels | 规定 <iframe> 的高度。 |
| longdesc | URL | HTML5 不支持。规定一个页面，该页面包含了有关 <iframe> 的较长描述。 |
| marginheight | pixels | HTML5 不支持。规定 <iframe> 的顶部和底部的边距。 |
| marginwidth | pixels | HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。 |
| name | name | 规定 <iframe> 的名称。 |
| scrolling | yes | HTML5 不支持。规定是否在 <iframe> 中显示滚动条。 |
| src | URL | 规定在 <iframe> 中显示的文档的 URL。 |
| width | pixels | 规定 <iframe> 的宽度。 |
<!DOCTYPE html> <html> <head> <title>27_iframe框架元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <iframe src="girl.jpg" width="240px" height="240px" scrolling="no" name="abc" ></iframe> <a href="01_helloworld.html" target="abc">显示helloworld</a> </body> </html>
10. HTML表单
10.1. Form表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
| 属性 | 值 | 描述 |
| accept | MIME_type | HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的） |
| accept-charset | character_set | 规定服务器可处理的表单数据字符集。 |
| action | URL | 规定当提交表单时向何处发送表单数据。 |
| enctype | application/x-www-form-urlencoded | 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况） |
| method | get | 规定用于发送表单数据的 HTTP 方法。 |
| name | text | 规定表单的名称。 |
| target | _blank | 规定在何处打开 action URL。 |
10.2. 文本框
文本框通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。
- l <input> 元素是空的,它只包含标签属性。
- l 你可以使用 <label> 元素来定义 <input> 元素的标注。
- l 表单本身并不可见。同时，在大多数浏览器中，文本框的缺省宽度是20个字符。
- l <input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。
| 属性 | 值 | 描述 |
| accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type="file") |
| align | left right top middle bottom | HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image") |
| alt | text | 定义图像输入的替代文本。 (只针对type="image") |
| checked | checked | checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") |
| disabled | disabled | isabled 属性规定应该禁用的 <input> 元素。 |
| readonly | readonly | readonly 属性规定输入字段是只读的。 |
| size | number | size 属性规定以字符数计的 <input> 元素的可见宽度。 |
| src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image") |
| type | button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week | type 属性规定要显示的 <input> 元素的类型。 |
| value | text | Specifies the value of an <input> element |
示例：
<!DOCTYPE html> <html> <head> <title>28_文本框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 用户名:<input type="text" id="username" name="username" value="用户名"> 密码:<input type="text" id="password" name="password" value="密码" readonly="readonly"> 确认密码:<input type="text" id="password" name="password" value="密码" disabled="true"> </form> </body> </html>
10.3. 密码字段
密码字段通过标签<input type="password"> 来定义。
<!DOCTYPE html> <html> <head> <title>29_密码框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 用户名:<input type="text" id="username" name="username"> 密码:<input type="password" id="password" name="password"> </form> </body> </html>
10.4. 单选按钮
<input type="radio"> 标签定义了表单单选框选项。
<!DOCTYPE html> <html> <head> <title>30_单选框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 性别: <input type="radio" checked="checked" id="male" name="sex" value="male">男 <input type="radio" id="female" name="sex" value="female">女<br> </form> </body> </html>
10.5. 复选框
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<!DOCTYPE html> <html> <head> <title>31_复选框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 爱好: <input type="checkbox" checked="checked" id="java" name="like" value="java">java <input type="checkbox" id="PHP" name="like" value="PHP">PHP </form> </body> </html>
10.6. 下拉列表
- l <select> 元素用来创建下拉列表。
- n <select> 元素是一种表单控件，可用于在表单中接受用户输入。
| 属性 | 值 | 描述 |
| disabled | disabled | 当该属性为 true 时，会禁用下拉列表。 |
| multiple | multiple | 当该属性为 true 时，可选择多个选项。 |
| name | name | 定义下拉列表的名称。 |
| size | number | 规定下拉列表中可见选项的数目。 |
- l <option> 标签定义下拉列表中的一个选项（一个条目）。
- <option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
- 请与 select 元素配合使用此标签，否则这个标签是没有意义的。
| 属性 | 值 | 描述 |
| disabled | disabled | 规定此选项应在首次加载时被禁用。 |
| label | text | 定义当使用 <optgroup> 时所使用的标注。 |
| selected | selected | 规定选项（在首次显示在列表中时）表现为选中状态。 |
| value | text | 定义送往服务器的选项值。 |
<!DOCTYPE html> <html> <head> <title>32_下拉列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 地区: <select id="city" name="city"> <option value="bj">北京</option> <option selected="selected" value="nj">南京</option> </select> </form> </body> </html>
10.7. 提交按钮
<input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<!DOCTYPE html> <html> <head> <title>33_提交按钮.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> <input type="submit" id="submit" value="提交"> </form> </body> </html>
10.8. fieldset元素
<fieldset> 标签可以将表单内的相关元素分组。会在相关表单元素周围绘制边框。
<!DOCTYPE html> <html> <head> <title>34_fieldset元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> <fieldset> <legend>人员信息:</legend> 姓名: <input type="text"><br> Email: <input type="text"> </fieldset> </form> </body> </html>
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
