1.什么是HMTL?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
1.1HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
格式：<标签>内容</标签>
1.2 HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
格式：<p>这是一个段落。
1.3Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
1.4<!DOCTYPE> 声明
声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
\<!DOCTYPE HTML>\<!doctype html>\<!Doctype Html>通用声明
HTML5
\<!DOCTYPE html>
HTML 4.01
\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
\<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.5基本网页结构及其解析
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>页面标题</title></head><body><h1>这里的h1是第一标题哦</h1><p>p表示的是段落</p><p>p表示的是另一个段落</p></body></html><!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
2.HTML编辑器
HTML 编辑器推荐
VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/
在线编辑器：https://www.jyshare.com/front-end/61/
3.HTML基础
3.1HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
<h1>这里的h1是第1标题哦</h1>
<h2>这里的h2是第2标题哦</h2>
<h3>这里的h3是第3标题哦</h3>
3.2HTML 段落
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
3.3HTML 链接
HTML 链接是通过标签 <a> 来定义的。
\<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web">这是个超链接</a>提示:在 href 属性中指定链接的地址。
3.4 HTML 图像
HTML 图像是通过标签 <img> 来定义的.
<img src="/1.jpeg" width="258" height="300"/>
<img src="2.jpeg" width="258" height="333"/>
4.HTML 元素
HTML 文档由 HTML 元素定义。
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | 这是一个段落 | </p> |
| <a href="default.htm"> | 这是一个链接 | </a> |
| <br> | 换行 |
4.1HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
4.2嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文档由相互嵌套的 HTML 元素构成。HTML 文档实例<!DOCTYPE html><html><body><p>这是第一个段落。</p></body></html>以上实例包含了三个 HTML 元素。
4.3HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
5 HTML属性
5.1 HTML属性
属性是 HTML 元素提供的附加信息。
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
\<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web">这是个超链接</a>
5.2 HTML 属性常用引用属性值
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
5.3HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册(https://www.runoob.com/tags/tag-doctype.html)。下面列出了适用于大多数 HTML 元素的属性：属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)
6.HTM标题（重点）
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。<h1>这里的h1是第1标题哦</h1><h2>这里的h2是第2标题哦</h2>标题很重要请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
6.1HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。<h1>这里的h1是第1标题哦</h1><hr><h2>这里的h2是第2标题哦</h2><hr><h3>这里的h3是第3标题哦</h3>
6.2HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释写法如下:实例<!-- 这是一个注释 -->
6.3 HTML 提示 - 如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的。如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
7.HTML段落
HTML 段落
段落是通过 <p> 标签定义的。<p>这是一个段落 </p><p>这是另一个段落</p>不要忘记结束标签
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来<p>这是另一个段落但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误
7.1HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<p>演示<br>段落<br>分行的效果</p>
7.2HTML 输出- 使用提醒
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
8.HTML 文本格式化
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>这是<sub>下标</sub>和<sup>上标</sup>
8.1HTML 格式化标签
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。Remark 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。
9 HTML链接
HTML 使用超级链接与网络上的另一个文档相连。HTML中的链接是一种用于在不同网页之间导航的元素。链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。本地连接： <a href="win常用命令.txt">本地链接</a><br><br>外部链接：<a href="https://www.runoob.com/html/html-links.html">这是个外部链接</a>
9.1 HTML 超链接（链接）
HTML使用标签 <a> 来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签 <a> 中使用了 href 属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
9.2HTML 链接语法
以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。链接的 HTML 代码很简单，它类似这样：<a href="url">链接文本</a>href 属性描述了链接的目标。提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：<a href="https://www.runoob.com/html/html-links.html">这是个文本链接</a>图像链接：您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：<a href="#section2">跳转到第二部分</a><!-- 在页面中的某个位置 --><a name="section2"></a>
下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：
下载文档
9.3 HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
9.4HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>基本的注意事项 - 有用的提示
注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
10.HTML头部
10.1HTML 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
10.2HTML 元素</h2>
<pre><code><title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必需的。
<title> 元素:定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题
一个简单的 HTML 文档:
案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文档标题在顶部</title></head><body>文档内容在正文</body></html>
</code></pre>
<h2 id="103html-base-元素">10.3HTML <base> 元素</h2>
<pre><code> <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:<head><meta charset="UTF-8"><title>文档标题在顶部</title><base href="https://www.runoob.com/html/html-head.html" target="_blank"></head>
</code></pre>
<h2 id="104-html-link-元素">10.4 HTML <link> 元素</h2>
<pre><code> <link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表:<head><link rel="stylesheet" type="text/css" href="win常用命令.txt"></head>
</code></pre>
<h2 id="105-html--元素">10.5 HTML <style> 元素</h2>
<pre><code><style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head><style type="text/css">body {background-color: yellow; /*背景渲染成黄色*/}p {color: blue;}</style>
</head>
</code></pre>
<h2 id="106-html-meta-元素">10.6 HTML <meta> 元素</h2>
<pre><code>meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
</code></pre>
<h3 id="1061-为搜索引擎定义关键词">10.6.1 为搜索引擎定义关键词:</h3>
<pre><code> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
</code></pre>
<h3 id="1062-为网页定义描述内容">10.6.2 为网页定义描述内容:</h3>
<pre><code> <meta name="yuye" content="学习者">
</code></pre>
<h3 id="1063-定义网页作者">10.6.3 定义网页作者:</h3>
<pre><code> <meta name="author" content="Runoob">
</code></pre>
<h3 id="1064-每30秒钟刷新当前页面">10.6.4 每30秒钟刷新当前页面:</h3>
<pre><code> <meta http-equiv="refresh" content="30">
</code></pre>
<h2 id="107-html--元素">10.7 HTML <script> 元素</h2>
<pre><code> <script>标签用于加载脚本文件，如： JavaScript。
</code></pre>
<h2 id="107html-head-元素总结">10.7HTML head 元素(总结)</h2>
<pre><code>标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
</code></pre>
<h1 id="11-html-css">11 HTML CSS</h1>
<p>CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。</p>
<h2 id="111-如何使用css">11.1 如何使用CSS</h2>
<p>CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.</p>
<p>CSS 可以通过以下方式添加到HTML中:<br>
内联样式- 在HTML元素中使用"style" 属性<br>
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS<br>
外部引用 - 使用外部 CSS 文件</p>
<p>最好的方式是通过外部引用CSS文件</p>
<h2 id="112-内联样式">11.2 内联样式</h2>
<p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。<br>
以下实例显示出如何改变段落的颜色和左外边距。<br>
<p style="color:blue;margin-left: 20px;">段落渲染为蓝色，20的像素</p></p>
<h2 id="113html样式实例---背景颜色">11.3HTML样式实例 - 背景颜色</h2>
<p>背景色属性（background-color）定义一个元素的背景颜色：<br>
<body style="background-color:yellow"> <!--背景渲染--><br>
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。<br><br>
<h2 style="background-color: red">标题背景渲染为红色</h2<br>
</body></p>
<h2 id="114html-样式实例---字体-字体颜色-字体大小">11.4HTML 样式实例 - 字体, 字体颜色 ，字体大小</h2>
<p>我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:</p>
<pre><code><body style="background-color:yellow"> <!--背景渲染--><h1 style="font-family:Verdana;">HTML 样式实例 - 字体, 字体颜色 ，字体大小</h1><br><p style="font-family: Arial;color: red;font-size: 20px ">HTML 样式实例 - 字体, 字体颜色 ，字体大小</p><br>
</body>
</code></pre>
<p>现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。</p>
<h2 id="115-html-样式实例---文本对齐方式">11.5 HTML 样式实例 - 文本对齐方式</h2>
<p>使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：<br><br>
</body><br><br>
<h3 style="text-align: center">标题居中对齐</h3><br><br><br>
<p>段落</p><br><br>
</body><br></p>
<pre><code> 文本对齐属性 text-align取代了旧标签 <center> 。
</code></pre>
<h2 id="116-内部样式表">11.6 内部样式表</h2>
<p>当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:<br>
<head> <br><br>
<style type="text/css"><br><br>
body {background-color:yellow;}<br><br>
p {color:blue;}<br><br>
</style><br><br>
</head><br></p>
<h2 id="117-外部样式表">11.7 外部样式表</h2>
<p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。<br>
<head><br>
<link rel="stylesheet" type="text/css" href="mystyle.css"><br>
</head></p>
<h2 id="118-html-样式标签">11.8 HTML 样式标签</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><style></td>
<td>定义文本样式</td>
</tr>
<tr>
<td><link></td>
<td>定义资源引用地址</td>
</tr>
</tbody>
</table>
<h1 id="12html-图像">12.HTML 图像</h1>
<p>HTML 图像- 图像标签（ <img>）和源属性（Src）<br>
在 HTML 中，图像由<img> 标签定义。</p>
<p><img> 是空标签，意思是说，<strong>它只包含属性，并且没有闭合标签</strong>。</p>
<p>要在页面上显示图像，<strong>你需要使用源属性（src）,src 指 "source"。源属性的值是图像的 URL 地址</strong>。</p>
<p>定义图像的语法是：</p>
<p><img src="url" alt="some_text"><br>
URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 <a href="http://www.runoob.com/images/pulpit.jpg%E3%80%82" target="_blank">http://www.runoob.com/images/pulpit.jpg。</a></p>
<p>浏览器将图像显示在文档中图像标签出现的地方。<br>
如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。</p>
<h2 id="121-html-图像--alt属性">12.1 HTML 图像- Alt属性</h2>
<p>alt 属性用来为图像<strong>定义一串预备的可替换的文本</strong>。<br>
替换文本属性的值是用户定义的。</p>
<p><img src="boat.gif" alt="Big Boat"><br>
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<h2 id="122-html-图像--设置图像的高度与宽度">12.2 HTML 图像- 设置图像的高度与宽度</h2>
<p>height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。</p>
<pre><code>属性值默认单位为像素:
\<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</code></pre>
<p>提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。</p>
<h2 id="123-基本的注意事项---有用的提示">12.3 基本的注意事项 - 有用的提示：</h2>
<p>注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。</p>
<p>注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。</p>
<h1 id="13-html-表格">13 HTML 表格</h1>
<p>HTML 表格由 <table> 标签来定义。<br>
HTML 表格是一种用于展示结构化数据的标记语言元素。<br>
每个表格均<strong>有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）</strong>，表格可以包含<strong>标题行（<th>）用于定义列的标题</strong>。</p>
<pre><code> tr：tr 是 table row 的缩写，表示表格的一行。td：td 是 table data 的缩写，表示表格的数据单元格。th：th 是 table header的缩写，表示表格的表头单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
简单表格示例：
<body><table><thead><tr><th>列标题1</th><th>列标题2</th><th>列标题3</th></tr></thead><tbody><tr><td>行1，列1</td><td>行1，列2</td><td>行1，列3</td></tr><tr><td>行2，列1</td><td>行2，列2</td><td>行2，列3</td></tr></tbody></table></body>
</code></pre>
<p>以上的表格实例代码中，<strong><table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody></strong>。</p>
<p><strong><thead > 用于定义表格的标题部分</strong>: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。</p>
<p><strong><tbody > 用于定义表格的主体部分</strong>: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。</p>
<p>通过使用 <strong><th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来</strong>。</p>
<p>HTML 表格还可以具有其他部分，如 <strong><tfoot > （表格页脚）和 <caption > （表格标题），<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题</strong>。</p>
<p><strong>HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用</strong>，以满足各种需求。</p>
<p>我们也可以使用 CSS 来进一步自定义表格的样式和外观。<br>
<p><br>
每一个表格都需要table标签开始；<br>
每一个表格行从tr标签开始；<br>
每一个表格的数据从td标签开始。<br>
</p></p>
<pre><code> <h4>1列</h4>
<table border="1"><!-- border="1"表示表格添加一个框框 --><tr><td>1</td></tr>
</table><h4>1列3行</h4><table><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr></table><h4>2列3行</h4><table><tr><td>第一列，第一行</td><td>第一列，第二行</td><td>第一列，第三行</td></tr><tr><td>第二列，第一行</td><td>第二列，第二行</td><td>第二列，第三行</td></tr></table>
</code></pre>
<h2 id="131-html-表格和边框属性">13.1 HTML 表格和边框属性</h2>
<p>如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。</p>
<p>使用边框属性来显示一个带有边框的表格：<br>
<table border="1"><!-- border="1"表示表格添加一个框框 --><br>
<tr><br>
<td>1，1</td><br>
<td>1，2</td><br>
</tr><br>
</table><br>
<table border="1"><!-- border="1"表示表格添加一个框框 --><br>
<tr><br>
<td>1，1</td><br>
<td>1，2</td><br>
</tr><br>
</table></p>
<h2 id="132-html-表格标签总结">13.2 HTML 表格标签（总结）</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><th></td>
<td>定义表格的表头</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格的行</td>
</tr>
<tr>
<td><td></td>
<td>定义表格单元</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格列的组</td>
</tr>
<tr>
<td><col></td>
<td>定义用于表格列的属性</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格的页眉</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格的主体</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格的页脚</td>
</tr>
</tbody>
</table>
<h1 id="14-html-列表">14 HTML 列表</h1>
<p>HTML 支持有序、无序和定义列表:</p>
<pre><code>HTML 列表 有序列表 无序列表
第一个列表项 列表项
第二个列表项 列表项
第三个列表项 | 列表项
</code></pre>
<h2 id="141-html无序列表">14.1 HTML无序列表</h2>
<p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p>
<p>无序列表使用 <ul> 标签<br><br>
<ul><!--无序列表--><br><br>
<li>100</li><br><br>
<li>200</li><br><br>
</ul><br></p>
<h2 id="142-html-有序列表">14.2 HTML 有序列表</h2>
<p>同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。</p>
<p>列表项使用数字来标记。<br><br>
<ol><!--有序列表--><br><br>
<li>100</li><br><br>
<li>200</li><br><br>
</ol><br></p>
<h2 id="143-html-自定义列表">14.3 HTML 自定义列表</h2>
<p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p>
<p>自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。<br>
<dl><!--自定义列表--><br><br>
<dt>1</dt><br><br>
<dd>=1</dd><br><br>
<dt>2</dt><br><br>
<dd>-2</dd><br><br>
</dl><br></p>
<h1 id="15-html区块div">15 HTML区块div</h1>
<p>HTML <div> 和 <span><br>
HTML 可以通过 <div> 和 <span>将元素组合起来。</p>
<h2 id="151-html-区块元素">15.1 HTML 区块元素</h2>
<p>大多数 HTML 元素被定义为块级元素或内联元素。</p>
<p><strong>块级元素在浏览器显示时，通常会以新行来开始（和结束）</strong>。</p>
<p>实例: <h1>, <p>, <ul>, <table></p>
<h2 id="152-html-内联元素">15.2 HTML 内联元素</h2>
<p><strong>内联元素在显示时通常不会以新行开始</strong>。</p>
<p>实例: <b>, <td>, <a>, <img></p>
<h2 id="153-html-div-元素">15.3 HTML <div> 元素</h2>
<p><strong>HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器</strong>.<br><br>
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，<strong>浏览器会在其前后显示折行。</strong><br><br>
如果与 CSS 一同使用，<div> 元素可用于<strong>对块的内容块设置样式属性</strong><br><br>
<div> 元素的另一个常见的<strong>用途是文档布局</strong>。它取代了使用表格定义布局的老式方法。<strong>使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据</strong>。<br></p>
<h2 id="154-html-span-元素">15.4 HTML <span> 元素</h2>
<p><strong>HTML <span> 元素是内联元素，可用作文本的容器</strong><br>
<span> 元素也没有特定的含义。<br>
当与 CSS 一同使用时，<span> 元素可用于为<strong>部分文本设置样式属性</strong>。</p>
<h2 id="155-html-分组标签">15.5 HTML 分组标签</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><div></td>
<td>定义了文档的区域，块级 (block-level)</td>
</tr>
<tr>
<td><span></td>
<td>用来组合文档中的行内元素， 内联元素(inline)</td>
</tr>
</tbody>
</table>
<h1 id="16-html-布局">16 HTML 布局</h1>
<p>网页布局对改善网站的外观非常重要。</p>
<p>请慎重设计您的网页布局。</p>
<h2 id="161-html-布局---使用div-元素">16.1 HTML 布局 - 使用<div> 元素</h2>
<pre><code> div 元素是用于分组 HTML 元素的块级元素。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>布局区块</title></head><body><div id="contaier" style="width: 500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom: 0;">主要的网页标题布局</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left"><b>菜单</b><br>HTML<br>CSS<br>JavaAcript</div><div id="contnt" style="background-color:#EEEEEE;height:200px;width:400px;float:left">区块内容在这里写</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center">哈哈哈</div></body></html>
</code></pre>
<p>HTML 布局标签</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><div></td>
<td>定义文档区块，块级(block-level)</td>
</tr>
<tr>
<td><span></td>
<td>定义 span，用来组合文档中的行内元素。</td>
</tr>
</tbody>
</table>
<h1 id="17-html-表单和输入">17 HTML 表单和输入</h1>
<p>HTML 表单--用于收集用户的输入信息**。</p>
<p>HTML 表单<strong>表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器</strong>。</p>
<p>HTML 表单<strong>通常包含各种输入字段、复选框、单选按钮、下拉列表等元素</strong>。</p>
<p>以下是一个简单的HTML表单的例子：</p>
<p><form> 元素用于创建表单，<strong>action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）</strong>。<br>
<label> 元素<strong>用于为表单元素添加标签，提高可访问性</strong>。<br>
<input> 元素是最常用的表单元素之一，它可以<strong>创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段</strong>。<br>
<select> 元素用于<strong>创建下拉列表，而 <option> 元素用于定义下拉列表中的选项</strong>。</p>
<p>案例：<br>
<!DOCTYPE html><br>
<html lang="en"><br>
<head><br>
<meta charset="UTF-8"><br>
<title>表单
17.2 HTML 表单 - 输入元素<input>
多数情况下被用到的表单标签是输入标签 <input>。
输入类型是由 type 属性定义。
接下来我们介绍几种常用的输入类型。
17.2.1 文本域（Text Fields）<input type="text">
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
如下
浏览器显示如下：
First name:
Last name:
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符
17.2.2 密码字段<input type="password">
密码字段通过标签 <input type="password"> 来定义:
实例<form>Password: <input type="password" name="pwd"></form>浏览器显示效果如下:Password: 注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。
17.2.3 单选按钮（Radio Buttons）<input type="radio">
<input type="radio"> 标签定义了表单的单选框选项:
实例
浏览器显示效果如下:男女
17.2.4复选框（Checkboxes）<input type="checkbox">
<input type="checkbox"> 定义了复选框。
复选框可以选取一个或多个选项：
实例
浏览器显示效果如下:
我喜欢自行车我喜欢小汽车
17.2.5 提交按钮(Submit)<input type="submit">
<input type="submit"> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
实例<form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>浏览器显示效果如下:Username: 假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
17.3 HTML 表单标签
New : HTML5新标签
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist>New | 指定一个预先定义的输入控件选项列表 |
| <keygen>New | 定义了表单的密钥对生成器字段 |
| <output>New | 定义一个计算结果 |
18 HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
语法：
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
18.1 iframe标签 - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
案例
<body><iframe src="https://www.runoob.com/html/html-iframes.html" width="1000" heigtt="2800"></iframe></body>
18.2 iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
18.3 使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性，如下实例:
菜鸟教程
注意： 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。
HTML iframe 标签
| 标签 | 说明 |
|---|---|
| <iframe> | 定义一个内联的iframe |
19 HTML 颜色
HTML 颜色由红色、绿色、蓝色混合而成。
颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
颜色值
颜色(Color) 颜色十六进制(Color HEX) 颜色RGB(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)
1600万种不同颜色
三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色
灰暗色调
Web安全色?
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
20.HTML 颜色名
目前所有浏览器都支持以下颜色名称。
141 个颜色名称是 HTML 和 CSS 颜色规范定义的（17 个标准颜色，加上 124 个）。下面列出了所有颜色的值，包括十六个恢复值。
评论 提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄色，橙色，紫色，红色，白色，银色，蓝绿色，。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。
20.1 按颜色名排序
重点关注的价值排序
点击一个颜色名或者16个亮度值，就可以查看与不同文字颜色搭配的背景颜色。
https://www.runoob.com/html/html-colorvalues.html
21 HTML脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
21.1 HTML <script> 标签
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!"：
<!--利用JavaScript脚本在浏览器输出-->
<script>document.write("hallo world");
</script>
21.2 HTML
<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。
22 HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换
22.1 HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name;
或
&#entity_number;如需显示小于号，我们必须这样写：< 或 < 或 <
Remark提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）
22.2 不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
22.3结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例:
音标符 字符 Construct 输出结果
̀ a à à
́ a á á
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
̃ O Õ Õ
22.4 HTML字符实体
实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
虽然 html 不区分大小写，但实体字符对大小写敏感。
参考完整字符：https://www.runoob.com/tags/ref-entities.html
23 HTML 统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址。
URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。
23.1 URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:
scheme://host.domain:port/path/filename
说明:scheme - 定义因特网服务的类型。最常见的类型是 httphost - 定义域主机（http 的默认主机是 www）domain - 定义因特网域名，比如 runoob.com:port - 定义主机上的端口号（http 的默认端口号是 80）path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。filename - 定义文档/资源的名称
23.2.常见的 URL Scheme
以下是一些URL scheme：
| Scheme | 访问 | 用于 |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
23.3 URL 字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
HTML ASCII 参考手册：https://www.runoob.com/tags/html-ascii.html
23.4URL 编码实例
字符
| URL | 编码 |
|---|---|
| € | %80 |
| £ | %A3 |
| © | %A9 |
| ® | %AE |
| À | %C0 |
| Á | %C1 |
| Â | %C2 |
| Ã | %C3 |
| Ä | %C4 |
| Å | %C5 |
HTML URL 编码参考手册：https://www.runoob.com/tags/html-urlencode.html
24 HTML速查列表
24.1 HTML 基本文档
<!DOCTYPE html><html><head><title>文档标题</title></head><body>可见文本...</body></html>
24.2 基本标签（Basic Tags）
<h1>最大的标题</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的标题</h6><p>这是一个段落。</p><br> （换行）<hr> （水平线）<!-- 这是注释 -->
24.3 文本格式化（Formatting）
<b>粗体文本</b><code>计算机代码</code><em>强调文本</em><i>斜体文本</i><kbd>键盘输入</kbd> <pre>预格式化文本</pre><small>更小的文本</small><strong>重要的文本</strong><abbr> （缩写）<address> （联系信息）<bdo> （文字方向）<blockquote> （从另一个源引用的部分）<cite> （工作的名称）<del> （删除的文本）<ins> （插入的文本）<sub> （下标文本）<sup> （上标文本）
24.4 链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本
图像链接： <a href="http://www.example.com/">
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail
书签：
<a id="tips">提示部分
<a href="#tips">跳到提示部分
24.5 图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
24.6 样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素
<span>文档中的内联元素
24.7 无序列表
<ul>
<li>项目
<li>项目
</ul>
24.8 有序列表
<ol>
<li>第一项
<li>第二项
</ol>
24.9 定义列表
<dl>
<dt>项目 1
<dd>描述项目 1
<dt>项目 2
<dd>描述项目 2
</dl>
24.10 表格（Tables）
<table border="1">
<tr>
<th>表格标题
<th>表格标题
</tr>
<tr>
<td>表格数据
<td>表格数据
</tr>
</table>
24.11 框架（Iframe）
<iframe src="demo_iframe.htm">
24.12 表单（Forms）
<form action="demo_form.php" method="post/get"
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果
<option selected="selected">香蕉
<option>樱桃
</select>
<textarea name="comment" rows="60" cols="20">
</form>
24.13 实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ©
25.HTML 标签简写及全称
https://www.runoob.com/html/html-tag-name.html
26.HTML 总结
本教程已教你如何使用 HTML 创建站点。
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 的关键是标签，其作用是指示将出现的内容。
