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更容易實現，彈性和模型都不須要技能實現。css
相關文章
- 1. three.js之元素週期表
- 2. three.js css3d - 元素週期表
- 3. 鏈圈元素週期表
- 4. html的學習記錄1，html元素週期表
- 5. TWaver版3D化學元素週期表
- 6. HTML表單元素
- 7. 化學元素週期表150週年：部分元素百年內或消失
- 8. HTML（三）：表單元素
- 9. HTML的表單元素
- 10. HTML表單元素、表單控件
- 更多相關文章...
- • Rust 生命週期 - RUST 教程
- • SVN 生命週期 - SVN 教程
- • 使用Rxjava計算圓周率
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. three.js之元素週期表
- 2. three.js css3d - 元素週期表
- 3. 鏈圈元素週期表
- 4. html的學習記錄1，html元素週期表
- 5. TWaver版3D化學元素週期表
- 6. HTML表單元素
- 7. 化學元素週期表150週年：部分元素百年內或消失
- 8. HTML（三）：表單元素
- 9. HTML的表單元素
- 10. HTML表單元素、表單控件