HTML导图

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML

• 统一资源定位器(Uniform Resource Locators)
  • 以下是一些URL scheme：
    • http
      • 访问
        • 超文本传输协议
          • 用于...
            • 以 http:// 开头的普通网页。不加密。
    • https
      • 访问
        • 安全超文本传输协议
          • 用于...
            • 安全网页，加密所有信息交换。
    • ftp
      • 访问
        • 文件传输协议
          • 用于...
            • 用于将文件下载或上传至网站。
    • file
      • 用于...
        • 您计算机上的文件。
  • URL - 统一资源定位器
    • Web浏览器通过URL从Web服务器请求页面。
    • 当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
    • 一个统一资源定位器(URL) 用于定位万维网上的文档。
    • 一个网页地址实例:
    • 语法规则:
      • scheme://host.domain:port/path/filename
        • 说明:
          • scheme - 定义因特网服务的类型。最常见的类型是 http
          • host - 定义域主机（http 的默认主机是 www）
          • domain - 定义因特网域名，比如 runoob.com
          • :port - 定义主机上的端口号（http 的默认端口号是 80）
          • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
          • filename - 定义文档/资源的名称
• 字符实体
  • 字符实体
    • HTML 中的预留字符必须被替换为字符实体。
    • 一些在键盘上找不到的字符也可以使用字符实体来替换。
  • 实体
• 框架
• 脚本
• 表单
  • 表单和输入
    • HTML 表单用于收集不同类型的用户输入
  • 在线实例
    • 创建文本字段 (Text field)
      • 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
    • 创建密码字段
      • 本例演示如何创建 HTML 的密码域。
  • 表单
  • 表单 - 输入元素
  • 文本域（Text Fields）
  • 密码字段
  • 单选按钮（Radio Buttons）
  • 复选框（Checkboxes）
  • 提交按钮(Submit Button)
  • 更多实例
    • 单选按钮(Radio buttons)
      • 本例演示如何在 HTML 中创建单选按钮。
    • 复选框(Checkboxes)
      • 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
    • 简单的下拉列表
      • 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
    • 预选下拉列表
      • 本例演示如何创建一个简单的带有预选值的下拉列表。
    • 文本域(Textarea)
      • 本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
    • 创建按钮
      • 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
  • 表单实例
    • 带边框的表单
      • 本例演示如何在数据周围绘制一个带标题的框。
    • 带有输入框和确认按钮的表单
      • 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
    • 带有复选框的表单
      • 此表单包含两个复选框和一个确认按钮。
    • 带有单选按钮的表单
      • 此表单包含两个单选框和一个确认按钮。
    • 从表单发送电子邮件
      • 此例演示如何从表单发送电子邮件。
  • 表单标签
    • 标签
      • <form>
        • 定义供用户输入的表单
          • 属性
            • accept
              • <form action="demo_form.php" accept="image/gif, image/jpeg"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> Your image: <input type="file" name="pic" id="pic"><br> <input type="submit" value="提交"> </form>
              • HTML5 不支持
                • 规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
                  • MIME_type
                    • 允许被提交/被上传的一个或多个 MIME 类型。如需规定多个 MIME 类型，请使用逗号分隔它们。
                    • 请参阅
                      • ，获得标准 MIME 类型的完整列表。
            • accept-charset
              • 规定服务器可处理的表单数据字符集。
                • character_set
            • action
              • 规定当提交表单时向何处发送表单数据。
                • URL
            • autocomplete
              • 规定是否启用表单的自动完成功能。
                • on
                • off
            • enctype
              • 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
                • application/x-www-form-urlencoded
                • multipart/form-data
                • text/plain
            • method
              • 规定用于发送表单数据的 HTTP 方法。
                • get
                • post
            • name
              • 规定表单的名称。
                • text
            • novalidate
              • 如果使用该属性，则提交表单时不进行验证。
                • novalidate
            • target
              • 规定在何处打开 action URL。
                • _blank
                • _self
                • _parent
                • _top
      • <input>
        • 定义输入域
      • <textarea>
        • 定义文本域 (一个多行的输入控件)
      • <label>
        • 定义了 <input> 元素的标签，一般为输入标题
      • <fieldset>
        • 定义了一组相关的表单元素，并使用外框包含起来
      • <legend>
        • 定义了 <fieldset> 元素的标题
      • <select>
        • 定义了下拉选项列表
      • <optgroup>
        • 定义选项组
      • <option>
        • 定义下拉列表中的选项
      • <button>
        • 定义一个点击按钮
      • HTML5新标签
        • <datalist>
          • 指定一个预先定义的输入控件选项列表
        • <keygen>
          • 定义了表单的密钥对生成器字段
        • <output>
          • 定义一个计算结果
• 布局
  • 在线实例
    • 使用 <div> 元素的网页布局
    • 使用 <table> 元素的网页布局
  • 网站布局
  • 布局 - 使用<div> 元素
    • div 元素是用于分组 HTML 元素的块级元素。
    • 下面的例子使用五个 div 元素来创建多列布局：
      • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="container" 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> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © runoob.com</div> </div> </body> </html> 
  • 布局 - 使用表格
    • 使用 HTML <table> 标签是创建布局的一种简单的方式。
    • 大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
    • 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
    • 下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
      • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © runoob.com</td> </tr> </table> </body> </html> 
  • 布局 - 有用的提示
    • 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
    • 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
  • 布局标签
    • <div>
      • 定义文档区块，块级(block-level)
        • 属性
          • align
            • left
            • right
            • center
            • justify
    • <span>
      • 定义 span，用来组合文档中的行内元素。
• 区块
  • <div> 和<span>
    • HTML 可以通过 <div> 和 <span>将元素组合起来。
  • 区块元素
    • 大多数 HTML 元素被定义为
      • 块级元素
      • 内联元素
    • 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
      • 实例:
        • <h1>, <p>, <ul>, <table>
  • 内联元素
    • 内联元素在显示时通常不会以新行开始。
      • 实例:
        • <b>, <td>, <a>, <img>
  • <div> 元素
    • HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
    • <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
    • 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
    • <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
  • <span> 元素
    • HTML <span> 元素是内联元素，可用作文本的容器
    • <span> 元素也没有特定的含义。
    • 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性
  • 分组标签
    • 标签
      • <div>
        • 定义了文档的区域，块级 (block-level)
          • 属性
            • HTML5 不支持。HTML 4.01 已废弃。
              • align
                • 规定 <div> 元素中的内容的对齐方式。
                  • left
                  • right
                  • center
                  • justify
          • 标签定义及使用说明
            • <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
            • <div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
          • 提示和注释
            • 提示：
              • <div> 元素经常与 CSS 一起使用，用来布局网页。
            • 注释：
              • 默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。
        • HTML 4.01 与 HTML5之间的差异
          • HTML5 中不支持 align 属性。
          • 在 HTML 4.01 中，align 属性已废弃。
      • <span>
        • 用来组合文档中的行内元素， 内联元素(inline)
          • 标签定义及使用说明
            • <span> 用于对文档中的行内元素进行组合。
            • <span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
            • <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
          • 提示和注释
            • 提示：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
• 元素
  • 元素
    • HTML 文档由 HTML 元素定义。 HTML 元素 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href="default.htm"> 这是一个链接 </a> <br> 换行 *开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
    • 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href="default.htm"> 这是一个链接 </a> <br> 换行
  • 元素语法
    • HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性
    • HTML 元素以开始标签起始
    • HTML 元素以结束标签终止
    • 元素的内容是开始标签与结束标签之间的内容
    • 某些 HTML 元素具有空内容（empty content）
    • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
    • 大多数 HTML 元素可拥有属性
  • 嵌套的 HTML 元素
    • 大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
    • HTML 文档由相互嵌套的 HTML 元素构成。
  • HTML 文档实例
    • HTML 文档实例 <!DOCTYPE html> <html> <body> <p>这是第一个段落。</p> </body> </html> 以上实例包含了三个 HTML 元素。
  • HTML 实例解析
    • HTML 实例解析 <p> 元素: <p>这是第一个段落。</p> 这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>. 元素内容是: 这是第一个段落。 <body> 元素: <body> <p>这是第一个段落。</p> </body> <body> 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。 元素内容是另一个 HTML 元素（p 元素）。 <html> 元素： <html> <body> <p>这是第一个段落。</p> </body> </html> <html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>. 元素内容是另一个 HTML 元素（body 元素）。
    • <html> 元素
      • <html> 元素： <html> <body> <p>这是第一个段落。</p> </body> </html> <html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>. 元素内容是另一个 HTML 元素（body 元素）。
      • 定义了整个 HTML 文档。
    • <body> 元素
      • <body> 元素: <body> <p>这是第一个段落。</p> </body> <body> 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。 元素内容是另一个 HTML 元素（p 元素）。
      • 定义了 HTML 文档的主体。
    • <p> 元素
      • <p> 元素: <p>这是第一个段落。</p> 这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>. 元素内容是: 这是第一个段落。
      • 定义了 HTML 文档中的一个段落
  • 不要忘记结束标签
    • 不要忘记结束标签 即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML： <p>这是一个段落 <p>这是一个段落 以上实例在浏览器中也能正常显示，因为关闭标签是可选的。 但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
  • HTML 空元素
    • HTML 空元素 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
    • <br>与<br />
  • HTML 提示：使用小写标签
    • HTML 提示：使用小写标签 HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。 菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
    • HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
    • 菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
• 属性
  • HTML 属性
    • HTML 元素可以设置属性
    • 属性可以在元素中添加附加信息
    • 属性一般描述于开始标签
    • 属性总是以名称/值对的形式出现，比如：name="value"。
  • 属性实例
    • HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定： 实例 <a href="http://www.runoob.com">这是一个链接</a>
    • HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定
      • <a href="http://www.runoob.com">这是一个链接</a>
  • HTML 属性常用引用属性值
    • 属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。 Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
    • 属性值应该始终被包括在引号内。
      • 双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号 例如：name='John "ShotGun" Nelson'
  • HTML 提示：使用小写属性
    • 属性和属性值对大小写不敏感。 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。 而新版本的 (X)HTML 要求使用小写属性。
  • HTML 属性参考手册
    • 下面列出了适用于大多数 HTML 元素的属性： 属性 描述 class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描述了元素的额外信息 (作为工具条使用) 查看完整的HTML属性列表: HTML 标签参考手册。 New : HTML5 新属性。 属性 描述 accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名（classname） contenteditable New 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-* New 用于存储页面的自定义数据 dir 设置元素中内容的文本方向。 draggable New 指定某个元素是否可以拖动 dropzone New 指定是否将数据复制，移动，或链接，或删除 hidden New hidden 属性规定对元素进行隐藏。 id 规定元素的唯一 id lang 设置元素中内容的语言代码。 spellcheck New 检测元素是否拼写错误 style 规定元素的行内样式（inline style） tabindex 设置元素的 Tab 键控制次序。 title 规定元素的额外信息（可在工具提示中显示） translate New 指定是否一个元素的值在页面载入时是否需要翻译
    • 属性 描述 class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描述了元素的额外信息 (作为工具条使用)
• 标题（Heading）
  • HTML 标题
    • 在 HTML 文档中，标题很重要。 HTML 标题 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。 <h1> 定义最大的标题。 <h6> 定义最小的标题。 实例 <h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这是一个标题。</h3> 注释: 浏览器会自动地在标题的前后添加空行。
    • 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
    • <h1> 定义最大的标题。 <h6> 定义最小的标题。
      • 所以<h6>之后的将会失去标题格式渐渐变小的效果。
    • h标题只有1~6
  • 标题很重要
    • 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 搜索引擎使用标题为您的网页的结构和内容编制索引。 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
  • HTML 水平线
    • <hr> 标签在 HTML 页面中创建水平线。 hr 元素可用于分隔内容。 实例 <p>这是一个段落。</p> <hr> <p>这是一个段落。</p> <hr> <p>这是一个段落。</p>
  • HTML 注释
  • HTML 提示 - 如何查看源代码
  • HTML 标签参考手册
    • 标签 描述 <html> 定义 HTML 文档 <body> 定义文档的主体 <h1> - <h6> 定义 HTML 标题 //<h7>……也有，但是会失效。大小将会变得和文本一样大 <hr> 定义水平线 <!--...--> 定义注释 //注释时若输入"<!--"后面的全部内容都被注释掉，直到遇见“-->”注释结束。 //唯一的注释写法，他是可以跨越很多行的。
    • 标签 描述 <html> 定义 HTML 文档 <body> 定义文档的主体 <h1> - <h6> 定义 HTML 标题 <hr> 定义水平线 <!--...--> 定义注释
  • <head>
    • <title> - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 <base> - 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目标地址。 <meta> - 提供了HTML文档的meta标记 使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。 <head> 元素 <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
    • <head> 定义了文档的信息
    • <title> 定义了文档的标题
      • <title> 标签定义了不同文档的标题。 <title> 在 HTML/XHTML 文档中是必须的。 <title> 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时，显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 一个简单的 HTML 文档: 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html>
      • （在头部中，这个元素是必需的）
        • 标签定义及使用说明
          • <title> 标签定义文档的标题，在所有 HTML 文档中是必需的。
          • 定义浏览器工具栏中的标题
          • 提供页面被添加到收藏夹时的标题
          • 显示在搜索引擎结果中的页面标题
        • 注释：
          • 一个 HTML 文档中不能有一个以上的 <title> 元素。
        • 提示：
          • 如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。
    • <base> 定义了页面链接标签的默认链接地址
      • <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: <head> <base href="http://www.runoob.com/images/" target="_blank"> </head> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <base href="//www.runoob.com//images/" target="_blank"> </head> <body> <p><img src="logo.png" > - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"</p> <p><a href="//www.runoob.com/">runoob.com</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。</p> </body> </html>
      • 定义了所有链接的URL
        • href
          • 语法 <base href="URL">
          • URL
            • 规定页面中所有相对链接的基准 URL。
        • target
          • 规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。
            • _blank
              • 在新窗口中打开被链接文档。
            • _self
              • 默认。在相同的框架中打开被链接文档。
            • _parent
              • 在父框架集中打开被链接文档。
            • _top
              • 在整个窗口中打开被链接文档。
            • framename
              • 在指定的框架中打开被链接文档。
            • 语法
              • <base target="_blank|_self|_parent|_top|framename">
    • <link> 定义了一个文档和外部资源之间的关系
      • <link> 标签定义了文档与外部资源之间的关系。 <link> 标签通常用于链接到样式表: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
      • 属性
        • HTML5 不支持该属性
          • charset
            • 定义被链接文档的字符编码方式。
          • rev
            • 定义被链接文档与当前文档之间的关系。
              • reversed relationship
                • 值 描述
                • alternate 文档的替代版本（比如打印页、翻译或镜像）。
                • stylesheet 文档的外部样式表。
                • start 集合中的第一个文档。
                • next 集合中的下一个文档。
                • prev 集合中的上一个文档。
                • contents 文档的目录表格。
                • index 文档的索引。
                • glossary 在文档中使用的词汇的术语表（解释）。
                • copyright 包含版权信息的文档。
                • chapter 文档的章。
                • section 文档的节。
                • subsection 文档的小节。
                • appendix 文档的附录。
                • help 帮助文档。
                • bookmark 相关文档。
          • target
            • 定义在何处加载被链接文档。
              • _blank
              • _self
              • _top
              • _parent
              • frame_name
        • HTML5 新属性。
          • sizes
            • 定义了链接属性大小，只对属性 rel="icon" 起作用。
              • HeightxWidth
                • 为被链接的图标规定一个或多个尺寸。
                • 高度和宽度之间由一个 "x" 或 "X" 分隔。
                • 实例s:
                  • <link rel="icon" href="favicon.png" sizes="16x16" type="image/png"> （1 个尺寸）
                  • <link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png"> （2 个尺寸）
              • any
                • 规定图标是可伸缩的（比如 SVG 图像）。
                  • 实例：
                    • <link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml"> （任何尺寸）
              • 定义和用法
                • sizes 属性规定视觉媒体图标的尺寸。
                • 只有当被链接资源是图标时 (rel="icon")，才能使用该属性。
        • href
          • 定义被链接文档的位置。
            • URL
              • 绝对 URL - 指向另一个网站（比如 href="http://www.example.com/theme.css"）
              • 相对 URL - 指向网站内的一个文件（比如 href="/themes/theme.css"）
        • hreflang
          • 定义被链接文档中文本的语言。
            • language_code
        • media
          • 规定被链接文档将显示在什么设备上。
            • media_query
        • rel
          • 必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写。
            • alternate
              • 链接到该文档的替代版本（比如打印页、翻译或镜像）。
            • archives
            • author
              • 链接到该文档的作者。
            • bookmark
            • external
            • first
            • help
              • 链接到帮助文档。
            • icon
              • 导入表示该文档的图标。
            • last
            • license
              • 链接到该文档的版权信息。
            • next
              • 表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档。
            • nofollow
            • noreferrer
            • pingback
            • prefetch
              • 规定应该对目标资源进行缓存。
            • prev
              • 表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档。
            • search
              • 链接到针对文档的搜索工具。
            • sidebar
            • stylesheet
              • 要导入的样式表的 URL。
            • tag
            • up
        • type
          • 规定被链接文档的 MIME 类型。
            • MIME_type
              • 被链接文档的 MIME 类型。
              • 请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。
    • <meta> 定义了HTML文档中的元数据
      • <meta> 元素 meta标签描述了一些基本的元数据。 <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。 META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。 <meta> 一般放置于 <head> 区域 <meta> 标签- 使用实例 为搜索引擎定义关键词: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 为网页定义描述内容: <meta name="description" content="免费 Web & 编程 教程"> 定义网页作者: <meta name="author" content="Runoob"> 每30秒钟刷新当前页面: <meta http-equiv="refresh" content="30">
      • 标签定义及使用说明
        • 元数据（Metadata）是数据的数据信息。
        • 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
        • META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
        • 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
      • 提示和注释
        • 注意：
          • <meta> 标签通常位于 <head> 区域内。
          • 元数据通常以 名称/值 对出现。
          • 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
      • 属性
        • HTML5 新属性。
          • charset
            • 定义文档的字符编码。
              • character_set
                • 如需查看所有可用的字符编码，请访问 IANA 字符集。
        • content
          • 定义与 http-equiv 或 name 属性相关的元信息。
            • text
              • 定义和用法
                • content 属性给出了与 http-equiv 或 name 属性相关的值。
        • http-equiv
          • 把 content 属性关联到 HTTP 头部。
            • content-type
              • 规定文档的字符编码。
                • 实例：
                  • <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            • default-style
              • 规定要使用的预定义的样式表。
                • 实例：
                  • <meta http-equiv="default-style" content="the document's preferred stylesheet">
                • 注释：
                  • 上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。
            • refresh
              • 定义文档自动刷新的时间间隔。
                • 实例：
                  • <meta http-equiv="refresh" content="300">
                • 注释：值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制。在 W3C's Web 内容可访问性指南 中使用 "refresh" 会到导致失败。
        • name
          • 把 content 属性关联到一个名称。
            • application-name
              • 规定页面所代表的 Web 应用程序的名称。
            • author
              • 规定文档的作者的名字。
                • 实例：
                  • <meta name="author" content="Hege Refsnes">
            • description
              • 规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
                • 实例： <meta name="description" content="Free web tutorials">
            • generator
              • 规定用于生成文档的一个软件包（不用于手写页面）。
                • 实例： <meta name="generator" content="FrontPage 4.0">
            • keywords
              • 规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。
                • 提示：
                  • 总是规定关键词（对于搜索引擎进行页面分类是必要的）。
                • 实例： <meta name="keywords" content="HTML, meta tag, tag reference">
            • viewport
              • 属性
                • width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
                • initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
                • minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
                • maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
                • height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
                • user-scalable 是否允许用户进行缩放，值为 "no" 或 "yes", no 代表不允许，yes 代表允许
            • robots
        • HTML5不支持。
          • scheme
            • 定义用于翻译 content 属性值的格式。
              • format/URI
                • 定义和用法
                  • scheme 属性规定用于翻译 content 属性的值的方案（格式或 URI）。
    • <script> 定义了客户端的脚本文件
      • 用于加载脚本文件
        • 属性
          • HTML5 中的新属性
            • async
              • 规定异步执行脚本（仅适用于外部脚本）。
                • async
          • defer
            • 规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。
              • defer
                • 定义和用法
                  • async 属性是一个布尔属性。
                  • async 属性一旦脚本可用，则会异步执行。
                  • 注意：
                    • async 属性仅适用于外部脚本（只有在使用 src 属性时）。
                    • 有多种执行外部脚本的方法：
                      • 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
                      • 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
                      • 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
          • HTML5 不支持。
            • xml:space
              • 规定是否保留代码中的空白。
                • preserve
          • charset
            • 规定在脚本中使用的字符编码（仅适用于外部脚本）。
              • charset
          • src
            • 规定外部脚本的 URL。
              • URL
          • type
            • 规定脚本的 MIME 类型。
              • MIME-type
    • <noscript>
    • <style> 定义了HTML文档的样式文件
      • <style> 标签定义了HTML文档的样式文件引用地址. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档: <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
      • 提示和注释
        • 提示：
          • 如需链接外部样式表，请使用 标签。
          • 如需学习更多有关样式表的知识，请学习CSS教程
        • 注释：
          • 如果没有使用 "scoped" 属性，则每一个<style> 标签必须位于 head 头部区域。
      • 标签定义及使用说明
        • <style> 标签定义 HTML 文档的样式信息。
        • 在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。
        • 每个 HTML 文档能包含多个 <style> 标签。
      • 属性
        • media
          • 为样式表规定不同的媒体类型。
            • media_query
              • 定义和用法
                • media 属性规定目前资源是为何种媒介/设备优化的。该属性大多用在为不同媒介类型规定不同样式的 CSS 样式表。
                • 提示：
                  • 该属性可以接受多个值。
              • 语法
                • <style media="value">
              • 可能的运算符
                • and
                  • 规定 AND 操作符。
                • not
                  • 规定 NOT 操作符。
                • ,
                  • 规定 OR 操作符。
              • 设备
                • all
                  • 默认。适应所有设备。
                • aural
                  • 语音合成器。
                • braille
                  • 盲人用点字法反馈设备。
                • handheld
                  • 手持设备（小屏幕、有限的带宽）。
                • projection
                  • 放映机。
                • print
                  • 打印预览模式 / 打印页。
                • screen
                  • 计算机屏幕（默认值）。
                • tty
                  • 电传打字机以及使用等宽字符网格的类似媒介。
                • tv
                  • 电视类型设备（低分辨率、有限的屏幕翻滚能力）。
              • 值
                • width
                  • 规定目标显示区域的宽度。
                  • 可使用 "min-" 和 "max-" 前缀。
                    • 例子：media="screen and (min-width:500px)"
                • height
                  • 规定目标显示区域的高度。
                  • 可使用 "min-" 和 "max-" 前缀。
                    • 例子：media="screen and (max-height:700px)"
                • device-width
                  • 规定目标显示器/纸张的宽度。
                  • 可使用 "min-" 和 "max-" 前缀。
                    • 例子：media="screen and (device-width:500px)"
                • device-height
                  • 规定目标显示器/纸张的高度。
                  • 可使用 "min-" 和 "max-" 前缀。
                    • 例子：media="screen and (device-height:500px)"
                • orientation
                  • 规定目标显示器/纸张的方向。
                  • 可能的值："portrait" or "landscape"
                    • 例子：media="all and (orientation: landscape)"
                • aspect-ratio
                  • 规定目标显示区域的宽度/高度比
                    • 例子：media="screen and (aspect-ratio:16/9)"
                  • 可使用 "min-" 和 "max-" 前缀。
                • device-aspect-ratio
                  • 规定目标显示器/纸张的 device-width/device-height 比率
                    • 例子：media="screen and (aspect-ratio:16/9)"
                  • 可使用 "min-" 和 "max-" 前缀。
                • color
                  • 规定目标显示器的 bits/color
                    • 例子：media="screen and (color:3)"
                  • 可使用 "min-" 和 "max-" 前缀。
                • color-index
                  • 规定目标显示器可以处理的颜色数。
                    • 例子：media="screen and (min-color-index:256)"
                  • 可使用 "min-" 和 "max-" 前缀。
                • monochrome
                  • 规定单色帧缓冲中的 bits/pixel。
                    • 例子：media="screen and (monochrome:2)"
                  • 可使用 "min-" 和 "max-" 前缀。
                • resolution
                  • 规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。
                    • 例子：media="print and (resolution:300dpi)"
                  • 可使用 "min-" 和 "max-" 前缀。
                • scan
                  • 规定 tv 显示器的扫描方式。
                  • 可能的值："progressive" 和 "interlace"。
                    • 例子：media="tv and (scan:interlace)"
                • grid
                  • 规定输出设备是否是网格或位图。
                  • 可能的值："1" 为网格，否则为 "0"。
                    • 例子：media="handheld and (grid:1)"
        • scoped
          • 如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
            • scoped
        • type
          • 规定样式表的 MIME 类型。
            • text/css
              • 样式表的 MIME 类型。目前，唯一可能的值是 "text/css"。
              • 定义和用法
                • 必需的 type 属性规定样式表的 MIME 类型。
                • type 属性指示 <style> 与 </style> 标签之间的内容。
                • 值 "text/css" 指示内容是标准的 CSS。
• 段落
  • 段落是通过 <p> 标签定义的。
    • 段落是通过 <p> 标签定义的。 实例 <p>这是一个段落 </p> <p>这是另一个段落</p> 尝试一下 » 注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
  • 不要忘记结束标签
    • 即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来： 实例 <p>这是一个段落 <p>这是另一个段落 尝试一下 » 上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。 注释: 在未来的 HTML 版本中，不允许省略结束标签。
  • 折行
    • 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签： 实例 <p>这个<br>段落<br>演示了分行的效果</p> 尝试一下 » <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
    • <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
  • 输出- 使用提醒
    • 我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。 尝试一下 （这个例子演示了一些 HTML 格式化方面的问题）
• 文本格式化
  • 格式化标签
    • HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体 这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。 然而，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
  • 库
    • 文本格式化标签
      • <b> 定义粗体文本
        • bold
      • <em> 定义着重文字
        • emphasize
      • <i> 定义斜体字
        • italic
      • <small> 定义小号字
      • <strong> 定义加重语气
      • <sub> 定义下标字
        • subscript
      • <sup> 定义上标字
        • supscript
      • <ins> 定义插入字
        • cite URL 规定一个文档的 URL，该文档解释了文本被插入的原因。
          • URL 规定文档的地址，该文档解释了文本被插入或修改的原因。 可能的值： 绝对 URL - 指向另一个网站（比如 cite="http://www.example.com"） 相对 URL - 指向网站内的一个页面（比如 cite="example.html"） <p>这是一个文本。 <ins cite="why_inserted.htm">这是一段插入文本。</ins></p> <ins cite="URL"> <del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。 <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> My favorite color is blue red!
          • 绝对 URL - 指向另一个网站（比如 cite="http://www.example.com"）
          • 相对 URL - 指向网站内的一个页面（比如 cite="example.html"）
        • datetime YYYY-MM-DDThh:mm:ssTZD 规定文本被插入的日期和时间。
          • YYYY-MM-DDThh:mm:ssTZD 规定文本被插入或修改的日期和时间。 组件解释： YYYY - 年（例如 2009） MM - 月（例如 01，表示一月份） DD - 月中的日（例如 08） T - 必需的分隔符 hh - 小时（例如 22，表示下午 10.00） mm - 分钟（例如 55） ss - 秒（例如 03） TZD - 时区标志符（Z 表示祖鲁，同时也是格林威治时间） <p>这是一个文本。 <ins datetime="2012-09-15T22:55:03Z">这是一段插入文本。</ins></p>
      • <del> 定义删除字
        • cite URL 规定一个解释了文本被删除的原因的文档的 URL。
          • 一个删除的文本,文本的URL解释了删除的原因： <p><del cite="del_demo_cite.htm">这是一个被删除了的文本</del></p> 这是一个被删除了的文本 URL 引用的来源的 URL。 可能的值： 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg"） 相对 URL - 指向网站内的文件（比如 href="song.ogg"） 锚 URL - 指向页面内的一个锚（比如 href="#page"） 语法 <del cite="URL">
          • 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg"）
            • <p>绝对路径 URL: <a href="//www.runoob.com/">菜鸟教程</a></p>
          • 相对 URL - 指向网站内的文件（比如 href="song.ogg"）
            • <p>相对路径 URL: <a href="tag_a.php">a 标签</a></p>
          • 锚 URL - 指向页面内的一个锚（比如 href="#page"）
            • <a id="top">这是标题，底部链接可以链接到这</a> <a href="#top">链接到标题</a>
        • datetime YYYY-MM-DDThh:mm:ssTZD 规定文本被删除的日期和时间。
          • 语法 <del datetime="YYYY-MM-DDThh:mm:ssTZD"> YYYY-MM-DDThh:mm:ssTZD 文本被删除的日期和时间。 组件解释： YYYY - 年（例如 2009） MM - 月（例如 01 for January） DD - 月中的日 （例如 08） T - 必需的分隔符 hh - 小时 （例如 22 for 10.00pm） mm - 分钟 （例如 55） ss - 秒 （例如 03） TZD - 时区标志符（Z 表示祖鲁，同时也是格林威治时间）
    • "计算机输出" 标签
      • 标签 描述 <code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变量 <pre> 定义预格式文本
    • 引文, 引用, 及标签定义
      • <abbr> 定义缩写 abbreviation <address> 定义地址 address <bdo> 定义文字方向 bdo 指的是 bidi 覆盖（Bi-Directional Override）。 <blockquote> 定义长的引用 <q> 定义短的引用语 quote <cite> 定义引用、引证 <dfn> 定义一个定义项目。 define
• 链接
  • 举例
    • <a href="#C4">查看章节 4</a> <h2><a id="C4">章节 4</a></h2>
    • 图片链接
      • 如何使用图片链接。
        • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>创建图片链接: <a href="//www.runoob.com/html/html-tutorial.html"> <img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> <p>无边框的图片链接: <a href="//www.runoob.com/html/html-tutorial.html"> <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> </body> </html>
    • 在当前页面链接到指定位置
      • 如何使用书签
        • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p> <a href="#C4">查看章节 4</a> </p> <h2>章节 1</h2> <p>这边显示该章节的内容……</p> <h2>章节 2</h2> <p>这边显示该章节的内容……</p> <h2>章节 3</h2> <p>这边显示该章节的内容……</p> <h2><a id="C4">章节 4</a></h2> <p>这边显示该章节的内容……</p> <h2>章节 5</h2> <p>这边显示该章节的内容……</p> <h2>章节 6</h2> <p>这边显示该章节的内容……</p> <h2>章节 7</h2> <p>这边显示该章节的内容……</p> <h2>章节 8</h2> <p>这边显示该章节的内容……</p> <h2>章节 9</h2> <p>这边显示该章节的内容……</p> <h2>章节 10</h2> <p>这边显示该章节的内容……</p> <h2>章节 11</h2> <p>这边显示该章节的内容……</p> <h2>章节 12</h2> <p>这边显示该章节的内容……</p> <h2>章节 13</h2> <p>这边显示该章节的内容……</p> <h2>章节 14</h2> <p>这边显示该章节的内容……</p> <h2>章节 15</h2> <p>这边显示该章节的内容……</p> <h2>章节 16</h2> <p>这边显示该章节的内容……</p> <h2>章节 17</h2> <p>这边显示该章节的内容……</p> </body> </html>
    • 跳出框架
      • 本例演示如何跳出框架，假如你的页面被固定在框架之内。
        • <p>跳出框架?</p> <a href="//www.runoob.com/" target="_top">点击这里!</a>
    • 创建电子邮件链接
      • 本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
        • <p> 这是一个电子邮件链接： <a href="mailto:[e-mail]?Subject=Hello%20again" target="_top"> 发送邮件</a> </p> <p> <b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。 </p>
    • 创建电子邮件链接 2
      • 本例演示更加复杂的邮件链接。
  • HTML 超链接（链接）
    • HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签<a> 中使用了href属性来描述链接的地址。 默认情况下，链接将以以下形式出现在浏览器中： 一个未访问过的链接显示为蓝色字体并带有下划线。 访问过的链接显示为紫色并带有下划线。 点击链接时，链接显示为红色并带有下划线。 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
  • 链接语法
    • 链接的 HTML 代码很简单。它类似这样： <a href="url">链接文本</a> href 属性描述了链接的目标。.
    • <a href="url">链接文本</a>
  • 实例
    • <a href="https://www.runoob.com/">访问菜鸟教程</a> 上面这行代码显示为：访问菜鸟教程 点击这个超链接会把用户带到菜鸟教程的首页。 提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
  • 链接 - target 属性
    • 使用 target 属性，你可以定义被链接的文档在何处显示。 下面的这行会在新窗口打开文档： 实例 <a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
    • 使用 target 属性，你可以定义被链接的文档在何处显示。
  • 链接- 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/"。
• 样式- CSS
  • HTML使用样式
    • 本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>
  • 本例演示如何使用样式属性做一个没有下划线的链接。
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <a href="//www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a> </body> </html>
    • 如何使用 style 属性制作一个没有下划线的链接。
  • 链接到一个外部样式表
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
    • 本例演示如何 标签链接到一个外部样式表。
• 图像
  • 实例
    • 插入图像
      • <body> <p> 一个图像: <img src="smiley.gif" alt="Smiley face" width="32" height="32"></p> <p> 一个动图: <img src="hackanm.gif" alt="Computer man" width="48" height="48"></p> <p> 注意插入动图的语法和静态图的语法是一样的。 </p> </body>
      • 本例演示如何在网页中显示图像。
    • 从不同的位置插入图片
      • <body> <p>一个来自文件夹中的图像:</p> <img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p> <img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"> </body>
      • 本例演示如何将其他文件夹或服务器的图片显示到网页中。
    • 排列图片
      • <body> <h4>默认对齐的图像 (align="bottom"):</h4> <p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p> <h4>图片使用 align="middle":</h4> <p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p> <h4>图片使用 align="top":</h4> <p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p> <p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p> </body>
      • 本例演示如何在文字中排列图像。
        • 在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替
    • 浮动图像
      • <body> <p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。 </p> <p> <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。 </p> <p><b>注意:</b> 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p> </body>
      • 本例演示如何使图片浮动至段落的左边或右边。
        • 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。
    • 设置图像链接
      • <body> <p>创建图片链接: <a href="//www.runoob.com/html/html-tutorial.html"> <img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> <p>无边框的图片链接: <a href="//www.runoob.com/html/html-tutorial.html"> <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> </body>
      • 本例演示如何将图像作为一个链接使用。
    • 创建图像映射
      • <body> <p>点击太阳或其他行星，注意变化：</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body>
      • 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
  • 图像- 图像标签（ <img>）和源属性（Src）
    • 在 HTML 中，图像由<img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。 要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。 定义图像的语法是： <img src="url" alt="some_text"> URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
    • 定义图像的语法是：
    • <img src="url" alt="some_text">
  • 图像- Alt属性
    • alt 属性用来为图像定义一串预备的可替换的文本。 替换文本属性的值是用户定义的。 <img src="boat.gif" alt="Big Boat"> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
  • 图像- 设置图像的高度与宽度
    • height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。 属性值默认单位为像素: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> 提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
  • 基本的注意事项 - 有用的提示
    • 注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。 注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
  • HTML 图像标签
    • <img> 标签
      • 注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。 提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
      • <img> 标签定义 HTML 页面中的图像。
      • <img> 标签有两个必需的属性：src 和 alt。
      • 举例
        • 从不同的位置插入图片
          • 本例演示如何将其他文件夹或服务器的图片显示到网页中。
        • 制作图像链接
          • 本例演示如何将图像作为一个链接使用。
        • 创建图像地图
          • 本例演示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
      • 更多
        • Image 对象 Image 对象代表嵌入的图像。 <img> 标签每出现一次，一个 Image 对象就会被创建。 Image 对象属性 W3C: W3C 标准。 属性 描述 W3C align 设置或返回与内联内容的对齐方式。 Yes alt 设置或返回无法显示图像时的替代文本。 Yes border 设置或返回图像周围的边框。 Yes complete 返回浏览器是否已完成对图像的加载。 No height 设置或返回图像的高度。 Yes hspace 设置或返回图像左侧和右侧的空白。 Yes longDesc 设置或返回指向包含图像描述的文档的 URL。 Yes lowsrc 设置或返回指向图像的低分辨率版本的 URL。 No name 设置或返回图像的名称。 Yes src 设置或返回图像的 URL。 Yes useMap 设置或返回客户端图像映射的 usemap 属性的值。 Yes vspace 设置或返回图像的顶部和底部的空白。 Yes width 设置或返回图像的宽度。 Yes Image 对象事件 事件 描述 W3C onabort 当用户放弃图像的装载时调用的事件句柄。 Yes onerror 在装载图像的过程中发生错误时调用的事件句柄。 Yes onload 当图像装载完毕时调用的事件句柄。 Yes
        • onabort
          • 当用户放弃图像的装载时调用的事件句柄。
        • onerror
          • 在装载图像的过程中发生错误时调用的事件句柄。
        • onload
          • 当图像装载完毕时调用的事件句柄。
      • HTML5 中的新属性
        • 属性
          • align
            • HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
            • left 把图像对齐到左边。
            • right 把图像对齐到右边。
            • middle 把图像与中央对齐。
            • top 把图像与顶部对齐。
            • bottom 把图像与底部对齐。
            • 规定如何根据周围的文本来排列图像。
              • HTML5 不支持。HTML 4.01 已废弃。
            • 语法
              • <img align="left|right|middle|top|bottom">
          • loading
            • 指定浏览器是应立即加载图像还是延迟加载图像。 定义和用法 loading 属性指定浏览器是应立即加载图像还是延迟加载图像。 设置 loading="lazy" 只有鼠标滚动到该图片所在位置才会显示。
            • eager：立即加载
              • 默认，图像立即加载。
            • lazy：延迟加载
              • 图像延迟加载，只有鼠标滚动到该图片所在位置才会显示。
            • 指定浏览器是应立即加载图像还是延迟加载图像。
            • 语法
              • <img src="URL" loading="eager|lazy">
          • alt
            • 规定图像的替代文本。 定义和用法 alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。 假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。 注意：当用户把鼠标移动到 img 元素上时，Internet Explorer （9 之前的版本）把 alt 属性的值显示为工具提示。根据 HTML 规范，这种行为并不正确。 提示：如果需要为图像创建工具提示，请使用 title 属性！
            • text
              • 规定图像的替代文本。
                • alt 文本的使用原则：
                  • 如果图像包含信息，使用 alt 描述图像
                  • 如果图像在 <a> 元素中，使用 alt 描述目标链接
                  • 如果图像仅供装饰，请使用 alt=""
            • 语法
              • <img alt="text">
          • border
            • 定义和用法 HTML5 不支持 <img> border 属性。请使用 CSS 代替。 在 HTML 4.01 中，<img> 的 border 属性 已废弃。 border 属性规定图像周围的边框的宽度。 注意：默认地，图像是没有边框的（除非图像在 <a> 元素内部）。 兼容性注释 在 HTML 4.01 中，<img> 的 border 属性已废弃。请使用 CSS 代替。 CSS 语法：<img style="border:5px solid black"> CSS 实例：图像边框 在我们的 CSS 教程中，您可以找到更多有关 border 属性的细节。
            • pixels
              • 规定图像周围的边框。
                • HTML5 不支持。HTML 4.01 已废弃。
              • 边框的宽度，以像素计。
          • crossorigin
            • new
            • anonymous
            • use-credentials
            • 设置图像的跨域属性
          • height
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 height 属性。 height 属性规定图像的高度，以像素计。 提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。 提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。 HTML 4.01 与 HTML5之间的差异 在 HTML 4.01 中，高度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5 中，高度值必须以像素为单位。
            • pixels
              • 规定图像的高度。
                • 以像素为单位的高度（比如 height="100"）。
            • 语法
              • <img height="pixels">
          • hspace
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 hspace 属性。 定义和用法 HTML5 不支持 <img> hspace 属性。请使用 CSS 代替。 在 HTML 4.01 中，<img> 的 hspace 属性 已废弃。 hspace 属性规定图像左侧和右侧的空白。 兼容性注释 在 HTML 4.01 中，<img> 的 hspace 属性已废弃。请使用 CSS 代替。 CSS 语法：<img style="margin: 0px 20px"> CSS 实例：带有边距的图像 在我们的 CSS 教程中，您可以找到更多有关 margin 属性的细节。
            • pixels
              • 规定图像左侧和右侧的空白。
                • HTML5 不支持。HTML 4.01 已废弃。
                • 以像素计。
            • 语法
              • <img hspace="pixels">
          • ismap
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 ismap 属性。 定义和用法 ismap 属性是一个布尔属性。 ismap 属性将图像定义为服务器端图像映射（图像映射指的是带有可点击区域的图像）。 当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。 注意：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许使用 ismap 属性。 HTML 4.01 与 HTML5之间的差异 无。 HTML 与 XHTML 之间的差异 在 XHTML 中，禁止属性最小化，ismap 属性必须定义为 <img ismap="ismap" />。
            • ismap
              • 将图像规定为服务器端图像映射。
              • 语法
                • <img ismap>
          • longdesc
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 几乎所有的主流浏览器都不支持 longdesc 属性。 定义和用法 HTML5 不支持 <img> longdesc 属性。 longdesc 属性规定包含图像的长描述的页面的 URL。 提示：由于浏览器对 longdesc 属性的支持性非常差，没有必要使用该属性。如需为某个图像提供长描述（如果有必要的话），只要简单地创建一个指向描述页面的链接即可（该链接对任何人都是可见的）。
            • URL
              • 指向包含长的图像描述文档的 URL。
                • HTML5 不支持。HTML 4.01 已废弃。
                • 可能的值：
                  • 绝对 URL - 指向另一个网站（比如 longdesc="http://www.example.com/description.txt"）
                  • 相对 URL - 指向网站内的一个文件（比如 longdesc="description.txt"）
            • 语法
              • <img longdesc="URL">
          • src
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 src 属性。 定义和用法 src 标签的 src 属性是必需的。它规定图像的 URL。 注意：当一个网页加载时，浏览器从 Web 服务器上获取图像，并把它插入到页面中。因此，确保图像与相关的网页在同一点，否则访问者可能会得到一个损坏的链接图标。如果浏览器找不到图像时，会显示损坏的链接图标。 HTML 4.01 与 HTML5之间的差异 无。
            • URL
              • 规定显示图像的 URL。
                • 可能的值：
                  • 绝对 URL - 指向另一个网站（比如 src="http://www.example.com/image.gif"）
                  • 相对 URL - 指向网站内的一个文件（比如 src="image.gif"）
            • 语法
              • <img src="URL">
          • usemap
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 usemap 属性。 定义和用法 usemap 属性将图像定义为客户端图像映射（图像映射指的是带有可点击区域的图像）。 usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。 注意：只有当 <img> 元素不属于 <a> 或 <button> 元素的后代时，才允许使用 usemap 属性。 HTML 4.01 与 HTML5之间的差异 无。
            • #mapname
              • 将图像定义为客户器端图像映射。
              • 一个 hash 字符 ("#") 加上要使用的 <map> 元素的 name 或 id。
                • <map> 标签
                  • 浏览器支持 Internet Explorer Firefox Opera Google Chrome Safari 目前大多数浏览器支持 <map>标签。 标签定义及使用说明 <map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。 <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 HTML 4.01 与 HTML5之间的差异 注意: 在 HTML5 中, 如果 id 属性在<map> 标签中指定, 则你必须同样指定 name 属性。 HTML 与 XHTML 之间的差异 在 XHTML 中，name 属性已经废弃，使用 id 属性替换它。
                  • name mapname 必需。为 image-map 规定的名称。
                    • name
                      • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 name 属性。 定义和用法 name 属性是必需的，规定图像映射的名称。 name 属性与 <img> 标签的 usemap 属性相关联，以创建图像与映射之间的关系。 HTML 4.01 与 HTML5之间的差异 无。
                      • 语法
                        • <map name="mapname">
                      • mapname 图像映射的名称。
            • 语法
              • <img usemap="#mapname">
          • vspace
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 vspace 属性。 定义和用法 HTML5 不支持 <img> vspace 属性。请使用 CSS 代替。 在 HTML 4.01 中，<img> 的 vspace 属性 已废弃。 vspace 属性规定图像顶部和底部的空白。 兼容性注释 在 HTML 4.01 中，<img> 的 vspace 属性已废弃。请使用 CSS 代替。 CSS 语法：<img style="margin: 50px 0px"> CSS 实例：带有边距的图像 在我们的 CSS 教程中，您可以找到更多有关 margin 属性的细节。
            • pixels
              • 规定图像顶部和底部的空白。
                • HTML5 不支持。HTML 4.01 已废弃。
            • 语法
              • <img vspace="pixels">
          • width
            • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 width 属性。 width 属性规定图像的宽度，以像素计。 提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。 提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。 HTML 4.01 与 HTML5之间的差异 在 HTML 4.01 中，宽度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5 中，宽度值必须以像素为单位。
            • pixels
              • 规定图像的宽度。
            • 语法
              • <img width="pixels">
    • <area> 标签
      • 浏览器支持 Internet Explorer Firefox Opera Google Chrome Safari 所有主流浏览器都支持 <area> 标签。 标签定义及使用说明 <area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。 <area> 元素始终嵌套在 <map> 标签内部。 注释： <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。 HTML 4.01 与 HTML5之间的差异 HTML5 提供了一些新属性，同时不再支持 HTML 4.01 中的某些属性。 HTML 与 XHTML 之间的差异 在 HTML 中，<area> 标签没有结束标签。 在 XHTML 中，<area> 标签必须正确地关闭。
      • alt
      • coords
        • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 coords 属性。 定义和用法 coords 属性规定区域的 x 和 y 坐标。 coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。 提示： 图像左上角的坐标是 "0,0"。 HTML 4.01 与 HTML5之间的差异 NONE.
        • 语法
          • <area coords="value">
        • 属性值
          • 1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" href=url> 2、圆形：(圆心坐标为(X1,y1)，半径为r) <area shape="circle" coords="x1,y1,r" href=url> 3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......) <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
          • x1,y1,x2,y2
            • 如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
          • x,y,radius
            • 如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
          • x1,y1,x2,y2,..,xn,yn
            • 如果 shape 属性设置为 "poly"，则该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。
      • href
        • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 href 属性。 定义和用法 href 属性规定区域中连接的目标。 如果没有使用href 属性，<area> 标签就不是一个链接。 HTML 4.01 与 HTML5之间的差异 在 HTML5 中, <area> 标签已经不再使用 href 属性， 使用 placeholder来指定链接。
        • 语法
          • <area href="URL">
        • 属性值
          • URL
            • 链接的 URL。可能的值
              • 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/sun.htm"）
              • 相对 URL - 指向站点内的某个文件（href="sun.htm"）
              • 锚 URL - 指向页面中的锚（href="#sun"）
      • hreflang
        • New
        • language_code
          • 规定目标 URL 的语言。
            • 双字符的语言代码，指定被链接文档的语言。
            • 如需查看所有可用的语言代码，请访问我们的 语言代码集参考手册。
            • 语言代码集参考手册。
        • 语法
          • <area hreflang="language_code">
      • media
        • New
        • media query
          • 规定目标 URL 是为何种媒介/设备优化的。默认：all。
        • 可能的操作符
          • and 指定 AND 操作符
          • not 指定 NOT 操作符
          • , 指定 OR 操作符
        • 设备
          • all 默认。适应所有设备。
          • aural 语音合成器
          • braille 盲文反馈设备
          • handheld 手持设备（小屏幕，有限的带宽）
          • projection 投影仪
          • print 打印预览模式/打印页数
          • screen 电脑屏幕
          • tty 电传打字机和类似使用固定间距字符网格的介质
          • tv 电视类型设备（分辨率低，滚动能力有限）
        • 值
          • width
            • 指定的显示区域的宽度。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (min-width:500px)"
          • height
            • 指定的显示区域的高度。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (max-height:700px)"
          • device-width
            • 指定目标显示/打印纸的宽度
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (device-width:500px)"
          • device-height
            • 指定目标显示/打印纸的高度
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (device-height:500px)"
          • 方向
            • 指定目标显示/纸的方向。
              • 可能值: "portrait" 或 "landscape"
              • 实例: media="all and (orientation: landscape)"
          • aspect-ratio
            • 指定的目标的显示区域的宽度/高度比例。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (aspect-ratio:16/9)"
          • device-aspect-ratio
            • 指定的目标的显示区域的设备宽度/设备高度比例。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (aspect-ratio:16/9)"
          • color
            • 指定目标显示每个像素颜色的位数。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (color:3)"
          • color-index
            • 指定目标显示器可以处理的颜色数。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (min-color-index:256)"
          • monochrome
            • 指定在一个单色的帧缓冲器的像素位数。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="screen and (monochrome:2)"
          • resolution
            • 指定目标显示/纸的像素密度（DPI或DPCM）。
              • 通常使用 "min-" 和 "max-" 前缀。
              • 实例: media="print and (resolution:300dpi)"
          • scan
            • 指定一个电视显示屏的扫描方法。
              • 可能值是 "progressive" 和 "interlace".
              • 实例: media="tv and (scan:interlace)"
          • grid
            • 指定输出设备是电网或位图
              • grid的值为 "1", 其他的为 "0"
              • 实例: media="handheld and (grid:1)"
      • nohref
        • nohref 属性是一个 boolean（布尔） 属性。 该属性指定一个区域没有关联链接。 提示： nohref 属性指明 <area> 标签没有关联链接。更简单的方式是不使用 href 属性。
        • value
          • HTML5 不支持。 规定没有相关链接的区域
      • rel
        • New
        • 属性值
          • alternate
            • 文档的替代版本（比如打印页、翻译或镜像）。
          • author
            • 链接到文档的作者。
          • bookmark
            • 用于书签的永久网址
          • help
            • 链接到帮助文档
          • license
            • 链接到文档的版权信息。
          • next
            • 选项中的下一个文档
          • nofollow
            • nofollow 是一个HTML标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接。
          • noreferrer
            • 如果用户点击链接指定浏览不要发送 HTTP referer 头部信息。
          • prefetch
            • 指定的目标文件应该被缓存
          • prev
            • 选项中的前一个文档
          • search
            • 文档链接到搜索工具
          • tag
            • 当前文档的标签(关键词)
          • 规定当前文档与目标 URL 之间的关系。
        • 语法
          • <area rel="value">
      • shape
        • default
          • 规定全部区域。
        • rect
          • 定义矩形区域。
        • circle
          • 定义圆形。
        • poly
          • 定义多边形区域。
        • 规定区域的形状。
          • shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。
        • 语法
          • <area shape="default|rect|circle|poly">
      • target
        • _blank
          • 在新窗口中打开被链接文档。
        • _parent
          • 在父框架集中打开被链接文档。
        • _self
          • 默认。在相同的框架中打开被链接文档。
        • _top
          • 在整个窗口中打开被链接文档。
        • framename
          • 在指定的框架中打开被链接文档。
        • 规定在何处打开目标 URL。
        • 语法
          • <area target="_blank|_self|_parent|_top|framename">
      • type
        • 定义和用法 type 属性指定了目标 URL 的 MIME 类型。 该属性仅在 href 属性设置后才使用type属性。 注意： This attribute is purely advisory.
        • New
        • MIME_type
          • 规定目标 URL 的 MIME 类型。
          • 注：MIME = Multipurpose Internet Mail Extensions。
        • 语法
          • <area type="MIME_type">
    • <map> 标签
      • 浏览器支持 Internet Explorer Firefox Opera Google Chrome Safari 目前大多数浏览器支持 <map>标签。 标签定义及使用说明 <map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。 <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 HTML 4.01 与 HTML5之间的差异 注意: 在 HTML5 中, 如果 id 属性在<map> 标签中指定, 则你必须同样指定 name 属性。 HTML 与 XHTML 之间的差异 在 XHTML 中，name 属性已经废弃，使用 id 属性替换它。
      • name mapname 必需。为 image-map 规定的名称。
        • name
          • 浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari 所有主流浏览器都支持 name 属性。 定义和用法 name 属性是必需的，规定图像映射的名称。 name 属性与 <img> 标签的 usemap 属性相关联，以创建图像与映射之间的关系。 HTML 4.01 与 HTML5之间的差异 无。
          • 语法
            • <map name="mapname">
          • mapname 图像映射的名称。
• 简单囊括
  • 标签语义对照表 标签名 英文全称 中文解释 div division 分割（块元素） span span 区域（行内元素） p paragraph 段落 ol ordered list 有序列表 ul unordered list 无序列表 li list item 列表项 dl definition list 定义列表 dt definition term 定义术语 dd definition description 定义描述 h1~h6 header1 ~header6 标题1~标题6 hr horizontal rule 水平线 a anchor 锚点，超链接 strong strong 强调（粗体） em emphasized 强调（斜体） sup superscripted 上标 sub subscripted 下标 br break 换行 fieldset fieldset 域集 legend legend 图例 caption caption （表格、图像等）标题 thead table head 表头 tbody table body 表身 tfoot table foot 表脚 th table header 表头单元格 td td 表身单元格
• 表格
  • 表格和边框属性
    • 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
      • 使用边框属性来显示一个带有边框的表格： 实例 <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
  • 表格表头
    • 表格的表头使用 <th> 标签进行定义。
      • 大多数浏览器会把表头显示为粗体居中的文本：
  • 更多实例
    • 没有边框的表格
      • 本例演示一个没有边框的表格
        • <table border="1">
    • 表格中的表头(Heading)
      • 本例演示如何显示表格表头。
    • 带有标题的表格
      • 本例演示一个带标题 (caption) 的表格
    • 跨行或跨列的表格单元格
      • 本例演示如何定义跨行或跨列的表格单元格。
    • 表格内的标签
      • 本例演示如何在不同的元素内显示元素。
    • 单元格边距(Cell padding)
      • 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
    • 单元格间距(Cell spacing)
      • 本例演示如何使用 Cell spacing 增加单元格之间的距离。
    • 漂亮的表格
  • 表格标签
    • <table>
      • 定义表格
        • 属性
          • HTML5 不支持。HTML 4.01 已废弃
            • align
              • 规定表格相对周围元素的对齐方式。
                • left
                  • 左对齐表格。
                • right
                  • 右对齐表格。
                • center
                  • 居中对齐表格。
            • bgcolor
              • 规定表格的背景颜色。
                • rgb(x,x,x)
                  • 规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。
                • #xxxxxx
                  • 规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。
                • colorname
                  • 规定颜色值为颜色名称的背景颜色（比如 "red"）。
              • background-color
          • HTML5 不支持。
            • cellpadding
              • 规定单元边沿与其内容之间的空白。
                • pixels
            • cellspacing
              • 规定单元格之间的空白。
                • pixels
            • frame
              • 规定外侧边框的哪个部分是可见的。
                • 属性值
                  • void
                    • 不显示外侧边框。
                  • above
                    • 显示上部的外侧边框。
                  • below
                    • 显示下部的外侧边框。
                  • lhs
                    • left hand side
                      • 显示左边的外侧边框。
                  • rhs
                    • rinht hand side
                      • 显示右边的外侧边框。
                  • hsides
                    • 显示上部和下部的外侧边框。
                  • vsides
                    • 显示左边和右边的外侧边框。
                  • box
                    • 在所有四个边上显示外侧边框。
                  • border
                    • 在所有四个边上显示外侧边框。
            • rules
              • 规定内侧边框的哪个部分是可见的。
                • 属性值
                  • none
                    • 没有线条。
                  • groups
                    • 位于行组和列组之间的线条。
                  • rows
                    • 位于行之间的线条。
                  • cols
                    • columns
                      • 位于列之间的线条。
                  • all
                    • 位于行和列之间的线条
            • summary
              • 规定表格的摘要。
                • text
            • width
              • 规定表格的宽度。
                • pixels
                  • 设置以像素计的宽度（例子：width="50"）。
                • %
                  • 设置以包含元素的百分比计的宽度（例子：width="50%"）。
          • border
            • 规定表格单元是否拥有边框。
              • 1
                • 在表格单元周围添加边框（表格不用于布局目的）。
              • ""
                • 0
                  • 表格单元周围没有边框（表格可用于布局目的）。
        • 实例
          • 表格中的标题
            • 本例演示如何显示表格标题。
          • 空单元格
            • 本例演示如何使用 "&nbsp;" 处理没有内容的单元格。
          • 带有标题的表格
            • 本例演示一个带标题(caption)的表格。
          • 表格内的标签
            • 本例演示如何在其他的元素内显示元素。
          • 跨行或跨列的表格单元格
            • 本例演示如何定义跨行或跨列的表格单元格。
              • 单元格跨两列
                • <th colspan="2">Telephone</th>
              • 单元格跨两行
                • <th rowspan="2">Telephone:</th>
    • <th>
      • 定义表格的表头
        • 属性
          • HTML5 不支持。
            • abbr
              • 规定表头单元格中内容的缩写版本。
                • text
            • align
              • 规定表头单元格内容的水平对齐方式。
                • left
                  • 左对齐内容。
                • right
                  • 右对齐内容。
                • center
                  • 居中对齐内容（<th> 的默认值）。
                • justify
                  • 对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。
                • char
                  • 将内容对准指定字符。
            • axis
              • 对表头单元格进行分类。
                • category_name
            • char
              • 规定根据哪个字符来进行内容的对齐。
                • character
            • charoff
              • 规定对齐字符的偏移量。
                • number
                  • 规定对齐方式。
                    • 正数规定向字符的右边对齐。
                    • 负数规定向字符的左边对齐。
            • valign
              • 规定表头单元格内容的垂直排列方式。
                • top
                  • 对内容进行上对齐。
                • middle
                  • 对内容进行居中对齐（默认值）。
                • bottom
                  • 对内容进行下对齐。
                • baseline
                  • 与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
                    • 
          • HTML5 不支持。HTML 4.01 已废弃。
            • bgcolor
              • 规定表头单元格的背景颜色。
                • rgb(x,x,x)
                  • 规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。
                • #xxxxxx
                  • 规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。
                • colorname
                  • 规定颜色值为颜色名称的背景颜色（比如 "red"）。
            • height
              • 规定表头单元格的高度。
                • pixels
                  • 设置以像素计的高度值（比如 height="50"）。
                • %
                  • 设置以包含元素百分比计的高度值（比如 height="50%"）。
            • nowrap
              • 规定表头单元格中的内容是否折行。
            • width
              • 规定表头单元格的宽度。
                • pixels
                  • 设置以像素计的宽度值（比如 width="50"）。
                • %
                  • 设置以包含元素百分比计的宽度值（比如 width="50%"）。
          • headers
            • 规定与表头单元格相关联的一个或多个表头单元格。
              • header_id
          • colspan
            • 规定表头单元格可横跨的列数。
              • number
                • 注意： colspan="0" 告知浏览器使单元格横跨到列组 (colgroup) 的最后一列。
          • rowspan
            • 规定表头单元格可横跨的行数。
              • number
                • 注意： rowspan="0" 告知浏览器使单元格横跨到表格组件中的最后一个行（thead、tbody 或 tfoot）。
          • scope
            • 规定表头单元格是否是行、列、行组或列组的头部。
              • col
                • 规定单元格是列的表头。
              • row
                • 规定单元格是行的表头。
              • colgroup
                • 规定单元格是列组的表头。
              • rowgroup
                • 规定单元格是行组的表头。
    • <tr>
      • 定义表格的行
        • 属性
          • align
            • 定义表格行的内容对齐方式。
              • right
                • 右对齐内容。
              • left
                • 左对齐内容（<td> 元素的默认值）。
              • center
                • 居中对齐内容（<th> 元素的默认值）。
              • justify
                • 对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。
              • char
                • 将内容对准指定字符。
          • bgcolor
            • 规定表格行的背景颜色。
              • rgb(x,x,x)
                • 规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。
              • #xxxxxx
                • 规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。
              • colorname
                • 规定颜色值为颜色名称的背景颜色（比如 "red"）。
          • char
            • 定义和用法 HTML5 不支持 <tr> char 属性。 char 属性规定表格行中的内容相对某个字符的对齐方式。 仅当 align 属性设置为 "char" 时，才能使用 char 属性。 char 属性的默认值是当前页面语言的小数点字符。
            • 规定将内容与之对齐的字符。
              • character
          • charoff
            • 定义和用法 HTML5 不支持 <tr> charoff 属性。 charoff 属性规定内容相对于由 char 属性规定的字符的对齐偏移量。 仅当 align 属性设置为 "char" 且已设置 char 属性时，才能使用 charoff 属性。
            • 规定第一个对齐字符的偏移量。
              • number
                • 规定对齐方式。
                  • 正数规定向字符的右边对齐。
                  • 负数规定向字符的左边对齐。
          • valign
            • top
              • 对内容进行上对齐。
            • middle
              • 对内容进行居中对齐（默认值）。
            • bottom
              • 对内容进行下对齐。
            • baseline
              • 与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
        • 实例
          • 表格中的标题
            • 本例演示如何显示表格标题。
          • 空单元格
            • 本例演示如何使用 "&nbsp;" 处理没有内容的单元格。
          • 带有标题的表格
            • 本例演示一个带标题(caption)的表格。
          • 表格内的标签
            • 本例演示如何在其他的元素内显示元素。
          • 跨行或跨列的表格单元格
            • 本例演示如何定义跨行或跨列的表格单元格。
    • <td>
      • 定义表格单元
        • 属性
          • HTML5 不支持
            • abbr
              • 规定单元格中内容的缩写版本。
                • text
            • align
              • 规定单元格内容的水平对齐方式。
                • left
                • right
                • center
                • justify
                • char
            • axis
              • category_name
            • char
              • 规定根据哪个字符来进行内容的对齐。
                • character
            • charoff
              • 规定对齐字符的偏移量。
                • number
            • scope
              • 定义将表头单元格与数据单元格相关联的方法。
                • col
                  • 规定单元格是列的表头。
                • colgroup
                  • 规定单元格是列组的表头
                • row
                  • 规定单元格是行的表头。
                • rowgroup
                  • 规定单元格是行组的表头。
            • valign
              • 规定单元格内容的垂直排列方式。
                • top
                • middle
                • bottom
                • baseline
          • HTML5 不支持。HTML 4.01 已废弃。
            • bgcolor
              • 规定单元格的背景颜色。
                • rgb(x,x,x)
                • #xxxxxx
                • colorname
            • height
              • 设置单元格的高度。
                • pixels
                • %
            • nowrap
              • 规定单元格中的内容是否折行。
                • nowrap
            • width
              • 规定单元格的宽度。
                • pixels
                • %
          • colspan
            • 规定单元格可横跨的列数。
              • number
          • headers
            • 规定与单元格相关联的一个或多个表头单元格。
              • header_id
          • rowspan
            • 设置单元格可纵跨的行数。
              • number
        • 实例
          • 表格中的标题
          • 空单元格
          • 带有标题的表格
          • 表格内的标签
          • 跨行或跨列的表格单元格
    • <caption>
      • 定义表格标题
        • 属性
          • HTML5 不支持。HTML 4.01 已废弃
            • align
              • 定义标题的对齐方式。
                • left
                • right
                • top
                • bottom
    • <colgroup>
      • 标签定义及使用说明 <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。 通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。 注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。 提示：如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。
      • 定义表格列的组
        • 属性
          • HTML5 不支持
            • align
              • 规定在列组合中内容的水平对齐方式。
                • left
                • right
                • center
                • justify
                  • 对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。
                • char
            • char
              • 规定根据哪个字符来对齐列组中的内容。
                • character
            • charoff
              • 规定第一个对齐字符的偏移量。
                • number
            • valign
              • 定义在列组合中内容的垂直对齐方式。
                • top
                • middle
                • bottom
                • baseline
            • width
              • 规定列组合的宽度。
                • pixels
                  • 设置以像素计的宽度值（例子：width="50"）
                • %
                  • 设置以包围元素的百分比计的宽度值（例子：width="50%"）。
                • relative_length
                  • 把可用像素分配到各部分。部分一设置为 "1*"，部分二设置为 "2*"。（例如，表格的宽度是 100px，第一个列组是 20px，第二个列组是 50%，那么剩余的可用像素是 30px。） 例子：如果可用像素是 30px，那么可以设置部分一为 "1*"，部分二为 "2*"，这将被解释为 10 和 20 像素（"1*" 为部分一，"2*" 为部分二）。
          • span
            • 规定列组应该横跨的列数。
              • number
    • <col>
      • 定义用于表格列的属性
        • 属性
          • HTML5 不支持
            • align
              • 规定与 <col> 元素相关的内容的水平对齐方式。
                • left
                • right
                • center
                • justify
                • char
            • char
              • 规定根据哪个字符来对齐与 <col> 元素相关的内容。
                • character
            • charoff
              • 规定第一个对齐字符的偏移量。
                • number
            • span
              • 规定 <col> 元素应该横跨的列数。
                • number
            • valign
              • 规定与 <col> 元素相关的内容的垂直对齐方式。
                • top
                • middle
                • bottom
                • baseline
            • width
              • Specifies the width of a <col> element
                • %
                • pixels
                • relative_length
    • <thead>
      • 标签定义及使用说明 <thead> 标签用于组合 HTML 表格的表头内容。 <thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。 通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。 <thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。 提示和注释 注释：<thead> 元素内部必须包含一个或者多个 <tr> 标签。 提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
      • 定义表格的页眉
        • 属性
          • HTML5 不支持
            • align
              • right
              • left
              • center
              • justify
              • char
            • char
              • character
            • charoff
              • number
            • valign
              • top
              • middle
              • bottom
              • baseline
    • <tbody>
      • 标签定义及使用说明 <tbody> 标签用于组合 HTML 表格的主体内容。 <tbody> 元素应该与 <thead> and <tfoot> 元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）。 通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。 <tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。 提示和注释 注释：<tbody> 元素内部必须包含一个或者多个 <tr> 标签。 提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
      • 定义表格的主体
        • 属性
          • HTML5 不支持
            • align
              • right
              • left
              • center
              • justify
              • char
            • char
              • character
            • charoff
              • number
            • valign
              • top
              • middle
              • bottom
              • baseline
    • <tfoot>
      • 标签定义及使用说明 <tfoot> 标签用于组合 HTML 表格的页脚内容。 <tfoot> 元素应该与 <thead> 和 <tbody> 元素结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。 通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。 <tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。 提示和注释 注释：<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。 提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
      • 定义表格的页脚
        • 属性
          • HTML5 不支持
            • align
              • right
              • left
              • center
              • justify
              • char
            • char
              • character
            • charoff
              • number
            • valign
              • top
              • middle
              • bottom
              • baseline
• 列表
  • <!DOCTYPE html> <html> <head> <mate charset="utf-8"></mate> <title>列表</title> </head> <!--定义列表只能用ol、ul、dl分别对应有序、无序、自定义--> <body> <h4>无序列表举例学习</h4> <p>例一</p> <ul> <!--ul默认disc属性--> <li>Coffee</li> <li>Milk</li> </ul> <p>例二</p> <ul type="square"> <li>Coffee</li> <li>Milk</li> </ul> <p>例三</p> <ul type="circle"> <li type="square">Coffee</li> <li>Milk</li> <li type="disc">Coffee</li> <li>Milk</li> <li>Coffee</li> <li>Milk</li> <li>Coffee</li> <li>Milk</li> </ul> <p>例四</p> <ul type="disc"> <li>Coffee</li> <li>Milk</li> </ul> <p>例五</p> <ul type="a"> <!--type对ul不起作用--> <li>Coffee</li> <li>Milk</li> </ul> <p>例六</p> <ul start="6"> <!--start对他ul没用--> <li type="a">Coffee</li> <li type="a">Milk</li> <!--type对li起作用，而且还可以排序，但一旦不写type就会变成点--> <li>Coffee</li> <li>Milk</li> <li type="a">Coffee</li> <!--顺序还是能接上的--> <li type="1">Milk</li> <li type="1">Coffee</li> <li type="a">Milk</li> </ul> <h4>有序列表举例学习</h4> <p>例1</p> <ol> <li value="3" >Coffee</li> <li>Milk</li> <li>Coffee</li> <li>Milk</li> </ol> <p>例2</p> <ol type="a"> <!--type定义在这里的时候li的全部内容的排序才会以字母顺序--> <li>Coffee</li> <li type="disc">Milk</li> <!--事实证明ol也可以用disc等等--> <li>Coffee</li> <li>Milk</li> </ol> <p>例3</p> <ol> <li type="a">Coffee</li> <li type="1">Milk</li> <!--type只能检测a、A、i、I、1的存在，其他数字、字母没用--> <li type="i">Coffee</li> <!--如果以五个字母以外的形式输入，则会回到数字形式--> <li>Milk</li> <!--就比如说这里type="b",结果会显示4（4是本处序号）--> <li>Coffee</li> <li>Milk</li> <li>Coffee</li> <li>Milk</li> </ol> <p>例4</p> <ol> <!--ol默认以数字排序--> <li>Coffee</li> <li>Milk</li> <dd>白色液体</dd> <!--经过测试发现dd是可以用在li中的，后缩的比dt更多--> <li>Coffee</li> <dt>棕色液体</dt> <!--dt也可以，但是会后缩--> <li start="77">Milk</li> <li>Coffee</li> <li>Milk</li> <li>Coffee</li> <li>Milk</li> </ol> <p>例5</p> <ol start="5"> <li>Coffee</li> <li>Milk</li> <li>Coffee</li> <li>Milk</li> </ol> <h4>自定义列表</h4> <dl> <dt>白萝卜</dt> <dd>????</dd> <dt>红萝卜</dt> <li>子萝卜</li> <!--默认ul，ul又默认实心圆点--> <dt>小萝卜</dt> <dd>嘲笑罗比</dd> <dd>测试</dd> <!--dd与上一个dd同级--> <dt>和萝卜</dt> <dt>为萝卜</dt> <dt>就萝卜</dt> </dl> </body> </html>
  • 更多实例
    • 自定义列表
      • 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> 浏览器显示如下： Coffee - black hot drink Milk - white cold drink
    • 有序列表
    • 无序列表
    • 不同类型的有序列表
      • 本例演示不同类型的有序列表。
    • 不同类型的无序列表
      • 本例演示不同类型的无序列表。
    • 嵌套列表
      • 本例演示如何嵌套列表。
    • 嵌套列表 2
      • 本例演示更复杂的嵌套列表。
    • 自定义列表
      • 本例演示一个定义列表。
  • 注意事项 - 有用提示
    • 提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
  • 列表标签
    • ul是unordered lists的缩写 (无序列表) li是list item的缩写 （列表项目） ol是ordered lists的缩写（有序列表） dl是definition lists的英文缩写 (自定义列表) dt是definition term的缩写 (自定义列表组) dd是definition description的缩写（自定义列表描述） nl是navigation lists的英文缩写 （导航列表） tr是table row的缩写 （表格中的一行） th是table header cell的缩写 （表格中的表头） td是table data cell的缩写 （表格中的一个单元格）
    • <ol>
      • ordered lists
        • 定义有序列表
          • 属性
            • HTML5 中不支持，不赞成使用
              • compact
                • 请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。
                  • compact
            • HTML5 新属性。
              • reversed
                • 指定列表倒序(9,8,7...)
                  • reversed
            • 这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
              • start
                • 一个整数值属性，指定了列表编号的起始值。
                  • number
            • 规定列表的类型。不赞成使用。请使用样式代替。
              • type
                • a 表示小写英文字母编号
                • A 表示大写英文字母编号
                • i 表示小写罗马数字编号
                • I 表示大写罗马数字编号
                • 1 表示数字编号（默认）
    • <ul>
      • unordered lists
        • 定义无序列表
          • 属性
            • HTML5 不支持。HTML 4.01 已废弃。
              • type
                • 规定列表的项目符号的类型。
                  • disc
                    • 默认值。实心圆。
                  • square
                    • 实心方块。
                  • circle
                    • 空心圆。
              • compact
                • 规定列表呈现的效果比正常情况更小巧。
                  • compact
          • 实例
            • 列表小标记
              • 演示不同列表小标记。
            • 嵌套列表
              • 本例演示如何嵌套列表。
            • 嵌套列表 2
              • 本例演示更复杂的嵌套列表。
    • <dl>
      • definition lists
        • 定义列表
    • <li>
      • list item
        • 定义列表项
          • 属性
            • HTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。
              • type
                • 有序列表（<ol>）
                  • 1
                  • A
                  • a
                  • I
                  • i
                • 无序列表（<ul>）
                  • disc
                  • square
                  • circle
            • 不赞成使用。请使用样式取代它。
              • value
                • 规定列表项目的值。
                  • number
    • <dt>
      • definition term
        • 自定义列表项目
    • <dd>
      • definition description
        • 定义自定列表项的描述
• 颜色
• 颜色名
• 颜色值
• 速查列表
• 标签简写及全称
• 总结
• XHTML
  • 如何将 HTML 转换为 XHTML
    • 1. 添加一个 XHTML <!DOCTYPE> 到你的网页中
    • 2. 添加 xmlns 属性添加到每个页面的html元素中。
    • 3. 改变所有的元素为小写
    • 4. 关闭所有的空元素
    • 5. 修改所有的属性名称为小写
    • 6. 所有属性值添加引号
  • 使用 W3C 验证器来测试你的 XHTML
  • XHTML
    • XHTML 是以 XML 格式编写的 HTML。
  • 什么是 XHTML?
    • XHTML 指的是可扩展超文本标记语言
    • XHTML 与 HTML 4.01 几乎是相同的
    • XHTML 是更严格更纯净的 HTML 版本
    • XHTML 是以 XML 应用的方式定义的 HTML
    • XHTML 是2001年1月发布的 W3C 推荐标准
    • XHTML 得到所有主流浏览器的支持
  • 为什么使用 XHTML?
    • 因特网上的很多页面包含了"糟糕"的 HTML。 如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）： <html> <head> <meta charset="utf-8"> <title>这是一个不规范的 HTML</title> <body> <h1>不规范的 HTML <p>这是一个段落 </body> XML 是一种必须正确标记且格式良好的标记语言。 如果希望学习 XML，请阅读我们的 XML 教程。 今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。 所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。
  • 与 HTML 相比最重要的区别：
    • 文档结构
      • XHTML DOCTYPE 是强制性的
      • <html> 中的 XML namespace 属性是强制性的
      • <html>、<head>、<title> 以及 <body> 也是强制性的
    • 元素语法
      • XHTML 元素必须正确嵌套
      • XHTML 元素必须始终关闭
      • XHTML 元素必须小写
      • XHTML 文档必须有一个根元素
    • 属性语法
      • 小写
        • XHTML 属性必须使用
      • 引号包围
        • XHTML 属性值必须用
      • 禁止的
        • XHTML 属性最小化也是
  • <!DOCTYPE ....>是强制性的
• 事件属性
  • 全局事件属性
  • 事件属性。
  • 窗口事件属性（Window Event Attributes）
    • 由窗口触发该事件 (适用于 <body> 标签):
      • 属性
        • HTML5新增属性事件
          • onafterprint
            • 在打印文档之后运行脚本
          • onbeforeprint
            • 在文档打印之前运行脚本
          • onbeforeonload
            • 在文档加载之前运行脚本
          • onerror
            • 当错误发生时运行脚本
          • onhashchange
            • 当文档改变时运行脚本
          • onmessage
            • 当触发消息时运行脚本
          • onoffline
            • 当文档离线时运行脚本
          • ononline
            • 当文档上线时运行脚本
          • onpagehide
            • 当窗口隐藏时运行脚本
          • onpageshow
            • 当窗口可见时运行脚本
          • onpopstate
            • 当窗口历史记录改变时运行脚本
          • onredo
            • 当文档执行再执行操作（redo）时运行脚本
          • onresize
            • 当调整窗口大小时运行脚本
          • onstorage
            • 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
          • onundo
            • 当文档执行撤销时运行脚本
          • onunload
            • 当用户离开文档时运行脚本
        • onblur
          • 当窗口失去焦点时运行脚本
        • onfocus
          • 当窗口获得焦点时运行脚本
        • onload
          • 当文档加载时运行脚本
  • 表单事件(Form Events)
    • 表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):
      • 属性
        • HTML5新增属性事件。
          • oncontextmenu
            • 当触发上下文菜单时运行脚本
          • onformchange
            • 当表单改变时运行脚本
          • onforminput
            • 当表单获得用户输入时运行脚本
          • oninput
            • 当元素获得用户输入时运行脚本
          • oninvalid
            • 当元素无效时运行脚本
        • HTML 5 不支持
          • onreset
            • 当表单重置时运行脚本。
        • onblur
          • 当元素失去焦点时运行脚本
        • onchange
          • 当元素改变时运行脚本
        • onfocus
          • 当元素获得焦点时运行脚本
        • onselect
          • 当选取元素时运行脚本
        • onsubmit
          • 当提交表单时运行脚本
  • 键盘事件（Keyboard Events）
    • onkeydown
      • 当按下按键时运行脚本
    • onkeypress
      • 当按下并松开按键时运行脚本
    • onkeyup
      • 当松开按键时运行脚本
  • 鼠标事件（Mouse Events）
    • HTML5新增属性事件。
      • ondrag
        • 当拖动元素时运行脚本
      • ondragend
        • 当拖动操作结束时运行脚本
      • ondragenter
        • 当元素被拖动至有效的拖放目标时运行脚本
      • ondragleave
        • 当元素离开有效拖放目标时运行脚本
      • ondragover
        • 当元素被拖动至有效拖放目标上方时运行脚本
      • ondragstart
        • 当拖动操作开始时运行脚本
      • ondrop
        • 当被拖动元素正在被拖放时运行脚本
      • onmousewheel
        • 当转动鼠标滚轮时运行脚本
      • onscroll
        • 当滚动元素的滚动条时运行脚本
    • onclick
      • 当单击鼠标时运行脚本
    • ondblclick
      • 当双击鼠标时运行脚本
    • onmousedown
      • 当按下鼠标按钮时运行脚本
    • onmousemove
      • 当鼠标指针移动时运行脚本
    • onmouseout
      • 当鼠标指针移出元素时运行脚本
    • onmouseover
      • 当鼠标指针移至元素之上时运行脚本
    • onmouseup
      • 当松开鼠标按钮时运行脚本
  • 多媒体事件(Media Events)
    • 通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于 HTML 媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>:
      • 属性
        • HTML5新增属性事件
          • oncanplay
            • 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
          • oncanplaythrough
            • 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
          • ondurationchange
            • 当媒介长度改变时运行脚本
          • onemptied
            • 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
          • onended
            • 当媒介已抵达结尾时运行脚本
          • onerror
            • 当在元素加载期间发生错误时运行脚本
          • onloadeddata
            • 当加载媒介数据时运行脚本
          • onloadedmetadata
            • 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
          • onloadstart
            • 当浏览器开始加载媒介数据时运行脚本
          • onpause
            • 当媒介数据暂停时运行脚本
          • onplay
            • 当媒介数据将要开始播放时运行脚本
          • onplaying
            • 当媒介数据已开始播放时运行脚本
          • onprogress
            • 当浏览器正在取媒介数据时运行脚本
          • onratechange
            • 当媒介数据的播放速率改变时运行脚本
          • onreadystatechange
            • 当就绪状态（ready-state）改变时运行脚本
          • onseeked
            • 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
          • onseeking
            • 当媒介元素的定位属性为真且定位已开始时运行脚本
          • onstalled
            • 当取回媒介数据过程中（延迟）存在错误时运行脚本
          • onsuspend
            • 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
          • ontimeupdate
            • 当媒介改变其播放位置时运行脚本
          • onvolumechange
            • 当媒介改变音量亦或当音量被设置为静音时运行脚本
          • onwaiting
            • 当媒介已停止播放但打算继续播放时运行脚本
        • onabort
          • 当发生中止事件时运行脚本
  • 其他事件
    • 属性
      • onshow
        • 当 <menu> 元素在上下文显示时触发
      • ontoggle
        • 当用户打开或关闭 <details> 元素时触发
• 注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
• 注意： 元数据通常以 名称/值 对出现。
• 注意： 标签通常位于
• https://www.runoob.com/tags/att-iframe-align.html
• 参考手册
  • ASCII
    • NUL 00 空字符（null character） SOH 01 标题开始（start of header） STX 02 正文开始（start of text） ETX 03 正文结束（end of text） EOT 04 传输结束（end of transmission） ENQ 05 请求（enquiry） ACK 06 收到通知/响应（acknowledge） BEL 07 响铃（bell） BS 08 退格（backspace） HT 09 水平制表符（horizontal tab） LF 10 换行（line feed） VT 11 垂直制表符（vertical tab） FF 12 换页（form feed） CR 13 回车（carriage return） SO 14 不用切换（shift out） SI 15 启用切换（shift in） DLE 16 数据链路转义（data link escape） DC1 17 设备控制 1（device control 1） DC2 18 设备控制 2（device control 2） DC3 19 设备控制 3（device control 3） DC4 20 设备控制 4（device control 4） NAK 21 拒绝接收/无响应（negative acknowledge） SYN 22 同步空闲（synchronize） ETB 23 传输块结束（end transmission block） CAN 24 取消（cancel） EM 25 已到介质末端/介质存储已满（end of medium） SUB 26 替补/替换（substitute） ESC 27 溢出/逃离/取消（escape） FS 28 文件分隔符（file separator） GS 29 组分隔符（group separator） RS 30 记录分隔符（record separator） US 31 单元分隔符（unit separator） ! 33 感叹号（exclamation mark） " 34 引号（quotation mark） # 35 数字符号（number sign） $ 36 美元符号（dollar sign） % 37 百分比符号（percent sign） & 38 & 符号（ampersand） ' 39 撇号（apostrophe） ( 40 左括号（left parenthesis） ) 41 右括号（right parenthesis） * 42 星号（asterisk） + 43 加号（plus sign） , 44 逗号（comma） - 45 连字符（hyphen） . 46 句号（period） / 47 斜线（slash） 0 48 数字 0 1 49 数字 1 2 50 数字 2 3 51 数字 3 4 52 数字 4 5 53 数字 5 6 54 数字 6 7 55 数字 7 8 56 数字 8 9 57 数字 9 : 58 冒号（colon） ; 59 分号（semicolon） < 60 小于号（less-than） = 61 等于号（equals-to） > 62 大于号（greater-than） ? 63 问号（question mark） @ 64 @ 符号（at sign） A 65 大写字母 A B 66 大写字母 B C 67 大写字母 C D 68 大写字母 D E 69 大写字母 E F 70 大写字母 F G 71 大写字母 G H 72 大写字母 H I 73 大写字母 I J 74 大写字母 J K 75 大写字母 K L 76 大写字母 L M 77 大写字母 M N 78 大写字母 N O 79 大写字母 O P 80 大写字母 P Q 81 大写字母 Q R 82 大写字母 R S 83 大写字母 S T 84 大写字母 T U 85 大写字母 U V 86 大写字母 V W 87 大写字母 W X 88 大写字母 X Y 89 大写字母 Y Z 90 大写字母 Z [ 91 左方括号（left square bracket） \ 92 反斜线（backslash） ] 93 右方括号（right square bracket） ^ 94 插入符号（caret） _ 95 下划线（underscore） ` 96 重音符（grave accent） a 97 小写字母 a b 98 小写字母 b c 99 小写字母 c d 100 小写字母 d e 101 小写字母 e f 102 小写字母 f g 103 小写字母 g h 104 小写字母 h i 105 小写字母 i j 106 小写字母 j k 107 小写字母 k l 108 小写字母 l m 109 小写字母 m n 110 小写字母 n o 111 小写字母 o p 112 小写字母 p q 113 小写字母 q r 114 小写字母 r s 115 小写字母 s t 116 小写字母 t u 117 小写字母 u v 118 小写字母 v w 119 小写字母 w x 120 小写字母 x y 121 小写字母 y z 122 小写字母 z { 123 左花括号（left curly brace） | 124 竖线（vertical bar） } 125 右花括号（right curly brace） ~ 126 波浪线（tilde） DEL 127 删除（delete）
    • ASCII 字符集
      • ASCII ，它的全称是"美国信息交换标准代码"。它设计于60年代早期，是计算机和诸如打印机、磁带驱动器之类的硬件设备的标准字符集。 ASCII 是 7 比特字符集，包含了 128 个不同的字符值。 ASCII 支持 0-9 的数字，A-Z大写和小写英文字母，以及一些特殊字符。 被广泛使用于现代计算机、HTML和因特网上的字符集都是基于 ASCII 。 以下表格列举了128个 ASCII 字符以及对应的 HTML 实体编码。
    • ASCII 设备控制字符
      • NUL 00 空字符（null character） SOH 01 标题开始（start of header） STX 02 正文开始（start of text） ETX 03 正文结束（end of text） EOT 04 传输结束（end of transmission） ENQ 05 请求（enquiry） ACK 06 收到通知/响应（acknowledge） BEL 07 响铃（bell） BS 08 退格（backspace） HT 09 水平制表符（horizontal tab） LF 10 换行（line feed） VT 11 垂直制表符（vertical tab） FF 12 换页（form feed） CR 13 回车（carriage return） SO 14 不用切换（shift out） SI 15 启用切换（shift in） DLE 16 数据链路转义（data link escape） DC1 17 设备控制 1（device control 1） DC2 18 设备控制 2（device control 2） DC3 19 设备控制 3（device control 3） DC4 20 设备控制 4（device control 4） NAK 21 拒绝接收/无响应（negative acknowledge） SYN 22 同步空闲（synchronize） ETB 23 传输块结束（end transmission block） CAN 24 取消（cancel） EM 25 已到介质末端/介质存储已满（end of medium） SUB 26 替补/替换（substitute） ESC 27 溢出/逃离/取消（escape） FS 28 文件分隔符（file separator） GS 29 组分隔符（group separator） RS 30 记录分隔符（record separator） US 31 单元分隔符（unit separator） DEL 127 删除（delete）
      • ASCII 控制字符（00-31，加上 127）最初被设计用来控制诸如打印机和磁带驱动器之类的硬件设备。
      • 控制字符（除了水平制表符、换行、回车之外）在 HTML 文档中不起任何作用。
  • ISO 国家和地区代码
    • ISO 639-1 国家/地区代码
  • ISO 语言代码
    • ISO 639-1 语言代码
    • ISO 639-1 为各种语言定义了缩略词。您可以在 HTML 和 XHTML 中的 lang 和 xml:lang 属性中使用它们。
  • 颜色
    • 取色器/拾色器
      • Hue
        • 色相
      • HSL Saturation
      • HSL 淡 / 暗
      • HSV Saturation
      • HSV 亮 / 暗
      • RGB (Red, Green, Blue)
      • Value
      • Hex
        • 十六进制
      • Hsl
        • Hue, Saturation, Lightness
          • 色相、饱和度、亮度
            • 简介
              • 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
              • 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
              • 明度（V），亮度（L），取0-100%。
            • 三元组定义的颜色
              • (h,s,l)
      • Hsv
        • Hue, Saturation, Value
          • 色相、饱和度、明度
            • 三元组定义的颜色
              • (h,s,v)
        • 又称HSB，其中B即英语：Brightness。
    • 颜色混搭
    • 颜色名
  • Emoji
    • 参考手册
    • 笑脸
    • 肤色
  • URL 编码
    • URL 编码会将字符转换为可通过因特网传输的格式。
    • 统一资源定位器
      • Web 浏览器通过 URL 从 web 服务器请求页面。
      • URL 是网页的地址，比如：https://www.runoob.com
    • URL 编码
      • URL 只能使用来通过因特网进行发送。
      • 由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
      • URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
      • URL 不能包含空格。URL 编码通常使用 + 来替换空格。
    • 尝试一下
    • URL 编码函数
      • JavaScript、PHP、ASP 都提供了对字符串进行URL编码的函数。
      • JavaScript 中使用 encodeURI() 函数，PHP 中使用 rawurlencode() 函数，ASP 中使用 Server.URLEncode() 函数。
  • px,pt,em换算表
  • px、em、rem区别介绍
  • HTTP 方法
    • 什么是 HTTP ？
      • 超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。
      • HTTP 的工作方式是客户端与服务器之间的请求-应答协议。
      • web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
      • 举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。
    • 两种 HTTP 请求方法：GET 和 POST
      • 在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。
        • GET
          • 从指定的资源请求数据。
            • GET 方法
              • 请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
                • /test/demo_form.php?name1=value1&name2=value2
              • 有关 GET 请求的其他一些注释：
                • GET 请求可被缓存
                • GET 请求保留在浏览器历史记录中
                • GET 请求可被收藏为书签
                • GET 请求不应在处理敏感数据时使用
                • GET 请求有长度限制
                • GET 请求只应当用于取回数据
        • POST
          • 向指定的资源提交要被处理的数据。
            • POST 方法
              • 请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
                • POST /test/demo_form.php HTTP/1.1 Host: runoob.com name1=value1&name2=value2
              • 有关 POST 请求的其他一些注释：
                • POST 请求不会被缓存
                • POST 请求不会保留在浏览器历史记录中
                • POST 不能被收藏为书签
                • POST 请求对数据长度没有要求
        • 比较 GET 与 POST
          • 下面的表格比较了两种 HTTP 方法：GET 和 POST。
        • 其他 HTTP 请求方法
          • 下面的表格列出了其他一些 HTTP 请求方法：
          • HEAD
            • 与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
          • PUT
            • 上传指定的 URI 表示。
          • DELETE
            • 删除指定资源。
          • OPTIONS
            • 返回服务器支持的 HTTP 方法。
          • CONNECT
            • 把请求连接转换到透明的 TCP/IP 通道。
    • Form 中的 get 和 post 方法，在数据传输过程中分别对应了 HTTP 协议中的 GET 和 POST 方法。二者主要区别如下：
      • 1、Get 是用来从服务器上获得数据，而 Post 是用来向服务器上传递数据。 2、Get 将表单中数据的按照 variable=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL。 3、Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post 的所有操作对用户来说都是不可见的。 4、Get 传输的数据量小，这主要是因为受 URL 长度限制；而 Post 可以传输大量的数据，所以在上传文件只能使用 Post（当然还有一个原因，将在后面的提到）。 5、Get 限制 Form 表单的数据集的值必须为 ASCII 字符；而 Post 支持整个 ISO10646 字符集。 6、Get 是 Form 的默认方法。 使用 Post 传输的数据，可以通过设置编码的方式正确转化中文；而 Get 传输的数据却没有变化。在以后的程序中，我们一定要注意这一点。
  • IANA MIME 类型。
  • 如需查看所有可用的字符编码，请访问 IANA 字符集。
• 布尔属性