html5經常使用標籤聚集

時間 2019-11-19

標籤 html5 html 經常使用標籤聚集欄目 HTML5 简体版

原文原文鏈接

文本標記語言，即HTML（Hypertext Markup Language），是用於描述網頁文檔的一種標記語言。html

HTML之因此稱爲超文本標記語言，是由於文本中包含了所謂「超級連接」點。所謂超級連接，就是一種URL指針，經過激活（點擊）它，可以使瀏覽器方便地獲取新的網頁。這也是HTML得到普遍應用的最重要的緣由之一。canvas

HTML是一種規範，一種標準，它經過標記符號來標記要顯示的網頁中的各個部分。網頁文件自己是一種文本文件，經過在文本文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，而後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不中止其解釋執行過程，編制者只能經過顯示效果來分析出錯緣由和出錯部位。但須要注意的是，對於不一樣的瀏覽器，對同一標記符可能會有不徹底相同的解釋，於是可能會有不一樣的顯示效果。瀏覽器

注：HTML 標籤對大小寫不敏感，但推薦使用小寫！ruby

1、主體結構

header	頁面頭部，不一樣與<head></head>
aside	邊欄
nav	外部連接集合
section	章節或段落
article	相似文章、摘要或留言POST等形式的記錄（通常搭配內嵌頭部、尾部、底部結構使用）
hggroup	相似子標題，標題信息、可選標題、TAG標籤這樣的數據，仍是英文更好理解一些，heading of a section
address	聯繫信息，通常用在article或body錨元素周圍
footer	頁腳

2、HTML 5元素標記彙總表

文檔類型宣告	<!DOCTYPE html>
根元素元素	html
META元素	head、 title、base、link、meta、style
部件元素	body、section、nav、article、aside、h一、 h二、 h三、h四、 h五、 h六、hgroup、header、footer、address
分組內容元素	p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、figcaption、div
文本層次語義元素	a、em、strong、small、cite、q、dfn、abbr、time、code、var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、bdo、span
編輯元素	ins、del
嵌入內容元素	img、iframe、embed、object、param、video、audio、source、canvas、map、area
表格元素	table、caption、colgroup、col、tbody、thread、tfoot、tr、td、th
表單元素	form、fieldset、legend、label、button、select、datalist、optgroup、option、textarea、keygen、output、progress、meter
互動元素	details、summary、command、menu
腳本元素	script、noscript

3、HTML 5元素通用屬性和事件句柄

HTML5元素通用屬性表

accesskey、class、contenteditable、contextmenu、dir、 draggable、hidden、id、lang、spellcheck、style、tabindex、title

HTML5元素事件句柄屬性

onabort、onblur*、oncanplay、oncanplaythrough、onchange、 onclick、 oncontextmenu、ondblclick、ondrag、ondragend、ondragenter、ondragleave、 ondragover、ondragstart、ondrop、ondurationchange、onemptied、onended、 onerror*、onfocus*、onformchange、onforminput、oninput、oninvalid、onkeydown、 onkeypress、onkeyup、onload*、onloadeddata、onloadedmetadata、onloadstart、 onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、 onpause、onplay、onplaying、onprogress、onratechange、onreadystatechange、 onscroll、onseeked、onseeking、onselect、onshow、onstalled、onsubmit、 onsuspend、ontimeupdate、onvolumechange、onwaiting。

4、HTML5元素標記釋義

標記	類型	意義	介紹
文件標記
<html>	●	根文件標記	讓瀏覽器知道這是HTML 文件
META標記
<head>	●	開頭	提供文件總體信息
<title>	●	標題	定義文件標題，顯示於瀏覽器頂端
<base>	o	基準標記	可將相對URL轉絕對及指定連接
<link>	o	外部資源鏈接	必須帶rel屬性描述
<meta>	o	其它META數據	不能被title, base, link, style, 和script元素描述的META數據
<style>	●	嵌入文檔風格信息
部件標記
<body>	●	文檔主體開始	文檔內容容器
<section>	●	表明通用文檔或應用部件
<nav>	●	導航連接	外部連接或文檔內部連接
<article>	●	頁面模塊	相似文章、摘要或留言POST等形式的記錄
<aside>	●	孤立模塊	通常做爲邊欄廣告、說明、引用、導航等，aside圍堵部分通常與正文耦合較小
<h1>	●	標題標記	此外還有h2, h3, h4, h5, h6
<hgroup>	●	羣組標題	用在一組h1-h6這樣的元素集合時使用，用來區分主副標題？？
<header>	●	組說明或組導航	也可叫頁頭標題
<footer>	●	頁腳標題	做用範圍跟最近部件元素有關
<address>	●	地址或聯繫信息
分組內容標記
<p>	●	段落標記
<hr>	o	水平分割線
<br>	o	換行
<pre>	●	預格式化分本塊
<blockquote>	●	塊引用
<ol>	●	編號列表
<ul>	●	項目列表
<li>	●	列表項
<dl>	●	定義列表
<dt>	●	定義名稱
<dd>	●	定義說明
<figure>	●	流內容區塊說明	多結合figcaption使用
<figcaption>	●	figure內容屬性
<div>	●	定位標記	無實際意義

文本層次語義標記
<a>	●	連接標記
<em>	●	強調標記
<strong>	●	加劇標記
<small>	●	字體縮小
<cite>	●	斜體標記
<q>	●	引用標記內容	原文是phrasing content，暫不清楚如何翻譯
<dfn>	●	術語定義
<abbr>	●	縮略語
<time>	●	日期時間
<code>	●	程序代碼
<var>	●	變量
<samp>	●	範例
<kbd>	●	鍵盤字
<sub><sups>	●	上標字/下標字
<i>	●	斜體標記
<b>	●	粗體標記
<mark>	●	標記或高亮
<ruby>	●	註解標記
<rt>	●	ruby子元素	結合ruby使用，好比:<ruby>天<rt>Tian</rt>緣<rt>Yuan</rt></ruby>
<rp>	●	ruby子元素	通常作rt元素註釋使用
<bdo>	●
<span>	●	自定義標記
編輯標記
<ins>	●
<del>	●
嵌入內容標記
<img>	●	圖片標記
<iframe>	●	框架標記
<embed>	●	嵌入標記
<object>	●	對象標記
<param>	●	參數標記
<video>	●	視頻標記
<audio>	●	音頻標記
<source>	●	來源標記
<canvas>	●	製圖標記
<map>	●	地圖標記
<area>	●	區域標記

表格標記
<table>	●	表格標記	設定該表格的各項參數
<caption>	●	表格標題	作成一打通列以填入表格標題
<colgroup>	●
<col>	●
<tbody>	●
<thread>	●
<tfoot>	●
<tr>	●	表格列	設定該表格的列
<td>	●	表格欄	設定該表格的欄
<th>	●	表格標頭	相等於<TD>，但其內文字字體會變粗
表單標記
<form>	●	表單標記	決定該表單的運做模式
<fieldset>	●
<legend>	●
<input>	●	輸入標記
<label>	●
<button>	●	按鈕
<select>	●	選擇標記
<datalist>	●
<optgroup>	●
<option>	●	選項
<textarea>	●
<keygen>	●
<output>	●
<progress>	●
<meter>	●

互動元素框架
<details>	●
<summary>	●
<command>	●
<menu>	●
其餘標記
<script>	●
<noscript>	●

備註：ide

一、● 表示該標記屬於圍堵標記，須要結束標記</標記>。字體

二、o 表示該標記屬空標記，不須要結束標記。spa

基本概述：

基本翻譯

<html>…</html>      定義 HTML 文檔
<head>…</head>   文檔的信息
<meta>                    HTML 文檔的元信息
<title>…</title>        文檔的標題
<link>                      文檔與外部資源的關係
<style>…</style>    文檔的樣式信息
<body>…</body>   可見的頁面內容
                 註釋指針

文本

<h1>...</h1>               標題字大小（h1~h6）
<b>...</b>                   粗體字
<strong>...</strong>   粗體字(強調)
< i>...</i>                      斜體字
< em>...</em>              斜體字(強調)
< u>...</u>                   下劃線
<del>...</del>              刪除線(表示刪除)
< center>…</center>   居中文本
<ul>…</ul>                 無序列表
< ol>…</ol>                 有序列表
<li>…</li>                    列表項目
<a href=」…」>…</a>    超連接

<font>                         定義文本字體尺寸、顏色、大小
<sub>                         下標
<sup>                         上標
<br>                           換行
<p>                            段落

圖形

<img src=’」…」> 定義圖像
<hr> 水平線

表格

<table>…</table>   定義表格
<th>…</th>            定義表格中的表頭單元格
<tr>…</tr>             定義表格中的行
<td>…</td>           定義表格中的單元

其它

<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架

另加16進制顏色，但僅僅有16種顏色名可用英文字母，其他的要用16進制值。記住哦！

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

更多詳見：http://www.cnblogs.com/heiniuhaha/archive/2011/11/21/2257269.html