HTML5
1 HTML 简介
1.1 HTML 实例
1.2 实例解析
1.3 什么是HTML?
1.4 HTML 标签
1.5 HTML 元素
1.6 Web 浏览器
1.7 HTML 网页结构
1.8 HTML版本
1.9 <!DOCTYPE> 声明
1.10 通用声明
1.10.1 HTML5
1.10.2 HTML 4.01
1.10.3 XHTML 1.0
1.11 中文编码
1.12 HTML 实例
2 HTML 基础- 4个实例
2.1 HTML 标题
2.2 HTML 段落
2.3 HTML 链接
2.4 HTML 图像
2.5 HTML 水平线
2.6 HTML 注释
2.7 标题大小与字体大小的关系
2.8 HTML 折行
3 HTML 文本格式化
3.1 HTML 格式化标签
3.2 HTML 文本格式化标签
3.3 HTML “计算机输出” 标签
3.4 HTML 引文, 引用, 及标签定义
4 HTML 链接
4.1 HTML 超链接（链接）
4.2 HTML 链接语法
4.3 实例
4.4 HTML 链接 - target 属性
4.5 HTML 链接- id 属性
4.6 实例
5 HTML
5.1 HTML 元素
5.2 HTML 元素</a><br /><a href="#_Toc20228867">5.3 HTML <base> 元素</a><br /><a href="#_Toc20228868">5.4 HTML <style> 元素</a><br /><a href="#_Toc20228869">5.5 HTML <meta> 元素</a><br /><a href="#_Toc20228870">5.6 <meta> 标签- 使用实例</a><br /><a href="#_Toc20228871">5.7 HTML <script> 元素</a><br /><a href="#_Toc20228872">6 HTML 样式- CSS</a><br /><a href="#_Toc20228873">6.1 如何使用CSS</a><br /><a href="#_Toc20228874">6.2 HTML样式实例 - 背景颜色</a><br /><a href="#_Toc20228875">6.3 HTML 样式实例 - 字体, 字体颜色 ，字体大小</a><br /><a href="#_Toc20228876">6.4 HTML 样式实例 - 文本对齐方式</a><br /><a href="#_Toc20228877">6.5 内部样式表</a><br /><a href="#_Toc20228878">6.6 外部样式表</a><br /><a href="#_Toc20228879">6.7 HTML 样式标签</a><br /><a href="#_Toc20228880">7 HTML 图像</a><br /><a href="#_Toc20228881">7.1 HTML图像- 图像标签（<img>）和源属性（Src）</a><br /><a href="#_Toc20228882">7.2 HTML 图像- Alt属性</a><br /><a href="#_Toc20228883">7.3 HTML 图像- 设置图像的高度与宽度</a><br /><a href="#_Toc20228884">7.4 更多实例</a><br /><a href="#_Toc20228885">7.5 HTML 图像标签</a><br /><a href="#_Toc20228886">8 HTML 表格</a><br /><a href="#_Toc20228887">8.1 HTML 表格</a><br /><a href="#_Toc20228888">8.2 HTML 表格和边框属性</a><br /><a href="#_Toc20228889">8.3 HTML 表格表头</a><br /><a href="#_Toc20228890">8.4 更多实例</a><br /><a href="#_Toc20228891">9 HTML 列表</a><br /> <br /> <br />** <a name="kgPxN"></a></p> <h1 id="behf32"><a name="behf32" class="reference-link"></a><span class="header-link octicon octicon-link"></span>0</h1><p><a name="lLEXv"></a></p> <h1 id="3o1gdl"><a name="3o1gdl" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1 HTML </a>简介</h1><p><a name="ilyDX"></a></p> <h2 id="73s41t"><a name="73s41t" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.1 HTML </a>实例</h2><p><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /><h1>我的第一个标题</h1><br /><p>我的第一个段落。</p><br /></body><br /></html> <a name="EimXX"></a></p> <h2 id="c8qbwd"><a name="c8qbwd" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.2 实例解</a>析</h2><p>· <strong><!DOCTYPE html></strong> 声明为 HTML5 文档<br />· <strong><html></strong> 元素是 HTML 页面的根元素<br />· <strong><head></strong> 元素包含了文档的元（meta）数据，如 <strong><meta charset="utf-8"></strong> 定义网页编码格式为 <strong>utf-8</strong>。<br />· <strong><title></strong> 元素描述了文档的标题<br />· <strong><body></strong> 元素包含了可见的页面内容<br />· <strong><h1></strong> 元素定义一个大标题<br />· <strong><p></strong> 元素定义一个段落<br /><strong>注：</strong>在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。<br /> </p> <hr> <p><a name="RKp56"></a></p> <h2 id="dzym6g"><a name="dzym6g" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.3 什么是</a>HTML?</h2><p>HTML 是用来描述网页的一种语言。<br />· HTML 指的是超文本标记语言: <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage<br />· HTML 不是一种编程语言，而是一种<strong>标记</strong>语言<br />· 标记语言是一套<strong>标记标签</strong> (markup tag)<br />· HTML 使用标记标签来<strong>描述</strong>网页<br />· HTML 文档包含了HTML<strong> **</strong>标签<strong>及</strong>文本<strong>内容<br />· HTML文档也叫做</strong> web 页面**</p> <hr> <p><a name="O7dmF"></a></p> <h2 id="1s89pb"><a name="1s89pb" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.4 HTML </a>标签</h2><p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。<br />· HTML 标签是由<em>尖括号</em>包围的关键词，比如 <html><br />· HTML 标签通常是<em>成对出现</em>的，比如 <b> 和 </b><br />· 标签对中的第一个标签是<em>开始标签</em>，第二个标签是<em>结束标__签</em><br />· 开始和结束标签也被称为<em>开放标签</em>和<em>闭合标__签</em><br /><标签>内容</标签><br /> </p> <hr> <p><a name="Z6bX9"></a></p> <h2 id="ba6nxp"><a name="ba6nxp" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.5 HTML </a>元素</h2><p>“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.<br />但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:<br />HTML 元素:<br /><p>这是一个段落。</p><br /> </p> <hr> <p><a name="MqIUA"></a></p> <h2 id="a5qff2"><a name="a5qff2" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.6 Web </a>浏览器</h2><p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。<br />浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824562689-5f950528-5b77-44eb-9c93-7cb6f09ee9ca.jpeg#height=236&width=474" alt=""></p> <hr> <p><a name="9Xgpz"></a></p> <h2 id="3j3sxo"><a name="3j3sxo" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.7 HTML </a>网页结构</h2><p>下面是一个可视化的HTML页面结构：<br /><html><br /><head><br /><br /></head><br /><body><br /><h1>这是一个标题</h1><br /><p>这是一个段落。</p><br /><p>这是另外一个段落。</p><br /></body><br /></html><br /> </p> <table> <thead> <tr> <th><strong><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824562832-158b3013-d219-4c28-b8fe-2f5103ba2c6f.jpeg" alt="Note"></strong></th> <th>只有 <body> 区域 (白色) 才会在浏览器中显示。</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </p> <hr> <p><a name="KAI7D"></a></p> <h2 id="3seqlm"><a name="3seqlm" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.8 HTML</a>版本</h2><p>从初期的网络诞生后，已经出现了许多HTML版本:</p> <table> <thead> <tr> <th><strong>版本</strong></th> <th><strong>发布时间</strong></th> </tr> </thead> <tbody> <tr> <td>HTML</td> <td>1991</td> </tr> <tr> <td>HTML+</td> <td>1993</td> </tr> <tr> <td>HTML 2.0</td> <td>1995</td> </tr> <tr> <td>HTML 3.2</td> <td>1997</td> </tr> <tr> <td>HTML 4.01</td> <td>1999</td> </tr> <tr> <td>XHTML 1.0</td> <td>2000</td> </tr> <tr> <td>HTML5</td> <td>2012</td> </tr> <tr> <td>XHTML5</td> <td>2013</td> </tr> </tbody> </table> <hr> <p><a name="HIDA1"></a></p> <h2 id="5kmcvi"><a name="5kmcvi" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.9 <!DOCTYPE> </a>声明</h2><p><!DOCTYPE>声明有助于浏览器中正确显示网页。<br />网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。<br />doctype 声明是不区分大小写的，以下方式均可：<br /><!DOCTYPE html> </p> <p><!DOCTYPE HTML> </p> <p><!doctype html> </p> <p><!Doctype Html></p> <hr> <p><a name="SaUyL"></a></p> <h2 id="ew9ikt"><a name="ew9ikt" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.10 通用声</a>明</h2><p><a name="Vzjve"></a></p> <h3 id="efe5vg"><a name="efe5vg" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.10.1 HTML5</a></h3><p><!DOCTYPE html> <a name="4tYsU"></a></p> <h3 id="8tte8g"><a name="8tte8g" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.10.2 HTML 4.01</a></h3><p><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”<br />“<a rel="nofollow" href="http://www.w3.org/TR/html4/loose.dtd">">http://www.w3.org/TR/html4/loose.dtd"></a> <a name="00u3Q"></a></p> <h3 id="224q5p"><a name="224q5p" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.10.3 XHTML 1.0</a></h3><p><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”<br />“<a rel="nofollow" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></a><br />查看完整网页声明类型 <a rel="nofollow" href="http://www.runoob.com/tags/tag-doctype.html">DOCTYPE 参考手册</a>。</p> <hr> <p><a name="876Eb"></a></p> <h2 id="4vnoxq"><a name="4vnoxq" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.11 中文编</a>码</h2><p>目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。 <a name="b3seX"></a></p> <h2 id="bot6fs"><a name="bot6fs" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">1.12 HTML </a>实例</h2><p><!DOCTYPE html><br /><html><br /><head><br /><meta charset="UTF-8"><br /> </head><br /><body><br /><h1>我的第一个标题</h1><br /><p>我的第一个段落。</p><br /></body><br /></html><br /> <br /> <br /> <a name="EjF12"></a></p> <h1 id="cufh9r"><a name="cufh9r" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2 HTML </a>基础- 4个实例</h1><p><a name="KKnls"></a></p> <h2 id="89vdsw"><a name="89vdsw" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.1 HTML </a>标题</h2><p>HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的. <a name="lgpVq"></a></p> <h2 id="aq3pco"><a name="aq3pco" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.2 HTML </a>段落</h2><p>HTML 段落是通过标签 <p> 来定义的. <a name="4v7ud"></a></p> <h2 id="4kk9gf"><a name="4kk9gf" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.3 HTML </a>链接</h2><p>HTML 链接是通过标签 <a> 来定义的. <a name="JzJEc"></a></p> <h2 id="8x5umq"><a name="8x5umq" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.4 HTML </a>图像</h2><p>HTML 图像是通过标签 <img> 来定义的.<br />1、<strong>*.html</strong> 文件跟 <strong>*.jpg</strong> 文件(f盘)在不同目录下：<br /><img src="file:///f:/*.jpg" width="300" height="120"/><br />2、<strong>*.html</strong> 文件跟 <strong>*.jpg</strong> 图片在相同目录下：<br /><img src="*.jpg" width="300" height="120"/><br />3、<strong>*.html</strong> 文件跟 <strong>*.jpg</strong> 图片在不同目录下：<br />a、图片 <strong>*.jpg</strong> 在 <strong>image</strong> 文件夹中，<em>.html 跟 <strong>image</strong> 在同一目录下：<br /><img src=”image/</em>.jpg/“width=”300” height=”120”/><br />b、图片 <strong>*.jpg</strong> 在 <strong>image</strong> 文件夹中，<strong>*.html</strong> 在 <strong>connage</strong> 文件夹中，<strong>image</strong> 跟 <strong>connage</strong> 在同一目录下：<br /><img src="../image/*.jpg/"width="300" height="120"/><br />4、如果图片来源于网络，那么写绝对路径：<br /><img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/> <a name="bbl0r"></a></p> <h2 id="b79slp"><a name="b79slp" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.5 HTML </a>水平线</h2><p><hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。 <a name="pVLbe"></a></p> <h2 id="en4vjc"><a name="en4vjc" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.6 HTML </a>注释</h2><p>可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。<br />注释写法如下:<br />实例<br /><!-- 这是一个注释 --> <a name="StuAM"></a></p> <h2 id="3epzl6"><a name="3epzl6" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.7 标题大小与字体大小的关系</a></h2><p>1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。<br /><h1>这是1号标题</h1><br /><font size="6">这是6号字体文本</font><br /> <br /><h2>这是2号标题</h2><br /><font size="5">这是5号字体文本</font><br /> <br /><h3>这是3号标题</h3><br /><font size="4">这是4号字体文本</font><br /> <br /><h4>这是4号标题</h4><br /><font size="3">这是3号字体文本</font><br /> <br /><h5>这是5号标题</h5><br /><font size="2">这是2号字体文本</font><br /> <br /><h6>这是6号标题</h6><br /><font size="1">这是1号字体文本</font> <a name="WUT1A"></a></p> <h2 id="7w0msq"><a name="7w0msq" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">2.8 HTML </a>折行</h2><p>如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <strong><br></strong> 标签：<br /><p>这个<br>段落<br>演示了分行的效果</p><br />· <strong>所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。</strong><br /><strong> </strong><br /><strong> </strong><br />区分<strong>一下：**</strong> <br>, <br/> 以及 <br />（带有空格）<strong><br /></strong><br><strong> 是 HTML 写法。</strong>是 XHTML1.1 的写法, 也是 XML 写法。<strong><br/></strong> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。<br />早期发布的 HTML 规范当中，<br> 与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 <strong>/</strong> 来表示自行封闭，在逻辑上来讲等同于<br>….</br>（但是没有 <strong></br></strong> 这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。<br /><strong> </strong> <a name="UYqzC"></a></p> <h1 id="1nrrt5"><a name="1nrrt5" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">3 HTML </a>文本格式化</h1><p><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><b>加粗文本</b><br><br><br /><i>斜体文本</i><br><br><br /><code>电脑自动输出</code><br><br><br />这是 <sub> 下标</sub> 和 <sup> 上标</sup><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824562912-a3b06924-a23a-4474-8fc2-7c3e37049827.jpeg#height=158&width=154" alt=""><br /> <a name="oZDJA"></a></p> <h2 id="coywqa"><a name="coywqa" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">3.1 HTML </a>格式化标签</h2><p>HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：<strong>粗体</strong> or <em>斜体</em><br />这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。<br /><strong>通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。</strong><br />然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。 <a name="AbnLe"></a></p> <h2 id="78vr6f"><a name="78vr6f" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">3.2 HTML </a>文本格式化标签</h2><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-b.html"><b></a></td> <td>定义粗体文本</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-em.html"><em></a></td> <td>定义着重文字</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-i.html"><i></a></td> <td>定义斜体字</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-small.html"><small></a></td> <td>定义小号字</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-strong.html"><strong></a></td> <td>定义加重语气</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-sub.html"><sub></a></td> <td>定义下标字</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/html/m/tags/tag-sup.html"><sup></a></td> <td>定义上标字</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-ins.html"><ins></a></td> <td>定义插入字</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-del.html"><del></a></td> <td>定义删除字</td> </tr> </tbody> </table> <p> <br /> <br /> <br /> <a name="CAXWi"></a></p> <h2 id="eifb2v"><a name="eifb2v" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">3.3 HTML “</a>计算机输出” 标签</h2><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-code.html"><code></a></td> <td>定义计算机代码</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-kbd.html"><kbd></a></td> <td>定义键盘码</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-samp.html"><samp></a></td> <td>定义计算机代码样本</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-var.html"><var></a></td> <td>定义变量</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-pre.html"><pre></a></td> <td>定义预格式文本</td> </tr> </tbody> </table> <p><a name="R1Cke"></a></p> <h2 id="68zzt0"><a name="68zzt0" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">3.4 HTML </a>引文, 引用, 及标签定义</h2><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-abbr.html"><abbr></a></td> <td>定义缩写</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-address.html"><address></a></td> <td>定义地址</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-bdo.html"><bdo></a></td> <td>定义文字方向</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-blockquote.html"><blockquote></a></td> <td>定义长的引用</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-q.html"><q></a></td> <td>定义短的引用语</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-cite.html"><cite></a></td> <td>定义引用、引证</td> </tr> <tr> <td><a rel="nofollow" href="http://www.runoob.com/tags/tag-dfn.html"><dfn></a></td> <td>定义一个定义项目。</td> </tr> </tbody> </table> <p> <br /> <br /> <br /> <br /> <br /> <a name="Pk2xR"></a></p> <h1 id="84v0kv"><a name="84v0kv" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">4 HTML </a>链接</h1><p><a name="zixod"></a></p> <h2 id="b66xhi"><a name="b66xhi" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">4.1 HTML </a>超链接（链接）</h2><p>HTML使用标签 <a>来设置超文本链接。<br />超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。<br />当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。<br />在标签<a> 中使用了href属性来描述链接的地址。<br />默认情况下，链接将以以下形式出现在浏览器中：<br />· 一个未访问过的链接显示为蓝色字体并带有下划线。<br />· 访问过的链接显示为紫色并带有下划线。<br />· 点击链接时，链接显示为红色并带有下划线。<br /><em>注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。</em><br /> <a name="BQTC6"></a></p> <h2 id="4das2v"><a name="4das2v" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">4.2 HTML </a>链接语法</h2><p>链接的 HTML 代码很简单。它类似这样：<br /><a href="_url_"><em>链接文本</em></a><br />href 属性描述了链接的目标。. <a name="ydwFC"></a></p> <h2 id="fglonq"><a name="fglonq" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">4.3 实</a>例</h2><p><a href="https://www.runoob.com/">访问菜鸟教程</a><br />上面这行代码显示为：<a rel="nofollow" href="https://www.runoob.com/">访问菜鸟教程</a><br />点击这个超链接会把用户带到菜鸟教程的首页。<br /><strong>提示:</strong> <em>“链接文本”</em> 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 <a name="rJKKu"></a></p> <h2 id="38bylp"><a name="38bylp" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">4.4 HTML </a>链接 - target 属性</h2><p>使用 target 属性，你可以定义被链接的文档在何处显示。<br /><a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a> <a name="EIsgd"></a></p> <h2 id="sgx6u"><a name="sgx6u" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">4.5 HTML </a>链接- id 属性</h2><p>id属性可用于创建在一个HTML文档书签标记。<br /><strong>提示:</strong> 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。 <a name="YCZuV"></a></p> <h2 id="5vvwzc"><a name="5vvwzc" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">4.6 实</a>例</h2><p>在HTML文档中插入ID:<br /><a id="tips">有用的提示部分</a><br />在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：<br /><a href="#tips">访问有用的提示部分</a><br />或者，从另一个页面创建一个链接到”有用的提示部分(id=”tips”）”：<br /><a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a><br />· 如何使用图片链接<br /><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><p>创建图片链接:<br /><a href="//www.runoob.com/html/html-tutorial.html"><br /><img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p><br /> <br /><p>无边框的图片链接:<br /><a href="//www.runoob.com/html/html-tutorial.html"><br /><img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563021-ead1a536-edc9-45a1-8d76-609b5108ea39.jpeg#height=92&width=199" alt=""><br />· 如何使用书签<br /><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><p><br /><strong><a href="#C4">查看章节 4</a></strong><br /></p><br /><h2>章节 1</h2><br /><p>这边显示该章节的内容……</p><br /><h2>章节 2</h2><br /><p>这边显示该章节的内容……</p><br /><h2>章节 3</h2><br /><p>这边显示该章节的内容……</p><br /><h2><a id="C4">章节 4</a></h2><br /><p>这边显示该章节的内容……</p><br /><h2>章节 5</h2><br /><p>这边显示该章节的内容……</p><br /><h2>章节 6</h2><br /><p>这边显示该章节的内容……</p><br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563118-9b7c2d88-568a-4d23-a084-9e4a7f1363c8.jpeg#height=484&width=244" alt=""><br />· 本例演示如何跳出框架，假如你的页面被固定在框架之内。<br /><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><p>跳出框架?</p><br /><a href="//www.runoob.com/" target="_top">点击这里!</a><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563207-9da09e9d-ebf4-4e1a-bfae-9d56b3d26dcc.jpeg#height=57&width=89" alt=""><br />· 本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）<br /><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><p><br />这是一个电子邮件链接：<br /><a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"><br />发送邮件</a><br /></p><br /> <br /><p><br /><b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。<br /></p><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563308-1a7f4483-50f4-429f-a660-cede7a381f45.jpeg#height=289&width=305" alt=""><br />· 本例演示更加复杂的邮件链接。<br /><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><p><br />这是另一个电子邮件链接：<br /><a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a><br /></p><br /><p><br /><b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。<br /></p><br /></body><br /></html><br /> <br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563429-3bbe22fb-09a8-4eba-8e55-600605bf4db6.jpeg#height=182&width=327" alt=""><strong>**关于创建电子邮件链接时如何发送邮件内容</strong><br />在进行邮件内容发送时，需要使用关键字：<strong>mailto</strong><br />示例如下：<br /><a href="mailto:zhangrr601@163.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a><br /><a rel="nofollow" href="https://c.runoob.com/codedemo/5346"><strong>尝试一下 »</strong></a><br />这样会调启系统默认的邮件程序发送给 zhangrr601@163.com，并且收件人那里已经填上了我邮箱的地址。<br />关于创建电子邮件链接时如何进行抄送，密送.<br />在进行抄送时，需要使用关键字：<strong>cc</strong><br />在进行密送时，需要使用关键字：<strong>bcc</strong><br />示例如下：<br /><a href="mailto:zhangrr601@163.com?cc=someone@163.com&bcc=somebody@163.com" rel="nofollow">发送邮件</a><br /><a rel="nofollow" href="https://c.runoob.com/codedemo/5346"><strong>尝试一下 »</strong></a><br />参数说明：</p> <table> <thead> <tr> <th><strong>参数</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>mailto:<em>name@email.com</em></td> <td>邮件接收地址</td> </tr> <tr> <td>cc=<em>name@email.com</em></td> <td>抄送地址</td> </tr> <tr> <td>bcc=<em>name@email.com</em></td> <td>密件抄送地址</td> </tr> <tr> <td>subject=<em>subject text</em></td> <td>邮件主题</td> </tr> <tr> <td>body=<em>body text</em></td> <td>邮件内容</td> </tr> <tr> <td>?</td> <td>第一个参数分隔符</td> </tr> <tr> <td>&</td> <td>其他参数分隔符</td> </tr> </tbody> </table> <p>注：多个邮件地址用 <strong>;</strong> 隔开，空格用 <strong>%20</strong> 代替。<br /> <a name="hBRFE"></a></p> <h1 id="9oyr53"><a name="9oyr53" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5 HTML </a><HEAD></h1><p><a name="RuNSc"></a></p> <h2 id="7ajhjt"><a name="7ajhjt" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5.1 HTML <head> </a>元素</h2><p><head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。<br />可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. <a name="t5XTB"></a></p> <h2 id="8j6ul9"><a name="8j6ul9" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5.2 HTML <title> </a>元素</h2><p><title> 标签定义了不同文档的标题。<br /><title> 在 HTML/XHTML 文档中是必须的。<br /><title> 元素:<br />· 定义了浏览器工具栏的标题<br />· 当网页添加到收藏夹时，显示在收藏夹中的标题<br />· 显示在搜索引擎结果页面的标题<br />一个简单的 HTML 文档:<br />实例<br /><!DOCTYPE html><br /><html> <head> <meta charset="utf-8"> </head> <body> 文档内容……<br /></body> </html> <a name="rBCOk"></a></p> <h2 id="65ef9a"><a name="65ef9a" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5.3 HTML <base> </a>元素</h2><p><base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:<br /><head><br /><base href="http://www.runoob.com/images/" target="_blank"><br /></head> <a name="1eHNF"></a></p> <h2 id="2xgl4j"><a name="2xgl4j" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5.4 HTML <style> </a>元素</h2><p><style> 标签定义了HTML文档的样式文件引用地址.<br />在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:<br /><head><br /><style type="text/css"><br />body {background-color:yellow}<br />p {color:blue}<br /></style><br /></head> <a name="cCadA"></a></p> <h2 id="53tz8k"><a name="53tz8k" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5.5 HTML <meta> </a>元素</h2><p>meta标签描述了一些基本的元数据。<br /><meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。<br />META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。<br />元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。<br /><meta> 一般放置于 <head> 区域 <a name="RxVmM"></a></p> <h2 id="9ikc35"><a name="9ikc35" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5.6 <meta> </a>标签- 使用实例</h2><p>为搜索引擎定义关键词:<br /><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"><br />为网页定义描述内容:<br /><meta name="description" content="免费 Web & 编程 教程"><br />定义网页作者:<br /><meta name="author" content="Runoob"><br />每30秒钟刷新当前页面:<br /><meta http-equiv="refresh" content="30"> <a name="mDisT"></a></p> <h2 id="43xedh"><a name="43xedh" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">5.7 HTML <script> </a>元素</h2><p><script>标签用于加载脚本文件，如： JavaScript。<br /><script> 元素在以后的章节中会详细描述。<br />HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。<br />显示时，要将<link>标签放入<head>里。<br />举例：<br /><!doctype HTML><br /><html><br /><head><br /><link rel="shortcut icon" href="图片url"><br /><br /></head><br /><body><br />……<br />……<br /></body><br /></html><br /><strong>head 标签和 header 标签的不同</strong><br />head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。<br />如：<br /><html><br /> <head><br /> <br /> </head><br /></html><br />header 标签用于定义文档的页眉（介绍信息）。<br />如：<br /><html><br /> <body><br /> <header><br /> <p>段落</p><br /> <h1>一级标题</h1><br /> </header><br /> </body><br /></html><br />注意千万不要弄混。 <a name="H9GQ7"></a></p> <h1 id="678ibg"><a name="678ibg" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6 HTML </a>样式- CSS</h1><p><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div><br /> <br /><div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"><br /> <br /><div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div><br /> <br /><h3>Look! Styles and colors</h3><br /> <br /><div style="letter-spacing:12px;">Manipulate Text</div><br /> <br /><div style="color:#40B3DF;">Colors<br /><span style="background-color:#B4009E;color:#ffffff;">Boxes</span><br /></div><br /> <br /><div style="color:#000000;">and more…</div><br /> <br /></div><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563528-5e1ece13-f9ad-49ba-af9f-fc2d39453521.jpeg#height=142&width=511" alt=""><br /> <a name="nBsLR"></a></p> <h2 id="ebxj9t"><a name="ebxj9t" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6.1 如何使用</a>CSS</h2><p>CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.<br />CSS 可以通过以下方式添加到HTML中:<br />· 内联样式- 在HTML元素中使用”style”<strong> **</strong>属性<strong><br />· 内部样式表 -在HTML文档头部 <head> 区域使用<style></strong> <strong>**元素</strong> 来包含CSS<br />· 外部引用 - 使用外部 CSS<strong> **</strong>文件 **<br />最好的方式是通过外部引用CSS文件.<br />在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。 <a name="2ob4C"></a></p> <h2 id="fq570a"><a name="fq570a" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6.2 HTML</a>样式实例 - 背景颜色</h2><p>背景色属性（background-color）定义一个元素的背景颜色：<br />实例<br /><body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body> <a name="kvCXs"></a></p> <h2 id="5o71rn"><a name="5o71rn" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6.3 HTML </a>样式实例 - 字体, 字体颜色 ，字体大小</h2><p>我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:<br />实例<br /><h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> <a name="L5yKP"></a></p> <h2 id="1r27lp"><a name="1r27lp" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6.4 HTML </a>样式实例 - 文本对齐方式</h2><p>使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：<br />实例<br /><h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p><br /> <br /> <a name="56znq"></a></p> <h2 id="4ekqpa"><a name="4ekqpa" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6.5 内部样式</a>表</h2><p>当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:<br /><head><br /><style type="text/css"><br />body {background-color:yellow;}<br />p {color:blue;}<br /></style><br /></head><br /> <a name="fyZgl"></a></p> <h2 id="cdab8m"><a name="cdab8m" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6.6 外部样式</a>表</h2><p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。<br /><head><br /><link rel="stylesheet" type="text/css" href="mystyle.css"><br /></head> <a name="2aV3g"></a></p> <h2 id="5dh8c6"><a name="5dh8c6" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">6.7 HTML </a>样式标签</h2><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-style.html"><style></a></td> <td>定义文本样式</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-link.html"><link></a></td> <td>定义资源引用地址</td> </tr> </tbody> </table> <p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="Uf3RT"></a></p> <h1 id="dbzc5s"><a name="dbzc5s" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">7 HTML </a>图像</h1><p><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><p>一个来自文件夹中的图像:</p><br /><img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p><br /><img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563611-b42aadf9-3204-4078-aea6-e16b3529694b.jpeg#height=167&width=281" alt=""> <a name="cRNvb"></a></p> <h2 id="7zs9iw"><a name="7zs9iw" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">7.1 HTML</a>图像- 图像标签（<img>）和源属性（Src）</h2><p>在 HTML 中，图像由<img> 标签定义。<br /><img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。<br />要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。<br /><strong>定义图像的语法是：</strong><br /><img src="_url_" alt="_some_text_"><br />URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 <a rel="nofollow" href="https://www.runoob.com/images/pulpit.jpg">http://www.runoob.com/images/pulpit.jpg</a>。<br />浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。</p> <hr> <p><a name="Uz32Q"></a></p> <h2 id="fc67vp"><a name="fc67vp" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">7.2 HTML </a>图像- Alt属性</h2><p>alt 属性用来为图像定义一串预备的可替换的文本。<br />替换文本属性的值是用户定义的。<br /><img src="boat.gif" alt="Big Boat"><br />在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 <a name="QG3Mt"></a></p> <h2 id="gfm54g"><a name="gfm54g" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">7.3 HTML </a>图像- 设置图像的高度与宽度</h2><p>height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。<br />属性值默认单位为像素:<br /><img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"><br /><strong>提示:</strong> 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。 <a name="4yjnz"></a></p> <h2 id="11e93w"><a name="11e93w" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">7.4 更多实</a>例</h2><p>· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_image_align">排列图片</a><br />本例演示如何在文字中排列图像。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563717-683e83f8-da82-4a1b-a4db-2cd7cf121494.jpeg#height=221&width=459" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563834-fe710872-1746-44a4-9a09-d823ead1c1d8.jpeg#height=219&width=461" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_image_float">浮动图像</a><br />本例演示如何使图片浮动至段落的左边或右边。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563921-0eff8a01-075e-4bc4-8062-eb9a02f62172.jpeg#height=212&width=468" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824563992-45418940-8ba4-414d-977d-857cf3eb3d65.jpeg#height=83&width=476" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_imglink">设置图像链接</a><br />本例演示如何将图像作为一个链接使用。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564091-aad9e9dd-8950-4ae6-9bb2-f054bd724371.jpeg#height=278&width=488" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564179-f94104ef-0bf5-412d-9fa5-a3bbc47c473f.jpeg#height=95&width=185" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_areamap">创建图像映射</a><br />本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564269-82843d84-f046-436e-829e-cc4c70e9e50a.jpeg#height=258&width=410" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564374-e8590ae9-a360-4663-bfc6-942763dd5041.jpeg#height=136&width=245" alt=""> <a name="W3XC8"></a></p> <h2 id="6ak0o5"><a name="6ak0o5" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">7.5 HTML </a>图像标签</h2><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-img.html"><img></a></td> <td>定义图像</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-map.html"><map></a></td> <td>定义图像地图</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-area.html"><area></a></td> <td>定义图像地图中的可点击区域</td> </tr> </tbody> </table> <p>1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))<br /><area shape="rect" coords="x1,y1,x2,y2" href=url><br />2、圆形：(圆心坐标为(X1,y1)，半径为r)<br /><area shape="circle" coords="x1,y1,r" href=url><br />3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)<br /><area shape="poly" coords="x1,y1,x2,y2 ......" href=url><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="YH8R6"></a></p> <h1 id="6haqs0"><a name="6haqs0" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">8 HTML </a>表格</h1><p>HTML中的table可以大致分为三个部分：<br />· thead ————-表格的页眉<br />· tbody ————-表格的主体<br />· tfoot ————-定义表格的页脚<br />thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。<br /><strong><tr> </tr></strong> 这个标签就是放在三间房子里面的东西，每一个 <strong><tr> </tr></strong> 就是表格一行。<br />表格的每一行被分为一个个单元格。<br />每一个单元格就是用来存放数据的，这个数据分为两种：一，数据的名称；二，数据本身。<br />用 <strong><th></th></strong> 表示数据的名称(标题) ,<br /><td></td><br />表示真正的数据内容。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564498-b0cc8cc5-835f-46cf-964d-564a8ea839fc.jpeg#height=269&width=479" alt=""><br />一个简单实例：<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564575-385eff8f-053e-4f65-b100-9a38fbece283.jpeg#height=260&width=488" alt=""><br /> <br /><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><br /></head><br /><body><br /> <br /><p><br />每个表格从一个 table 标签开始。<br />每个表格行从 tr 标签开始。<br />每个表格的数据从 td 标签开始。<br /></p><br /> <br /><h4>一列:</h4><br /><table border="1"><br /><tr><br /> <td>100</td><br /></tr><br /></table><br /> <br /><h4>一行三列:</h4><br /><table border="1"><br /><tr><br /> <td>100</td><br /> <td>200</td><br /> <td>300</td><br /></tr><br /></table><br /> <br /><h4>两行三列:</h4><br /><table border="1"><br /><tr><br /> <td>100</td><br /> <td>200</td><br /> <td>300</td><br /></tr><br /><tr><br /> <td>400</td><br /> <td>500</td><br /> <td>600</td><br /></tr><br /></table><br /> <br /></body><br /></html><br />每个表格从一个 table 标签开始。 每个表格行从 tr 标签开始。 每个表格的数据从 td 标签开始。<br />一列:</p> <table> <thead> <tr> <th>100</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <p>一行三列:</p> <table> <thead> <tr> <th>100</th> <th>200</th> <th>300</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <p>两行三列:</p> <table> <thead> <tr> <th>100</th> <th>200</th> <th>300</th> </tr> </thead> <tbody> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </tbody> </table> <p><a name="80qN4"></a></p> <h2 id="dsi19"><a name="dsi19" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">8.1 HTML </a>表格</h2><p>表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <a name="oUPr4"></a></p> <h2 id="cdlclp"><a name="cdlclp" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">8.2 HTML </a>表格和边框属性</h2><p>如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。<br />使用边框属性来显示一个带有边框的表格： <a name="VReMh"></a></p> <h2 id="exgb56"><a name="exgb56" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">8.3 HTML </a>表格表头</h2><p>表格的表头使用 <th> 标签进行定义。<br />大多数浏览器会把表头显示为粗体居中的文本： <a name="wdqPZ"></a></p> <h2 id="ef5lhh"><a name="ef5lhh" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">8.4 更多实</a>例</h2><p>· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_tables3">没有边框的表格</a><br />本例演示一个没有边框的表格。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564733-3c06a1e9-ea76-4edb-bf93-808388411eeb.jpeg#height=411&width=291" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564811-c52084cb-01e2-4b50-83c8-310e59d09e20.jpeg#height=182&width=182" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_table_headers">表格中的表头(Heading)</a><br />本例演示如何显示表格表头。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824564963-7bcd2386-0f07-42ab-8cc7-79652627f48e.jpeg#height=396&width=347" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565077-fb050024-59dd-472f-8d1a-e4db6cc28611.jpeg#height=100&width=135" alt=""><br /> <br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_tables2">带有标题的表格</a><br />本例演示一个带标题 (caption) 的表格<img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565165-376b2162-ad5b-4c36-96a6-75b12480ec35.jpeg#height=485&width=397" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565279-0450e7fa-c3a8-4c66-94da-8543e6892cd4.jpeg#height=215&width=281" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_table_span">跨行或跨列的表格单元格</a><br />本例演示如何定义跨行或跨列的表格单元格。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565367-32c0371d-d6ea-47bc-99e6-bf5482e37c3f.jpeg#height=390&width=363" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565449-be9d93a5-321a-4efb-b32a-93dfe05337aa.jpeg#height=221&width=269" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_table_elements">表格内的标签</a><br />本例演示如何显示在不同的元素内显示元素。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565574-20bff7fb-2f3b-45a5-8f48-4e55431e71b6.jpeg#height=484&width=423" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565691-78a1eec1-5bb2-48fb-981d-804fdb578d50.jpeg#height=199&width=356" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_table_cellpadding">单元格边距(Cell padding)</a><br />本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565843-5bfcc8d6-6566-4052-b7d6-f24f8b7768d3.jpeg#height=442&width=392" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824565921-f3a38a22-af57-4022-a55d-1caf2fb63314.jpeg#height=226&width=152" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_table_cellspacing">单元格间距(Cell spacing)</a><br />本例演示如何使用 Cell spacing 增加单元格之间的距离。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566009-b965baf5-5008-42bb-aefb-5ce99e2a8748.jpeg#height=401&width=313" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566085-731b5f75-f398-42fe-9233-8f190f2918e9.jpeg#height=317&width=173" alt=""><br />· <a rel="nofollow" href="https://c.runoob.com/codedemo/3187">漂亮的表格</a><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="pMkfg"></a></p> <h1 id="3cfimo"><a name="3cfimo" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a href="">9 HTML </a>列表</h1><p><a name="v4Udu"></a></p> <h2 id="56cpuv"><a name="56cpuv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9.1 HTML无序列表</h2><p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。<br />无序列表使用 <ul> 标签<br /><ul><br /><li>Coffee</li><br /><li>Milk</li><br /></ul> <a name="TRcmT"></a></p> <h2 id="22jrub"><a name="22jrub" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9.2 HTML 有序列表</h2><p>同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <strong><ol></strong> 标签。每个列表项始于 <li> 标签。<br />列表项使用数字来标记。<br /><ol><br /><li>Coffee</li><br /><li>Milk</li><br /></ol><br />浏览器中显示如下：<br />1. Coffee<br />2. Milk <a name="cQLFa"></a></p> <h2 id="69b2qu"><a name="69b2qu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9.3 HTML 自定义列表</h2><p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。<br />自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。<br /><dl><br /><dt>Coffee</dt><br /><dd>- black hot drink</dd><br /><dt>Milk</dt><br /><dd>- white cold drink</dd><br /></dl><br />浏览器显示如下：<br />Coffee<br />- black hot drink<br />Milk<br />- white cold drink<br /> <a name="jHTNb"></a></p> <h2 id="ehttzs"><a name="ehttzs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9.4 更多实例</h2><p>· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_lists_ordered">不同类型的有序列表</a><br />本例演示不同类型的有序列表。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566184-b0289270-91b8-4981-bf8c-0abecf4f72a3.jpeg#height=214&width=379" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_lists_unordered">不同类型的无序列表</a><br />本例演示不同类型的无序列表。<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566259-be306d0c-c7ab-435f-9666-9aa8b25e684b.jpeg#height=144&width=415" alt=""><br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_lists2">嵌套列表</a><br />本例演示如何嵌套列表。<br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_nestedlists2">嵌套列表 2</a><br />本例演示更复杂的嵌套列表。<br />· <a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_lists3">自定义列表</a><br />本例演示一个定义列表。 <a name="KnBN2"></a></p> <h2 id="6blxfz"><a name="6blxfz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9.5 HTML 列表标签</h2><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-ol.html"><ol></a></td> <td>定义有序列表</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-ul.html"><ul></a></td> <td>定义无序列表</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-li.html"><li></a></td> <td>定义列表项</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-dl.html"><dl></a></td> <td>定义列表</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-dt.html"><dt></a></td> <td>自定义列表项目</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-dd.html"><dd></a></td> <td>定义自定列表项的描述</td> </tr> </tbody> </table> <p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="RhTZ6"></a></p> <h1 id="d98akf"><a name="d98akf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10 HTML <DIV> 和<SPAN></h1><p>HTML 可以通过 <div> 和 <span>将元素组合起来。 <a name="kPNnY"></a></p> <h2 id="6o5spz"><a name="6o5spz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.1 HTML 区块元素</h2><p>大多数 HTML 元素被定义为<strong>块级元素</strong>或<strong>内联元素</strong>。<br />块级元素在浏览器显示时，通常会以新行来开始（和结束）。<br />实例: <h1>, <p>, <ul>, <table> <a name="fkBXs"></a></p> <h2 id="bgre9m"><a name="bgre9m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.2 HTML 内联元素</h2><p>内联元素在显示时通常不会以新行开始。<br />实例: <b>, <td>, <a>, <img> <a name="cXA3R"></a></p> <h2 id="26bhgp"><a name="26bhgp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.3 HTML <div> 元素</h2><p>HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<br /><div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。<br />如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<br /><div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 <a name="f3WNs"></a></p> <h2 id="738itu"><a name="738itu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.4 HTML <span> 元素</h2><p>HTML <span> 元素是内联元素，可用作文本的容器<br /><span> 元素也没有特定的含义。<br />当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 <a name="QuBL1"></a></p> <h2 id="a4p1w"><a name="a4p1w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.5 HTML 分组标签</h2><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-div.html"><div></a></td> <td>定义了文档的区域，块级 (block-level)</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-span.html"><span></a></td> <td>用来组合文档中的行内元素， 内联元素(inline)</td> </tr> </tbody> </table> <p><a name="R6dGH"></a></p> <h1 id="2u513x"><a name="2u513x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11 HTML 布局</h1><hr> <p>网页布局对改善网站的外观非常重要。<br />请慎重设计您的网页布局。 <a name="WSCS4"></a></p> <h2 id="dcd3qm"><a name="dcd3qm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.1 网站布局</h2><p>大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。<br />大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 <a name="ptSfh"></a></p> <h2 id="3tid00"><a name="3tid00" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.2 HTML 布局 - 使用<div> 元素</h2><p>div 元素是用于分组 HTML 元素的块级元素。 <a name="6btGu"></a></p> <h2 id="eogd2"><a name="eogd2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.3 HTML 布局 - 使用表格</h2><p>使用 HTML <table> 标签是创建布局的一种简单的方式。<br />大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。</p> <table> <thead> <tr> <th><strong><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824562832-158b3013-d219-4c28-b8fe-2f5103ba2c6f.jpeg" alt="lamp"></strong></th> <th>即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <p>下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="mqnSu"></a></p> <h1 id="4pc967"><a name="4pc967" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12 HTML 表单和输入</h1><hr> <p>HTML 表单用于收集不同类型的用户输入。 <a name="fLB3D"></a></p> <h2 id="cu26fs"><a name="cu26fs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.1 HTML 表单</h2><p>表单是一个包含表单元素的区域。<br />表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。<br />表单使用表单标签 <form> 来设置:<br /><form><br />.<br /><em>input __元素</em>.<br /></form></p> <hr> <p><a name="z5M1R"></a></p> <h2 id="8bvfzs"><a name="8bvfzs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.2 HTML 表单 - 输入元素</h2><p>多数情况下被用到的表单标签是输入标签（<input>）。<br />输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：</p> <hr> <p><a name="uX6Kj"></a></p> <h2 id="4i866q"><a name="4i866q" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.3 文本域（Text Fields）</h2><p>文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。<br /><form><br />First name: <input type="text" name="firstname"><br><br />Last name: <input type="text" name="lastname"><br /></form><br />浏览器显示如下：<br />First name: <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566375-793fc346-882c-4e74-9cd3-5bf17e682567.jpeg#height=18&width=117" alt=""><br />Last name: <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566375-793fc346-882c-4e74-9cd3-5bf17e682567.jpeg#height=18&width=117" alt=""><br /><strong>注意:</strong>表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。</p> <hr> <p><a name="M5qE9"></a></p> <h2 id="99zkru"><a name="99zkru" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.4 密码字段</h2><p>密码字段通过标签<input type="password"> 来定义:<br /><form><br />Password: <input type="password" name="pwd"><br /></form><br />浏览器显示效果如下:<br />Password: <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566513-72361705-bee3-4ad3-9b53-1cb3725ca3f3.jpeg#height=18&width=72" alt=""><br /><strong>注意:</strong>密码字段字符不会明文显示，而是以星号或圆点替代。</p> <hr> <p><a name="0cZ0u"></a></p> <h2 id="5j8f70"><a name="5j8f70" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.5 单选按钮（Radio Buttons）</h2><p><input type="radio"> 标签定义了表单单选框选项<br /><form><br /><input type="radio" name="sex" value="male">Male<br><br /><input type="radio" name="sex" value="female">Female<br /></form><br />浏览器显示效果如下:<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566622-e396ef23-6a9f-47a7-aadf-e801550f25c7.jpeg#height=20&width=20" alt="">Male<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566728-7dd4990c-e4e4-422a-8f5e-3b68698d5ec6.jpeg#height=20&width=20" alt="">Female</p> <hr> <p><a name="GAtAy"></a></p> <h2 id="ep9c29"><a name="ep9c29" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.6 复选框（Checkboxes）</h2><p><input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。<br /><form><br /><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><br /><input type="checkbox" name="vehicle" value="Car">I have a car <br /></form><br />浏览器显示效果如下:<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566879-aaa7167d-e488-4622-ac99-82ee128aee34.jpeg#height=20&width=20" alt="">I have a bike<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824566879-aaa7167d-e488-4622-ac99-82ee128aee34.jpeg#height=20&width=20" alt="">I have a car</p> <hr> <p><a name="vDdyn"></a></p> <h2 id="a8tv54"><a name="a8tv54" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.7 提交按钮(Submit Button)</h2><p><input type="submit"> 定义了提交按钮.<br />当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:<br /><form name="input" action="html_form_action.php" method="get"><br />Username: <input type="text" name="user"><br /><input type="submit" value="Submit"><br /></form><br />浏览器显示效果如下:<br />Username: <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567035-0f561414-a606-41ed-affb-44b1a8b34008.jpeg#height=18&width=117" alt=""><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567104-970fdf85-3a44-4c7b-92e0-5baf1fbb76f3.jpeg#height=24&width=47" alt=""><br />假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。 <a name="EMIKi"></a></p> <h2 id="33ir9m"><a name="33ir9m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.8 下拉框(Select)</h2><p><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /><form action=""><br /><select name="cars"><br /><option value="volvo">Volvo</option><br /><option value="saab">Saab</option><br /><option value="fiat">Fiat</option><br /><option value="audi">Audi</option><br /></select><br /></form><br /></body><br /></html><br /> <br /><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_select3">预选下拉列表</a><br />本例演示如何创建一个简单的带有预选值的下拉列表。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /><form action=""><br /><select name="cars"><br /><option value="volvo">Volvo</option><br /><option value="saab">Saab</option><br /><option value="fiat" selected>Fiat</option><br /><option value="audi">Audi</option><br /></select><br /></form><br /></body><br /></html><br /> <br /><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_textarea">文本域(Textarea)</a><br />本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /> <br /><textarea rows="10" cols="30"><br />我是一个文本框。<br /></textarea><br /> <br /></body><br /></html><br /> <br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567174-269fef4f-c5a4-47b5-91b4-bbf851199e90.jpeg#height=137&width=202" alt=""><br /><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_button">创建按钮</a><br />本例演示如何创建按钮。你可以对按钮上的文字进行自定义。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /> <br /><form action=""><br /><input type="button" value="Hello world!"><br /></form><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567281-d3c69abe-a339-4af9-b8ee-dc108829f879.jpeg#height=27&width=85" alt=""> <a name="ul2Mp"></a></p> <h2 id="5o9f9b"><a name="5o9f9b" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.9 表单实例</h2><p><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_legend">带边框的表单</a><br />本例演示如何在数据周围绘制一个带标题的框。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body></p> <form action=""><br /><fieldset><br /><legend>Personal information:</legend><br />Name: <input type="text" size="30"><br><br />E-mail: <input type="text" size="30"><br><br />Date of birth: <input type="text" size="23"><br /></fieldset><br /></form> <p></body><br /></html><br />运行结果<br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567361-2a038109-907a-4953-93c6-337f0f4a562c.jpeg#height=73&width=510" alt=""><br /><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_form_submit">带有输入框和确认按钮的表单</a><br />本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /><form action="demo-form.php"><br />First name: <input type="text" name="FirstName" value="Mickey"><br><br />Last name: <input type="text" name="LastName" value="Mouse"><br><br /><input type="submit" value="提交"><br /></form><br /><p>点击”提交”按钮，表单数据将被发送到服务器上的“demo-form.php”。</p><br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567442-1be82cbe-c7db-4f1a-b037-cfb2ab44e875.jpeg#height=102&width=452" alt=""><br /><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_form_checkbox">带有复选框的表单</a><br />此表单包含两个复选框和一个确认按钮。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /> <br /><form action="demo-form.php" method="get"><br /> <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br><br /> <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br><br /> <input type="submit" value="提交"><br /></form><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567514-46849263-43d1-44d5-a23e-c34404dcd214.jpeg#height=69&width=130" alt=""><br /><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_form_radio">带有单选按钮的表单</a><br />此表单包含两个单选框和一个确认按钮。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /> <br /><form action="demo-form.php" method="get"><br /> <input type="radio" name="sex" value="Male"> Male<br><br /> <input type="radio" name="sex" value="Female" checked="checked"> Female<br><br /> <input type="submit" value="提交"><br /></form><br /> <br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567587-36beac3d-ebcc-4e6f-ac4f-64abbefe3e04.jpeg#height=68&width=121" alt=""><br /><a rel="nofollow" href="https://www.runoob.com/try/try.php?filename=tryhtml_form_mail">从表单发送电子邮件</a><br />此例演示如何从表单发送电子邮件。<br /><!DOCTYPE html><br /><html><br /><head> <br /><meta charset="utf-8"> <br /> <br /></head><br /><body><br /> <br /><h3>发送邮件到 someone@example.com:</h3><br /> <br /><form action="MAILTO:someone@example.com" method="post" enctype="text/plain"><br />Name:<br><br /><input type="text" name="name" value="your name"><br><br />E-mail:<br><br /><input type="text" name="mail" value="your email"><br><br />Comment:<br><br /><input type="text" name="comment" value="your comment" size="50"><br><br><br /><input type="submit" value="发送"><br /><input type="reset" value="重置"><br /></form><br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2019/jpeg/446847/1571824567666-89805892-9dd3-470d-97d9-4bebba4db492.jpeg#height=170&width=295" alt=""> <a name="WNHtR"></a></p> <h2 id="1j1g2z"><a name="1j1g2z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.10 HTML 表单标签</h2><p><strong>New</strong> : HTML5新标签</p> <table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-form.html"><form></a></td> <td>定义供用户输入的表单</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-input.html"><input></a></td> <td>定义输入域</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-textarea.html"><textarea></a></td> <td>定义文本域 (一个多行的输入控件)</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-label.html"><label></a></td> <td>定义了 <input> 元素的标签，一般为输入标题</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-fieldset.html"><fieldset></a></td> <td>定义了一组相关的表单元素，并使用外框包含起来</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-legend.html"><legend></a></td> <td>定义了 <fieldset> 元素的标题</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-select.html"><select></a></td> <td>定义了下拉选项列表</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-optgroup.html"><optgroup></a></td> <td>定义选项组</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-option.html"><option></a></td> <td>定义下拉列表中的选项</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-button.html"><button></a></td> <td>定义一个点击按钮</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-datalist.html"><datalist></a><strong>New</strong></td> <td>指定一个预先定义的输入控件选项列表</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-keygen.html"><keygen></a><strong>New</strong></td> <td>定义了表单的密钥对生成器字段</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/tag-output.html"><output></a><strong>New</strong></td> <td>定义一个计算结果</td> </tr> </tbody> </table> <p><input type="reset">定义重置按钮<br /><input type="reset" name="button" id="button" value="重置"><br />点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。<br />表单中的单选按钮可以设置以下几个属性：value、name、checked<br />· value：提交数据到服务器的值（后台程序PHP使用）<br />· name：为控件命名，以备后台程序 ASP、PHP 使用<br />· checked：当设置 checked=”checked” 时，该选项被默认选中<br /><form><br /><p>你生活在哪个国家？</p><br /><input type="radio" name="country" value="China" checked="checked">中国<br /><br /><input type="radio" name="country" value="the USA">美国<br /></form><br /><strong>注意：</strong>同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。<br /> <br /> <a name="0nLhP"></a></p> <h1 id="e56f7w"><a name="e56f7w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>13 HTML 框架</h1><hr> <p>通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 <a name="veVGf"></a></p> <h2 id="g01cc0"><a name="g01cc0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>13.1 Iframe - 设置高度与宽度</h2><p>height 和 width 属性用来定义iframe标签的高度与宽度。<br />属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)。<br /> <a name="iblt3"></a></p> <h1 id="2ed4if"><a name="2ed4if" class="reference-link"></a><span class="header-link octicon octicon-link"></span>14</h1>