HTML写元素周期表
<!DOCTYPE html> //文档声明，用于解析文档的版本，若不写此行，则浏览器则会以最低版本解析，出现怪异模式 <html> //文档的根元素所有元素的祖先元素 <head lang="en"> //文档头 ，lang属性为浏览器使用的解析语言 <meta charset="UTF-8"> //字符编码集：告诉浏览器解析的语言版本 <title>元素周期表</title> //标题 ，SEO搜索抓取关键词部分 <link rel="stylesheet" href="./HTML5Stars.css"/> //使用外部样式表书写，代码分离，条例清晰，方便阅读和后期维护 ， ./表同级目录查找路径 </head> <body> //根元素的子元素，文档体，所有页面的信息显示部分 <header> //语义化标签，鉴于html5之前的div等标签无法见闻知意，表示区域的含义，因而增加这种标签，对开发者编写条例清晰，SEO更利于是实现优化 <h1>HTML5标签含义之元素周期表</h1> //文本标题1~6级， <a href="http://www.html5star.com/">参见html5star.com</a> //超链接实现页面的跳转 </header> <article> //语义化标签，用于划分正文部分 <!--//一排--> <ul> //无序列表 ，用于制作表单和导航 <li class="blackGreenColor"><abbr title="<html>Document root element.文档根元素Mozilla W3C Reference ">html</abbr></li> //abbr对编写词的引用，鼠标悬停，显示该元素的详解 <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="coffeColor"><abbr title="<col> Columns in a table. 表格中的列。为表格中的一个或多个列定义属性值。您只能在表格或列组中使用该元素。">col</abbr></li> <li class="coffeColor"><abbr title="<table> Table of multi-dimensional data. 表格"></abbr>table</li> </ul> <!--第二行--> <ul> <li class="blue"><abbr title="<head> First element of the HTML document. Contains document metadata. HTML文档中的第一个元素。包含文档元数据">head</abbr></li> <li class="yellow"><abbr title="<span> Container with no semantic meaning. 无语义的容器">span</abbr></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="orange"><abbr title="<div> Container with no semantic meaning. 无语义的容器">div</abbr></li> <li class="green"><abbr title="<fieldset> Set of form controls grouped by theme. 按用途组合的一组表单控制元素。此标签将表单内容的一部分打包，生成一组相关表单的字段。此标签没有必需的或唯一的属性。 当一组表单元素放到该标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。">fieldset</abbr></li> <li class="green"><abbr title="<form> 表单。在 HTML 5 中有一些新属性，同时不再支持 HTML 4.01 中的一些属性。 在 HTML 5 中有一个新属性：replace。它定义表单被提交后所做的事情">form</abbr></li> <li class="lightblue"><abbr title="<body> Document content. 文档的主体。在 HTML 5 中，删除了所有 <body> 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的。">body</abbr></li> <li class="lightblue"><abbr title="<h1> Heading for the current section.<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层 叠样式表定义来达到漂亮的显示效果 在 HTML 4.01 中，h1 - h6 元素的 <align> 属性不被赞成使用。 在 HTML 5 中，h1 - h6 元素的 <align> 属性不被支持">h1</abbr></li> <li class="lightblue"><abbr title="<section> Contains elements grouped by theme, for example a chapter or tab box.定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分 ，<section> 标签是 HTML 5 中的新标签">section</abbr></li> <li class="coffeColor"><abbr title="<colgroup> Defines a group of columns in a table. 对表格中的若干列进行组合。定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。该元素只有在 <table> 中才是合法的。注释：colgroup 元素只能包含 col 元素。注释：colgroup 元素无法创建表格列。如需创建列，必须在 tr 元素内规定 td 元素。提示：如果需要向一个列组规定相同的属性值，请使用该元素。提示：如果需要为一个或多个列规定属性值，请使用 col 元素">colgroup</abbr></li> <li class="coffeColor"><abbr title="<tr> A row of cells 表格中的一行单元,在 HTML 5 中，不支持 <tr> 标签的任何属性。">tr</abbr></li> </ul> <!--第三行--> <ul> <li class="blue"><abbr title="<title> Document title.文档标题">title</abbr></li> <li class="yellow"><abbr title="<a> Hyperlink.超链接。在 HTML 4.01 中，<a>标签既可以是超链接，也可以是锚。这取决于是否描述了 href 属性。 在 HTML 5 中，<a> 是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符。 HTML 5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性 ">a</abbr></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="none"></li> <li class="orange"><abbr title="<pre> Text that is preformatted in the HTML code.在HTML代码中预先格式化的文本被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 pre标签的一个常见应用就是用来表示计算机的源代码。在 HTML 4.01 中，不赞成使用 width 属性，在 HTML 5 中不再支持该属性。 提示：请使用pre标签来显示非常规的格式化内容，或者某类计算机代码。 ">pre</abbr></li> <li class="green"><abbr title="<meter> Control for entering a numeric value in a known range 控制在已知范围内输入度量值。meter标签定义度量（单位）。仅用于已知最大和最小值的度量。meter标签是 HTML 5 中的新标签。注释：必须定义度量的范围，既可以在 text 中，也可以在 min/max 属性中定义。">meter</abbr></li> <li class="green"><abbr title="<select>Control for selecting from multiple options.有多选值的下拉列表HTML 5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性。查看详细 ">select</abbr></li> <li class="lightblue"><abbr title="<aside>Content related to surrounding elements that doesn't belong inline, such as a advertising or quotes与周围元素相关的内容，但分开显示定义 article 以外的内容。aside 的内容应该与 article 的内容相关aside标签是 HTML 5 的新标签。查看详细 ">aside</abbr></li> <li class="lightblue"><abbr title="<h2>Heading for the current section.当前章节的标题。<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层 叠样式表定义来达到漂亮的显示效果。在 HTML 4.01 中，h1 - h6 元素的 <align> 属性不被赞成使用。 在 HTML 5 中，h1 - h6 元素的 <align> 属性不被支持。">h2</abbr></li> <li class="lightblue"><abbr title="<header>Navigation or introductory elements for the current section.当前章节的导航或引导性元素header标签定义 section 或 document 的页眉。header标签是 HTML 5 中的新标签">header</abbr></li> <li class="coffeColor"><abbr title="<caption>Title of a table.表格的标题<caption> 标签必须紧随 <table> 标签之后。HTML 4.01 不赞成使用 align 属性。在 HTML 5 中，不支持该标签。请使用 CSS 代替。查看详细">caption</abbr></li> <li class="coffeColor"><abbr title="<td>Table cell.定义表格单元格。在 HTML4.01中，td 元素的 bgcolor、height、width 以及 nowra 是不被赞成使用的。 在 HTML5中，仅仅支持colspan 和 rowspan 属性。 查看详细 ">td</abbr></li> </ul> <!--第四行--> <ul> <li class="blue"><abbr title="<meta>Document metadata that can't be represented with other elements.文档的元数据。meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 meta标签位于文档的头部，不包含任何内容。meta标签的属性定义了与文档相关联的名称/值对。在 HTML 5 中，不再支持 scheme 属性。 在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。查看详细 ">meta</abbr></li> <li class="yellow"><abbr title="<rt>Annotation of preceding text.文本的解释">rt</abbr></li> <li class="yellow"><abbr title="<dfn>Term being defined by the parent section.由父级章节定义的项">dfn</abbr></li> <li class="yellow"><abbr title="Text that should be emphasised.需要强调的文本。">em</abbr></li> <li class="yellow"><abbr title="Text in a alternate voice or mood, such as a technical term.斜体的文本。<i> 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。在没有其他元素可以使用时，比如 <b>, <cite>, <dfn>, <em>, <q>, <small>, <strong>，请使用 <i> 标签。在 HTML 4.01 中，存在着一种理解，即应该使用 CSS 来制作斜体文本。在 HTML 5 中，情况没有改变，但是你应该使用 <i> 标签把部分文本定义为某种类型，而不只是利用它在布局中所呈现的样式。 查看详细 ">i</abbr></li> <li class="yellow"><abbr title="<small>An aside, such as fine print.更小的旁注信息。<small> 标签制作更小字号的文本。在 HTML 5 中不支持<small>标签。 ">small</abbr></li> <li class="yellow"><abbr title="<ins> Text that has been inserted during document editing.在文档编辑过程中插入的文本。<ins>标签定义文档的其余部分之外的插入文本。提示：请与 <del> 标签一起使用，来描述对文档的更新和修正。 查看详细 ">ins</abbr></li> <li class="yellow"><abbr title="<s>Text that is outdated or no longer accurate.失效或不再准确的文本。<s>标签定义加删除线的文本。HTML 5 中不再支持这个标签。请使用 CSS 代替。">s</abbr></li> <li class="orange"><abbr title="<br>Line break.换行符">br</abbr></li> <li class="orange"><abbr title="<p> Paragraph content.段落内容。在 HTML 4.01 中，不赞成使用 align 属性，在 HTML 5 中不再支持该属性。 ">p</abbr></li> <li class="orange"><abbr title="<blockquote> Quote from another source.从其它源引用的内容。HTML 4.01 与 HTML 5 无差异。 查看详细 ">blockquote</abbr></li> <li class="green"><abbr title="<legend>Define a name for a fieldset.图例或表的说明。<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题.在 HTML 4.01 中， <legend> 仅用于 <fieldset> 元素。在 HTML 5 中， <legend> 标签应用于 <fieldset>、<figure> 以及 <details> 元素。 在 HTML 5 中，不支持 align 属性。请使用 CSS 代替。查看详细 ">legend</abbr></li> <li class="green"><abbr title="<optgroup>Group of option.选项组。<optgroup> 标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。HTML4.01与 HTML5之间无差异查看详细 ">optgroup</abbr></li> <li class="lightblue"><abbr title="<address>Contact information for the current article.当前文章的联系信息。注释：address 通常被呈现为斜体。大多数浏览器会在 address 元素的前后添加一个换行符，不过如果有必要的话，您需要在地址文本的内容添加额外的换行符。 查看详细 ">address</abbr></li> <li class="lightblue"><abbr title="Heading for the current section.当前章节的标题。<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层 叠样式表定义来达到漂亮的显示效果。在 HTML 4.01 中，h1 - h6 元素的 align 属性不被赞成使用。 在 HTML 5 中，h1 - h6 元素的 align 属性不被支持。">h3</abbr></li> <li class="lightblue"><abbr title="<nav>Contains a collection of links.导航链接的容器。<nav> 标签是 HTML 5 中的新标签提示：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。">nav</abbr></li> <li class="white"><abbr title="<menu>Set of commands.菜单列表。当希望列出表单控件时使用该标签.在 HTML4.01 中，不赞成使用 menu 元素。 在 HTML5 中，重新定义了 menu 元素，且使用用于排列表单控件.">menu</abbr></li> <li class="coffeColor"><abbr title="<th>Table heading.表头。<th> 标签定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。在 HTML 4.01 中，th 元素的 bgcolor、height、width 以及 nowrap 属性是不被赞成使用的。在 HTML 5 中，仅仅支持 colspan 、 rowspan 以及 scope 属性。">th</abbr></li> </ul> <!--第五行--> <ul> <li class="blue"><abbr title="<base>Specifies URL which non-absolute URLs are relative to.定义非绝对的链接地址所相对的默认 URL。<base>标签规定页面中所有链接的基准 url。">base</abbr></li> <li class="yellow"><abbr title="<rp>Contains semantically meaningless markup for browsers that don't understand ruby annotations.针对不支持ruby 注音的浏览器，用于注释信息">rp</abbr></li> <li class="yellow"><abbr title="<abbr>Abbreviation or acronym.缩写或缩略词。表示一个缩写形式，比如 Inc.、etc.。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。<abbr>标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。 浏览器可能会根据这个信息改变对这些文本的显示方式，或者用其他文本代替。也许当前流行的浏览器对<abbr>标签中包含的文本还没有任何处理方式，但是我们无法预测将来的版本将会如何实现该标签。">abbr</abbr></li> <li class="yellow"><abbr title="<time>Time defined in a machine readable format.定义日期或时间，或者两者。<time>标签是 HTML 5 中的新标签。">time</abbr></li> <li class="yellow"><abbr title="<b>Stylistically separated text of equal importance, such as a product name.粗体文本，用于强调">b</abbr></li> <li class="yellow"><abbr title="Text that is important.重要的文本。在 HTML4.01中，<strong> 定义语气更重的强调文本，但是在 HTML 5 中，<strong>定义重要的文本。 ">strong</abbr></li> <li class="yellow"><abbr title="<del>Text that has been removed during document editing.在编辑过程中被删除的文本。提示：与 <ins> 一起使用，描述文档中的更新和修正。">del</abbr></li> <li class="yellow"><abbr title="<kbd>Example input (usually keyboard) for a program.由键盘输入的文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。">kbd</abbr></li> <li class="orange"><abbr title="<hr>Thematic break within a paragraph.水平线/内容主题的变化。在 HTML4.01 中，不赞成使用 align, noshade, size 以及 width 属性。在 HTML 5 中不再支持这些属性。在 HTML5 中，<hr> 标签定义内容中的主题变化，并显示为一条水平线。 在 HTML4.01 中，它仅仅显示为一条水平线。">hr</abbr></li> <li class="orange"><abbr title="<ol>Ordered list.有序列表。在 HTML 4.01 中，不赞成使用 start 属性，在 HTML 5 中是允许的。在 HTML 4.01 中，不赞成使用 compact 和 type 属性，在 HTML 5 中，不再支持这两个属性。">ol</abbr></li> <li class="orange"><abbr title="<dl>List of term-description pairs.带定义的列表">dl</abbr></li> <li class="green"><abbr title="<label>Caption for a form control.表单控件的标题（标签）。<label>标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。注释：for 属性可把 label 绑定到另外一个元素。请把 for 属性的值设置为相关元素的 id 属性的值。">label</abbr></li> <li class="green"><abbr title="<option>Single option within a select control.下拉列表中的单一选项在 HTML 5 中，<option> 标签也用于新元素 <datalist> 中。注释：<option> 标签能够在不带任何属性的情况下使用，但是通常需要 value 属性，该属性定义了发送到服务器的数据。请与 <select> 或 <datalist> 标签结合使用。在其他地方，<option> 标签是无意义的。">option</abbr></li> <li class="green"><abbr title="<datalist>Define sets of options.定义选项列表。<datalist>标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。<datalist>标签是 HTML 5 中的新标签。">datalist</abbr></li> <li class="lightblue"><abbr title="<h4>Heading for the current section.当前章节的标题。<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层 叠样式表定义来达到漂亮的显示效果。在 HTML 4.01 中，h1 - h6 元素的 align 属性不被赞成使用。 在 HTML 5 中，h1 - h6 元素的 align 属性不被支持。">h4</abbr></li> <li class="lightblue"><abbr title="<article>Section of the page content, such as a blog or forum post.页面内容的独立部分，如博客文章、论坛帖子<article>标签是 HTML 5 的新标签。">article</abbr></li> <li class="white"><abbr title="<command>Command the user can perform, such as publishing an article.用户可以执行的命令，如发表一篇文章。<command>标签定义命令按钮，比如单选按钮、复选框或按钮。<command>标签是 HTML 5 中的新标签。">command</abbr></li> <li class="coffeColor"><abbr title="<tbody>Contains rows that hold the table's data.表格主体。使用<tbody>标签，可以将表格分为一个单独的<tbody> 标签可将表格中的一行或几行合成一组。 虽然您可能想包括一个，甚至会在表格中包括两个或更多个<tbody> 标签，但是我们建议最好在表格中没有 <tbody> 标签。在 <tbody> 标签中，只有 tr标签可以定义表格行。并且一旦定义，一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个<tbody>跨越到另一个 <tbody> 中。thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。">tbody</abbr></li> </ul> <!--第六行--> <ul> <li class="blue"><abbr title="<link>Other resources related to the document.与文档相关的其它资源。注释：link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任意次数。">link</abbr></li> <li class="blue"><abbr title="<noscript>Contains elements that are part of the document only if scripting is disabled.当脚本被禁用时显示的一部分文档内容。注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！ ">noscript</abbr></li> <li class="yellow"><abbr title="<q>Quoted text.引用的文本。提示：请使用 cite 属性来定义该引用的来源。 ">q</abbr></li> <li class="yellow"><abbr title="<var>Mathematical or programming variable.定义数学或程序变量。您可以将此标签与 <pre> 及 <code>标签配合使用。 ">var</abbr></li> <li class="yellow"><abbr title="<sub>Subscript text.上标。<sub>标签可定义下标文本。<sup> 可定义上标文本">sub</abbr></li> <li class="yellow"><abbr title="<mark>Text highlighted for referencing elsewhere.突出显示的文本">mark</abbr></li> <li class="yellow"><abbr title="<bdi>Text that is separated from directional formatting of its surroundings.从周围内容分开，而设置不同的文本方向">bdi</abbr></li> <li class="yellow"><abbr title="<wbr>Opportunity for a line break.软回车（必要时才回车）">wbr</abbr></li> <li class="orange"><abbr title="<figcaption>Caption for a figure.图片的标题，图题">figcaption</abbr></li> <li class="orange"><abbr title="<ul>在 HTML 4.01 中，ul 元素的 compact 和 type 属性是不被赞成使用的。在 HTML 5 中，不再支持这两个属性。提示：请使用 CSS 来定义列表的类型。Unordered list.无序列表。">ul</abbr></li> <li class="orange"><abbr title="<dt>Term which will be described.带定义的列表中的项目。HTML 5 引入了<dialog> 标签。在 dialog 中，<dt>标签定义句子所属的角色。">dt</abbr></li> <li class="green"><abbr title="<input> Generic form input.表单中的输入字段。在 HTML 5 中，该元素有很多新属性，同时不再支持 HTML 4.01 中的一些属性。在 HTML 5 中，type 属性有很多新的值。">input</abbr></li> <li class="green"><abbr title="<output>Contains the results of a calculation.输出的结果。<output>标签是 HTML 5 中的新标签。">output</abbr></li> <li class="green"><abbr title="<keygen>Generates private-public key pairs.生成密钥对">keygen</abbr></li> <li class="lightblue"><abbr title="<h5>Heading for the current section.当前章节的标题。<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层 叠样式表定义来达到漂亮的显示效果。在 HTML 4.01 中，h1 - h6 元素的 align 属性不被赞成使用。 在 HTML 5 中，h1 - h6 元素的 align 属性不被支持。">h5</abbr></li> <li class="lightblue"><abbr title="<footer>Footer of the current section.当前章节的页脚。<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。提示：假如您使用 footer 来插入联系信息，应该使用 <address> 元素。 ">footer</abbr></li> <li class="white"><abbr title="<summary>Caption of a details element.dedails元素的标题">summary</abbr></li> <li class="coffeColor"><abbr title="<thead>Contains rows with table headings.定义表格中的表头行。head、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。在 HTML 5 中，不支持 <thead> 标签的任何属性。注释：<thead> 内部必须拥有 <tr>标签！如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。 ">thead</abbr></li> </ul> <!--第七行--> <ul> <li class="blue"><abbr title="<style> Styling defined inline data.在文档中定义的样式。scoped 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。 在 HTML 5 中，所有元素都不支持 style 属性，如需为一个元素添加样式，请在 style 元素中使用 scoped 属性。注释：如果没有定义 scoped 属性，则 <style>元素必须是 head 元素的子元素，或者是（属于 head 元素的子元素的） noscript 元素的子元素。">style</abbr></li> <li class="blue"><abbr title="<script>Inline or linked client side scripts.内部或外部链接的脚本。如果 async 属性为 true，则脚本会相对于文档的其余部分异步执行，这样脚本会可以在页面继续解析的过程中来执行。 如果 async 属性为 false，而 defer 属性为 true，则脚本会在页面完成解析时得到执行。 如果 async 和 defer 属性均为 false，那么脚本会立即执行，页面会在脚本执行完毕继续解析。提示：如果存在 src 属性，则 <script> 标签必须是空的。">script</abbr></li> <li class="yellow"><abbr title="<cite>Title of a referenced piece of work.对参考文献等的引用">cite</abbr></li> <li class="yellow"><abbr title="<samp>Sample output of a program.程序的样本">samp</abbr></li> <li class="yellow"><abbr title="<sup> Superscript text.下标">sup</abbr></li> <li class="yellow"><abbr title="<ruby>Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text.东亚文字的注音，如中文的拼音">ruby</abbr></li> <li class="yellow"><abbr title="<bdo>Defines directional formatting for content.定义内容的排版方向">bdo</abbr></li> <li class="yellow"><abbr title="<code>Fragment of code.代码的片断">code</abbr></li> <li class="orange"><abbr title="<figure>Contains elements related to single concept, such as an illustration or code example.独立的内容，如图像、代码等。figure 标签是 HTML 5 中的新标签。提示：请使用 <legend> 元素为元素组添加标题。">figure</abbr></li> <li class="orange"><abbr title="<li>List item.列表项目。在 HTML4.01 中， 不赞成使用 type 和 value 属性。在 HTML5 中，不再支持 type 属性。 在 HTML5 中， 并没有不赞成使用 value 属性，但是仅能够与 ol 元素一起使用。提示：请使用 CSS 来定义列表的类型">li</abbr></li> <li class="orange"><abbr title="<dd>Description for the preceding term.带定义列表中对项目的描述">dd</abbr></li> <li class="green"><abbr title="<textarea>Multiline free-form text input.多行的文本输入区域。">textarea</abbr></li> <li class="green"><abbr title="<button>A button.按钮。您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。在 HTML 5 中有一个新属性：autofocus。">button</abbr></li> <li class="green"><abbr title="<progress>Control for displaying progress of a task.运行中的进度控制。<progress> 标签是 HTML 5 中的新标签。提示：请使用<progress>标签来显示下载的进程。">progress</abbr></li> <li class="lightblue"><abbr title="<h6>Heading for the current section.当前章节的标题。<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层 叠样式表定义来达到漂亮的显示效果。在 HTML 4.01 中，h1 - h6 元素的 align 属性不被赞成使用。 在 HTML 5 中，h1 - h6 元素的 align 属性不被支持。">h6</abbr></li> <li class="lightblue"><abbr title="<hgroup>Collection of headings for the current section. The highest ranked heading represents the group in the document outline.当前章节各标题的组合">hgroup</abbr></li> <li class="white"><abbr title="<details>Contains additional information, such as the contents of an accordian view.附加的详细信息。<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。<details> 标签是 HTML 5 中的新标签。提示：与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。">details</abbr></li> <li class="coffeColor"><abbr title="<tfoot>Contains rows with summary of data.表格的页脚/脚注行。">tfoot</abbr></li> </ul> <!--最后一行，粉色--> <ol class="lastRight"> <li><abbr title="<img>An image.图像">img</abbr></li> <li><abbr title="<area>Hyperlink area in an image map.图像映射的超链接区域 ">area</abbr></li> <li><abbr title="<map>Image map for adding hyperlinks to parts of an image.在图像的一部分区域定义图像映射用于添加超链接 ">map</abbr></li> <li><abbr title="<embed>Reference to non-HTML content.嵌入的非HTML内容">embed</abbr></li> <li><abbr title="<object>External resource such as an image, iframe or plugin.嵌入的外部资源，如图像、iframe或插件。 ">object</abbr></li> <li><abbr title="<param>Parameters for the parent object.父级对象的参数。">param</abbr></li> <li><abbr title="<source>Alternative sources for parent video or audio elements.父级视频或音频元素的资源。">source</abbr></li> <li><abbr title="<iframe>Nested browser frame.嵌套的框架。在 HTML 5 中，仅仅支持 src 属性 ">iframe</abbr></li> <li><abbr title="<canvas>Bitmap which is editable by client side scripts.可以通过客户端脚本编辑的图形（画布）。">canvas</abbr></li> <li><abbr title="<track>Specifies external timing track for media elements.媒体类元素的外部轨道">track</abbr></li> <li><abbr title="<audio>Audio file.音频文件。<audio>标签是 HTML 5 的新标签。">audio</abbr></li> <li><abbr title="<video>Video.视频。<video> 标签是 HTML 5 的新标签。">video</abbr></li> </ol> </article> <footer> <div> <span><a href="#" class="blackGreenColor"></a>根元素</span> <span><a href="#" class="yellow"></a>文本级别语义</span> <span><a href="#" class="green"></a>表单</span> <span><a href="#" class="coffeColor"></a>表格数据</span> <span><a href="#" class="blue"></a>元数据和脚本</span> </div> <div> <span><a href="#" class="orange"></a>组合内容</span> <span><a href="#" class="lightblue"></a>文档章节</span> <span><a href="#" class="white"></a>交互元素</span> <span><a href="#" class="prink"></a>嵌入式内容</span> </div> </footer> </body> </htmlbody{ //使用了弹性盒模型使页面居中显示，
background-color: #f0f0f0; width: 100%; text-align: center; flex: auto; justify-content: center; } ul{ //flex并列显示，置中 display: flex; justify-content: center; } li{ //集中给定li元素宽高，背景，边框，内容溢出隐藏，边框圆角 width: 30px; height: 30px; padding: 10px; background-color: aqua; margin: 8px; border: solid 1px #f0f0f0; list-style: none; /*单词内断开换行*/ /*word-wrap: break-word;*/ /*内容溢出隐藏*/ overflow: hidden; /*边框圆角*/ border-radius: 5px; /*文本上下对齐*/ line-height: 30px; } li:hover{ //当鼠标悬停时，元素放大显示，并伴有阴影效果 /*放大*/ transform: scale(1.2); /*鼠标悬浮阴影*/ box-shadow:inset -0.5px -0.5px 2px black; } //隐藏没有内容的li标签 .none{ visibility: hidden; } /*最后一行*/ .lastRight{; width: 80%; display: flex; margin: 50px auto; justify-content: center; } .lastRight li{ background-color: #faa7fb; } /*脚本*/ footer{ overflow: hidden; padding: 20px; margin: auto; width: 1100px; background-color: #fdfdfe; } footer div{ text-align: center; display: flex; justify-content: center; } footer>div>span{ line-height: 30px; margin-left: 120px; } /*精灵图*/ footer div span a{ display: inline-block; width: 11px; height: 11px; border: solid 1px blue; border-radius: 5px; } /*//样式设置*/ //给元素归类，显示不同的颜色 /*颜色*/ /*墨绿*/ .blackGreenColor{ background-color: #b5e1d0; } /*咖啡色*/ .coffeColor{ background-color: #f1bdaa; } /*橙色*/ .orange{ background-color: #faa770; } /*黄色*/ .yellow{ background-color: #fafb80; } /*蓝色*/ .blue{ background-color: #8f9ffb; } /*浅蓝*/ .lightblue{ background-color: #afbbfb; } /*绿色*/ .green{ background-color: #7ffb80; } /*白色*/ .white{ background-color: #fafbfb; } .prink{ background-color: #faa7fb; }
总结：实现该页面初衷是为了能记住元素周期表的每个元素及含义，以及使用场景。在布局方面，使用了ul和ol列表格式，弹性盒模型调整样式，其实若把这些元素看成一个个表格显示更方便table配合tr、td更容易实现，弹性和模型都不需要技能实现。
