HTML 元素

鸿之翼

已于 2023-10-26 16:13:13 修改

阅读量92

点赞数

分类专栏： # Html基础文章标签：前端 html

于 2023-10-26 16:01:04 首次发布

本文链接：https://blog.csdn.net/weixin_42350100/article/details/133794272

版权

Html基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 标签速查表

1. 基础标签

标签	描述
<!DOCTYPE>	定义文档类型。
<html>	定义 HTML 文档。
<title>	定义文档的标题。
<body>	定义文档的主体。
<h1> to <h6>	定义 HTML 标题。
<p>	定义段落。
<br>	定义简单的折行。
<hr>	定义水平线。
<!–…–>	定义注释。

2. 格式标签

标签	描述
<acronym>	定义只取首字母的缩写。
<abbr>	定义缩写。
<address>	定义文档作者或拥有者的联系信息。
<b>	定义粗体文本。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文字方向。
<big>	定义大号文本。
<blockquote>	定义长的引用。
<center>	不赞成使用。定义居中文本。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<del>	定义被删除文本。
<dfn>	定义定义项目。
<em>	定义强调文本。
<font>	不赞成使用。定义文本的字体、尺寸和颜色
<i>	定义斜体文本。
<ins>	定义被插入文本。
<kbd>	定义键盘文本。
<mark>	定义有记号的文本。
<meter>	定义预定义范围内的度量。
<pre>	定义预格式文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	不赞成使用。定义加删除线的文本。
<samp>	定义计算机代码样本。
<small>	定义小号文本。
<strike>	不赞成使用。定义加删除线文本。
<strong>	定义语气更为强烈的强调文本。
<sup>	定义上标文本。
<sub>	定义下标文本。
<time>	定义日期/时间。
<tt>	定义打字机文本。
<u>	不赞成使用。定义下划线文本。
<var>	定义文本的变量部分。
<wbr>	定义视频。

3. 表单标签

标签	描述
<form>	定义供用户输入的 HTML 表单。
<input>	定义输入控件。
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。
<isindex>	不赞成使用。定义与文档相关的可搜索索引。
<datalist>	定义下拉列表。
<keygen>	定义生成密钥。
<output>	定义输出的一些类型。

4. 框架标签

标签	描述
<frame>	定义框架集的窗口或框架。
<frameset>	定义框架集。
<noframes>	定义针对不支持框架的用户的替代内容。
<iframe>	定义内联框架。

5. 图像标签

标签	描述
<img>	定义图像。
<map>	定义图像映射。
<area>	定义图像地图内部的区域。
<canvas>	定义图形。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。

6. 音频/视频标签

标签	描述
<audio>	定义声音内容。
<source>	定义媒介源。
<track>	定义用在媒体播放器中的文本轨道。
<video>	定义视频。

7. 链接标签

标签	描述
<a>	定义锚。
<link>	定义文档与外部资源的关系。
<nav>	定义导航链接。

8. 列表标签

标签	描述
<ul>	定义无序列表。
<ol>	定义有序列表。
<li>	定义列表的项目。
<dir>	不赞成使用。定义目录列表。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<menu>	定义命令的菜单/列表。
<menuitem>	定义用户可以从弹出菜单调用的命令/菜单项目。
<command>	定义命令按钮。

9. 表格标签

标签	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。

10. 样式/节标签

标签	描述
<style>	定义文档的样式信息。
<div>	定义文档中的节。
<span>	定义文档中的节。
<header>	定义 section 或 page 的页眉。
<footer>	定义 section 或 page 的页脚。
<section>	定义 section。
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<details>	定义元素的细节。
<dialog>	定义对话框或窗口。
<summary>	为 <details> 元素定义可见的标题。

11. 元信息标签

标签	描述
<head>	定义关于文档的信息。
<meta>	定义关于 HTML 文档的元信息。
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	不赞成使用。定义页面中文本的默认字体、颜色或尺寸。

12. 编程标签

标签	描述
<script>	定义客户端脚本。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<applet>	不赞成使用。定义嵌入的 applet。
<embed>	为外部应用程序（非 HTML）定义容器。
<object>	定义嵌入的对象。
<param>	定义对象的参数。

HTML 元素

<a>：锚元素

<abbr>：缩写元素

行内元素开始标签和结束标签都不能省略。

可以通过可选的 title 属性提供完整的描述

在同 <abbr> 元素一起使用的时候，title 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示，在鼠标指针覆盖到该元素时显示作为一个提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
    	/* 添加背景颜色 */
     	body {

            background-color: aquamarine;
        }
        /* 用 CSS 来为缩写做一个样式。 */
        abbr {
            /* 小型大写字母指使用大写形式，但尺寸与对应小写字母相同的字母。 */
            /* 
            small-caps 小写转换为大写形式，尺寸不变，大写无变化
            all-small-caps 大小写都显示为小型大写字母
            */
            font-variant: all-small-caps;
        }

    </style>
</head>
<body>

    <h1>创建语义化的缩写</h1>
    <p>创建不含解释或描述性的缩写，不添加任何属性，例子：<abbr>XHTML</abbr></p>

    <h1>提供扩展</h1>
    <p>添加一个 title 属性，为缩写提供定义或拓展。例子：<abbr title="eXtensible HyperText Markup Language">XHTML</abbr></p>
    
    <h1>定义一个缩写</h1>
    <p>&lt;abbr&gt; 与 &lt;dfn&gt; 联合使用可以定义一个更加正式的缩写 例子：<dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr></dfn></p>
    <p>
        <dfn id="json">JavaScript Object Notation</dfn> (<abbr title="JavaScript Object Notation">JSON</abbr>) 是轻量级的数据交换格式。
    </p>
</body>
</html>

在这里插入图片描述

<acronym>：已弃用

<address>：联系信息

块级元素开始标签和结束标签都不能省略。

表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。

由<address>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。

<address>可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在<article>元素内，指明该文章的作者。

当表示一个和联系信息无关的任意的地址时，请改用 <p> 元素而不是 <address> 元素。

这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在 <time> 元素之中）。

通常，<address> 元素可以放在 <footer> 元素之中（如果存在的话）。

虽然 <address> 元素看起来只是使用了 <i> 或者 <em> 元素的默认样式来渲染其中的文本，但是当处理联系信息时使用它更为合适，因为它表达了额外的语义信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>如何建立HTML网页文件</h1>
    <h3>标签、元素、属性与属性值</h3>
    <p>一个正确的HTML标签至少必须 ～略～ 标签内容就构成一个完整的HTML语句</p>
    <h3>特殊符号的使用</h3>
    <p>“＜”、“＞”是用来包括元素成为标签的 ～略～ 体参照与数值实体参照两种</p>

    <address>
        XX工作室<br />
        email：<a href="mailto:XXXXX@XX.com">XXXXX@XX.com</a><br />
        Copyrightc XX | 隐私权政策
    </address>
      
</body>
</html>

在这里插入图片描述

<area>：在图片上定义一个热点区域，可以关联一个超链接

<article>：表示文档、页面、应用或网站中的独立结构

块级元素开始标签和结束标签都不能省略。

其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

给定文档中可以包含多篇文章;例如，阅读器在博客上滚动时一个接一个地显示每篇文章的文本，每个帖子将包含在<article>元素中，可能包含一个或多个<section>。

<article>元素不能成为<address>元素的子元素。

每个<article>，通常包括标题（<h1> - <h6>元素）作为<article>元素的子元素。
当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
<article>元素的作者信息可通过<address>元素提供，但是不适用于嵌套的<article>元素。
<article>元素的发布日期和时间可通过<time>元素的 pubdate 属性表示。
可以使用<time> 元素的 datetime 属性来描述<article>元素的发布日期和时间。请注意<time>的pubdate 属性不再是W3C (en-US) HTML5标准。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <section>
        <h1>减赤法案  奥巴马签署成法律</h1>
        <p>美国参议院赶在大限来临前不到12小时，今天表决通过大规模削减赤字与提高举债上限的法案……</p>
        <article>网友A评论...</article>
        <article>网友B评论...</article>
    </section>

    <article class="film_review">
        <header>
          <h2>Jurassic Park</h2>
        </header>
        <section class="main_review">
          <p>Dinos were great!</p>
        </section>
        <section class="user_reviews">
          <article class="user_review">
            <p>Way too scary for me.</p>
            <footer>
              <p>
                Posted on
                <time datetime="2015-05-16 19:00">May 16</time>
                by Lisa.
              </p>
            </footer>
          </article>
          <article class="user_review">
            <p>I agree, dinos are my favorite.</p>
            <footer>
              <p>
                Posted on
                <time datetime="2015-05-17 19:00">May 17</time>
                by Tom.
              </p>
            </footer>
          </article>
        </section>
        <footer>
          <p>
            Posted on
            <time datetime="2015-05-15 19:00">May 15</time>
            by Staff.
          </p>
        </footer>
      </article>
      
      
</body>
</html>

在这里插入图片描述

<aside>：侧边栏或者标注框

<audio>：嵌入音频内容

<b>：用于吸引读者的注意到该元素的内容上

行内元素开始标签和结束标签都不能省略。

提醒注意（Bring Attention To）元素，过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。不应将 <b> 元素用于显示粗体文字，替代方案是使用 CSS font-weight 属性来创建粗体文字。

<strong>元素表示某些重要性的文本，<em>强调文本，而<mark>元素表示某些相关性的文本。 <b>元素不传达这样的特殊语义信息，仅在没有其他合适的元素时使用它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h2>展望未来</h2>
    <p>
        尽管写了几本<b>计算机教程</b>，还算是个写手吧！但是，深藏在内心的那个梦依然存在，这个梦就是出版一本<b>散文集</b>，梦会不会成真还没个定论，不过网络是个筑梦的好地方，一点也不必在乎会不会开花结果，所以从现在开始，只要微风吹过，我就会把湖面上的粼粼波光一点一滴地记录下来与您共赏。
    </p>
</body>
</html>

在这里插入图片描述

<base>：文档根 URL 元素

<bdi>：双向隔离元素

<bdo>: 双向文本替代元素

行内元素开始标签和结束标签都不能省略。

改写了文本的方向性，使文本以不同的方向渲染呈现出来

属性

dir 在此元素内容中呈现文本的方向。可能的值是：

ltr: 指示文本应从左到右的方向。
rtl: 指示文本应从右到左的方向。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>URI与URL</h1>
    <p><bdo dir="ltr" style="font-size: 11pt;color: #FF3300;">
        由于URI与URL的差别太过理论与学术性，各位读者不妨暂且将两者都认定为“网址”<br />
        也就是将两者视为同等的意义即可（URI=URL=网址）<br />
        A-C-D-E-F-G-H-I-J-K-L-M-N-O-P-O-R-S-T-U-V-W-X-Y-Z
    </bdo></p>
    <hr />
    <p><bdo dir="rtl" style="font-size: 11pt;color: #0066CC;">
        由于URI与URL的差别太过理论与学术性，各位读者不妨暂且将两者都认定为“网址”<br />
        也就是将两者视为同等的意义即可（URI=URL=网址）<br />
        A-C-D-E-F-G-H-I-J-K-L-M-N-O-P-O-R-S-T-U-V-W-X-Y-Z
    </bdo></p>
</body>
</html>

在这里插入图片描述

<big>：已弃用

<blockquote>：块级引用元素

块级元素开始标签和结束标签都不能省略。

代表其中的文字是引用内容，通常在渲染时这部分的内容会有一定的缩进，若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

若要修改被引用内容的缩进距离，可以使用 CSS margin-left 和/或 margin-right 属性，或使用 margin 缩写属性。

若想使用在行内引用较短的内容而非创建一个单独的引用块，可使用 <q>（Quotation）元素。

如果想要使用短引用（行间引用），可以使用<q> 标签。

属性

cite 标注引用的信息的来源文档或者相关信息的 URL。通常用来描述能够解释引文的上下文或者引用的信息。cite并不会在常用浏览器中展示任何效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>关于XX</h1>
    <p>XX成立于1993年</p>
    <blockquote cite=http://valor.twbts.com style="color: #0000FF; border: 3px solid #33cc00; padding: 10px;">
        多年来承蒙各界好友的提携，将网站构架及程序制作的工作交给我们完成。受到大家的信赖与照顾，使我们得以从托付的任务中不断茁壮成长。
    </blockquote>

    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
        <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
    </blockquote>
   
</body>
</html>

在这里插入图片描述

<body>：文档主体元素

块级元素如果开始标记中的第一个内容不是空格字符、注释、\＜script\＞元素或\＜style\＞元素，则可以省略它。如果\＜body\＞元素有内容或有开始标记，并且后面没有紧跟注释，则可以省略结束标记。

表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

必须是 html 元素的直接子元素。

属性

alink 已弃用
超链接选中之后的文本颜色。此方法不符合规范，请使用 CSS 的 color 属性和 :active 伪类替代。

background 已弃用
将 URI 所指向的图片作为背景。此方法不符合规范，请使用 CSS 的 background 属性替代。

bgcolor 已弃用
文档的背景颜色。此方法不符合规范，请使用 CSS 的 background-color 属性替代。

bottommargin 已弃用
body 的底外边距。此方法不符合规范，请使用 CSS 的 margin-bottom 属性替代。

leftmargin 已弃用
body 的左外边距。此方法不符合规范，请使用 CSS 的 margin-left 属性替代。

link 已弃用
未访问过的超链接文本颜色。此方法不符合规范，请使用 CSS 的 color 属性和 :link 伪类替代。

onafterprint
用户完成文档打印之后调用的函数。

onbeforeprint
用户要求打印文档之前调用的函数。

onbeforeunload
文档即将被关闭之前调用的函数。

onblur
文档失去焦点时调用的函数。

onerror
文档加载失败时调用的函数。

onfocus
文档获得焦点时调用的函数。

onhashchange
文档当前地址的片段标识部分（以 (‘#’) 开始的部分）发生改变时调用的函数。

onlanguagechange 实验性
用户选择的语言发生改变时调用的函数。

onload
文档完成加载时调用的函数。

onmessage
文档接收到消息时调用的函数。

onoffline
网络连接失败时调用的函数。

ononline
网络连接恢复时调用的函数。

onpopstate
用户回退历史记录时调用的函数。

onredo
用户重做操作时调用的函数。

onresize
文档尺寸发生改变时调用的函数。

onstorage
存储内容（localStorage / sessionStorage）发生改变时调用的函数。

onundo
用户撤销操作时调用的函数。

onunload
文档关闭时调用的函数。

rightmargin 已弃用
body 的右外边距。此方法不符合规范，请使用 CSS 的 margin-right 属性替代。

text 已弃用
文本颜色。此方法不符合规范，请使用 CSS 的 color 属性替代。

topmargin 已弃用
body 的上外边距。此方法不符合规范，请使用 CSS 的 margin-top 属性替代。

vlink 已弃用
访问过的超链接的文本颜色。此方法不符合规范，请使用 CSS color 属性和 :visited 伪类替代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body text="#333399" alink="#FF3300" link="#006600" vlink="#800000">
    <p><b>网站一览表</b></p>
    <p> 1 <a href="#">学园</a> </p>
    <p> 2 <a href="#">讨论区</a> </p>
    <p> 3 <a href="#">工作室</a> </p>
    <p> 4 <a href="#">出版社</a> </p>
   </body>
</html>

在这里插入图片描述

<br>：换行（回车）符号

行内元素必须有一个开始标签，并且一定不能有结束标签。在 XHTML 中将元素写为 <br />

在文本中生成一个换行（回车）符号。

不要用 <br> 来增加文本之间的行间隔；应使用 CSS margin 属性或<p> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>JavaScript 精致范例辞典</h1>
    <p>
    　为方便查阅，本书提供下列 3 种索引方式：<br />
    　分类指令索引：将语法及指令分类<br />
    　范例索引：依照各种不同范例进行示范并说明使用目的<br />
    　字母索引：依字母顺序 A～Z 列出所有语法及指令 <br />
    </p>

</body>
</html>

在这里插入图片描述

<button>：可点击的按钮

行内元素开始标签和结束标签都不能省略。

可以用在表单或文档其他需要使用简单标准按钮的地方。

<button> 元素比 <input> 元素更容易使用样式。你可以在元素内添加 HTML 内容（像 <em>、<strong> 甚至 <img>），以及 ::after 和 ::before 伪元素来实现复杂的效果，而 <input> 只支持文本内容。

如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 type 属性设置成 button。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。

点击 <button> 会让浏览器和操作系统（默认情况下）将焦点放在其上。 <input> 的 type=“button” 和 type=“submit” 也是一样的。

属性

autofocus 一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。

autocomplete 非标准
该属性在 <button>上的使用并未标准化，只有 Firefox 允许。不像其他浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态（Firefox persists the dynamic disabled state ）。将此属性设置为off (i.e. autocomplete=“off”) 关闭此特性。

disabled 此布尔属性表示用户不能与 button 交互。如果属性值未指定，button 继承包含元素，例如<fieldset>；如果没有设置 disabled 属性的包含元素，button 将可交互。不像其他浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态。使用autocomplete属性可控制此特性。

form 表示 button 元素关联的 form 元素（它的表单拥有者）。此属性值必须为同一文档中的一个<form>元素的id属性。如果此属性未指定，<button>元素必须是 form 元素的后代。利用此属性，你可以将<button>元素放置在文档内的任何位置，而不仅仅是作为他们 form 元素的后代。

formaction 表示程序处理 button 提交信息的 URI。如果指定了，将重写 button 表单拥有者的 action 属性。

formenctype 如果 button 是 submit 类型，此属性值指定提交表单到服务器的内容类型。可选值：
- application/x-www-form-urlencoded: 未指定时的默认值。
- multipart/form-data: 如果使用type属性的<input>元素设置文件，使用此值。
- text/plain如果指定此属性，它将重写 button 的表单拥有者的enctype属性。

formmethod 如果 button 是 submit 类型，此属性指定浏览器提交表单使用的 HTTP 方法。可选值：
- post：来自表单的数据被包含在表单内容中，被发送到服务器。
- get：来自表单的数据以’?'作为分隔符被附加到 form 的URI属性中，得到的 URI 被发送到服务器。当表单没有副作用，且仅包含 ASCII 字符时使用这种方法。如果指定了，此属性会重写 button 拥有者的method属性。

formnovalidate 如果 button 是 submit 类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写 button 拥有者的novalidate属性。

formtarget 如果 button 是 submit 类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如 tab，window 或内联框架）的名称或关键字。如果指定了，它会重写 button 拥有者的target 属性。关键字如下：
- _self: 在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。
- _blank: 在一个新的不知名浏览上下文中加载响应。
- _parent: 在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按_self 执行。
- _top: 在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按_self 执行。

name button 的名称，与表单数据一起提交。

type button 的类型。可选值：
- submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
- reset: 此按钮重置所有组件为初始值。
- button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。

value button 的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        body {background-image:url(images/55.jpg);background-repeat:no-repeat;}
        form { height: 450px;}
        form,h3 {margin-left: 80pt; margin-top: 15pt;}
        a img {margin-left: 100pt; margin-top: 5pt;}

    </style>

    <script type="text/javascript"> 
        function chgHash(myHash){
            location.hash=myHash
        }
    </script>
</head>
<body>
   
    <form name="myForm" action="mailto:test@abc.com">
        您的大名:<input type="text" name="user" /><br />
        您的意见:<textarea rows="3" name="message" cols="40"></textarea>
        <br />
        <button type="submit" value="submitbutton" name="mailbutton"><img src="images/submits.gif" alt="" />发表意见</button>
        <button type="reset" value="resetbutton" name="clearbutton"><img src="images/reset.gif" alt="" /></button>
        <button type="submit" value="submitbutton" name="mailbutton" style="background-color: #006600; color:#FFFFFF">发表意见</button>
        <button type="reset" value="resetbutton" name="clearbutton" style="background-color: #FF0000; color:#FFFFFF">重新填写</button>
    </form>


    <button type="button" onClick="chgHash('pic1')">第1张图</button>
    <button type="button" onClick="chgHash('pic2')">第2张图</button>
    <button type="button" onClick="chgHash('pic3')">第3张图</button>
    <br />
    图1<a id="pic1"><img alt="" src="images/f005.jpg"></a><br /><br />
    图2<a id="pic2"><img alt="" src="images/f006.jpg"></a><br /><br />
    图3<a id="pic3"><img alt="" src="images/f007.jpg"></a><br />

    <a href="#pic1">第1张图</a> 
    <a href="#pic2">第2张图</a>
    <a href="#pic3">第3张图</a>

</body>
</html>

在这里插入图片描述

<canvas>：绘制图形及图形动画

<caption>：表格的标题

块级元素开始标签和结束标签都不能省略。

展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个相对于表格的任意位置。

当 <table> 元素是<caption> 的父元素，caption 是<figure> 元素的唯一后代的时候，使用<figcaption>元素替代 caption 元素

属性

~~align~~ 已弃用
这个可枚举属性表明了 caption 相对于 table 应该如何排列。它可能有以下几个值：
- left: 展示在表格左边
- top: 显示在表格前面
- right: 显示在表格右边
- bottom: 显示在表格下面
备注：不要使用这个属性，它已经被弃用：应该使用 CSS设置样式。要得到类似 align 属性的效果，使用 CSS 属性 caption-side 和 text-align.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .batman {
          background-color: #d7d9f2;
        }

        .flash {
          background-color: #ffe8d4;
        }

        caption {
          padding: 8px;
          caption-side: bottom;
        }

        table {
          border-collapse: collapse;
          border: 2px solid rgb(100, 100, 100);
          letter-spacing: 1px;
          font-family: sans-serif;
          font-size: 0.7rem;
        }

        td,
        th {
          border: 1px solid rgb(100, 100, 100);
          padding: 10px 10px;
        }

        td {
          text-align: center;
        }



    </style>

</head>
<body>

  <table>
    <caption>利用table、tr、td、th元素建立表格</caption>
      <tr>
        <th style="background-color:#99FF66;">标题行第1列</th>
        <th style="background-color:#66FFFF;">标题行第2列</th>
        <th style="background-color:#FF66FF;">标题行第3列</th>
      </tr>
      <tr>
        <td>第2行</td><td>第2行</td>
        <td>第2行</td>
      </tr>
      <tr>
        <td>第3行</td><td>第3行</td>
        <td>第3行</td>
      </tr>
    </table>

    <table>
      <caption style="caption-side:bottom;font-size:14; text-align:right; color:#0000FF; font-weight:bold;">
      利用table、tr、td、th元素建立表格</caption>
        <tr>
          <th style="background-color:#99FF66;">标题行第1列</th>
          <th style="background-color:#66FFFF;">标题行第2列</th>
          <th style="background-color:#FF66FF;">标题行第3列</th>
        </tr>
        <tr>
          <td>第2行</td><td>第2行</td>
          <td>第2行</td>
        </tr>
        <tr>
          <td>第3行</td><td>第3行</td>
          <td>第3行</td>
        </tr>
    </table>
  
  

</body>
</html>

在这里插入图片描述

<center>：已弃用

<cite>：引用（Citation）标签

行内元素开始标签和结束标签都不能省略。

引用（Citation）标签 (<cite>) 表示一个作品的引用，且必须包含作品的标题。

通常，浏览器默认使用斜体来展示<cite>元素中的内容。可以通过指定<cite>元素的font-style样式来覆盖这种默认行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>URI与URL</h1>
    <pre>
       由于URI与URL的差别太过理论与学术性，各位读者不妨暂且将两者
       都认定为“网址”，也就是将两者视为同等意义即可（URI=URL=网址），
       有兴趣研究URI、URL、URN三者关系者请参考
       <cite>W3C Note“http://www.w3.org/TR/uri-clarification/”。</cite>
    </pre>

    <figure>
        <blockquote>
          <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
        </blockquote>
        <figcaption>
          First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George
          Orwell (Part 1, Chapter 1).
        </figcaption>
    </figure>

</body>
</html>

在这里插入图片描述

<code>：呈现一段计算机代码

块级元素开始标签和结束标签都不能省略。

呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。

CSS 规则可以覆盖浏览器默认的 code 标签字体样式。但用户设置的浏览器字体选项可能会超过 CSS 的优先级，使之无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h4>下面这段程序代码将会出现在信息窗口</h4>
    <pre>
    <code>
    function message(txt){
        window.alert(txt);
    }
    </code>
    </pre>

    <p>Regular text. <code>This is code.</code> Regular text.</p>


</body>
</html>

在这里插入图片描述

<col>：定义表格中的列

必须有一个开始标签，并且一定不能有结束标签。

用于定义所有公共单元格上的公共语义。它通常位于<colgroup>元素内。

此元素允许使用 CSS 进行样式列，但只有少数属性将对该列产生影响

属性

~~align~~ 已弃用
这个枚举属性指定单元格内容的水平对齐方式。可能的值有：
- left: 单元格内容左对齐
- center: 单元格内容居中
- right: 单元格内容右对齐
- justify (仅文字内容): 内容拉伸以覆盖单元格
- char (仅文字内容): 内容相对<th>标签中的某个字符对齐（默认值是页面语言的小数点字符）。该字符由char 和charoff 属性定义。对齐方式的默认值是 left.
不要使用这个属性。
不要试图在给定<col>元素的选择器上设置 text align 属性。因为 <td> 元素不是 <col> 元素的后代，所以它们不会继承它。
如果表不使用 colspan 属性，请使用 td:nth-child(an+b) CSS选择器，其中 a 是表中列的总数，b 是列在表中的顺序位置。只有在此选择器之后，才能使用文本对齐属性。
如果表确实使用了colspa 属性，则可以通过组合足够的 CSS 属性选择器（如 [colspan=n] ）来实现效果，尽管这不常用。

bgcolor 非标准
这个属性定义了每列中每单元格的背景色。它由带有‘#’前缀的 6 位数的十六进制码组成，并在sRGB中被定义。这个属性可能会用到十六个预定义的颜色字符串之一。
不要使用这个属性，<th> 元素应当用CSS来样式化。同样的效果只需要使用CSS中的 background-color 属性就可以。

~~char~~ 已弃用
列中的内容与<th> 元素中的字母对齐。通常其值包含一个 (.) 来排列数字或者货币值。如果 align没有被设置为char，这个属性就会被忽略。
不要使用这个属性，在CSS3中，使用 char 属性作为 text-align 属性的值

~~charoff~~ 已弃用
这个属性用来将列数据移到 char 属性指定字母的右边。其值指定了移动的长度。
不要使用这个属性，因为它已经在最新标准中过时。

span 该属性值为一个正整数，表示该 <col> 元素横跨的列数。默认值为 1

~~valign~~ 已弃用
这个属性指定了单元格内文本的垂直对齐方式。这个属性可能有以下值：
- baseline: 将文本置于单元格底部并将其与字母的 baseline 对齐而不是与底部。若字母没有 baseline 以下的部分（即为无降部）那么 baseline 值起到的效果便和 bottom 相同。
- bottom: 将文本置于底部。
- middle: 将文本置于单元格中央。
- top: 将文本置于单元格顶部。
不要试图在给定<col>元素的选择器上设置 vertical-align 属性。因为<td> 元素不是<col>元素的后代，所以它们不会继承它。
如果表不使用 colspan 属性，请使用td:nth-child(an+b) CSS选择器，其中 a 是表中列的总数，b 是列在表中的顺序位置。只有在此选择器之后，才能使用垂直对齐属性。
如果表确实使用了 colspan 属性，则可以通过组合足够的CSS属性选择器（如 [colspan=n]）来实现效果，尽管这并不常用。

~~width~~ 已弃用
此属性为当前列组中的每列指定默认宽度。除了标准像素值和百分比值外，此属性还可以采用特殊形式0*，这意味着组中每列的宽度应该是容纳列内容所需的最小宽度。也可以使用相对宽度，例如0.5*。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        table {border:1px solid black;width:500px;}
        td {border:1px solid black;}


    </style>

</head>
<body>

  <h4>行列组合</h4>
  <div>
    <table>
      <colgroup span="1" style="width:150px;"></colgroup>
      <colgroup>
      <col span="1" style="width:100px;background:#CC99FF;">
      </colgroup>
      <colgroup>
      <col span="1" style="width:200px;background:#009900;">
      <col span="1" style="width:150px; background:#CCFF99;">
      </colgroup>
      <colgroup span="1" style="width:150px;"></colgroup>
      <thead>
        <tr>
          <td>　</td>
          <td>销售数量</td>
          <td>市场占有率</td>
          <td>销售数量</td>
          <td>市场占有率</td>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>合计</th>
          <th>153,004.0</th>
          <th>100.0</th>
          <th>114,027.1</th>
          <th>100.0</th>
        </tr>
      </tfoot>
      <tbody>	
        <tr>
          <td>Nokia</td>
          <td>44,237.5</td>
          <td>28.9</td>
          <td>39,479.2</td>
          <td>34.6</td>
        </tr>
        <tr>
          <td>Motorola</td>
          <td>25,111.0</td>
          <td>16.4</td>
          <td>16,704.1</td>
          <td>14.7</td>
        </tr>
        <tr>
          <td>Samsung</td>
          <td>19,062.5</td>
          <td>12.5</td>
          <td>12,303.1</td>
          <td>10.8</td>
        </tr>
        <tr>
          <td>Siemens</td>
          <td>12,285.9</td>
          <td>8.0</td>
          <td>8,684.6</td>
          <td>7.6</td>
        </tr>
        <tr>
          <td>Sony Ericson</td>
          <td>8,488.6</td>
          <td>5.6</td>
          <td>5,384.8</td>
          <td>4.7</td>
        </tr>
        <tr>
          <td>LG</td>
          <td>8,109.9</td>
          <td>5.3</td>
          <td>5,571.1</td>
          <td>4.9</td>
        </tr>
        <tr>
          <td>其他</td>
          <td>35,708.5</td>
          <td>23.3</td>
          <td>25,900.3</td>
          <td>22.7</td>
        </tr>
      </tbody>	
    </table>
  </div>

</body>
</html>

在这里插入图片描述

<colgroup>：表格列组

块级元素如果元素的第一个子元素存在且是一个 <col> 元素，而且在它之前没有省略了结束标签的 <colgroup> 元素，元素的开始标签可以被省略。
如果之后没有紧跟一个空格或注释，元素的结束标签可以被省略。

用来定义表中的一组列表。

属性

~~align~~ 已弃用
这个可枚举的属性定义每一列的元素内容的水平对齐方式，支持的值有：
- left，元素中的内容左对齐
- center，元素中的内容居中对齐
- right，元素中的内容右对齐
- justify，插入空格，使元素中内容两端对齐
- char，针对确定的字符，设置一个最小偏移量，来进行布局，通过 char 和 charoff 属性进行定义
此属性的默认值为 left。后代 <col> 元素可以用它们自己的 align 属性值来重写该属性。
不要使用这个属性，它在最新的标准中已经不被支持。
不要为一个 <colgroup> 元素选择器设置 text-align 属性，因为<td> 元素并不是 <colgroup> 元素的后代，不继承于它。
如果表格不使用 colspan 属性，每列用一个 td:nth-child(an+b) 的 CSS 选择器，a 是表格中列的总数，b 是当前列在表格中的位列次序号。只有在这个选择器之后， text-align 属性可以使用。
如果表格使用了 colspan 属性，可以通过合并足够多的属性选择器来实现同样的效果，比如 [colspan=n]，但这不常用。

bgcolor 非标准
这个属性用于定义列组中的每一个列成员的背景颜色。在 sRGB 的定义中，它是一个以 ‘#’ 开头的 6 位 16 进制值，有 16 个预定义的表示颜色的字符串可以使用
不要使用这个并未标准化的属性，在相关的 <td> 标签上使用 background-color 属性。 |

~~char~~ 已弃用
列中的内容与<th> 元素中的字母对齐。通常其值包含一个 (.) 来排列数字或者货币值。如果 align没有被设置为 char，这个属性就会被忽略，尽管它仍将用作该列组成员<col>的 align 的默认值。
不要使用这个属性，在CSS3中，使用 char 属性作为 text-align 属性的值

~~charoff~~ 已弃用
这个属性用来将列数据移到 char 属性指定字母的右边。其值指定了移动的长度。
不要使用这个属性，因为它已经在最新标准中过时。

span 该属性值为一个正整数，表示<colgroup>元素横跨的列数。默认值为 1
此属性应用于列组的属性，它对与其关联的CSS样式规则没有影响，甚至对组中列成员的单元格也没有影响。如果<colgroup>中有一个或多个<col>元素，则不允许使用 span 属性。

~~valign~~ 已弃用
这个属性指定了单元格内文本的垂直对齐方式。这个属性可能有以下值：
- baseline: 将文本置于单元格底部并将其与字母的 baseline 对齐而不是与底部。若字母没有 baseline 以下的部分（即为无降部）那么 baseline 值起到的效果便和 bottom 相同。
- bottom: 将文本置于底部。
- middle: 将文本置于单元格中央。
- top: 将文本置于单元格顶部。
不要试图在给定<colgroup>元素的选择器上设置 vertical-align 属性。因为<td> 元素不是<colgroup>元素的后代，所以它们不会继承它。
如果表不使用 colspan 属性，请使用td:nth-child(an+b) CSS选择器，其中 a 是表中列的总数，b 是列在表中的顺序位置。只有在此选择器之后，才能使用垂直对齐属性。
如果表确实使用了 colspan 属性，则可以通过组合足够的CSS属性选择器（如 [colspan=n]）来实现效果，尽管这并不常用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .batman {
          background-color: #d7d9f2;
        }

        .flash {
          background-color: #ffe8d4;
        }

        caption {
          padding: 8px;
          caption-side: bottom;
        }

        table {
          border-collapse: collapse;
          border: 2px solid rgb(100, 100, 100);
          letter-spacing: 1px;
          font-family: sans-serif;
          font-size: 0.7rem;
        }

        td,
        th {
          border: 1px solid rgb(100, 100, 100);
          padding: 10px 10px;
        }

        td {
          text-align: center;
        }



    </style>

</head>
<body>

  <h4>行列组合</h4>
  <div>
    <table>
      <colgroup span="1" style="width:150px;"></colgroup>
      <colgroup span="2" style="width:250px;"></colgroup>
      <colgroup span="2" style="width:100px;"></colgroup>
      <thead style="background:#003399;color:#FFFFFF;">
        <tr>
          <td>　</td>
          <td>销售数量</td>
          <td>市场占有率</td>
          <td>销售数量</td>
          <td>市场占有率</td>
        </tr>
      </thead>
      <tfoot style="background:#336600;color:#FFFFFF;">
        <tr>
          <th>合计</th>
          <th>153,004.0</th>
          <th>100.0</th>
          <th>114,027.1</th>
          <th>100.0</th>
        </tr>
      </tfoot>
      <tbody style="background:#FFFFCC;">	
        <tr>
          <td>Nokia</td>
          <td>44,237.5</td>
          <td>28.9</td>
          <td>39,479.2</td>
          <td>34.6</td>
        </tr>
        <tr>
          <td>Motorola</td>
          <td>25,111.0</td>
          <td>16.4</td>
          <td>16,704.1</td>
          <td>14.7</td>
        </tr>
        <tr>
          <td>Samsung</td>
          <td>19,062.5</td>
          <td>12.5</td>
          <td>12,303.1</td>
          <td>10.8</td>
        </tr>
        <tr>
          <td>Siemens</td>
          <td>12,285.9</td>
          <td>8.0</td>
          <td>8,684.6</td>
          <td>7.6</td>
        </tr>
        <tr>
          <td>Sony Ericson</td>
          <td>8,488.6</td>
          <td>5.6</td>
          <td>5,384.8</td>
          <td>4.7</td>
        </tr>
        <tr>
          <td>LG</td>
          <td>8,109.9</td>
          <td>5.3</td>
          <td>5,571.1</td>
          <td>4.9</td>
        </tr>
        <tr>
          <td>其他</td>
          <td>35,708.5</td>
          <td>23.3</td>
          <td>25,900.3</td>
          <td>22.7</td>
        </tr>
      </tbody>	
    </table>
  </div>

  <table>
    <caption>
      Superheros and sidekicks
    </caption>
    <colgroup>
      <col />
      <col span="2" class="batman" />
      <col span="2" class="flash" />
    </colgroup>
    <tr>
      <td> </td>
      <th scope="col">Batman</th>
      <th scope="col">Robin</th>
      <th scope="col">The Flash</th>
      <th scope="col">Kid Flash</th>
    </tr>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </table>
  

</body>
</html>

在这里插入图片描述

<data>：提供其自身内容的可读性

<datalist>：HTML 数据列表元素

块级元素遗漏标签不允许，开始标签和结束标签都不能省略。

元素包含了一组 <option> 元素，这些元素表示其他表单控件可选值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>
   
    <h3>指定搜索</h3>
    <form name="myForm" id="myForm" action="search.php" method="post">
        <p>
            <input type="search" name="search" list="mylist" />
            <input type="submit" value="搜索"/>
        </p>
        <datalist id="mylist">
            <option value="HTML5">HTML5</option>
            <option value="JavaScript">JavaScript</option>
            <option value="ActionScript">ActionScript</option>
            <option value="ASPNET">ASP.NET</option>
        </datalist>
    </form>

</body>
</html>

在这里插入图片描述

<dd>：列表元素 (<dl>)的子元素

块级元素必须有开标签。如果该元素后面紧跟着另一个 <dd> 元素，或者父元素中没有更多内容，则可以省略闭标签。

该元素需要出现在 <dt> 元素和 <dd> 元素之后，并且在一个 <dl> 元素里。

属性

nowrap 非标准
如果这个属性的值为 yes，那么定义的描述文字将不会包裹。默认值为 no。

				<dl>
                    <dt>学名</dt>
                    <dd>Selenarctos thibetanus formosanus</dd>
                    <dt>俗名</dt>
                    <dd>狗熊、白喉熊</dd>
                    <dt>分类</dt>
                    <dd>食肉目、熊科</dd>
                    <dt>特征</dt>
                    <dd>体长约130～160厘米，体毛色黑，胸前并有白色Ｖ型斑纹</dd>
                    <dt>分布</dt>
                    <dd>全岛海拔1000～3500米森林地带均有分布</dd>
                </dl>

<del>：从文档中删除的文字内容

行内元素开始标签和结束标签都不能省略。

表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins>标签的作用恰恰于此相反：表示文档中添加的内容。<s> 标签用来显示删除线，代表内容被删除了。

这个标签通常（但不一定要）在文字上显示删除线。

属性

cite 提供一个 URI，其中的资源解释作出修改的原因（比如：根据某次会议讨论）。

datetime 这个属性说明修改的时间和日期，这里的时间和日期格式要符合规范。如果设置的值不符合该规范，那么它将没有任何意义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>JavaScript 精致范例辞典</h1>
    <p>
    不管你是设计动态网页, 或是要用最新的 Ajax 技术, Javascript 都占了相当重要的角色。 但是就算学过 Javascript, 也不一定都会记得各式各样的语法, 因此一本随时可以查阅的范例辞典就非常重要。
    </p>
    <p>
    本书超过 200 个 JavaScript 的精致语法范例, 利用 3 种索引方式， 让你很快查阅到想找的语法。
    </p>
    <p>
    <del>定价：450元</del>
    <ins>优惠价：9折405元</ins>
    </p>

    <p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
    <del><p>This paragraph has been deleted.</p></del>

</body>
</html>

在这里插入图片描述

<details>：详细信息展现元素

<dfn>：标记了被定义的术语

行内元素开始标签和结束标签都不能省略。

标记了被定义的术语；术语定义应当在<p>, <section>或定义列表 (通常是<dt>, <dd> 对) 中给出。

被定义术语的值由下列规则确定：
如果 <dfn> 元素有一个 title 属性，那么该术语的值就是该属性的值。
否则，如果它仅包含一个 <abbr> 元素，该元素拥有 title 属性，那么该术语的值就是该属性的值。
否则，<dfn> 元素的文本内容就是该术语的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>关于网站计分</h1>
    <p>
    什么是 <dfn>PageRank</dfn>？就是Google 给网页的计分机制，通过这个机制 Google 就能决定哪个网页可能比较重要，是人们想要找的。
    </p>
    
    
    <!-- Define "The Internet" -->
    <p>
        <dfn id="def-internet">The Internet</dfn> is a global system of interconnected
        networks that use the Internet Protocol Suite (TCP/IP) to serve billions of
        users worldwide.
    </p>

    <dl>
        <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
        <dt>
          <dfn>
            <abbr title="World-Wide Web">WWW</abbr>
          </dfn>
        </dt>
        <dd>
          The World-Wide Web (WWW) is a system of interlinked hypertext documents
          accessed on <a href="#def-internet">the Internet</a>.
        </dd>
    </dl>
      

</body>
</html>

在这里插入图片描述

<dialog>：对话框元素

<dir>：目录元素，已弃用

<div>：内容划分元素

块级元素开始标签和结束标签都不能省略。

是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

作为一个“纯粹的”容器，<div> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用class或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang 属性）等等。

align 属性已废弃；不要再使用它了。你应当使用 CSS Grid 或 CSS Flexbox 来对齐、定位页面上的 <div> 元素。

<div> 元素应当仅在没有任何其他语义元素（比如 <article> 或 <nav>）可用时使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .shadowbox {
            width: 15em;
            border: 1px solid #333;
            box-shadow: 8px 8px 5px #444;
            padding: 8px 12px;
            background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
        }

    </style>
</head>
<body>
   
    <h1>传统习俗——抓周</h1>
    <div style="padding: 5px; border: 3px solid #ff0000">
        <h3>给婴儿抓周代表什么意思？</h3>
        <p>婴儿代表家族的希望，家族准备许多物品，让婴儿自己去抓那些物品，抓到的物品能预测他未来的发展。</p>
        <p><img src="images/earth.png" alt="抓周" /></p>
    </div>

    <div class="shadowbox">
        <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
    </div>
   
</body>
</html>

在这里插入图片描述

<dl>：包含术语定义以及描述的列表

块级元素开始标签和结束标签都不能省略。

通常用于展示词汇表或者元数据 (键 - 值对列表)。

在 HTML5 之前， <dl> 被大家以定义列表所熟知。

请不要将该元素（也不要用 <ul> 元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。

要改变描述列表中描述的缩进量，请使用 CSS margin 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        dt {font-size: 14pt; font-family: 楷体; color: #800000;}
        dd {font-size: 11pt; font-weight: bold; color: #003300;}

        dt::after {
            content: ": ";
        }

    </style>
</head>
<body>

    <dl>
        <dt>Firefox</dt>
        <dt>Mozilla Firefox</dt>
        <dt>Fx</dt>
        <dd>
          A free, open source, cross-platform, graphical web browser developed by the
          Mozilla Corporation and hundreds of volunteers.
        </dd>
      
        <!-- Other terms and descriptions -->
    </dl>

    <hr>

    <dl>
        <dt>Firefox</dt>
        <dd>
          A free, open source, cross-platform, graphical web browser developed by the
          Mozilla Corporation and hundreds of volunteers.
        </dd>
        <dd>
          The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
          mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
        </dd>
      
        <!-- Other terms and descriptions -->
    </dl>

    <hr>

    <dl>
        <div>
          <dt>Name</dt>
          <dd>Godzilla</dd>
        </div>
        <div>
          <dt>Born</dt>
          <dd>1952</dd>
        </div>
        <div>
          <dt>Birthplace</dt>
          <dd>Japan</dd>
        </div>
        <div>
          <dt>Color</dt>
          <dd>Green</dd>
        </div>
    </dl>
      
    <hr>
    
    <table>
        <tr>
            <td><img src="images/formosanus.JPG" alt="台湾黑熊" /></td>
            <td>
                <h2>台湾黑熊小档案</h2>
                <dl>
                    <dt>学名</dt>
                    <dd>Selenarctos thibetanus formosanus</dd>
                    <dt>俗名</dt>
                    <dd>狗熊、白喉熊</dd>
                    <dt>分类</dt>
                    <dd>食肉目、熊科</dd>
                    <dt>特征</dt>
                    <dd>体长约130～160厘米，体毛色黑，胸前并有白色Ｖ型斑纹</dd>
                    <dt>分布</dt>
                    <dd>全岛海拔1000～3500米森林地带均有分布</dd>
                </dl>
            </td>
        </tr>
        <tr>
            <td><img src="images/formosanus.JPG" alt="台湾黑熊" /></td>
            <td>
                <h2>台湾黑熊小档案</h2>
                <dl>
                    <dt>列入保护的本土珍稀动物</dt>
                    <dd>
        　　            目前，只有在台湾中央山脉隐密的环境及生物生态良好的山区，才有机会见到台湾黑熊踪迹，数量不多，有必要受到严密保护。万一有幸面对黑熊时，应尽量保持冷静，千万别激怒黑熊、装死或爬到树上，最好默默地往反方向走，远离黑熊。万一遭到攻击时，尽量保护头部、腹部等要害，伺机逃离。
                    </dd>
                    <dt>了解黑熊习性，减少冲突</dt>
                    <dd>
        　　            我们在新闻报道中，经常看见外国人在与熊、狗等动物竞技时，造成人类与动物的冲突事件。但在台湾，由于黑熊数量稀少，人与熊之间的冲突自然很少。
                    </dd>
                </dl>
            </td>
        </tr>
    </table>
 
</body>
</html>

在这里插入图片描述

<dt>：在一个定义列表中声明一个术语

块级元素必须有开标签。如果该元素后面紧跟着另一个 <dd> 元素，或者父元素中没有更多内容，则可以省略闭标签。

仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素，然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。

允许的父元素该元素需要出现在 <dt> 元素或者 <dd> 元素之前，并且在 <dl> 元素中。

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

<em>：标记出需要用户着重阅读的内容

行内元素开始标签和结束标签都不能省略。

标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。

通常地，该元素会被浏览器展示为斜体文本，但是，它不应该仅仅用于应用斜体样式；为此目的，请使用 CSS 样式。使用 <cite> 元素标记作品的标题（书籍，戏剧，歌曲等）；它通常也采用斜体样式，但具有不同的含义。使用 <strong> 元素标记比周围文本更重要的文本。

<em> 元素通常被用于指示一个隐式或显式的对比。

<i> vs. <em>
在默认情况下，它们的视觉效果是一样的。但语义是不同的。 <em> 标签表示其内容的着重强调，而 <i> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 <cite>。）

正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是 CSS 样式所做的。

一个 <em> 的例子可能是：“Just do it already!”，或：“We had to do something about it”。人或软件在阅读文本时，会对斜体字的发音使用重读强调。

一个 <i> 的例子可能是：“The Queen Mary sailed last night”。在这里，没有对 “Queen Mary” 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <i> 的例子可能是：“The word the is an article”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>XML声明</h1>
    <p>
    由于XHTML是以XML文件规则为基础的HTML，所以必须在文件内容的顶部（最上方）
    <em>必须加入XML声明</em>
    </p>

    <p>
        In HTML 5, what was previously called <em>block-level</em> content is now
        called <em>flow</em> content.
    </p>
      

</body>
</html>

在这里插入图片描述

<embed>：外部内容嵌入元素

<fieldset>：对表单中的控制元素进行分组（也包括 label 元素）

块级元素开始标签和结束标签都不能省略。

<fieldset> 元素将一个 HTML 表单的一部分组成一组，内置了一个 <legend> 元素作为 fieldset 的标题。这个元素有几个属性，最值得注意的是 form，其可以包含同一页面的 <form> 元素的 id，以使 <fieldset> 成为这个 <form> 的一部分，即使 <fieldset> 不在其内。还有 disabled 属性，可将 <fieldset> 及其所有内容设置为不可用。

属性

disabled 如果设置了这个 bool 值属性，<fieldset> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 <form> 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，<legend> 中的表单元素不会被禁用。

form 将该值设为一个 <form> 元素的 id 属性值以将 <fieldset> 设置成这个 <form> 的一部分。

name 元素分组的名称
fieldset 的标题由第一个 <legend> 子元素确定。

<fieldset> 有几种特别的样式方案。

它的 display 值默认为 block，因此建立了一个块级格式化上下文。如果将 <fieldset> 的 display 值设置为行内级别，则会表现为 inline-block，否则会表现为 block。默认情况下 <fieldset> 会有 2px groove 的边界围绕着内容，还有一个默认的小的内边距，还有 min-inline-size: min-content 。

如果其中有 <legend> 元素，会放在块级框起始处的边界上。<legend> 的宽度会根据内容尽量收缩（shrink-wrap），同时也建立了一个格式化上下文。display 值会块级化（例如 display: inline 表现为 block）。

一个匿名的框会包围 <fieldset> 的内容，这个框继承了 <fieldset> 的一些属性。如果将 <fieldset> 的样式设置为 display: grid 或 display: inline-grid，那么这个匿名框也会是栅格上下文。如果将 <fieldset> 的样式设置为 display: flex 或 display: inline-flex，则匿名框也会是弹性盒上下文。除上述情况之外，匿名框默认建立块级格式化上下文。

你可以以任意方式自行设置 <fieldset> 和 <legend> 的样式以配合你的页面设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   
  <form name="myForm" id="myForm">
    <fieldset>
     您喜欢的休闲活动是<br />
     <select name="listmenu">
      <option value="看电影">看电影</option>
      <option value="听音乐">听音乐</option>
      <option value="郊游踏青">郊游踏青</option>
      <option value="电脑游戏">电脑游戏</option>
     </select> 
    </fieldset>

    <br />

    <fieldset>
    <legend>请选择你喜欢的水果</legend>
     <input type="checkbox" name="myCheck" id="bann" value="香蕉" />
    <label for="bann">香蕉</label>
     <input type="checkbox" name="myCheck" id="app" value="苹果" />
    <label for="app">苹果</label>
     <input type="checkbox" name="myCheck" id="bla" value="芭乐" />
    <label for="bla">芭乐</label>
     <input type="checkbox" name="myCheck" id="wat" value="西瓜" />
    <label for="wat">西瓜</label>
     <input type="checkbox" name="myCheck" id="pin" value="凤梨" />
    <label for="pin">凤梨</label>
    </fieldset>
  </form>

  <form action="#">
    <fieldset disabled>
      <legend>Disabled fieldset</legend>
      <div>
        <label for="name">Name: </label>
        <input type="text" id="name" value="Chris" />
      </div>
      <div>
        <label for="pwd">Archetype: </label>
        <input type="password" id="pwd" value="Wookie" />
      </div>
    </fieldset>
  </form>
  

</body>
</html>

在这里插入图片描述

<figcaption>：是与其相关联的图片的说明/标题

<figure>：可附标题内容元素

块级元素开始标签和结束标签都不能省略。

代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

通常，<figure> 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。

通过在其中插入 <figcaption>（作为第一个或最后一个子元素），可以将标题与 <figure> 元素相关联。图中找到的第一个 <figcaption> 元素显示为图的标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .shadowbox {
            width: 15em;
            border: 1px solid #333;
            box-shadow: 8px 8px 5px #444;
            padding: 8px 12px;
            background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
        }

    </style>
</head>
<body>
   
    <figure>    
        <img src="img/DSC_0948.JPG" alt="花博1" />
        <img src="img/DSC_0954.JPG" alt="花博2" />    
        <figcaption>    
            这是来自花博期间的摄影集    
        </figcaption>    
    </figure>
        
    <figure>    
        <img src="img/DSC_0243.JPG" alt="绿博1" />
        <img src="img/DSC_0319.JPG" alt="绿博2" />    
        <figcaption>    
            来自宜兰绿色博览会的摄影集    
        </figcaption>    
    </figure>    

    <figure>
        <figcaption>使用 <code>navigator</code> 获取浏览器的信息。</figcaption>
        <pre>
            function NavigatorExample() {
                var txt;
                txt = "Browser CodeName: " + navigator.appCodeName + "; ";
                txt+= "Browser Name: " + navigator.appName + "; ";
                txt+= "Browser Version: " + navigator.appVersion  + "; ";
                txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
                txt+= "Platform: " + navigator.platform  + "; ";
                txt+= "User-agent header: " + navigator.userAgent  + "; ";
                console.log("NavigatorExample", txt);
            }   
        </pre>
    </figure>

    <figure>
        <figcaption><b>Edsger Dijkstra:</b></figcaption>
        <blockquote>
          If debugging is the process of removing software bugs, then programming must
          be the process of putting them in.
        </blockquote>
    </figure>

    <figure>
        <p style="white-space:pre">
          Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
          green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
          yet no footing seen: Love is a spirit all compact of fire, Not gross to
          sink, but light, and will aspire.
        </p>
        <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
    </figure>
   
</body>
</html>

在这里插入图片描述

<font>：已弃用

<footer>：最近一个章节内容或者根节点（sectioning root）元素的页脚

<form>：表单，用于向 Web 服务器提交信息

块级元素开始标签和结束标签都不能省略。

可以用 :valid 和 :invalid CSS 伪类来设置元素的样式，此时样式的表现取决于表单中的 elements 是否有效。

属性

accept 已弃用
一个逗号分隔的列表，包括服务器能接受的内容类型。
此属性已在 HTML5 中被移除并且不再被使用。作为替代，可以使用 <input type=file> 元素中的 accept 属性。

accept-charset 一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 “UNKNOWN”。此字符串指的是，和包含此表单元素的文档相同的编码。在之前版本的 HTML 中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只有空格可以允许作为分隔符。

autocapitalize 非标准
这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中，输入/编辑一些文本值时，此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话，那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。默认值为 sentences。可以选择的值如下：
- none：完全禁用自动首字母大写。
- sentences：自动对每句话首字母大写。
- words：自动对每个单词首字母大写。
- characters：自动大写所有的字母。

autocomplete 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。可能的值有：
- off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见自动填充属性和登录）
- on：浏览器可自动补全条目

name 表单的名称。HTML 4 中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。

rel 根据 value 创建一个超链接或注释。

action 处理表单提交的 URL。这个值可被 <button>、<input type=“submit”> 或 <input type=“image”> 元素上的 formaction 属性覆盖。

enctype 当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型。可能的取值有：
- application/x-www-form-urlencoded：未指定属性时的默认值。
- multipart/form-data：当表单包含 type=file 的 <input> 元素时使用此值。
- text/plain：出现于 HTML5，用于调试。这个值可被 <button>、<input type=“submit”> 或 <input type=“image”> 元素上的 formenctype 属性覆盖。

method 浏览器使用这种 HTTP 方式来提交表单。可能的值有：
- post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
- get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符，没有副作用时使用这个方法。
- dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。此值可以被 <button>、<input type=“submit”> 或 <input type=“image”> 元素中的 formmethod 属性覆盖。

novalidate 此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 <button>、<input type=“submit”> 或 <input type=“image”> 元素中的 formnovalidate 属性覆盖。

target 表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：
- _self：默认值。在相同浏览上下文中加载。
- _blank：在新的未命名的浏览上下文中加载。
- _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
- _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。此值可以被 <button>、<input type=“submit”> 或 <input type=“image”> 元素中的 formtarget 属性覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>
   
    <form method="post" action="program.php">
        <p><input src="images/mars.jpg" name="pic" type="image" alt="可爱的机车" /></p>
    </form>

    <form action="" method="get" class="form-example">
        <div class="form-example">
          <label for="name">Enter your name: </label>
          <input type="text" name="name" id="name" required />
        </div>
        <div class="form-example">
          <label for="email">Enter your email: </label>
          <input type="email" name="email" id="email" required />
        </div>
        <div class="form-example">
          <input type="submit" value="Subscribe!" />
        </div>
    </form>

    <form name="myForm" id="myForm" action="mailto:abc@test.com" method="post">
      您的大名:<input type="text" name="user" /><br />
      您的意见:<textarea rows="3" name="message" cols="40"></textarea><br />
      <input type="submit" value="发送邮件" />
    </form>

    <!-- Form which will send a GET request to the current URL -->
    <form>
      <label
        >Name:
        <input name="submitted-name" autocomplete="name" />
      </label>
      <button>Save</button>
    </form>

    <!-- Form which will send a POST request to the current URL -->
    <form method="post">
      <label
        >Name:
        <input name="submitted-name" autocomplete="name" />
      </label>
      <button>Save</button>
    </form>

    <!-- Form with fieldset, legend, and label -->
    <form method="post">
      <fieldset>
        <legend>Title</legend>
        <label><input type="radio" name="radio" /> Select me</label>
      </fieldset>
    </form>


</body>
</html>

在这里插入图片描述

<frame>：已弃用

<frameset>：已弃用

<h1> – <h6>：HTML 区域标题元素

块级元素开始标签和结束标签都不能省略。

呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

不要把它作为 <hgroup> 元素的子元素，这种做法已经被废弃了。

align 属性已废弃；不要继续使用它。

不要为了减小标题的字体而使用低级别的标题，而是使用 CSS font-size 属性。

避免跳过某级标题：始终要从 <h1> 开始，接下来依次使用 <h2> 等等。

标题可以嵌套其小节，以反映页面的结构。

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="gb2312"/>
<title>hn元素标签</title>
</head>
<body>

<h1>如何建立HTML网页文件</h1>
<h3>标签、元素、属性与属性值</h3>
<p>一个正确的HTML标签至少必须 ～略～ 标签内容就构成一个完整的HTML语句</p>
<h3>特殊符号的使用</h3>
<p>“＜”、“＞”是用来包括元素成为标签的 ～略～ 体参照与数值实体参照两种</p>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

</body>
</html>

在这里插入图片描述

<head>：规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等

块级元素开始标签和结束标签都不能省略。

至少包含一个<title> 元素来指定文档的标题信息，除非标题已经从更高等级协议中指定（<iframe> ）。

允许父元素 <html> 元素

如果在文档中忽略了 <head> 标签，则大部分浏览器会自动创建一个 <head> 元素。

属性

profile 已弃用
一个由空格分隔的 URL 列表，这些 URL 包含着有关页面的配置信息。

<html>
  <head>
    <title>文档标题</title>
  </head>
</html>

<header>：展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素

<hgroup>：代表文档标题和与标题相关联的内容

块级元素开始标签和结束标签都不能省略。

将一个 <h1>–<h6> 元素与一个或多个 <p> 元素组合在一起。

<hgroup> 元素允许将一个标题与任意次要内容（例如子标题、副标题或口号）组合在一起。在 <hgroup> 中，这些类型的内容也表示为 <p> 元素。

<hgroup> 本身对网页的的文档大纲没有任何影响。而 <hgroup> 中所允许的单个标题则会被用于文档大纲。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>
   
 
    <hgroup id="document-title">
        <h1>HTML：现行标准</h1>
        <p>更新于 2022 年 7 月 12 日</p>
    </hgroup>
    <p>文档的介绍。</p>
    <h2>目录</h2>
    <ol id="toc">
        …
    </ol>
    <h2>第一节</h2>
    <p>第一节的介绍。</p>
    
</body>
</html>

在这里插入图片描述

<hr>：主题分割（水平分割线）元素

块级元素必须有开始标签，不能有结束标签。

表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。

在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但它目前被定义为是语义上而非表现层面上的术语。所以如果想画一条水平线，请使用适当的 CSS 样式来实现。

属性

align 已弃用非标准
设置页面上分割线的对齐方式。如果没有指定任何值，默认值为 left。

color 非标准非标准
使用颜色名或十六进制设置分割线的颜色。

noshade 已弃用非标准
令分割线不包含阴影。

size 已弃用非标准
设置分割线高度的像素值。

width 已弃用非标准
使用像素或者百分比设置分割线的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <p>
        快乐的渔人码头亲子旅游
    </p>
    <hr />
    <p><img src="images/dinosaur.jpg" alt="亲子旅游" /></p>
    <hr />
      
    <p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>

    <hr />

    <p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

</body>
</html>

在这里插入图片描述

<html>：HTML 文档/根元素

<i>：术语文本元素

行内元素开始标签和结束标签都不能省略。

用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

在较早版本的 HTML 技术参数声明中，<i> 标签只是一个用于将文本显示为斜体的表示性元素，很像 <b> 标签被用来将文本显示为粗体。情况不再是这样了，因为这些标签现在定义了更多的语义而不只是排版外观。<i> 标签应表现一系列带有不同语义的文本，它的典型样式显示为斜体。这意味着浏览器通常任会将内容显示为斜体，但是，根据定义，不再是必须的。

该元素只在没有更适合的语义元素表示时使用。例如：

使用 <em> 表示强调或重读。
使用 <strong> 表示重要性。
使用 <mark> 表示相关性。
使用 <cite> 标记著作名，如一本书、剧本或是一首歌。
使用 <dfn> 标记术语的定义实例。

使用 class 属性用来识别为何使用该元素是一个很好的办法，这样的话，如果该表示以后需要改变，就可以有选择性地改变样式表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h2>展望未来</h2>
    <p>
    尽管写了几本<i>计算机教程</i>，还算是个写手吧！但是，深藏在内心的那个梦依然存在，这个梦就是出版一本<i style="color:#F0F">“散文集” </i>，梦会不会成真没个定论，不过网络是个筑梦的好地方，一点也不必在乎会不会开花结果，所以从现在开始，只要微风吹过，我就会把湖面上的粼粼波光一点一滴地记录下来与您共赏。
    </p>
</body>
</html>

在这里插入图片描述

<iframe>：内联框架元素，能够将另一个 HTML 页面嵌入到当前页面中

<image>：图像元素，已弃用

<img>：图像嵌入元素

<input>：输入（表单输入）元素

行内元素必须有开始标签，不可以有结束标签。

用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

<input> 的工作方式相当程度上取决于 type 属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。

可用的值包括：

类型	描述
button	没有默认行为的按钮，上面显示 value 属性的值，默认为空。
checkbox	复选框，可将其值设为选中或未选中
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
~~datetime~~	已弃用用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email	编辑邮箱地址的字段。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘。
file	让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。
hidden	不显示的控件，其值仍会提交到服务器。
image	图形化 submit 按钮。显示的图像由 src 属性决定。如果 src 属性缺失，就会显示 alt 的内容。
month	输入年和月的控件，没有时区。
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio	单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定可接受值的范围。
reset	此按钮将表单的所有内容重置为默认值。不推荐使用该类型。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
submit	用于提交表单的按钮。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text	默认值。单行的文本字段，输入值中的换行会被自动去除。
time	用于输入时间的控件，不包括时区。
url	用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
week	用于输入以年和周数组成的日期，不带时区。

属性
<input> 元素由于拥有诸多属性而异常强大，大部分属性只作用于特定一组 type。此外，一些属性作用于 <input> 的方式取决于 <input> 的 type 属性，不同的 type 有不同的效果。

属性	类型	描述
accept	file	文件上传控件中预期文件类型的提示
alt	image	图片类型的 alt 属性。对无障碍是必需的
autocomplete	除了 checkbox、radio 和按钮以外	表单自动填充特性提示
capture	file	文件上传控件中媒体捕获方法的提示
checked	checkbox、radio	控件是否选中
dirname	search、text	表单字段的名称，用于在提交表单时发送元素的方向性
disabled	所有类型	表单控件是否禁用
form	所有类型	将控件联系到表单元素中
formaction	image、submit	要提交表单的 URL 地址
formenctype	image、submit	提交表单时使用的表单数据编码类型
formmethod	image、submit	提交表单时所使用的 HTTP 方法
formnovalidate	image、submit	绕过表单提交时的表单控件验证
formtarget	image、submit	提交表单时的浏览上下文
height	image	与 <img> 元素的 height 属性有相同含义，垂直方向上的维度值
list	除了 hidden、password、checkbox、radio 和按钮以外	自动完成选项的 <datalist> 的 id 属性的值
max	date、month、week、time、datetime-local、number、range	最大值
maxlength	text、search、url、tel、email、password	value 的最大长度（字符数）
min	date、month、week、time、datetime-local、number、range	最小值
minlength	text、search、url、tel、email、password	value 的最小长度（字符数）
multiple	email、file	布尔值。是否允许多个值
name	所有类型	表单的控件名称，作为键值对的一部分与表单一同提交
pattern	text、search、url、tel、email、password	为了使得 value 有效，必须符合的模式
placeholder	text、search、url、tel、email、password、number	当没有值设定时，出现在表单控件上的文字
readonly	除了 hidden、range、color、checkbox、radio 和按钮以外	布尔值。如果存在，其中的值将不可编辑。
required	除了 hidden、range、color 和按钮以外	布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。
size	text、search、url、tel、email、password	控件的尺寸
src	image	与 <img> 元素的 src 属性含义相同，图片资源的地址
step	date、month、week、time、datetime-local、number、range	有效的增量值
type	所有类型	表单控件的类型
value	所有类型	表单控件的初始值
width	image	与 <img> 元素的 width 属性含义相同

属性各论

accept 仅对 file 输入类型有效。accept 属性定义了 file 上传控件可选择文件类型的列表。参见 file 输入类型以了解更多信息。

alt 仅对 image 类型有效。alt 属性提供了图片的替代文字，在图片的 src 属性缺失或对应资源加载失败时，会显示该属性的值。参见 image 输入类型以了解更多信息。

autocomplete （不是一个布尔属性！）autocomplete 属性将一个空格分隔的字符串作为其值，描述输入应该提供什么类型的自动完成功能。

autofocus 一个布尔属性，如果存在，表示当页面加载完毕（或包含该元素的 <dialog> 显示完毕）时，该 input 元素应该自动拥有焦点。
文档中只有一个表单元素可以具有 autofocus 属性。如果放置了多于一个元素，会聚焦第一个具有该属性的元素。
autofocus 不能应用于类型为 hidden 的输入控件上，因为隐藏的控件不可聚焦。

capture 在 HTML 媒体捕获规范中引入，仅对 file 输入类型有效，capture 属性定义了应该使用哪种媒体（如麦克风、视频或相机）来捕获一个新文件，以便在支持场景中用 file 上传控件上传。参见 file 输入类型。

checked 布尔属性，对于 radio 和 checkbox 类型有效。如果在 radio 类型上出现，代表该单选按钮是当前同名称组中所选定的那一个。如果在 checkbox 类型上出现，代表页面加载时，默认选择该复选框，这并不代表复选框当前是否选择：如果复选框状态改变，该内容属性不会反馈这种改变，只会更新

dirname 仅对 text 和 search 输入类型有效。dirname 属性允许提交元素的方向。当包含这个属性时，表单控件将提交两个名称/值对：第一个是 name 和 value，第二个是 dirname 作为名称，其值为浏览器设置的 ltr 或 rtl。

disabled 一个布尔属性，如果存在的话，表示用户不应该与该输入进行交互。禁用的输入通常以较暗的颜色呈现，或使用一些其他形式的指示，表明该字段不能使用。
具体来说，禁用的输入不会接收 click 事件，而且禁用的输入不会随表单提交。

form 一个字符串，指定该输入与之相关的 <form> 元素（即其表单所有者）。如果存在该属性，该字符串的值必须与相同文档中的 <form> 元素的 id 相同。如果没有指定该属性，该 <input> 元素与最近包含它的表单相关。
form 属性可以让你在文档的任何地方放置一个输入控件，但在文档的其他地方包含一个表单。
一个输入只能与一个表单相关。

formaction 仅对 image 和 submit 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

formenctype 仅对 image 和 submit 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

formmethod 仅对 image 和 submit 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

formnovalidate 仅对 image 和 submit 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

formtarget 仅对 image 和 submit 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

height 仅对 image 输入按钮有效。height 是要显示代表图形提交按钮的图片的高度。参见 image。

id 全局属性对所有元素有效，包括所有的输入类型，它定义了一个唯一的标识符（ID），在整个文档中必须是唯一的。其目的是为了在链接时识别该元素。该值被用作 <label> 的 for 属性的值，以便将标签与表单控件连接起来。参见 <label>。

inputmode 对所有元素都有效的全局值，它为浏览器提供了一个提示，说明在编辑这个元素或其内容时要使用的虚拟键盘配置类型。值包括 none、text、tel、url、email、numeric、decimal 和 search。

list 给予 list 属性的值应该是位于同一文档中的 <datalist> 元素的 id 。<datalist> 提供了一个预定义值的列表，向用户建议这个输入。列表中任何与type不兼容的值都不包括在建议的选项中。所提供的值是建议，不是要求：用户可以从这个预定义的列表中选择，或者提供不同的值。
在 text、search、url、tel、email、date、month、week、time、datetime-local、number、range 和 color 上均有效。根据规范，hidden、password、checkbox、radio、file 或任何按钮类型不支持 list 属性。

max 对 date、month、week、time、datetime-local、number 和 range 输入类型有效，定义了允许值范围内的最大值。如果输入到元素中的 value 超过此值，则该元素将无法通过约束验证。如果 max 属性的值不是数字，则元素没有最大值。
如果数据类型是周期性的（如日期或时间），max 的值可能低于 min 的值，这表明范围可以环绕；例如，这允许你指定一个从晚上 10 点到凌晨 4 点的时间范围。

maxlength 对 text、search、url、tel、email 和 password 类型有效。它定义了用户可以输入到该字段中的最大字符数（以 UTF-16 码点为单位）。必须为大于等于 0 的整数。如果未指定 maxlength 或指定了无效的值，则该字段将没有最大值。这个值也必须大于等于 minlength 的值。
如果文本框中的字符数大于 maxlength UTF-16 编码单元长度，则输入将无法通过约束验证。默认情况下，浏览器将阻止用户输入超过 maxlength 属性所指定的值的字符。

min 对 date、month、week、time、datetime-local、number 和 range 输入类型有效，定义了允许值范围内的最小值。如果输入到元素的 value 小于此值，则该元素将无法通过约束验证。如果 min 指定的值不是数字，则输入没有最小值。
该值必须小于或等于 max 属性的值。如果 min 属性存在但没有指定或无效，则不应用 min 值。如果 min 属性有效，并且非空值小于 min 属性所允许的最小值，约束验证将阻止表单提交。
果数据类型是周期性的（如日期或时间），min 的值可能高于 max 的值，这表明范围可以环绕；例如，这允许你指定一个从晚上 10 点到凌晨 4 点的时间范围。

minlength 对 text、search、url、tel、email 和 password 类型有效。它定义了用户可以输入到该字段中的最小字符数（以 UTF-16 码点为单位）。该值必须是小于等于 maxlength 指定的值的非负整数值。如果未指定 minlength 或指定了无效的值，则该字段将没有最小值。
如果输入字段的文本长度小于 minlength UTF-16 代码单元的长度，输入将无法通过约束验证，阻止表单提交。

multiple 如果设置了布尔值 multiple 属性，意味着用户可以在电子邮件部件中输入逗号分隔的电子邮件地址，或者可以通过 file 输入选择多个文件。参见 email 和 file 输入类型。

name 一个指定输入控件名称的字符串。当表单数据被提交时，这个名字会和控件的值一起提交。
通常把 name 看作是一个必需的属性（即使它不是）。如果一个输入没有指定 name，或者 name 是空的，那么这个输入的值就不会和表单一起提交！禁用的控件、未选中的单选按钮、未选中的复选框和重置按钮也不会被发送。如果一个输入元素具有 name，该名称成为包含它的表单元素的 HTMLFormElement.elements 属性。
charset：如果被用作 hidden 类型的 <input> 元素的名称，该输入的 value 会被用户代理自动设置为提交表单时使用的字符编码。
isindex：由于历史原因，不允许使用 isindex 这个名字。

pattern 对 text、search、url、tel、email 和 password 类型有效。为了使 value 通过约束验证，必须满足 pattern 属性给定的正则表达式。它必须是 RegExp 类型的有效 JavaScript 正则表达式，并且已在我们的正则表达式指南中进行了说明；在编译正则表达式时指定了 ‘u’ 标志，因此该模式被视为 Unicode 代码点的序列，而不是 ASCII。模式文本周围无需指定正斜杠。
如果 pattern 属性存在，但是未指定模式或无效，则不应用任何正则表达式，并且将完全忽略此属性。如果模式属性是有效的，并且该非空值与模式不匹配，约束验证将阻止表单提交。
如果使用了 pattern 属性，要在附近告知用户所期望的输入格式。你可以包含 title 属性来解释满足模式的需求说明，大多数浏览器将它们显示为工具提示（tooltip）。

placeholder 对 text、search、url、tel、email、password 和 number 有效。placeholder 属性可向用户提供有关该字段中需要什么样的信息的简短提示。它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。文本中不得包含回车符或换行符。例如，某个字段需要收集用户的姓氏，其标签为“First Name”，一个适合的占位文字可能是“如 Mustafa”。

readonly 一个布尔属性，如果存在，则表示该字段不能由用户编辑。readonly 属性支持 text、search、url、tel、email、date、month、week、time、datetime-local、number 和 password 输入类型。

required required 是一个布尔属性，如果存在，则表示用户必须在提交表单之前指定一个非空值。required 属性支持 text、search、url、tel、email、date、month、week、time、datetime-local、number、password、checkbox、radio 和 file 输入类型。

size 对 email、password、tel、url 和 text 有效。size 属性指示显示输入控件的多少。基本上创建了与设置 CSS width属性相同的结果，但有一些特殊性，值的具体单位取决于输入类型。对于 password 和 text，它是字符数量（或 em 单位大小），默认值是 20。对于其他情况，是像素值（或 px 单位大小）。CSS width 的优先级会高于 size 属性。

src 仅对 image 输入按钮有效。指定将要在提交按钮上显示的图像的 URL。

step
对 date、month、week、time、datetime-local、number 和 range 输入类型有效。step 属性指定了值必须满足的粒度。
如果没有明确包含它：step 对于类型为 number 和 range 的默认值为 1。每一种日期/事件输入类型有一个适合的默认 step 值。
值必须为一个正数（整数或小数）或特殊值 any（意味着不指定任何步进值，任意值都可以接受（除其他制约因素如 min 或 max 之外））。
如果没有明确设置 any，number、日期/时间输入类型和 range 输入类型的有效值等于步进的基础——min值和步进值的增量，如果指定的话，最高为max值。
当用户输入的数据不符合步进配置时，该值在约束验证中被认为是无效的，将匹配 :invalid 伪类。

tabindex 对所有元素有效的全局属性，包括所有的输入类型，是一个整数属性，表示该元素如果参与顺序键盘导航，是否可以接受输入焦点（可聚焦）。由于除了隐藏类型的输入外，所有的输入类型都是可聚焦的，这个属性不应该用在表单控件上，因为这样做需要管理文档中所有元素的聚焦顺序，如果设置错误，就有可能损害可用性和无障碍性。

title 对所有元素有效的全局属性，包括所有的输入类型，包含一个代表与它所属的元素相关的咨询信息的文本。这样的信息通常以工具提示的形式呈现给用户（但不必要）。标题不应作为表单控件用途的主要解释。相反，可以使用 <label> 元素，其 for 属性设置为表单控件的 id 属性。

type 一个字符串，指定要渲染的控件的类型。例如，要创建一个复选框，使用 checkbox 的值。如果省略（或指定一个未知值），则使用输入类型 text，创建一个纯文本输入字段。

value 输入控件的值。当在 HTML 中指定时，这是初始值。从那时起，它可以在任何时候用 JavaScript 访问相应的 HTMLInputElement 对象的 value 属性，用于改变或检索。value 属性总是可选的，不过对于 checkbox 、radio 和hidden 来说，应该被认为是必须的。

width 仅对 image 输入按钮有效。width 是呈现在图片提交按钮上的图片宽度。

autocorrect 非标准仅 Safari 适用
一个字符串，表示是否在用户编辑该字段时激活自动更正。允许的值为：
- on 启用自动更正，如果配置了文字替换，则一同处理它们。
- off 禁用自动更正和文字替换。

incremental 非标准 WebKit 和 Blink 适用（Safari、Chrome、Opera 等）
布尔属性 incremental 是 WebKit 和 Blink 的扩展（所以 Safari、Opera、Chrome 等都支持），如果存在的话，就会告诉用户代理将输入作为实时搜索处理。当用户编辑该字段的值时，用户代理将 search (en-US) 事件发送到代表搜索框的 HTMLInputElement 对象。这使得你的代码能够在用户编辑搜索时实时更新搜索结果。
如果没有指定 incremental 属性，则仅当用户明确发起搜索（如按下键盘上 Enter 或 Return）时，才会发送 search (en-US) 事件。
search 事件是限速的，因此它的发送频率不会超过实施定义的间隔。

mozactionhint 非标准已弃用，请使用 enterkeyhint 替代。
当用户在编辑字段时按下键盘的 Enter 或 Return 键时，所需要进行的动作的字符串表示，这用于决定虚拟键盘上那个键的合适的标签。

orient 非标准仅 Firefox 适用。
类似于影响 <progress> 和 <meter> 元素的非标准 CSS 属性 -moz-orient，orient 属性定义范围滑块的方向。值包括 horizontal，代表范围滑块水平呈现；和 vertical，代表范围滑块垂直呈现。

results 非标准仅 Safari 适用。
results 属性是一个数值，可以让你覆盖 <input> 元素原生提供的先前搜索查询下拉菜单中显示的最大条目数。
该值必须是一个非负的十进制数字。如果没有提供，或者提供了一个无效的值，则使用浏览器的默认最大条目数。

webkitdirectory 非标准
布尔属性 webkitdirectory 如果存在，表示在文件选取界面中，只有目录可供用户选择。
虽然最初只为基于 WebKit 的浏览器实现，但 webkitdirectory 也可以在 Microsoft Edge 以及 Firefox 50 和更高版本中使用。然而，尽管它有相对广泛的支持，它仍然不是标准的，除非你没有其他选择，否则不应该使用。

方法
以下方法由 DOM 中代表 <input> 元素的 HTMLInputElement 接口提供。还有一些方法是由父接口 HTMLElement、Element、Node 和 EventTarget 提供的。

方法	描述
checkValidity()	如果元素的值通过了有效性检查，返回 true；否则，返回 false 并在该元素上触发 invalid 事件。
reportValidity()	如果元素的值通过了有效性检查，返回 true；否则，返回 false 并在该元素上触发 invalid 事件，如果事件没有取消，将问题报告给用户。
select()	如果 <input> 元素中的内容可选择，则选择其中的全部内容。对于没有可供选择的文字内容的元素（如可视化颜色选择器或日历日期输入），这个方法不做任何事情。
setCustomValidity()	如果输入元素的值不合法，设置显示的自定义信息。
setRangeText()	将输入元素中指定的字符范围的内容设置为一个给定的字符串。selectMode 参数可以控制现有内容如何被影响。
setSelectionRange()	在一个文本输入元素中选择指定的字符范围。对不以文本输入字段形式出现的输入没有任何作用。
stepDown()	默认情况下，将一个数字输入的值减少 1，或减少指定的单位数量。
stepUp()	默认情况下，将一个数字输入的值增加 1，或增加指定的单位数量。

CSS
输入元素作为被替换的元素，有一些功能不适用于非表单元素。有一些 CSS 选择器可以根据表单控件的 UI 特征专门针对它们，也被称为 UI 伪类。输入元素也可以用属性选择器按类型定位。有一些属性也是特别有用的。

伪类	描述
:enabled	任何当前启用的元素，可以被激活（选择、点击、输入等）或接受焦点；也有一个禁用状态，在这个状态下，它不能被激活或接受焦点。
:disabled	任何当前禁用的元素都有一个启用的状态，这意味着如果它没有被禁用，它可以被激活（选择、点击、输入等等）或接受焦点。
:read-only	不能被用户编辑的元素。
:read-write	可以被用户编辑的元素。
:placeholder-shown	当前显示 placeholder 文字的元素，包括有 placeholder 显示，尚未拥有值的 <input> 和 <textarea> 元素。
:default	在一组相关元素中属于默认的表单元素。匹配 checkbox 和 radio 在页面加载或渲染时被选中的输入类型。
:checked	匹配当前被选中的 checkbox 和 radio 输入类型（以及当前被选中的 <select> 中的 <option>）。
:indeterminate	indeterminate 属性被 JavaScript 设置为真的 checkbox 元素，表单中所有具有相同名称值的单选按钮被取消选中的 radio 元素，以及处于不确定状态的 <progress> 元素。
:valid	可以应用约束验证的表单控件，并且当前是有效的。
:invalid	应用了约束条件验证的表单控件，并且当前是无效的。匹配一个表单控件，它的值与它的属性设置的约束条件不一致，如 required、pattern、step 和 max。
:in-range	一个非空的输入，其当前值在 min 和 max 属性以及 step 指定的范围限制内。
:out-of-range	一个非空的输入，其当前值不在 min 和 max 属性以及 step 指定的范围限制内。
:required	有 required 属性设置的 <input>、<select> 或 <textarea> 元素。只匹配可以被 required 的元素，不匹配不能被 required 的元素。
:optional	没有 required 属性设置的 <input>、<select> 或 <textarea> 元素。只匹配可以被 required 的元素，不匹配不能被 required 的元素。
:blank	没有值的 <input> 和 <textarea> 元素。
:user-invalid	与 :invalid 相似，但是在失焦的情况下激活。匹配无效的输入，但只在用户交互之后，例如关注该控件、离开该控件或试图提交包含无效控件的表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        input:checked + label {
          color: red;
          font-weight: bold;
        }

        /* 属性选择器 */

        /* 匹配密码输入 */
        input[type="password"] {


          background-color: blue;
        }
        /* 匹配合法值限制在一个范围内的表单控件 */
        input[min][max] {

          margin-left: 20px;

        }

        /* 匹配含有 pattern 属性的表单控件 */
        input[pattern] {
        
          color: brown;
        }


        /* 只有适用于 ::first-line 伪元素的 CSS 属性子集可以在选择器中使用 ::placeholder 的规则。 */
        ::placeholder{

          color: blue;
        }

        /*  使 <div> 看起来像一个单选按钮 */
        /* 设置 appearance: none 移除了平台原生的边框，但没有移除其功能。 */
        div {
          appearance: radio;
        }

        /* 使一个单选看起来像一个复选框 */
        input[type="radio"] {
          appearance: checkbox;
        }

        /* caret-color 设置用于绘制文本输入光标的颜色 */
        input.custom {
          caret-color: red;
          font:
            16px "Helvetica",
            "Arial",
            "sans-serif";
        }



    </style>

</head>
<body>
   
  <!-- 通用按钮 -->
  <h3>项目导航</h3>
  <form name="myForm" action="test.php">
    <input type="button" value="上一页" onClick="history.go(-1)" />
    <input type="button" value="下一页" onClick="history.go(1)" />
    <input type="button" value="前往" onClick="window.open('http://www.baidu.com')" />
  </form>

  <!-- 复选框 -->
  <form name="myForm" id="myForm">
    请选择你喜欢的水果: <br>
    <input type="checkbox" name="myCheck" value="香蕉" /><label>香蕉</label>
    <input type="checkbox" name="myCheck" value="苹果" />苹果
    <input type="checkbox" name="myCheck" value="芭乐" />芭乐
    <input type="checkbox" name="myCheck" value="西瓜" />西瓜
    <input type="checkbox" name="myCheck" value="凤梨" />凤梨
  </form>

  <!-- 颜色选择 -->
  <h3>颜色选择字段</h3>
    <form name="myForm" id="myForm" action="form.php" method="post">
      <p>请选择您最喜欢的颜色
    <input type="color" name="cl" />
    </p>
  </form>

  <!-- 日期输入 -->
  <h3>日期输入字段</h3>
  <form name="myForm" id="myForm" action="form.php" method="post">
    <p>预定送达日期
      <input type="date" name="sd" />
    </p>
    <p>实际送达日期
      <input type="date" name="dd" />
    </p>
  </form>

  <!-- 日期时间输入 -->
  <h3>日期时间输入字段</h3>
  <form name="myForm" id="myForm" action="form.php" method="post">
    <p>UTC 时间
      <input type="datetime" name="utctime" />
    </p>
    <p>本地时间
      <input type="datetime-local" name="localtime" />
    </p>
  </form>

  <!-- 电子邮箱输入 -->
  <h3>订阅电子报请输入电子邮箱</h3>
  <form name="myForm" id="myForm" action="email.php" method="post">
    <p>Email
      <input type="email" name="email" />
      <input type="submit" value="订阅"/>
     </p>
  </form>

  <!-- 文件选择 -->
  <h3>上传图片文件</h3>
  <form name="myForm" id="myForm" enctype='multipart/form-data'>
    <input type="file" name="upfile[]" multiple  accept="image/gif" />
  </form>

  <!-- 隐藏域 -->
  <h3>请选择您喜爱的音乐类型</h3>
  <form name="myForm" action="post.php">
    <input type="hidden" name="music_type" value="ask3" />
    <input type="checkbox" name="music" value="摇滚" />摇滚
    <input type="checkbox" name="music" value="爵士" />爵士
    <input type="checkbox" name="music" value="古典" />古典
  </form>

  <!-- 图片式表单资料发送按钮 -->
  <h3>欢迎您来信批评指教</h3>
  <form name="myForm" action="mailto:test@abc.com">
    您的大名:<input type="text" name="user" /><br />
    您的意见:<textarea rows="3" name="message" cols="40"></textarea>
    <br /><br />
    <input type="reset" value="重新填写" />
    <input type="image" src="images/submit.gif" alt="发送"  />
  </form>

  <!-- 月份输入 -->
  <h3>月份输入字段</h3>
  <form name="myForm" id="myForm" action="form.php" method="post">
   <p>请选择月份
   <input type="month" name="sm" />
   </p>
  </form>


  <!-- 数值输入 -->
  <h3>数值输入字段</h3>
  <form name="myForm" id="myForm" action="form.php" method="post">
   <p>请选择购买数量
    <input type="number" name="num" step="3" />
   </p>
  </form>

  <!-- 密码输入 -->
  <h3>会员专区</h3>
  <form name="myForm" id="myForm" action="login.php" method="post">
    <p>帐号
      <input type="text" name="user" />
    </p>
    <p>密码
      <input type="password" name="password" pattern="[0-9]{5}" />
      <input type="submit" value="登录"/>
    </p>
  </form>

  <!-- 单选按钮 -->
  请问你的血型是哪一种？<br />
  <input type="radio" name="myRadio" value="A" />A<br />
  <input type="radio" name="myRadio" value="B" />B<br />
  <input type="radio" name="myRadio" value="AB" />AB<br />
  <input type="radio" name="myRadio" value="O" />O<br />

  <!-- 范围输入 -->
  <h3>范围输入字段</h3>
  <form name="myForm" id="myForm" action="form.php" method="post">
    <p>请选择购买数量(5～20)
      <input type="range" name="num" value="10" max="20" min="5" />
    </p>
  </form>

  <!-- 表单重置 -->
  <h3>您的来信是我们的荣幸</h3>
  <form name="myForm" action="mailto:test@abc.com">
    您的大名:<input type="text" name="user" /><br />
    您的意见:<textarea rows="3" name="message" cols="40"></textarea>
    <br /><br />
    <input type="submit" value="发送意见" />
    <input type="reset" value="重新填写" />
  </form>

  <!-- 搜索关键词输入 -->
  <h3>全文搜索</h3>
  <form name="myForm" id="myForm" action="search.php" method="post">
    <p>
      <input type="search" name="search" placeholder="请输入关键词" />
      <input type="submit" value="搜索"/>
    </p>
  </form>

  <!-- 表单发送 -->
  <form method="post" id="myForm">
    <h3>未使用 value 属性</h3>
    <p>
      <input type="submit" />
    </p>
    <h3>利用 value 属性按钮上的标题文字</h3> 
    <p>
      <input type="submit" value="确定" />
    </p>
    <p>
      <input type="submit"  value="已经填写完毕，发送资料" />
     </p>
 </form>

 <!-- 电话输入 -->
 <h3>请输入身份验证资料</h3>
 <form name="myForm" id="myForm" action="tel.php" method="post">
  <p>您的电话
    <input type="tel" name="tel" value="123456789" placeholder="请输入手机号码" />
    <input type="submit" value="验证"/>
  </p>
</form>

<!-- 单行文本输入 -->
<h3>单行文本输入字段</h3>
<form name="myForm" id="myForm" action="mailto:abc@test.com" method="post">
  <p>您的大名：
    <input type="text" name="user" />
  </p> 
  <p>通信地址：
    <input type="text" name="address" value="请输入地址" maxlength="100" size="50"/>
  </p>
</form>

<form action="page.html" method="post">
  <label
    >水果：
    <input type="text" name="fruit" dirname="fruit.dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit.dir=ltr -->
<!-- 当提交上述表单时，会发送 name / value 对 fruit=cherry 和 dirname / 方向对 fruit.dir=ltr。 -->

<!-- 绘制文本输入光标的颜色 -->
<label for="textInput">请注意红色光标：</label>
<input id="textInput" class="custom" size="32" />

<!-- 非无障碍的 提示和 <input> 元素没有关系 -->
<p>输入你的名字：<input id="name" type="text" size="30" /></p>

<!-- 尽可能不要使用 placeholder 属性。如果需要标记 <input> 元素，请使用 <label> 元素。 -->
<!-- 隐式标签 -->
<p>
  <label>输入你的名字：<input id="name" type="text" size="30" /></label>
</p>

<!-- 显式标签 -->
<p>
  <label for="name">输入你的名字：</label>
  <input id="name" type="text" size="30" />
</p>


<!-- 时间输入 -->
<h3>时间输入字段</h3>
<form name="myForm" id="myForm" action="form.php" method="post">
 <p>请选择送货时间
  <input type="time" name="st" />
  <!-- 从晚上 8 点到早上 8 点 -->
  <input type="time" min="20:00" max="08:00" name="overnight" />
 </p>
</form>


<!-- 网址输入 -->
<h3>请输入您个人网站的网址</h3>
<form name="myForm" id="myForm" action="url.php" method="post">
 <p>URL
  <input type="url" name="url" value="http://" />
  <input type="submit" value="登记"/>
 </p>
</form>

<!-- 星期输入 -->
<h3>星期输入字段</h3>
<form name="myForm" id="myForm" action="form.php" method="post">
 <p>请选择周数
  <input type="week" name="sw" />
 </p>
</form>

</body>
</html>

在这里插入图片描述

<ins>：定义已经被插入文档中的文本

行内元素开始标签和结束标签都不能省略。

属性

cite cite 属性的值指向一个文档的 URL，该文档解释了文本被插入或修改的原因。（目前该属性还没有被主流浏览器支持）

datetime 该特性指示的此修改发生的时间和日期，并且该特性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间，则该元素不具有相关联的时间标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>JavaScript 精致范例辞典</h1>
    <p>
    不管你是设计动态网页，还是要用最新的Ajax 技术，Javascript 都是相当重要的角色，但是就算学过Javascript，也不一定都记得各式各样的语法，因此一本随时可以查阅的范例辞典就非常重要。
    </p>
    <p>
    本书超过 200 个 JavaScript 的精致语法范例，利用 3 种索引方式，让你很快查阅到想找的语法。
    <ins cite="http://www.flag.com.tw" datetime="2015/2/1">
        本书单次购买10本85折
    </ins>
    </p>

    <p>“You're late!”</p>
    <del>
        <p>“I apologize for the delay.”</p>
    </del>
    <ins cite="../howtobeawizard.html" datetime="2018-05">
        <p>“A wizard is never late …”</p>
    </ins>

</body>
</html>

在这里插入图片描述

<kbd>：键盘输入元素

行内元素开始标签和结束标签都不能省略。

用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。

通过定义 CSS 规则可以改变 kbd 的默认字体。用户首选项设置可能会比该 CSS 规则具有更高优先级。

当<kbd>元素处于<samp>元素之中时，它代表着被系统回显的输入。

当<kbd>元素中包含<samp>元素时，该输入是基于系统输出的，比如调用某个菜单项。

当<kbd>元素处于另一个<kbd>元素之中时，它代表了一个实际的按键，或是该输入机制下的某个单位输入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>请选择</h1>
    <p>
      A) 继续，请按 <kbd> Enter </kbd> 键
    </p>
    <p>
      B) 退出，请按 <kbd> Esc </kbd> 键
    </p>

    <p>
      Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.
    </p>
      
    <p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>


</body>
</html>

在这里插入图片描述

<label>：表示用户界面中某个元素的说明

行内元素开始标签和结束标签都不能省略。

将一个 <label> 和一个 <input> 元素匹配在一起，需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

另外，也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在。

关联标签的表单控件称为这个标签的已关联标签的控件。一个 input 可以与多个标签相关联。

点击或者轻触（tap）与表单控件相关联的 <label> 也可以触发关联控件的 click 事件。

不要在 label 元素内部放置可交互的元素，比如 anchors 或 buttons。这样做会让用户更难激活/触发与 label 相关联的表单输入元素。不要在一个 <label> 元素内部放置标题元素（heading elements），若一个表单，或表单中的一部分需要一个标题，应使用 <legend> 元素置于 <fieldset> 元素中。若 <input> 元素声明了 type=“button” 和有效的 value 属性，则不需要为其添加标签。<button> 元素也一样。

属性

for 即和 <label> 元素在同一文档中的可关联标签的元素的 id。文档中第一个 id 值与 <label> 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 <label> 元素。如果这个元素不可关联标签，则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同，for 属性对这些元素也没有影响。

form 表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   
  <form name="form1" method="post" action="">
    请问你的血型是?
    <p>
      <label>
        <input type="radio" name="RadioGroup1" value="A型" id="RadioGroup1_0">
        A型</label>
      <br>
      <label>
        <input type="radio" name="RadioGroup1" value="B型" id="RadioGroup1_1">
        B型</label>
      <br>
      <label>
        <input type="radio" name="RadioGroup1" value="O型" id="RadioGroup1_2">
        O型</label>
      <br>
      <label>
        <input type="radio" name="RadioGroup1" value="AB型" id="RadioGroup1_3">
        AB型</label>
      <br>
    </p>
  </form>

  <form name="myForm" id="myForm">
    请选择你喜欢的水果: <br />
    <input type="checkbox" name="myCheck" id="bann" value=" 香蕉" />
    <label for="bann">香蕉</label>
    <input type="checkbox" name="myCheck" id="app" value="苹果" />
    <label for="app">苹果</label>
    <input type="checkbox" name="myCheck" id="bla" value="芭乐" />
    <label for="bla">芭乐</label>
    <input type="checkbox" name="myCheck" id="wat" value=" 西瓜" />
    <label for="wat">西瓜</label>
    <input type="checkbox" name="myCheck" id="pin" value=" 凤梨" />
    <label for="pin">凤梨</label>
    </form>

</body>
</html>

在这里插入图片描述

<legend>：表示其父元素的内容标题

块级元素开始标签和结束标签都不能省略。

允许的父元素 <fieldset> ，并且<legend>作为第一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   
  <form name="myForm" id="myForm">
    <fieldset>
     您喜欢的休闲活动是<br />
     <select name="listmenu">
      <option value="看电影">看电影</option>
      <option value="听音乐">听音乐</option>
      <option value="郊游踏青">郊游踏青</option>
      <option value="电脑游戏">电脑游戏</option>
     </select> 
    </fieldset>

    <br />
    
    <fieldset>
    <legend>请选择你喜欢的水果</legend>
     <input type="checkbox" name="myCheck" id="bann" value="香蕉" />
    <label for="bann">香蕉</label>
     <input type="checkbox" name="myCheck" id="app" value="苹果" />
    <label for="app">苹果</label>
     <input type="checkbox" name="myCheck" id="bla" value="芭乐" />
    <label for="bla">芭乐</label>
     <input type="checkbox" name="myCheck" id="wat" value="西瓜" />
    <label for="wat">西瓜</label>
     <input type="checkbox" name="myCheck" id="pin" value="凤梨" />
    <label for="pin">凤梨</label>
    </fieldset>
  </form>

</body>
</html>

在这里插入图片描述

<li>：表示列表里的条目

块级元素开始标签不能省略。如果列表元素的后面紧随另一个 <li> 元素，或者它的父元素中没有更多内容，结束标签可以省略。

必须包含在一个父元素里：一个有序列表 (<ol>)，一个无序列表 (<ul>)，或者一个菜单 (<menu>)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。

过时的 <dir> 也可以作为父元素，但是并不提倡。

属性

value 这个整数型属性表明了本 <li> 元素在有序列表（由 <ol> 元素定义）中的序号。本属性值只能用数字，即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。value 属性对于无序列表 (<ul>) 或者菜单 (<menu>) 无效。

type 已弃用这个字符型属性表明了数字的类型： a: 小写字母 A: 大写字母 i: 小写罗马数字 I: 大写罗马数字 1: 数字
本属性值将覆盖 <ol> 元素中的同名属性值（若存在）。本属性已废弃：使用 CSS list-style-type 属性来代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

      <table>
        <tr>
            <td>
                <h2>JavaScript 精致范例辞典</h2>
    
                以下是本书的内容简介：
                <ul>
                    <li>简明的 Javascript 语法入门及基础概念。</li>
                    <li>搭配图文解说及精美范例示范。</li>
                    <li>最后加入 10 个精选的综合范例。</li>
                    <li>清楚标识适用的浏览器种类与版本。</li>
                    <li>光盘中收录了完整的范例网页文件。</li>			
                </ul>
    
                以下是本书的内容简介：
                <ol>
                    <li>【分类指令索引】</li>
                    <li>【范例索引】</li>
                    <li>【字母索引】</li>
                </ol> 
    
            </td>
            <td><img src="img/0010348854.jpg" alt="封面" /></td>
        </tr>
    </table>

    <table>
        <tr>
            <td>
                <h2>JavaScript 精致范例辞典</h2>
    
                以下是本书的内容简介：
                <ol start="10">
                    <li>简明的 Javascript 语法入门及基础概念。</li>
                    <li value="5">搭配图文解说及精美范例示范。</li>
                    <li>最后加入 10 个精选的综合范例。</li>
                    <li value="8">清楚标识适用的浏览器种类与版本。</li>
                    <li>光盘中收录了完整的范例网页文件。</li>	
                </ol>
    
            </td>
            <td><img src="img/0010348854.jpg" alt="封面" /></td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

<link>：外部资源链接元素

<main>：呈现了文档的或应用的主体部分

<map>：用来定义一个图像映射 (一个可点击的链接区域)

<mark>：标记或突出显示的文本

行内元素开始标签和结束标签都不能省略。

表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。可以为了标记特定上下文中的文本而使用这个标签，举个例子，它可以用来显示搜索引擎搜索后关键词

当用在引用（<q>、<blockquote>）中时，通常用来显示有特殊意义的文本，但不在原材料中标记出来；或者是用来显示特殊审查的材料，即使原作者不认为它特别重要。

另外，<mark> 元素还用来显示与用户当前活动相关的一部分文档内容。例如，它可能被用于显示匹配搜索结果中的单词。

不要为了语法高亮而用 <mark> 元素; 你应该用 <strong> 元素结合适当的 CSS 来实现这个目的（语法高亮）。

<strong> 元素用来表示文本在上下文的重要性的，而 <mark> 元素是用来表示上下文的关联性的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>mark元素是HTML5新增元素</h1>
    <p>
    mark元素会将“标签内容”以<mark>高亮显示</mark>的方式突出那些要在视觉上向用户说明其重要性的文字内容。
    </p>
    <p>
    mark元素当前比较常见的用法，就是<mark>在搜索结果中以高亮的视觉效果标示</mark>用户所指定的关键词。
    </p>


</body>
</html>

在这里插入图片描述

<marquee>：已弃用

<menu>：呈现了一组用户可执行或激活的命令

<menuitem>：不再推荐使用该特性

<meta>：元数据元素

由于这是一个空元素，所以必须有开始标签并且不能有结束标签。

表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息。如：<base>、<link>、<script>、<style> 或 <title>。

如果设置了 name 属性，<meta> 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
如果设置了 http-equiv 属性，<meta> 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
如果设置了 charset 属性，<meta> 元素是一个字符集声明，告诉文档使用哪种字符编码。
如果设置了 itemprop 属性，<meta> 元素提供用户定义的元数据。

属性

charset 该属性声明了文档的字符编码。如果存在该属性，则其值必须是字符串 “utf-8” 的不区分 ASCII 大小写的匹配，因为 UTF-8 是 HTML5 文档的唯一有效编码。声明字符编码的 <meta> 元素必须完全位于文档的前 1024 个字节内。

content 此属性包含 http-equiv 或 name 属性的值，具体取决于所使用的值。

http-equiv 属性定义了一个编译指示指令。这个属性叫做 http-equiv(alent) 是因为所有允许的值都是特定 HTTP 标头的名称，如下：
- content-security-policy 允许页面作者定义当前页面的内容策略。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
- content-type 声明 MIME 类型和文档的字符编码。如果使用 content-type 属性，与之在同一个 <meta> 元素中使用的 content 属性的值必须是 “text/html; charset=utf-8”。这相当于一个具有指定 charset 属性的 <meta> 元素，并对其在文档中的放置位置有相同的限制。注意：该属性只能用于 MIME 类型为 text/html 的文档，不能用于 MIME 类型为 XML 的文档。
- default-style 设置默认 CSS 样式表组的名称。
- x-ua-compatible 如果指定，则 content 属性必须具有值 “IE=edge”。用户代理必须忽略此指示。
- refresh 这个属性指定：
页面重新加载的秒数——仅当 content 属性包含非负整数时。
页面重定向到指定链接的秒数——仅当 content 属性包含非负整数后跟字符串“;url=”和有效的 URL 时。

name
name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

name 属性在 <meta> 元素中具有特殊的语义；另外，当一个 <meta> 标签中，有 name、http-equiv 或者 charset 三者中任何一个属性时，itemprop 属性不能被使用。

设置了 refresh 值的页面存在时间间隔过短的风险。借助屏幕阅读器等辅助技术进行导航的用户可能无法在自动重定向之前通读和理解页面内容。突然的、未通知的页面内容更新也可能会让视力低下的人迷失方向。

<meta charset="utf-8" />

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="杨东昱" />
<meta name="keywords" content="网页设计,html,css,xhtml" />
<meta name="description" content="meta元素的应用" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meter>：显示已知范围的标量值或者分数值

行内元素开始标签和结束标签都不能省略。

属性

value 当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0。如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。
除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1。

min 值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。

max 值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。

low 定义了低值区间的上限值（如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。

high 定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。

optimum 这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。

form 该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   
  <h3>考试成绩分析</h3>
  <form name="myForm" id="myForm">
    您的成绩
    <!-- min 属性被省略，这是允许的，默认值为 0。 -->
    <meter max="100" value="45" low="55" high="80" optimum="90">45分</meter>
    <meter max="100" value="65" low="55" high="80" optimum="90">65分</meter>
    <meter max="100" value="95" low="55" high="80" optimum="90">95分</meter>
  </form>

</body>
</html>

在这里插入图片描述

<nav>：提供导航链接

<nobr>：已弃用

<noembed>：已弃用

<noframes>：已弃用

<noscript>：定义脚本未被执行时的替代内容。

开始标签和结束标签都不能省略。

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

    <script type="text/javascript">
        // <![CDATA[
        inImage=new Image()
        inImage.src="images/bee.gif"   //光标移进时所要显现的图片
        outImage=new Image()
        outImage.src="images/ari.gif"  //光标移出，也就是正常显现的图片
    
        //光标移入时的处理
        function mouse_in(pic,helpText){
            document.images[pic].src=inImage.src
            if(document.layers){
                x = e.layerX
                y = e.layerY
                document.layers[0].document.open()
                document.layers[0].document.write(helpText)
                document.layers[0].document.close()
                document.layers[0].moveTo(x+5, y+5)
                document.layers[0].visibility = "SHOW"
            } else if(document.all){

                x = event.clientX
                y = event.clientY
                document.all["msg"].innerHTML = helpText
                document.all["msgTale"].style.pixelLeft = x + 5
                document.all["msgTale"].style.pixelTop = y + 5
                document.all["msgTale"].style.visibility = "visible"
            }
        }
    
        //光标移出时的处理
        function mouse_out(pic){
            document.images[pic].src=outImage.src
            if(document.layers){
                document.layers[0].visibility = "HIDE"
            }else if(document.all){
                document.all["msgTale"].style.visibility = "hidden"
            }
        }
    
        //浮动注解说明的外框设定
        function ini(){
            if(document.layers){
                document.write("<LAYER visibility='hide' bgcolor='#ffffcc'></LAYER>")
            }else if(document.all){
                document.write("<table border=1 id='msgTale' bgcolor='#FFFFCC' bordercolor='#800000'" + 
                " style='position:absolute; COLOR: #999999; FONT-SIZE: 10pt;border-collapse: collapse'>" +
                "<tr><td id='msg'></td></tr></table>")
                document.all["msgTale"].style.visibility = "hidden"
            }
        }
        
        ini()
    // ]]>
    </script> 
</head>
<body>
   
    <noscript>
        很抱歉！您的浏览器不支持 Javascript，请使用支持 Javascript 的浏览器进行浏览~
    </noscript>
        
    <table style="width:400px">
        <tr>
            <td>
                <a href="#" onMouseOver="mouse_in('picA', '最佳教学网站')" onMouseOut="mouse_out('picA')"> 
                <img src="images/ari.gif" id="picA" alt="" />学园</a>
            </td>
            <td>
                <a href="#" onMouseOver="mouse_in('picB', '最佳互助学习')" onMouseOut="mouse_out('picB')"> 
                <img src="images/ari.gif" id="picB" alt="" />问题讨论</a>
            </td>
            <td>
                <a href="#" onMouseOver="mouse_in('picC', '众多案例研究范例')" onMouseOut="mouse_out('picC')"> 
                <img src="images/ari.gif" id="picC" alt="" />JavaScript范例</a> 
            </td>
        </tr>
    </table>

</body>
</html>

在这里插入图片描述

<object>：嵌入对象元素

表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

<ol>：有序列表

块级元素开始标签和结束标签都不能省略。

通常渲染为一个带编号的列表。

属性

reversed 此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。

start 一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 “d” 或者罗马数字 “iv” 开始，都应当使用 start=“4”。

type 设置编号的类型： a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号（默认）
编号类型适用于整个列表，除非在 <ol> 元素的 <li> 元素中使用不同的 type 属性。

除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS list-style-type 属性替代。

有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。

<ol> 和 <ul> 元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套。

<ol> 和 <ul> 元素都表示列表。区别在于，<ol> 元素的有序列表的顺序是有意义的。

至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 <ol> 元素，否则使用 <ul> 更合适。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <table>
        <tr>
            <td>
                <h2>JavaScript 精致范例辞典</h2>
                以下是本书的内容简介：
                <ol>
                    <li>简明的 Javascript 语法入门及基础概念。</li>
                    <li>搭配图文解说及精美范例示范。</li>
                    <li>最后加入 10 个精选的综合范例。</li>
                    <li>清楚标识适用的浏览器种类与版本。</li>
                    <li>光盘中收录了完整的范例网页文件。</li>		
                </ol>
            </td>
            <td><img src="img/0010348854.jpg" alt="封面" /></td>
        </tr>
    </table>

    <table>
        <tr>
            <td>
                <h2>JavaScript 精致范例辞典</h2>
                以下是本书的内容简介：
                <ol>
                    <li>简明的 Javascript 语法入门及基础概念。</li>
                    <li>搭配图文解说及精美范例示范。</li>
                </ol>
                <ol type="i" start="5">
                    <li>最后加入 10 个精选的综合范例。</li>
                    <li>清楚标识适用的浏览器种类与版本。</li>
                    <li>光盘中收录了完整的范例网页文件。</li>			
                </ol>
            </td>
            <td><img src="img/0010348854.jpg" alt="封面" /></td>
        </tr>
    </table>

    <ol>
        <li>first item</li>
        <li>
          second item
          <!-- closing </li> tag not here! -->
          <ul>
            <li>second item first subitem</li>
            <li>second item second subitem</li>
            <li>second item third subitem</li>
          </ul>
        </li>
        <!-- Here's the closing </li> tag -->
        <li>third item</li>
    </ol>
      

 
</body>
</html>

在这里插入图片描述

<optgroup>：为<select> 元素中的选项创建分组

块级元素开始标签是必须的。当该元素后面也跟着一个 <optgroup> 元素，或该元素的父元素没有其他内容时，结束标签可省略。

允许的父元素一个 <select> 元素。

属性

disabled 如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。

label 选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   
  <form name="myForm">
    您的休闲方式是<br />
    <select name="下拉列表范例">
     <optgroup label="静态活动">
      <option value="看电影">看电影</option>
      <option value="听音乐">听音乐</option>
      <option value="电脑游戏">电脑游戏</option>
     </optgroup>
     <optgroup label="球类运动" disabled>
      <option value="棒球">棒球</option>
      <option value="高尔夫球">高尔夫球</option>
      <option value="篮球">篮球</option>
      <option value="美式足球">美式足球</option>
     </optgroup>  
    </select>
   </form>

</body>
</html>

在这里插入图片描述

<option>：用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项

块级元素开始标记是必需的。如果此元素紧接着是另一个 <option> 元素或<optgroup>, 或者父元素没有其他内容，则结束标记是可选的。

可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。

属性

disabled 如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的 <optgroup> 元素，则这个元素仍然是禁用的。

label 这个属性是用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。

selected 这个布尔属性存在时表明这个选项是否一开始就被选中。如果 <option> 元素是 <select> 元素的子元素，并且 <select> 元素的 multiple 属性没有设置，则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。

value
这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   
  <form name="myForm">
    
    <label for="website-select">欢迎访问个人网站: </label>
    <select name="mySelect" id="website-select">
     <option selected>请选择</option>
     <option value="http://www.baidu.com">Baidu</option>
     <option value="http://www.google.com" selected>Google</option>
     <option value="http://www.apple.com">Apple</option>
     <option value="http://www.banana.com">Banana</option>
     <option value="http://www.orange.com">Orange</option>
     <option value="http://www.purple.com">Purple</option>
    </select>
    <input type="button" value="访问" onClick="myWeb()" />
  </form>

   <form name="myForm">
    您喜欢的休闲方式是<br />
    <select size="4" multiple name="下拉列表范例">
      <option value="1 看电影">看电影</option>
      <option value="2 听音乐">听音乐</option>
      <option value="3 郊游踏青">郊游踏青</option>
      <option value="4 电脑游戏">电脑游戏</option>
    </select>
   </form>

   <form name="myForm">
    您喜欢的休闲方式是<br />
    <select size="2" name="下拉菜单范例">
      <option value="1看电影">看电影</option>
      <option value="2听音乐">听音乐</option>
      <option value="3郊游踏青">郊游踏青</option>
      <option value="4电脑游戏">电脑游戏</option>
     </select>
   </form>

</body>
</html>

在这里插入图片描述

<output>：表示计算或用户操作的结果

行内元素开始标签和结束标签都不能省略。

属性

for 其他影响计算结果的标签的 ID，可以多个。

form 与当前标签有关联的 form（从属的表单）。该属性的值必须是当前文档内的表单元素的 ID。如果未指明该属性，output 标签必须是一个 form 的后代标签。该属性的用处在于可以让 output 标签脱离 form 标签，存在于一个网页文档的任意位置。

name name 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   

  <h3>加法练习</h3>
  <form name="myForm" id="myForm">
    <input type="number" id="a"/>+
    <input type="number" id="b"/>=
    <output onforminput="value=Number(a.value)+Number(b.value)">总和</output>
  </form>

  <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
  </form>
 
</body>
</html>

在这里插入图片描述

<p>：段落元素

块级元素开始标签是必要的。如果 <p> 元素后面紧跟 <address>、<article>、<aside>、<blockquote>、<div>、<dl>、<fieldset>、<footer>、<form>、h1、h2、h3、h4、h5、h6、<header>、<hr>、<menu>、<nav>、<ol>、<pre>、<section>、<table>、<ul> 或其他 <p> 元素，或者父元素中已没有内容，且父元素不是 <a> 元素，则可以省略结束标签。

表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。

如果在关闭的 </p> 标签之前解析了另一个块级元素，则该标签将自动关闭。

<p> 标签的 align 属性已被弃用，请不要使用。

默认情况下，浏览器会用一个空行来分隔段落。其他分隔方法，如首行缩进，可以通过 CSS 来实现。

如果需要额外的空间，可以使用 CSS 属性，如 margin 来创建效果：

p {
  margin-bottom: 2em; /* 增加段落之后的空白 */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        p {
            margin: 0;
            text-indent: 3ch;
        }

        p.pilcrow {
            text-indent: 0;
            display: inline;
        }

        p.pilcrow + p.pilcrow::before {
            content: " ¶ ";
        }


    </style>
</head>
<body>

    <h1>JavaScript 精致范例辞典</h1>
    <p>
        不管你是设计动态网页，还是要用最新的 Ajax 技术，Javascript 都占了相当重要的角色。但是就算学过 Javascript，也不一定都会记得各式各样的语法，因此一本随时可以查阅的范例辞典就非常需要。
    </p>
    <p>
        本书超过 200 个 JavaScript 的精致语法范例，利用 3 种索引方式，让你很快查阅到想找的语法。
    </p>
    <p>
        本书与市面上其他 Javascript 参考手册的最大区别是，范例的美观与品质。不同于其他丑陋的书，本书走精品路线，每个范例都特别设计，一定是漂漂亮亮的，让你在翻阅时就能领略到美感，这样才能做出漂亮的网页。
    </p>


    <p>
        用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。
    </p>
      
    <p>
        学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。
    </p>
      
    <p>
        在非常古老的文字中，段落之间用一种特殊的字符：¶（称为<i>段落符号</i>）分隔。如今，这个符号太密集了，难以阅读。
    </p>
      
    <p>
        究竟有多难阅读？自己试一下：
        <button data-toggle-text="换回去！">使用段落符号分隔段落</button>
    </p>
      
    <script>

        document.querySelector("button").addEventListener("click", (event) => {

            document.querySelectorAll("p").forEach((paragraph) => {
                paragraph.classList.toggle("pilcrow");
            });

            [event.target.innerText, event.target.dataset.toggleText] = [ event.target.dataset.toggleText, event.target.innerText,];
        });

    </script>
</body>
</html>

在这里插入图片描述

<param>：已弃用

<picture>：picture 元素

通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。

<plaintext>：已弃用

<portal>: 这是一项实验技术

允许将另一个HTML页面嵌入到当前页面中，以便更平滑地导航到新页面

<pre>: 预定义格式文本

块级元素开始标签和结束标签都不能省略。

在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

需要将该元素里的 ‘<’ 字符转义为 ‘<’ 以保证代码里的关闭代码不被浏览器解释为标签。

属性

cols 非标准已弃用
定义每行的最大字符数。这是一个非标准的属性，作用与width相同。要实现这样的效果，应该使用 CSS。

width 已弃用
包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用 CSS。

wrap 非标准
提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且没有视觉效果。要实现这样的效果，应该使用 CSS。

为使用预格式化文本创建的任何图像或图表提供替代描述是很重要的。备选描述应清晰简洁地描述图像或图表的内容。

\＜figure\＞和\＜figcaption\＞元素的组合，再加上 id 和 ARIA 角色的组合以及由属性标记的 ARIA，可以将预先格式化的文本作为图像发布，figcaption 作为图像的替代描述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

	<style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h2>onKeyDown事件</h2>
    <pre>
==========================================================
function validLength(item,len){
return (item.length &gt;= len)
}
// 资料来源: <a href="www.twbts.com">JavaScript 精致范例辞典</a>
==========================================================
    </pre>
    
    <pre>
        L          TE
          A       A
            C    V
             R A
             DOU
             LOU
            REUSE
            QUE TU
            PORTES
          ET QUI T'
          ORNE O CI
           VILISÉ
          OTE-  TU VEUX
           LA    BIEN
          SI      RESPI
                  RER       - Apollinaire
    </pre>

    <figure role="img" aria-labelledby="cow-caption">
        <pre>
        ___________________________
      < I'm an expert in my field. >
        ---------------------------
               \   ^__^
                \  (oo)\_______
                   (__)\       )\/\
                       ||----w |
                       ||     ||
        </pre>
        <figcaption id="cow-caption">
          A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
        </figcaption>
    </figure>
   
    
</body>
</html>

在这里插入图片描述

<progress>：进度指示元素

行内元素开始标签和结束标签都不能省略。

用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。

属性

max
该属性描述了这个progress元素所表示的任务一共需要完成多少工作。

value
该属性用来指定该进度条已完成的工作量。如果没有value 属性,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).

你可以使用 orient 属性来指定该进度条的显示方向是横向 (默认) 还是纵向.
CSS 伪类:indeterminate可以用来匹配那些不确定的进度条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <h3>当前网页载入进度</h3>
  <form name="myForm" id="myForm">
    <label for="loadProgress">已完成进度:</label>
    <progress max="100" value="20" id="loadProgress">20%</progress>
  </form>
 
</body>
</html>

在这里插入图片描述

<q>：表示一个封闭的并且是短的行内引用的文本。

行内元素开始标签和结束标签都不能省略。

表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote> 替代。

大多数现代浏览器，会为 <q> 文本添加引号。旧浏览器可能需要使用 CSS 添加引号。IE、Edge 与 Firefox、Chrome 引号样式略有不同。

属性

cite 这个属性的值是 URL，意在指出被引用的文本的源文档或者源信息。这个属性重在解释这个引用的参考或者是上下文。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>


    <h1>服务项目</h1>
    <p>计算机书籍编写
        <q cite=http://valor. twbts.com style="color: #0000FF; font-weight: bold; background-color: #66FFFF">
            本信息室已出版过ASP、PHP、C++ Builder、C# Builder、Java Script、Delphi、Jbuilder、Kylix等书籍
        </q>
    </p>
   
    
</body>
</html>

在这里插入图片描述

<rb>：已弃用

行内元素开始标签不能省略。如果元素紧跟<rt>、<rtc>或<rp>元素或其他元素，则可省略结束标记 <rb>元素，或者如果父元素中没有其他内容。

用于分隔<ruby>注释的基本文本组件（即正在注释的文本）。一个<rb>元素应该包装基本文本的每个单独的原子段。

允许的父元素 <ruby>元素。

需要为要注释的每个基本段（<rb>元素）包含一个<rt>元素。

请尽量不要使用该特性，并更新现有的代码

<ruby> <rb>漢</rb>字 <rp>(</rp><rt>han</rt>zi<rp>)</rp> </ruby>

<rp>：为那些不能使用元素展示 ruby 注解的浏览器，提供随后的圆括号

行内元素开始标签和结束标签都不能省略。

用于为那些不能使用 <ruby> 元素展示 ruby 注解的浏览器，提供随后的圆括号。

Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 <rp> 元素用于不支持 <ruby> 元素的情况。 <rp> 的内容提供了应该展示的东西，通常是圆括号，以便表示 ruby 注解的存在。

允许的父元素 <ruby> 元素。 <rp> 必须位于 <rt> 的前面和后面。

	<ruby>
        漢 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>

<rt>：包含字符的发音，字符在 ruby 注解中出现，用于描述东亚字符的发音

行内元素开始标签不能省略。如果 <rt> 元素紧紧跟随 <rt> 或者 <rp> 元素，或者父元素中没有更多内容了，结束标签可以省略。

允许的父元素 <ruby> 元素

请尽量不要使用该特性，并更新现有的代码

<ruby> 汉 <rt>Hàn</rt> 字 <rt>Zì</rt> </ruby>

<rtc>：已弃用

行内元素开始标签不能省略。如果它紧紧跟随<rb>，<rtc> 或者 <rt> 元素的起始标签，或父元素的闭合标签，它的闭合标签就可以省略。

包含文字的语义注解，它们在 <rb> 元素中展示。<rb> 元素可以拥有发音 (<rt>) 和语义 (<rtc>) 注解。

允许的父元素 <ruby> 元素。

<ruby>
  <rb>旧</rb>
  <rb>金</rb>
  <rb>山</rb>
  <rt>jiù</rt>
  <rt>jīn</rt>
  <rt>shān</rt>
  <rtc>San Francisco</rtc>
</ruby>

<ruby>：用来展示东亚文字注音或字符注释

行内元素开始标签和结束标签都不能省略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        table {border:0px;}
    </style>
</head>
<body>

    <h3>拼音标注</h3>
    <div>
    <table>
	    <tr>
		    <td>　
                <p>JavaScript
                    <ruby>
                        精  致  范  例  辞  典
                        <rt>jing zhi fan li ci dian</rt>
                    </ruby>
                    <ruby> 
                        <rb>精致范例辞典</rb>
                        <rt style="font-size:12pt;color:#FF0000;">jing zhi fan li ci dian </rt>
                    </ruby>
                    <ruby> 
                        <rb>精致范例辞典</rb>
                        <rp>(</rp>
                        <rt style="font-size:12pt;color:#FF0000;">jing zhi fan li ci dian </rt>
                        <rp>)</rp>
                    </ruby>
                </p>
                <p>杨东昱 著</p>		
		    </td>
		    <td><img border="0" src="img/0010348854.jpg" width="150" height="218" alt="" /></td>
	    </tr>
    </table>

    <ruby> 汉 <rt>Hàn</rt> 字 <rt>Zì</rt> </ruby>
    <ruby>
        漢 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>

    <ruby>
        <rb>旧</rb>
        <rb>金</rb>
        <rb>山</rb>
        <rt>jiù</rt>
        <rt>jīn</rt>
        <rt>shān</rt>
        <rtc>San Francisco</rtc>
    </ruby>
      
 </div>

 
</body>
</html>

在这里插入图片描述

<s>：使用删除线来渲染文本

<samp>：用于标识计算机程序输出

行内元素开始标签和结束标签都不能省略。

通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。可以使用 CSS 选择器 samp 定义规则来覆盖浏览器的缺省字体。不过，用户设置的偏好可能会优先于指定的 CSS 使用。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        table {border:0px;}
    </style>
</head>
<body>

    <h3>当网站拒绝显示网页时会出现：</h3>
    <p>
      <samp>HTTP 403 禁止</samp>
      <br />表示 Internet Explorer 可以连接到该网站，但没有权限浏览该网页。
    </p>
 
</body>
</html>

在这里插入图片描述

<script>：脚本元素

开始标签和结束标签都不能省略。

用于嵌入可执行代码或数据，这通常用作嵌入或者引用 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。

属性

async 对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。
对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。
该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。
这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

crossorigin 正常的 script 元素将最小的信息传递给 window.onerror，用于那些没有通过标准 CORS 检查的脚本。要允许对静态媒体使用独立域名的网站进行错误记录，请使用此属性。

defer 这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的。
包含 defer 属性的脚本将阻塞 DOMContentLoaded 事件触发，直到脚本完成加载并执行。
本属性不应在缺少 src 属性的情况下使用（也就是内联脚本的情况下），这种情况下将不会生效。
defer 属性对模块脚本也不会生效——它们默认是 defer 的。
包含 defer 属性的脚本会按照它们出现在文档中的顺序执行。

fetchpriority 实验性
提供一个指示，说明在获取外部脚本时要使用的相对优先级。允许的值：
high 获取该脚本的优先级比其他外部脚本的等级要高。
low 获取该脚本的优先级比其他外部脚本的等级要低。
auto 默认值：自动确定获取该脚本的相对优先级。

integrity 包含用户代理可用于验证所获取到资源的完整性的内联元数据。

nomodule 这个布尔属性被设置来标明这个脚本不应该在支持 ES 模块的浏览器中执行。实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。

nonce 在 script-src Content-Security-Policy (en-US) 中允许脚本的一个一次性加密随机数（nonce）。服务器每次传输策略时都必须生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 是至关重要的，因为绕过一个资源的策略是微不足道的。

referrerpolicy 表示在获取脚本或脚本获取资源时，要发送哪个 referrer：
- no-referrer：不会发送 Referer 标头。
- no-referrer-when-downgrade（默认）：如果没有 TLS（HTTPS）协议，Referer 标头将不会被发送到源上。
- origin：发送的 referrer 将被限制在 referrer 页面的源：其协议、主机和端口。
- origin-when-cross-origin：将会限制发送至其他源的 referrer 的协议、主机和端口号。在同源的导航上仍然包括路径。
- same-origin：在同源内将发送 referrer，但是跨源请求不包含 referrer 信息。
- strict-origin：只在协议安全等级相同时（如 HTTPS→HTTPS）发送文档的源作为 referrer，目标安全性降低（如 HTTPS→HTTP）时不发送。
- strict-origin-when-cross-origin：在执行同源请求时，发送完整的 URL，但只在协议安全级别保持不变（如 HTTPS→HTTPS）时发送源，而在目标安全性降低（如 HTTPS→HTTP）时不发送标头。
- unsafe-url：referrer 将包含源和路径（但不包含片段、密码和用户名）。这个值是不安全的，因为它将 TLS 保护的资源的源和路径泄露给不安全的源。
- 空字符串（“”）既是默认值，也是在不支持 referrerpolicy 的情况下的一个回退值。如果没有在 <script> 元素上明确指定 referrerpolicy，它将采用更高级别的 referrer 策略，即对整个文档或域设置的策略。如果没有更高级别的策略，空字符串将被视为等同于 no-referrer-when-downgrade。

src 这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。

type 该属性表示所代表的脚本类型。该属性的值可能为以下类型：
- 属性未设置（默认），一个空字符串，或一个 JavaScript MIME 类型
代表脚本为包含 JavaScript 代码的“传统的脚本”。如果脚本指的是 JavaScript 代码，我们鼓励作者省略这个属性，而不是指定一个 MIME 类型。所有的 JavaScript MIME 类型都列在 IANA 的媒体类型规范中。
- module 此值导致代码被视为 JavaScript 模块。其中的代码内容会延后处理。charset 和 defer 属性不会生效。
- importmap 此值代表元素体内包含导入映射（importmap）表。导入映射表是一个 JSON 对象，开发者可以用它来控制浏览器在导入 JavaScript 模块时如何解析模块标识符。
- 任何其他值所嵌入的内容被视为一个数据块，不会被浏览器处理。开发人员必须使用有效的 MIME 类型，但不是 JavaScript MIME 类型来表示数据块。所有其他属性，包括 src 均会被忽略。

blocking 实验性
这个属性明确指出，在获取脚本的过程中，某些操作应该被阻断。要阻断的操作必须是一个以空格分隔的列表，下面列出了阻断属性。
- render：屏幕上渲染内容的操作应该被阻断。

charset 已弃用
如果存在，它的值必须是 ASCII 大小写不敏感的“utf-8”的匹配。没有必要指定 charset 属性，因为文档必须使用 UTF-8，而且 script 元素从文档继承其字符编码。

language 已弃用非标准
和 type 属性类似，这个属性定义脚本使用的语言。但是与 type 不同的是，这个属性的可能值从未被标准化过。请用 type 属性代替这个属性。

没有 async、defer 或 type=“module” 属性的脚本，以及没有 type=“module” 属性的内联脚本，会在浏览器继续解析页面之前立即获取并执行。

脚本应该以 text/javascript 的 MIME 类型提供，但浏览器比较宽容，只有在脚本以图像类型（image/）、视频类型（video/）、音频类型（audio/*）或 text/csv 提供时才会阻止它们。如果脚本受阻，将向该元素发送 error 事件；否则，将发送 load 事件。

下面这些示例说明了如何使用 <script> 元素来导入（外部）脚本。

<script src="javascript.js"></script>

以下示例展示了如何向 <script> 元素内放入（内联）脚本。

<script>
  alert("Hello World!");
</script>

支持 module 作为 type 属性的浏览器忽略任何具有 nomodule 属性的脚本。这种机制可以允许你在使用模块脚本时为不支持的浏览器提供 nomodule 标记的回落脚本。

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

使用导入映射导入模块

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

在 HTML 中嵌入数据

<!-- 由服务端生成 -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- 静态代码 -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

在脚本被获取和执行之前阻止渲染
你可以在 blocking 属性中包含 render 标记；页面的渲染将被阻止，直到脚本被获取和执行。在下面的例子中，我们封锁了一个异步脚本的渲染、这样，脚本不会阻塞解析，但保证在渲染开始前被执行。

<script blocking="render" async src="async-script.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
    <!-- <script type="text/javascript" src="script/case_a.js" async defer></script>  -->

    <script type="text/javascript">
        // <![CDATA[
        inImage=new Image()
        inImage.src="images/bee.gif"   //光标移进时所要显现的图片
        outImage=new Image()
        outImage.src="images/ari.gif"  //光标移出，也就是正常显现的图片
    
        //光标移入时的处理
        function mouse_in(pic,helpText){
            document.images[pic].src=inImage.src
            if(document.layers){
                x = e.layerX
                y = e.layerY
                document.layers[0].document.open()
                document.layers[0].document.write(helpText)
                document.layers[0].document.close()
                document.layers[0].moveTo(x+5, y+5)
                document.layers[0].visibility = "SHOW"
            } else if(document.all){

                x = event.clientX
                y = event.clientY
                document.all["msg"].innerHTML = helpText
                document.all["msgTale"].style.pixelLeft = x + 5
                document.all["msgTale"].style.pixelTop = y + 5
                document.all["msgTale"].style.visibility = "visible"
            }
        }
    
        //光标移出时的处理
        function mouse_out(pic){
            document.images[pic].src=outImage.src
            if(document.layers){
                document.layers[0].visibility = "HIDE"
            }else if(document.all){
                document.all["msgTale"].style.visibility = "hidden"
            }
        }
    
        //浮动注解说明的外框设定
        function ini(){
            if(document.layers){
                document.write("<LAYER visibility='hide' bgcolor='#ffffcc'></LAYER>")
            }else if(document.all){
                document.write("<table border=1 id='msgTale' bgcolor='#FFFFCC' bordercolor='#800000'" + 
                " style='position:absolute; COLOR: #999999; FONT-SIZE: 10pt;border-collapse: collapse'>" +
                "<tr><td id='msg'></td></tr></table>")
                document.all["msgTale"].style.visibility = "hidden"
            }
        }
        
        ini()
    // ]]>
    </script> 
</head>
<body>
   
    <noscript>
        很抱歉！您的浏览器不支持 Javascript，请使用支持 Javascript 的浏览器进行浏览~
    </noscript>
        
    <table style="width:400px">
        <tr>
            <td>
                <a href="#" onMouseOver="mouse_in('picA', '最佳教学网站')" onMouseOut="mouse_out('picA')"> 
                <img src="images/ari.gif" id="picA" alt="" />学园</a>
            </td>
            <td>
                <a href="#" onMouseOver="mouse_in('picB', '最佳互助学习')" onMouseOut="mouse_out('picB')"> 
                <img src="images/ari.gif" id="picB" alt="" />问题讨论</a>
            </td>
            <td>
                <a href="#" onMouseOver="mouse_in('picC', '众多案例研究范例')" onMouseOut="mouse_out('picC')"> 
                <img src="images/ari.gif" id="picC" alt="" />JavaScript范例</a> 
            </td>
        </tr>
    </table>

</body>
</html>

在这里插入图片描述

<search>：通用搜索元素

<section>：文档中一个通用独立章节

块级元素开始标签和结束标签都不能省略。

它没有更具体的语义元素来表示。一般来说会包含一个标题。

<section> 元素不能是 <address> 元素的后代。

<section> 是一个通用的分节元素，只有在没有更具体的元素来代表它的时候才可以使用。举个例子，一个导航菜单应该被包裹在 <nav> 元素中，但搜索结果列表或地图显示及其控件并没有特定的元素，可以放在 <section> 里面。

当该元素的内容可以作为一个独立的作品在多个媒体上发表，使用 <article> 是一个更好的选择。

内容包含代表与主要内容一同展示的有用的切入信息，但不是直接的一部分（如相关链接，作者简历等），请使用 <main>。

当内容代表文档中的主要内容区域，请使用 <main>。

将该元素作为一个样式包装时，请使用 <div>。一般来说，<section> 应该出现在文档大纲中。

在设置二级导航时，全局导航已经被包裹在 <nav> 元素中，此时可以使用 <section> 元素包裹一个上一个/下一个菜单作为二级导航。

<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

在设置控制应用程序的按钮栏时，需要将其作为文档中单独存在部分，但此时并不需要设置标题。

<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>>
</section>

没有标题的内容不会出现在文档大纲中。但如果文档大纲中需要包含这样一个 HTML 块，又不希望影响页面效果，可以通过设置隐藏标题来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .hidden {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    </style>
  
</head>
<body>
   
    <section>
        <h1>第一章</h1>
        <p>第一章內容...</p>
     </section>
     <section>
        <h1>第二章</h1>
        <p>第二章內容...</p>
     </section>

     <section>
        <h2 class="hidden">Controls</h2>
        <button class="reply">Reply</button>
        <button class="reply-all">Reply to all</button>
        <button class="fwd">Forward</button>
        <button class="del">Delete</button>
      </section>
</body>
</html>

在这里插入图片描述

<select>：表示一个提供选项菜单的控件

行内元素开始标签和结束标签都不能省略。

每个菜单选项由 <select> 中的一个 <option> 元素定义。

每个 <option> 元素都应该有一个 value 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性，则 value 值默认为元素中的文本。你可以在 <option> 元素中设置一个 selected 属性以将其设置为页面加载完成时默认选中的元素。

<select> 元素有一些用于控制元素的特有属性，例如 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 required, disabled, autofocus 等。

还可以将 <option> 元素放在 <optgroup> 元素中以为下拉菜单创建不同的选项分组。

属性

autocomplete 一个 DOMString，为用户代理提供自动填充功能的线索。

autofocus 这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。

disabled 这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 fieldset；如果没有父元素设置了 disabled 属性，那么默认该表单对象可用。

form <select> 所关联的<form> (它的"表单拥有者")。其值必须是在同一文档中的 <form> 元素的id（如果没有设置这个属性， <select> 元素则与其任何存在的祖先 <form> 元素关联）。这个属性让你将 <select> 元素与文档中任意位置的 <form> 元素相关联，而不仅仅是包含 <select> 元素的 <form> 元素。这个属性还可以覆盖元素的祖先 <form> 元素。

multiple 这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。

name 该属性规定了控件的名称。

required 一个布尔值属性，表示必须选中一个有非空字符串值的选项。

size 如果控件显示为滚动列表框（如声明了 multiple），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。
根据 HTML5 规范，默认值应该为 1；但是，在实践中，这样会影响到一些网站，同时其他浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。

选择多个选项
在桌面电脑中，有几种方式在设置了 multiple 属性的 <select> 元素中选中多个选项：

鼠标用户可以按住 Ctrl, Command, 或 Shift 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。

键盘用户可以这样选中多个连续的选项：

聚焦于 <select> 元素（如使用 Tab ）
使用 Up 和 Down 方向键以从下向上或从上向下选择选项。
按住 Shift 键然后使用 Up 和 Down 方向键来增加或减少选中的方向。

键盘用户还可以这样选中多个不连续的选项：

聚焦于 <select> 元素（例如使用 Tab ）。
按住 Ctrl 键，然后使用 Up 和 Down 方向键来改变聚焦的选项，聚焦的选项使用虚线轮廓高亮，和使用键盘聚焦链接的方式一样。
按下 Space 以选择或取消选择聚焦的选项。

<select>元素的内部结构复杂，难以控制。如果你想完全控制，你应该考虑使用一个在修改表单部件样式方面拥有强大能力的库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 WAI-ARIA 来提供语义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>
   
  <form name="myForm">
    
    <label for="website-select">欢迎访问个人网站: </label>
    <select name="mySelect" id="website-select" multiple size="4">
     <option selected>请选择</option>
     <option value="http://www.baidu.com">Baidu</option>
     <option value="http://www.google.com" selected>Google</option>
     <option value="http://www.apple.com">Apple</option>
     <option value="http://www.banana.com">Banana</option>
     <option value="http://www.orange.com">Orange</option>
     <option value="http://www.purple.com">Purple</option>
    </select>
    <input type="button" value="访问" onClick="myWeb()" />
   </form>

</body>
</html>

在这里插入图片描述

<slot>：Web 组件内的一个占位符

<small>：使文本的字体变小一号

行内元素必须拥有起始和结束标签

元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。

尽管 <small> 元素，<b> 元素和 <i> 元素被认为违反了结构和样式分离的原则，但是在 HTML5 中是允许使用这三个元素的。自行判断使用 <small> 还是 CSS。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <p>
        话说从头<br />
        <small>
        从小就希望自己的双手是用来拿笔的，也自诩自己才华横溢，尤其是在为赋新辞强说愁的少年时代，更是天真地写了为数不少的新诗。偷偷告诉各位，还投过稿喔！呵呵，但是，好像只有一篇被录用吧！（年代久远，记忆被Flash，所以忘喽）。
        </small>
    </p>
    <p>
        展望未来<br />
        <small>
        尽管写了几本计算机教程，还算是个写手吧！但是深藏在内心的那个梦依然存在，这个梦就是出版一本“散文集”，梦会不会成真还没个定论，不过网络是个筑梦的好地方，一点也不必在乎会不会开花结果，所以从现在开始，只要微风吹过，我就会把湖面上的粼粼波光一点一滴地记录下来与您共赏。
        </small>
    </p>

    <!-- CSS 替代 -->
    <p>
        This is the first sentence.
        <span style="font-size:0.8em">This whole sentence is in small letters.</span>
     </p>
 
</body>
</html>

在这里插入图片描述

<source>：为<picture>、<audio>元素或<video>元素指定多个媒体资源

<span>：短语内容的通用行内容器

行内元素必须拥有起始和结束标签

并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如 lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而 <span> 则是行内元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        li span {
            background: gold;
        }

    </style>
  
</head>
<body>
   
    <h1>关于意大利</h1>

    <span style="color: #FF6600; font-size: 22pt; font-weight: bold;">
       意大利位于南欧，是个突出于地中海的狭长半岛。意大利本岛(意大利半岛)和它最大的离岛“西西里岛”在外貌上刚好构成一个踢足球的画面。
    </span>
 
    <h3>意大利-米兰</h3>
 
    <span style="background-color: #FF66FF;">
      米兰是一个全球的流行中心，是服装、设计、音乐等文艺活动的最佳去处。
    </span>
 
      来到米兰可体会流行体系与多才多艺、复杂性之演化。

    <li>
       <span>
          <a href="portfolio.html" target="_blank">See my portfolio</a>
       </span>
    </li>
</body>
</html>

在这里插入图片描述

<strike>：已弃用

<strong>：表示文本十分重要，一般用粗体显示

行内元素必须拥有起始和结束标签

Bold vs. Strong
为什么使用<strong></strong>而不是<b></b>?

strong 是一个逻辑状态，而 bold 是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其他大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用 strong 呈现出的表现形式不同于单纯的加粗。因为 bold 是一个物理状态，他没有区分表现形式和内容。如果让 bold 做了加粗文本外的其他任何事情，都将会令人困惑而且也不符合逻辑。

同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。

Emphasis vs. Strong
在 HTML4 时，Strong 简单地表示一个更强的强调 (emphasis)，而在 HTML5 中，这个元素被描述为表征“内容强烈的重要性 (strong importance for its contents) ”。这是一个重要的区别。Em 标签 (Emphasis) 用于改变一个句子的意思 (比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>"，分别强调喜欢和胡萝卜), Strong 用来对一个句子的部分增加重要性 (比如 “警告！这非常危险。”)

Strong 和 Emphasis 都可以分别通过嵌套来增加相对重要性或强调重点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>strong 元素</h1>
    <p>
        strong 元素<strong>用来设定文件中重要的内容</strong>，strong元素在HTML5标准中将其用途定义为标示文件中的重要内容，而不再定义为<strong>比em元素更加重强调</strong>的元素。
    </p>
 
</body>
</html>

在这里插入图片描述

<style>：包含文档的样式信息或者文档的部分内容

开始标签和结束标签都不能省略。

默认情况下，该标签的样式信息通常是CSS的格式。

属性

type 该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css。

media 该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询，默认值为 all。

nonce 一种加密的随机数（一次使用的数字），用于在style-src Content-Security-Policy 中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。

title 指定可选的样式表。

scoped 非标准已弃用
此属性指定样式仅适用于其父项和子项的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style type="text/css">
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        /* body {background-image: url("images/bg_cr_sl.gif")} */
        h1   {font-size: 14pt; color: #993300;}
        pre  {font-size: 12pt; color: #000099;}
        cite {font-size: 11pt; font-weight: bold;}
        img  {width: 400px; height: 200px;}

    </style>

    <style type="text/css" media="screen"> 
        /* <![CDATA[ */ 
        body {background-color: #336600;}
        h1   {font-size: 14pt; color: #CCFFCC;}
        pre  {font-size: 12pt; color: #FFFFFF;}
        cite {font-size: 11pt; font-weight: bold;}
        img  {width: 400px; height: 200px;}
        /* ]]> */ 
   </style>
   
   <style type="text/css" media="print"> 
        /* <![CDATA[ */ 
        body {background-color: #FFFFFF;}
        h1   {font-size: 14pt; color: #CC3300;}
        pre  {font-size: 12pt; color: #666666;}
        cite {font-size: 11pt; font-weight: bold;}
        img  {width: 450px; height: 150px;}
        /* ]]> */ 
   </style>

    <style media="all and (max-width: 500px)">
        p {
            color: blue;
            background-color: yellow;
        }
    </style>
  
</head>
<body>
   
    <h1>URI与URL</h1>
    <pre>
        由于URI与URL的差别太过理论与学术性，各位读者不妨暂且将两者
        都认定为“网址”，也就是将两者视为同等意义即可（URI=URL=网址）,
        有兴趣研究URI、URL、URN三者关系者请参考
        <cite>W3C Note“http://www.w3.org/”。</cite>
    </pre>
    <img src="img/DSC_0164.JPG" alt="画笔"/>
    <p>This is my paragraph.</p>
</body>
</html>

在这里插入图片描述

<sub>：下标元素

行内元素开始标签和结束标签都不能省略。

定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。

这个元素应该只用于排版目的，也就是改变文本的位置会改变含义，例如在数学中（t2，也可以考虑使用 MathML (en-US) 公式）或者化学符号（ H2O）。

这个元素不能用于样式上的目的，比如产品名称 LaTeX 的样式，这时应该使用 CSS样式： vertical-align 属性的 sub 值能实现相同效果。

<sup> HTML 元素会产生上标。你不能同时使用它们，你需要 MathML (en-US) 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>撰写化学方程式</h1>
    <p>
    咖啡因: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
    </p>
    <p>
    氢氧化铝: Al(OH) <sub>3</sub>
    </p>
    <p>
    硫酸: H<sub>2</sub>SO<sub>4</sub>
    </p>
    <p>
    硫酸铝: Al<sub>2</sub> (SO<sub>4</sub>)<sub>3</sub>·16H<sub>2</sub>O
    </p>
 
</body>
</html>

在这里插入图片描述

<summary>：摘要展现元素

<sup>：与主要的文本相比，应该展示得更高并且更小

行内元素开始标签和结束标签都不能省略。

定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。

这个元素应该只用于排版目的，也就是改变文本的位置会改变含义，例如在数学中（f4，也可以考虑使用 MathML (en-US) 公式）或者在法语缩写中（Mlle，Mme 或者 Cie）。

这个元素不能用于样式上的目的，比如产品名称 LaTeX 的样式，这时应该使用 CSS样式： vertical-align 属性的 super 值能实现相同效果。

<sub> HTML 元素会产生下标。你不能同时使用它们，你需要 MathML (en-US) 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>撰写数学方程式</h1>
    <p>
    e<sup> ix</sup> = cos(x) + i sin(x)
    </p>
    <p>
    (A+B)<sup> 2</sup> = A<sup> 2</sup> + 2AB + B<sup> 2</sup>
    </p>
 
</body>
</html>

在这里插入图片描述

<table>：表格元素

块级元素开始标签和结束标签都不能省略。

表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。

在 <th> 元素上提供声明 scope=“col”，将有助于描述该单元格处于一列的顶部。在 <th> 元素上提供声明 scope=“row”，将有助于描述该单元格是某一行的第一个。

属性

~~align~~ 已弃用
这个枚举 (en-US)属性指定了包含在文档中的表格必须如何对齐。可能含有如下值：
- left：表格将在文档左侧显示；
- center：表格将在文档中央显示；
- right：表格将在文档右侧显示；
设置 margin-left、margin-right 为 auto，或者将 margin 设置为 0 auto 来实现类似于 align 属性的效果。

~~bgcolor~~ 已弃用
表格的背景颜色。它是一个 6 位的十六进制 RGB 编码，以 ‘#’ 作为前缀。当然也可以使用下面已经被预先定义的颜色关键字。
为了实现相似的效果，可以使用 CSS 属性 background-color。

~~border~~ 已弃用
这个整型属性定义了环绕表格外部的框的大小。如果设置为 0，这意味着 frame 属性被设置为空。
为了实现相似的效果，可以使用 CSS 简写属性 border。

~~cellpadding~~ 已弃用
这个属性定义了一个单元格的内容和它的边框之间的空间，无论显示与否。如果 cellpadding 的长度是用像素定义的，这个像素大小的空间将被应用到单元格内容的所有四边。如果长度是用百分比值定义的，内容将被居中，总的垂直空间（顶部和底部）将代表这个值。对于总的水平空间（左边和右边）也是如此。
为了实现相似的效果，可以在 <table> 元素上使用属性值为 collapse 的 border-collapse 属性，在 <td> 元素上使用属性 padding。

~~cellspacing~~ 已弃用
这个属性定义了水平和垂直方向上两个单元格之间空间的大小，使用百分比或像素，包括了表格的顶部与第一行的单元格、表的左边与第一列单元格、表的右边与最后一列的单元格、表的底部与最后一行单元格之间的空间。
为了实现相似的效果，可以在 <table> 元素上使用 CSS 属性 border-spacing。border-spacing 在 border-collapse 设置为 collapse 时将无效。

~~frame~~ 已弃用
这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。
为了实现相似的效果，可以使用 CSS 属性 border-style 和 border-width。

~~rules~~ 已弃用
这个枚举属性定义了在一个表格中分隔线的显示位置。它可以有以下值：
- none，这表明没有分隔线将被显示；这是默认的值；
- groups，这将使得分隔线只显示在行组（row group，通过 <thead>、<tbody> 和 <tfoot> 元素定义）和列组（column group，通过 <col> 和 <colgroup> 元素定义）之间
- rows，这将使得分隔线在行之间显示；
- cols，这将使得分隔线在列之间显示；
- all，这将使得分隔线在列和行之间显示；
为了实现相似的效果，可以在适当的 <thead>、<tbody>、<tfoot>、<col> 或 <colgroup> 元素上使用 border 属性。

~~summary~~ 已弃用
该属性定义了概括表格内容的替代文本。请使用 <caption> 元素代替。

~~width~~ 已弃用
该属性定义了表格的宽度。请使用 CSS width 属性代替。

<tbody>：表格主体元素

块级元素元素 <table> 父元素的渲染无需 <tbody> 子元素。然而，如果 <table> 父元素有 <thead>、<tfoot> 或另一个 <tbody> 子元素，它必须存在。如果 <tbody> 元素以 <tbody> 元素开始，并且并不紧跟着一个未关闭的 <tbody> 元素，则其打开标签可以省略。

封装了一系列表格的行（<tr> 元素），代表了它们是表格（<table>）主要内容的组成部分。

如果使用了 <tbody>，所有非标题和非页脚的行都必须在其内。

可以在每一个表格使用多于一个 <tbody>，只要它们是连续的。每个表格里只能有一个 <thead> 元素

属性

~~align~~ 已弃用
枚举属性指定每个单元格内容所使用的水平对齐方式。可选值为：
-left，单元格内容左对齐
- center，单元格内容居中对齐
- right，单元格内容右对齐
- justify，插入空白调整单元格中的文本内容，即两端对齐
- char，将文本内容与一个具有最小偏移量的特定字符对齐，字符和偏移量分别由 char 和 charoff 属性定义。若此值未设置，则假定为 left。
不要使用这个属性，为达到与left, center, right或justify相同的效果，请使用 CSS text-align属性。text-align 属性的 align=“char” 取值尚未在任何浏览器中实现。

bgcolor 非标准
此属性定义了列内单元格的背景色。定义此属性使用’#'作为前缀，其后是定义于sRGB的 6 位十六进制码。也可使用 16 种预定义的色彩字符串之一。
不要使用这个并未标准化的属性，在相关的 <td> 或 <th> 标签上使用 background-color 属性。 |

~~char~~ 已弃用
此属性设置单元格对齐的基准字符。当对齐数字或货币值时，一个典型值会带有一个句点 (.)。如果 align 未设置为 char，此属性将被忽略。
不要使用这个属性，在CSS3中，使用 char 属性作为 text-align 属性的值

~~charoff~~ 已弃用
此属性用作表明列内数据对于对齐基准字符的偏移字符数，对其基准字符由char属性指定。
请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。

~~valign~~ 已弃用
此属性指定表头中每一行内的文本的垂直对齐方式。此属性的可选值为：
- baseline，会使文本尽可能接近单元格底部，但并不向底部对齐，而将它们以字符基线对齐。如果所有字符的大小相同，此值与 bottom 的效果相同；
- bottom，设置文本向下对齐；
- middle，设置文本居中对齐；
- and top，设置文本向上对齐。
不要使用此属性，而是在其上设置CSS垂直对齐属性 vertical-align 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .batman {
          background-color: #d7d9f2;
        }

        .flash {
          background-color: #ffe8d4;
        }

        caption {
          padding: 8px;
          caption-side: bottom;
        }

        table {
          /* 相邻单元格之间共享边框线 */
          border-collapse: collapse;
          border: 2px solid rgb(100, 100, 100);
          letter-spacing: 1px;
          font-family: sans-serif;
          font-size: 0.7rem;
        }

        td,
        th {
          border: 1px solid rgb(100, 100, 100);
          padding: 10px 10px;
        }

        td {
          text-align: center;
        }


        thead > tr > th {
          background-color: #cce;
          font-size: 18px;
          border-bottom: 2px solid #999;
        }

        tbody > tr > th {
          background-color: #dde;
          border-bottom: 1.5px solid #bbb;
          font-weight: normal;
        }

    </style>

</head>
<body>

  <h4>指定表格表头、底纹与主体的背景颜色</h4>
  <div>
    <table>
      <thead style="background:#003399;color:#FFFFFF;">
        <tr>
          <td>　</td>
          <td>销售数量</td>
          <td>市场占有率</td>
          <td>销售数量</td>
          <td>市场占有率</td>
        </tr>
      </thead>
      <tfoot style="background:#336600;color:#FFFFFF;">
        <tr>
          <th>合计</th>
          <th>153,004.0</th>
          <th>100.0</th>
          <th>114,027.1</th>
          <th>100.0</th>
        </tr>
      </tfoot>
      <tbody style="background:#FFFFCC;">	
        <tr>
          <td>Nokia</td>
          <td>44,237.5</td>
          <td>28.9</td>
          <td>39,479.2</td>
          <td>34.6</td>
        </tr>
        <tr>
          <td>Motorola</td>
          <td>25,111.0</td>
          <td>16.4</td>
          <td>16,704.1</td>
          <td>14.7</td>
        </tr>
        <tr>
          <td>Samsung</td>
          <td>19,062.5</td>
          <td>12.5</td>
          <td>12,303.1</td>
          <td>10.8</td>
        </tr>
        <tr>
          <td>Siemens</td>
          <td>12,285.9</td>
          <td>8.0</td>
          <td>8,684.6</td>
          <td>7.6</td>
        </tr>
        <tr>
          <td>Sony Ericson</td>
          <td>8,488.6</td>
          <td>5.6</td>
          <td>5,384.8</td>
          <td>4.7</td>
        </tr>
        <tr>
          <td>LG</td>
          <td>8,109.9</td>
          <td>5.3</td>
          <td>5,571.1</td>
          <td>4.9</td>
        </tr>
        <tr>
          <td>其他</td>
          <td>35,708.5</td>
          <td>23.3</td>
          <td>25,900.3</td>
          <td>22.7</td>
        </tr>
      </tbody>	
    </table>
  </div>

  <table>
    <thead>
      <tr>
        <th>学生 ID</th>
        <th>姓名</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th colspan="2">计算机科学</th>
      </tr>
      <tr>
        <td>3741255</td>
        <td>Jones, Martha</td>
      </tr>
      <tr>
        <td>4077830</td>
        <td>Pierce, Benjamin</td>
      </tr>
      <tr>
        <td>5151701</td>
        <td>Kirk, James</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th colspan="2">俄国文学</th>
      </tr>
      <tr>
        <td>3971244</td>
        <td>Nim, Victor</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th colspan="2">天体物理学</th>
      </tr>
      <tr>
        <td>4100332</td>
        <td>Petrov, Alexandra</td>
      </tr>
      <tr>
        <td>8892377</td>
        <td>Toyota, Hiroko</td>
      </tr>
    </tbody>
  </table>
  
 
</body>
</html>

在这里插入图片描述

<td>：表数据单元格元素

块级元素开始标签是必需的。如果结束标签后面紧跟着\＜th\＞或\＜td\＞元素，或者其父元素中没有更多数据，则可以省略该标记。

属性

colspan 此属性包含一个非负整数值，用于指示单元格扩展的列数。其默认值为1。大于1000的值将被视为不正确，并将被设置为默认值 1。

headers 该属性包含一个以空格分隔的字符串列表，每个字符串对应于应用于该元素的<th>元素的 id 属性。

rowspan 此属性包含一个非负整数值，用于指示单元格扩展的行数。其默认值为1；如果其值设置为0，则它将一直延伸到单元格所属的表节（<thead>、<tbody>、<tfoot>，即使是隐式定义的）的末尾。高于 65534 的值将被剪裁为 65534。

~~abbr~~ 已弃用
此属性包含单元格内容的简短描述。一些用户代理，例如语音阅读器，可能会在内容本身之前呈现此描述。
不要使用此属性，因为它在最新标准中已过时。可以将缩写描述放在单元格中，并将长内容放在title属性中。

~~align~~ 已弃用
此枚举属性指定如何处理单元格内容的水平对齐。可能的值为：
- left: 内容与单元格的左侧对齐。
- center: 内容在单元格中居中。
- right: 内容与单元格右侧对齐。
- justify (仅文字内容): 内容在单元格内展开，以覆盖其整个宽度。
- char (仅文字内容): 内容以最小偏移量与<th>元素内的字符对齐。此字符由char和charoff属性定义。
未指定此属性时的默认值为 left.
不要使用这个属性，left, center, right 或 justify 这些对齐效果，应该使用 CSS 的 text-align 来实现。

~~axis~~ 已弃用
这个属性包含了一个空间分隔的字符串的列表。每个字符串是一组单元格的 ID，而该表头适用于这个 ID。
不要使用这个属性，因为它已经在最新标准中过时。应该使用 scope 属性代替。

~~charoff~~ 已弃用
这个属性用来将列数据移到 char 属性指定字母的右边。其值指定了移动的长度。
不要使用这个属性，因为它已经在最新标准中过时。

~~height~~ 已弃用
此属性用于定义建议的单元高度。请改用CSS height属性。

~~scope~~ 已弃用
此枚举属性定义标头（在<th>中定义）元素所涉及的单元格。仅将此属性与<th>元素一起使用，才能定义它作为标头的行或列。

~~width~~ 已弃用
此属性用于定义推荐的单元格宽度。请改用CSS宽度属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        table {border:1px solid black;width:500px;}
        td {border:1px solid black;}


    </style>

</head>
<body>

  <h4>合并行</h4>
  <div>
    <table>
      <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
      </tr>
      <tr>
        <td>第2行，第1列</td>
        <td rowspan="4">第2行 合并4行</td>
        <td>第2行，第3列</td>
      </tr>
      <tr>
        <td>第3行，第1列</td>
        <td>第3行，第3列</td>
      </tr>
      <tr>
        <td>第4行，第1列</td>
        <td>第4行，第3列</td>
      </tr>
      <tr>
        <td>第5行，第1列</td>
        <td>第5行，第3列</td>
      </tr>
    </table>
  </div>

  <table>
    <caption>
      Alien football stars
    </caption>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </table>

  <h4>合并列</h4>
  <div>
    <table>
      <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
      </tr>
      <tr>
        <td>第2行，第1列</td>
        <td colspan="2">第2行，第2列  +  第2行，第3列</td>
      </tr>
      <tr>
        <td colspan="2">第3行，第1列  +  第3行，第2列</td>
        <td>第3行，第3列</td>
      </tr>
      <tr>
        <td>第4行，第1列</td>
        <td>第4行，第2列</td>
        <td>第4行，第3列</td>
      </tr>
      <tr>
        <td>第5行，第1列</td>
        <td>第5行，第2列</td>
        <td>第5行，第3列</td>
      </tr>
    </table>
  </div>
 
</body>
</html>

在这里插入图片描述

<template>：内容模板元素

<textarea>：文本区元素

行内元素开始标签和结束标签都不能省略。

表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<textarea> 不支持 value 属性。

属性

autocapitalize 非标准
iOS 的非标准属性（运行在 iOS 上的 Safari、Firefox、Chrome 都支持），文本是否自动首字母大写。在 iOS5 和之后的版本上有效。可能的值为：
- none: 禁用首字母大写。
- sentences: 句子的首字母大写。
- words: 单词或者字母的首字母大写。
- characters: 全部字母大写。
- on: 已弃用自 iOS 5 废弃。
- off: 已弃用自 iOS 5 废弃。

autocomplete 是否使用浏览器的记忆功能自动填充文本。可能的值有：
- off: 不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
- on: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。如果不指明autocomplete属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是 textarea 元素的父级<form>或者 textarea有跟表单相同的 id。

autofocus 页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。

cols 文本域的可视宽度。必须为正数，默认为 20 (HTML5)。

disabled 禁用文本域。默认为 false。如果未指定，也可以从父级上如<fieldset>继承而来。

form 指定跟自身相关联的表单。值必须为本文档内的表单的 ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。

maxlength 允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。

minlength 允许用户输入的最小字符长度 (Unicode)

name 元素的名称。

placeholder 向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符 (\r) 或换行符 (\n) 一定会被作为行断（换行）处理。

readonly 不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。

required 提示用户这个元素的内容必填。

rows 元素的输入文本的行数（显示的高度）。

spellcheck 该属性设为 true 时，表明该元素会做拼写和语法检查。属性值为 default 时，表明元素有默认行为，可能会基于父元素的 spellcheck 值。属性值为 false 时，表明元素不做拼写和语法检查。

wrap 指定文本换行的方式。默认为 soft。可能的值为：
- hard: 在文本到达元素最大宽度的时候，浏览器自动插入换行符 (CR+LF) 。比如指定 cols值。
- soft: 在到达元素最大宽度的时候，不会自动插入换行符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        textarea {
          /* 控制文本区是否可调整大小 */
          resize: none;
        }

        /* 在样式中使用有效值和无效值 */
        textarea:invalid {
          border: 2px dashed red;
        }

        textarea:valid {
          border: 2px solid lime;
        }


    </style>

</head>
<body>

  <form name="myForm">
    <p>姓名: <input type="text" value=" 无名氏" size="40" />
    </p>
    <p>
      <label for="advice">意见:</label> 
      <textarea id="advice" cols="40" rows="5" placeholder="意见内容务必填写" style="background-image:url('images/s_r.gif')">
        位于开始标签和闭合标签之间的默认内容。
      </textarea>
      <textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
        Write something here
      </textarea>
      <textarea name="textarea" rows="5" cols="30" disabled>
        I am a disabled textarea
      </textarea>
      <textarea name="textarea" rows="5" cols="30" readonly>
        I am a readonly textarea
      </textarea>
    </p>
    <input type="button" value="发 送" />
  </form>
 
</body>
</html>

在这里插入图片描述

<tfoot>：表格中各列的汇总行

块级元素开始标签是必需的。在父元素 <table> 没有后续内容的情况下，结束标签可被省略。

属性

<th>：定义表格内的表头单元格

块级元素开始标签是必需要的，而结束标签有时可以省略：当其后是<th> 或 <td> ，或者其后没有其他数据内容在其父元素内。

属性

~~abbr~~ 已弃用
这个属性包含一个关于单元格内容的简单的介绍。一个用户代理（例如，语音阅读器）可能出现在描述之前。
不要使用这个属性，因为它已经在最新标准中过时。相对的，你可以把简短的描述放置于单元格内，把较长的描述内容放到 title 属性内。

~~charoff~~ 已弃用
这个属性用来将列数据移到 char 属性指定字母的右边。其值指定了移动的长度。
不要使用这个属性，因为它已经在最新标准中过时。

colspan 这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为1 。超过 1000 的值被视作 1000。

headers 这个属性包含了一个空间分隔的字符串的列表，每个与其他<th>元素相关联的id 属性一一对应。

rowspan 这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为1. 如果该值被设置为 0, 这个单元格就被扩展为 (<thead>，<tbody> 或<tfoot>) 中表格部分的最后一个元素。比 65534 大的值被视作 65534。

scope 这个枚举属性定义了表头元素 (在<th>中定义) 关联的单元格。它可能有以下值：
- row: 表头关联一行中所有的单元格。
- col: 表头关联一列中所有的单元格。
- rowgroup:表头属于一个行组并与其中所有单元格相关联。这些单元格可以被放在表头的左侧或右侧，取决于 <table> 元素中 dir 属性的值。
- colgroup: 表头属于一个列组并与其中所有单元格相关联。
- auto

~~width~~ 已弃用
这个属性用来定义一个期望的单元格宽。额外的空间可以藉由cellspacing 和 cellpadding 属性来增加，并且<col>元素的宽也可以创造额外空间。但是，如果一列宽太窄以至于无法恰当显示某单元格时，它会被自动加宽。
不要使用这个属性，使用 CSS width属性代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        table {border:1px solid black;width:500px;}
        td {border:1px solid black;}

    </style>

</head>
<body>
  <h4>合并标题单元格</h4>
  <div>
    <table>
      <tr>
        <th style="background-color:#6699FF;" colspan="2">标题行第1列<br/>标题行第2列</th>
        <th style="background-color:yellow;">标题行第3列</th>
      </tr>
      <tr>
        <td>第2行</td><td>第2行</td>
        <td>第2行</td>
      </tr>
      <tr>
        <td>第3行</td><td>第3行</td>
        <td>第3行</td>
      </tr>
    </table>
  </div>
 
</body>
</html>

在这里插入图片描述

<thead>：定义了一组定义表格的列头的行

块级元素开头的标签是强制的。如果<thead> 元素后直接跟 <tbody>或<tfoot>元素，结尾的标签可以被省略。

属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .batman {
          background-color: #d7d9f2;
        }

        .flash {
          background-color: #ffe8d4;
        }

        caption {
          padding: 8px;
          caption-side: bottom;
        }

        table {
          border-collapse: collapse;
          border: 2px solid rgb(100, 100, 100);
          letter-spacing: 1px;
          font-family: sans-serif;
          font-size: 0.7rem;
        }

        td,
        th {
          border: 1px solid rgb(100, 100, 100);
          padding: 10px 10px;
        }

        td {
          text-align: center;
        }



    </style>

</head>
<body>

  <h4>指定表格表头、底纹与主体的背景颜色</h4>
  <div>
    <table>
      <thead style="background:#003399;color:#FFFFFF;">
        <tr>
          <td>　</td>
          <td>销售数量</td>
          <td>市场占有率</td>
          <td>销售数量</td>
          <td>市场占有率</td>
        </tr>
      </thead>
      <tfoot style="background:#336600;color:#FFFFFF;">
        <tr>
          <th>合计</th>
          <th>153,004.0</th>
          <th>100.0</th>
          <th>114,027.1</th>
          <th>100.0</th>
        </tr>
      </tfoot>
      <tbody style="background:#FFFFCC;">	
        <tr>
          <td>Nokia</td>
          <td>44,237.5</td>
          <td>28.9</td>
          <td>39,479.2</td>
          <td>34.6</td>
        </tr>
        <tr>
          <td>Motorola</td>
          <td>25,111.0</td>
          <td>16.4</td>
          <td>16,704.1</td>
          <td>14.7</td>
        </tr>
        <tr>
          <td>Samsung</td>
          <td>19,062.5</td>
          <td>12.5</td>
          <td>12,303.1</td>
          <td>10.8</td>
        </tr>
        <tr>
          <td>Siemens</td>
          <td>12,285.9</td>
          <td>8.0</td>
          <td>8,684.6</td>
          <td>7.6</td>
        </tr>
        <tr>
          <td>Sony Ericson</td>
          <td>8,488.6</td>
          <td>5.6</td>
          <td>5,384.8</td>
          <td>4.7</td>
        </tr>
        <tr>
          <td>LG</td>
          <td>8,109.9</td>
          <td>5.3</td>
          <td>5,571.1</td>
          <td>4.9</td>
        </tr>
        <tr>
          <td>其他</td>
          <td>35,708.5</td>
          <td>23.3</td>
          <td>25,900.3</td>
          <td>22.7</td>
        </tr>
      </tbody>	
    </table>
  </div>
 
</body>
</html>

<time>：（日期）时间元素

行内元素开始标签和结束标签都不能省略。

用来表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区。

此元素意在以机器可读的格式表示日期和时间。有安排日程表功能的应用可以利用这一点。

如果给定的日期不是正常日期或者在公历中最早的日期之前，请不要使用此元素。

不能包含子 time 元素。

该元素仍在设计和讨论中

属性

datetime 该属性表示此元素的时间和日期，并且属性值必须是一个有效的日期格式，并可包含时间。如果此值不能被解析为日期，元素不会有一个关联的时间戳。

pubdate (该属性仍在被 WHATWG 和 W3C 组织设计和讨论中.) 此布尔属性指定元素给定的日期和时间是文档的发布日期。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <h1>time元素的应用</h1>
    <p>
    <time pubdate>2013-10-25T16:48:05+08:00</time>
    </p>
    <p>
    <time datetime="2012-10-25">明年的10月25日</time>
    </p>
 
</body>
</html>

在这里插入图片描述

<title>：定义文档的标题

同时需要开标签和闭标签。遗漏 </title> 标签会导致浏览器忽略掉页面的剩余部分。

显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

<title>元素始终在页面的 <head> 块内使用。一个 <head> 元素只能包含一个 <title> 元素。

页面标题的内容可能对搜索引擎优化（SEO）具有重要意义。通常，较长的描述性标题要比简短或一般性标题更好。

避免使用一两个单词的标题。对于词汇表或参考样式的页面，请使用描述性短语或术语 - 定义对。

搜索引擎通常显示页面标题的前 55 至 60 个字符。超出此范围的文本可能会丢失，因此请尽量不要使标题更长。如果你必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。

不要使用“关键字集合”。如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。

尝试确保你的标题在你自己的网站中尽可能唯一。标题重复（或几乎重复）可能会导致搜索结果不准确。

<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>

<title>2 errors - Your order - Blue House Chinese Food - FoodYum: Online takeout today!</title>

<title lang="en">document title</title>

<tr>：定义表格中的行

块级元素开始标签是必需的。如果<tr>元素后面紧跟着<tr>，或者父表组（<thead>、<tbody>或<tfoo\t>）元素没有更多内容，则可以省略结束标签。

同一行可同时出现<td> 和<th> 元素。

属性

~~align~~ 已弃用
该枚举属性指定每个单元格中内容的水平对齐方式，可使用的属性值如下：
- left, 内容在单元格中左对齐
- center, 内容在单元格中居中
- right, 内容在单元格中右对齐
- justify, 增加文本内容之间的空白以伸展这行文本，使得该单元格中的多行文本具有相同的长度。
不要使用此属性，要获得与左、中、右或对齐值相同的效果，请在其上使用CSS文本对齐属性 text-align 。

~~bgcolor~~ 已弃用
此属性定义行中每个单元格的背景色。它可以是十六进制的#RRGGBB或#RGB值或颜色关键字。
不要使用此属性，请使用CSS属性背景色 background-color 。

~~char~~ 已弃用
此属性用于设置用于对齐列中单元格的字符。此属性的典型值包括试图对齐数字或货币值时的句点（.）。如果align未设置为char，则会忽略此属性。
请勿使用此属性，在CSS3中，可以使用字符集，使用 char 属性作为 text-align 属性的值

~~charoff~~ 已弃用
此属性用于指示从char属性指定的对齐字符偏移列数据的字符数。
请勿使用此属性，因为它在最新标准中已过时（且不受支持）。

~~valign~~ 已弃用
此属性指定表格标题每行单元格中文本的垂直对齐方式。此属性的可能值为：
- baseline 使文本尽可能靠近单元格底部，但将其对齐在字符的基线上，而不是字符的底部。如果字符都是相同大小的，这和 bottom 的效果相同。
- bottom，这将使文本尽可能靠近单元格的底部；
- middle，这将使文本在单元格中居中；
- top，这将使文本尽可能靠近单元格的顶部。
不要使用此属性，而是在其上设置CSS垂直对齐属性 vertical-align 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        table {border:1px solid black;width:500px;}
        td {border:1px solid black;}


    </style>

</head>
<body>

  <h4>指定表格的背景图案</h4>
  <div>
    <table style="width:500px; background-image:url(images/s_r.gif);">
	    <tr>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
	    </tr>
	    <tr>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
	    </tr>
	    <tr>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
		    <td>单元格</td>
	    </tr>
    </table>
  </div>

  <h4>水平方向一整行的单元格数据对齐方式</h4>
  <div>
    <table>
	    <tr style="valign:top;text-align:left;">
		    <td>水平靠左，垂直靠上</td>
		    <td>水平靠左，垂直靠上</td>
	    </tr>
	    <tr style="valign:middle;text-align:center;">
		    <td>水平，垂直居中</td>
		    <td>水平，垂直居中</td>
	    </tr>
	    <tr style="valign:bottom;text-align:right;">
		    <td>水平靠右，垂直靠下</td>
		    <td>水平靠右，垂直靠下</td>
	    </tr>
    </table>
</div>
 
</body>
</html>

在这里插入图片描述

<track>：指定时序文本字幕（或者基于时间的数据），例如自动处理字幕

<tt>：已弃用

<u>：未阐明的注释（下划线）元素

<ul>：无序列表元素

块级元素开始标签和结束标签都不能省略。

表示一系列无序的列表项目，通常渲染为项目符号列表。

属性

compact 已弃用非标准
此布尔属性提示列表是否需要被渲染为更紧凑的样式。用户代理决定如何解释这个属性，且并非所有浏览器都支持它。
不要使用这个属性，因为它已经被废弃了：请使用 CSS 来更改样式。如果想达到与 compact 属性相同的效果，将 CSS 属性 line-height 的值设为 80% 即可。

type 已弃用非标准
用于设置列表的着重号样式，定义于 HTML3.2 和过渡版本 HTML 4.0/4.01 中的可用值有：circle disc square 存在第四种定义于 WebTV 接口的着重号样式，但并不是所有浏览器都支持：triangle。
如果未设置此 HTML 属性且没有 CSS list-style-type 属性作用于这个元素，用户代理会决定使用哪种着重号样式，一般来说这也和嵌套的层级数有关。
不要使用这个属性，它已经被废弃了：请使用 CSS list-style-type 属性作为代替。

<ul> 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形。虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 list-style-type 属性。

<ul> 和 <ol> 元素可以嵌套任意深度。此外，嵌套列表可以不受限制地在 <ol> 和 <ul> 之间交替使用。

<ol> 和 <ul> 元素二者都代表一组数据，<ol> 元素中的顺序是有意义的。如果想确定到底需要使用哪一个列表元素，可以试着去改变数据的顺序。如果想表达的语义改变了，就需要使用 <ol> 元素，否则该使用 <ul> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>
</head>
<body>

    <table>
        <tr>
            <td>
                <h2>JavaScript 精致范例辞典</h2>
                为方便查阅, 本书提供下列 3 种索引方式：
                <ul>
                    <li>【分类指令索引】</li>
                    <li>【范例索引】</li>
                    <li>【字母索引】</li>
                </ul>
            </td>
            <td><img src="img/0010348854.jpg" alt="封面" /></td>
        </tr>
    </table>

 
    <ul>
        <li>第一项</li>
        <li>
          第二项
          <!-- 注意，关闭的 </li> 标签没有放置在这里！-->
          <ul>
            <li>第二项第一子项</li>
            <li>
              第二项第二子项
              <!-- 第二个嵌套的无序列表也一样！-->
              <ul>
                <li>第二项第二子项第一子子项</li>
                <li>第二项第二子项第二子子项</li>
                <li>第二项第二子项第三子子项</li>
              </ul>
            </li>
            <!-- 为包含第三个无序列表的 li 关闭 </li> 标签 -->
            <li>第二项第三子项</li>
          </ul>
          <!-- 关闭的 </li> 标签在这里！ -->
        </li>
        <li>第三项</li>
      </ul>
      
</body>
</html>

在这里插入图片描述

<var>：表示变量的元素

行内元素开始标签和结束标签都不能省略。

表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。

与 <var> 一同使用的元素一般包含：

<code>：HTML 代码元素
<kbd>：HTML 键盘输入元素
<samp>：HTML 示例输出元素

如果遇到的代码是出于样式目的而不是语义目的地错误使用 <var>，应该使用带有适当 CSS 的 <span> 元素或者在下列元素中使用适当的语义元素。

<em>
<i>
<q>

大部分浏览器在渲染 <var> 元素时为 font-style 赋予 “italic” 样式，此样式可像这样由 CSS 覆盖：

var {
  font-style: normal;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        var {
            font:
            bold 15px "Courier",
            "Courier New",
            monospace;
        }


    </style>
</head>
<body>

    <h4>程序代码范例</h4>
    <pre>
        <code>
            function Renew() {
                <var>posX</var> = document.body.clientWidth - <var>Xpos</var>
                <var>posY</var> = document.body.clientHeight - <var>Ypos</var>
                document.myMap.style.left = document.body.scrollLeft + <var>posX</var>
                document.myMap.style. top = document.body.scrollTop + <var>posY</var>
            }
        </code>
    </pre>
 
</body>
</html>