235.HTML
本文爲RUNOOB.COM、尚學堂網絡課程和W3school我的筆記，其中有大量內容原引自他們，只作我的學習交流之用，文章組織方式爲排版加原理的標題順序，並非新學者的學習過程，如是新學者，可參考上面進行學習。php
1.WebStorm的使用
當打開了一個項目的時候，WebStorm會顯示主窗口，包含有六個部分，分別是菜單欄 、工具欄 、導航欄、狀態欄 、編輯器、WebStorm 工具窗口，以下圖所示，圖中已用紅色標示css
1.1經常使用操做
- 1.建立項目
file-->new project-->指定路徑-->點擊上面的新建按鈕建立一個文件夾，而後ok，建立好項目後，項目文件夾中會帶有.idea這樣一個文件
html
- 2.建立文件
右擊項目-->new-->html file-->輸入文件名-->下面的下拉框能夠選擇h5仍是h4或是xhtml類型的文檔，咱們選擇h5，也就是默認的。寫名字的時候不用加html後綴，webstrom會自動爲咱們加。
web
- 3.重命名
右擊html文件-->refactor-->rename---改好後回車
編程
- 4.刪除文件
右擊html文件-->delete-->ok（或者直接按電腦上的del鍵，回車）canvas
1.2菜單欄經常使用
FILE下（一般操做關於文件、工程） windows
- New Project建立工程
- New 會彈出一個列表供選擇要建立的類型
- Open 打開一個項目
- Save As 將當前頁面另存爲
- Reopen Project 近幾回打開的項目列表
- Close Project 點擊後回到歡迎頁面上
- Rename Project 它修改的不是當前項目的文件夾名，而是文件夾目錄下.idea的以iml結尾的文件，這個是項目的名字。rename後觀察iml文件名的變化。
- settings 經常使用設置
- Exit 退出Webstorm
1.3經常使用操做
- 鼠標滑到編輯區的右上角，會顯示出一排瀏覽器的圖標，若是你電腦中安裝了相應瀏覽器，webstorm會自動關聯它，在你想看當前文檔的效果時，點擊瀏覽器按鈕即會打開
- 右擊編輯區的左邊欄，點擊show Line Number，能夠顯示出行號，幫助咱們快速定位代碼
- 點擊狀態欄右下角的click to go to line 能夠快速跳到你要找到行，當代碼量過千時，這個功能很是有用
1.4外觀
- 1.如何更改主題（字體&配色）
file->setting->editor->colors&fonts->scheme選擇你的主題（darcula） 瀏覽器
- 2.如何讓webstorm啓動的時候不打開工程文件
file->settings->Appearance&Behavior->System settings 去掉reopen last project on startup（在啓動的時候老是打開最後的工程） 安全
- 3.如何完美顯示中文
file->settings->appearance中勾選override default fonts by(not recommended)，設置name:NsimSum,Size:12
(appearance外觀選項，選中「重寫默認字體」，設置名字爲NsimSum，它是windows下的宋體字，字號12)。這裏設置的是整個IDE顯示的文字，包括菜單列表的字。你能夠試着把它改爲英文，那樣再在菜單項中看，中文有的會不正常顯示，變成小方塊了。
ruby
- 4.如何顯示行號
在代碼顯示區的左邊右擊選擇「show line number」。
- 5.如何代碼自動換行
file-settings-editor->general-> "use soft wraps in editor" 打上鉤，代碼就自動換行了。
2.HTML簡介
2.1HTML
- HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言: HyperText Markup Language
- HTML 不是一種編程語言，而是一種標記語言，不區分大小寫，建議小寫
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
- HTML 文檔包含了HTML 標籤及文本內容，HTML文檔的後綴名以 .html或 .htm爲後綴兩種後綴名沒有區別，均可以使用
- HTML文檔也叫作 web 頁面，由瀏覽器解釋執行
2.2標籤
1.HTML用於描述功能的符號成爲「標籤」
<標籤>內容</標籤>
2.標籤都封裝在一對尖括號「<...>」之中，由尖括號包圍的關鍵詞,如<html>就是一個標籤
3.封閉類型標記（也叫雙標記），必須成對出現,如<p></p>，標籤對中的第一個標籤是開始標籤/開放標籤，第二個標籤是結束標籤/閉合標籤
4.非封閉類型標記，也叫做空標記，或者單標記，如<br/>
5.Web 瀏覽器的做用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容
6.使用小寫標籤
HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。
萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在將來 (X)HTML 版本中強制使用小寫。
7.標籤可嵌套，標籤之間能夠相互嵌套，但要注意嵌套順序
8.語義化標籤語義化：明白每一個標籤的用途（在什麼狀況下使用此標籤合理）好比，網頁上文章的標題就能夠用標題標籤 h1-h6,段落用p,地址用address等
好處：1. 更容易被搜索引擎收錄 2. 更容易讓屏幕閱讀器讀出網頁內容
2.3元素
- 指的是從開始標籤（start tag）到結束標籤（end tag）的全部代碼，元素=標籤+標籤裏內容，文檔有一個個HTML元素構成
- HTML 元素語法
-
- HTML 元素以開始標籤起始
- HTML 元素以結束標籤終止
- 元素的內容是開始標籤與結束標籤之間的內容
- 某些 HTML 元素具備空內容（empty content）
- 空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
- 大多數 HTML 元素可擁有屬性
- 可嵌套的HTML，HTML 文檔由嵌套的 HTML 元素構成
2.4屬性與值
2.4.1屬性的位置
- 屬性是用來修飾元素的，是 HTML 元素提供的附加信息
-
HTML 連接由 <a> 標籤訂義。連接的地址在 href 屬性中指定： <a href="http://www.runoob.com">這是一個連接</a>
-
- 屬性必須位於開始標籤裏
- 一個元素的屬性可能不止一個，多個屬性之間用空格隔開
- 多個屬性之間不區分前後順序
-
使用小寫 屬性和屬性值對大小寫不敏感
不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。
2.4.2屬性的值
- 每一個屬性都有值
-
<p align = "center">段落一</P> <!-- 屬性 屬性值-->
-
- 屬性和屬性的值之間用等號鏈接
- 屬性的值包含在引號當中
- HTML 屬性經常使用引用屬性值
- 雙引號是最經常使用的，不過使用單引號也沒有問題
- 在某些個別的狀況下，好比屬性值自己就含有雙引號，那麼您必須使用單引號，例如：name='John "ShotGun" Nelson'
- HTML 屬性經常使用引用屬性值
- 屬性老是以名稱/值對的形式出現
2.4.3經常使用的HTML屬性
| 屬性 | 描述 |
|---|---|
| class | 爲html元素定義一個或多個類名（classname）(類名從樣式文件引入) |
| id | 定義元素的惟一id， class 屬性能夠多用 class=" " （引號裏面能夠填入多個class屬性） |
| style | 規定元素的行內樣式（inline style） |
| title | 描述了元素的額外信息 (做爲工具條使用) |
2.5註釋
- 1.爲代碼添加適當的註釋是一種良好的編程習慣
- 2.註釋只在編輯文本狀況下可見，在瀏覽器展現頁面是並不會顯示
- 3.註釋標籤不支持任何屬性
- 4.註釋不能夠位於嵌在<>中
- 5.註釋不能夠嵌套在其餘註釋中
- 6.語法：
<!-- 註釋的文本內容 -->
2.6版本
從初期的網絡誕生後，已經出現了許多HTML版本:
| 版本 | 發佈時間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
3.HTML整體結構
3.1可視化頁面結構
下面是一個可視化的HTML頁面結構：
只有 <body> 區域 (白色部分) 纔會在瀏覽器中顯示
3.2HTML的基本結構
<!DOCTYPE html> <!--文檔類型聲明--> <html lang="en"> <head> <meta charset="utf-8"> <title>網頁標題</title> <!--文檔標題，一個網頁只能有一個標題--> </head> <body> <h1>第一個標題</h1> <p>第一個段落</p> </body> </html>
3.2.1<!DOCTYPE> 聲明
例子
-
<!DOCTYPE html>
定義
什麼是DTD文檔模型，爲何寫在HTML當中？
DTD文檔模型也稱DOCTYPE文檔聲明，它是Document Type Definition的英文縮寫，意思是文檔類型定義，在HTML文檔中，用來指定頁面所使用的HTML（或者XHTML）的版本。要想製做符合標準的頁面，一個必不可少的關鍵組成部分就 是DOCTYPE聲明。只有肯定了一個正確的DOCTYPE，HTML裏的標識和CSS才能正常生效。它通常被定義在頁面的第一行，html標籤以前。
DTD文檔模型=DOCTYPE=DOCTYPE文檔聲明
做用
<!DOCTYPE>聲明有助於瀏覽器中正確顯示網頁。
網絡上有不少不一樣的文件，若是可以正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。
<!DOCTYPE> 聲明不是一個 HTML 標籤；可是是一個標籤，標籤保護HTML標籤和其餘標籤，<!DOCTYPE> 標籤沒有結束標籤；它是用來告知 Web 瀏覽器頁面使用了哪一種 HTML 版本。
位置
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。
寫法
doctype 聲明是不區分大小寫
通用聲明
- HTML5
<!DOCTYPE html> T
<!DOCTYPE html> T <!DOCTYPE HTML> T <!doctype html> T <!Doctype Html> T
- HTML 4.01 Transitional 過渡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
這個 DTD 包含全部 HTML 元素和屬性，包括表象或過期的元素（如 font ）。框架集是不容許的。
- HTML 4.01 Strict 嚴格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
這個 DTD 包含全部 HTML 元素和屬性，但不包括表象或過期的元素（如 font ）。框架集是不容許的。
- HTML 4.01 Frameset 框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
這個 DTD 與 HTML 4.01 Transitional 相同，可是容許使用框架集內容。
- XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個 DTD 包含全部 HTML 元素和屬性，包括表象或過期的元素（如 font ）。框架集是不容許的。結構必須按標準格式的 XML 進行書寫。
- XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
這個 DTD 包含全部 HTML 元素和屬性，但不包括表象或過期的元素（如 font ）。框架集是不容許的。結構必須按標準格式的 XML 進行書寫。
- XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
這個 DTD 與 XHTML 1.0 Transitional 相同，可是容許使用框架集內容。
- XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
這個 DTD 與 XHTML 1.0 Strict 相同，可是容許您添加模塊（例如爲東亞語言提供 ruby 支持）。
xhtml和html的區別
XHTML是HTML向XML的一個過渡語言，在最初W3C組織但願把HTML變成更爲嚴謹的標記語言（好比XML），但HTML的已經應用的太爲普遍，所有換掉不太現實。所以產生了XHTML這樣一種過分形式。它比HTML更嚴謹，基本標籤都仍是沿用了HTML，但廢除了「表現層」的標籤，同時要求標籤的嚴格嵌套，標籤結束等等。
3.2.2<html>簡介
定義 HTML 文檔，這個元素咱們瀏覽器看到後就明白這是個HTML文檔了，因此你的其它元素要包裹在它裏面，標籤限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。
<html> <head> <title>個人第一個 HTML 頁面</title> </head> <body> <p>body 元素的內容會顯示在瀏覽器中。</p> </body> </html>
3.2.2.1<head>簡介
標籤用於定義文檔的頭部，它是全部頭部元素的容器。<head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表。文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。
<html> <head> <title>個人第一個 HTML 頁面</title> </head> <body> <p>body 元素的內容會顯示在瀏覽器中。</p> </body> </html>
位置
- 應該把 <head> 標籤放在文檔的開始處，緊跟在 <html> 後面，並處於 <body> 標籤以前。
文檔的頭部常常會包含一些 <meta> 標籤，用來告訴瀏覽器關於文檔的附加信息。
成分
- 下面這些標籤可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>。
3.2.2.2<body>簡介
<body> 元素包含了可見的頁面內容
<html> <head> <title>個人第一個 HTML 頁面</title> </head> <body> <p>body 元素的內容會顯示在瀏覽器中。</p> </body> </html>
4.< html>內標籤
4.1 <lang>介紹
- <head lang="en">
lang是language的意思，lang=」en」屬性對每張頁面中的主要語言進行聲明，en表明了英文，只是個聲明，聲明瞭它，對搜索引擎和瀏覽器更友好，並不會更改顯示內容。它還有常見的值是zh-CN，表明了中文。（搜索引擎不會判斷該站點是中文仍是英文，它讓搜索引擎知道你的站點是中文站，這些都是html規範，越規範，越容易被收錄）
5.< head>內標籤
<head> 元素包含了全部的頭部標籤元素。在 <head>元素中你能夠插入腳本（scripts）, 樣式文件（CSS），及各類meta信息。
能夠添加在頭部區域的元素標籤爲: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
| 標籤 | 描述 |
|---|---|
| <head> | 定義了文檔的信息 |
| <title> | 定義了文檔的標題 |
| <base> | 定義了頁面連接標籤的默認連接地址 |
| <link> | 定義了一個文檔和外部資源之間的關係 |
| <meta> | 定義了HTML文檔中的元數據 |
| <script> | 定義了客戶端的腳本文件 |
| <style> | 定義了HTML文檔的樣式文件 |
5.1 <title>介紹（必有）
1.可定義文檔的標題。
2.它顯示在瀏覽器窗口的標題欄或狀態欄上。
3.當把文檔加入用戶的收藏夾或書籤列表時，標題將成爲該文檔的默認名稱。
4.<title> 標籤是 <head> 標籤中惟一必需要求包含的東西，就是說寫head必定要寫title，不是說其它的不加，而是title必定要加。
5.title寫和你網頁相關的關鍵詞有利於SEO優化
<html> <head> <title>我會顯示標題欄狀態欄收藏欄裏</title> </head> <body> ... </body> </html>
*SEO是搜索引擎優化的英文縮寫。
經過對網站內容調整，知足搜索引擎的排名需求，從而提升本身網站被搜索引擎平臺錄取的概率，從而把精準用戶帶到網站。
網站都有目標羣體，經過title、meta標籤可讓目標羣體經過關鍵詞找到你的網站，因此你定義的關鍵詞決定了會吸引什麼樣的羣體。
HTML<title>元素不只能夠顯示文本，也能夠在左側顯示logo等圖片。
顯示時，要將<link>標籤放入<head>裏。
舉例：
<!doctype HTML> <html> <head> <link rel="shortcut icon" href="圖片url"> <title>這是一個帶圖片的標籤</title> </head> <body> …… …… …… </body> </html>
5.2 <meta>介紹
5.2.1定義
- 元素可提供有關頁面的元信息（meta-information）
用來向瀏覽器或搜索引擎描述頁面。好比文檔的描述和關鍵詞。它只能夠放在head中。屬於元信息標籤。
5.2.2常見的meta屬性
5.2.2.1 charset屬性
<meta charset="UTF-8">
META標籤用來描述一個HTML網頁文檔的屬性，此處的charset=」utf-8」是說當前使用的是utf-8編碼格式，在開發中咱們常常會看到utf-8，或是gbk，這些都是編碼格式。國外通常會用gbk、gb2312，國內一般使用utf-8。
5.2.2.2 name屬性
屬性值有
- Keywords(關鍵字)
keywords用來告訴搜索引擎你網頁的關鍵字是什麼。
<meta name="keywords" content="我的,博客">
- description(網站內容描述)
description用來告訴搜索引擎你的網站主要內容。
<meta name="description" content="web學習,經驗分享">
- author做者
標註網頁的做者
<meta name="author" content="xxxx,xxxx@xxxx.com">
5.3 <base>介紹
<base> 標籤描述了基本的連接地址/連接目標，該標籤做爲HTML文檔中全部的連接標籤的默認連接:
<head> <base href="http://www.cmaker.tech/images/" target="_blank"> </head>
5.4 <link>介紹
<link> 標籤訂義了文檔與外部資源之間的關係。
<link> 標籤一般用於連接到樣式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
5.5 <style>介紹
<style> 標籤訂義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也能夠直接添加樣式來渲染 HTML 文檔:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
5.6 <script>介紹
<script>標籤用於加載腳本文件，如： JavaScript。
6.< body>內標籤
6.1大綱標籤
--6.1.1標題<h1>
HTML 標題（Heading）是經過 <h1> - <h6> 標籤進行定義的
<h1> 定義最大的標題 <h6> 定義最小的標題 <h7>按照正文顯示
<h1>這是一級標題。</h1> <h2>這是二級標題。</h2> <h3>這是三級標題。</h3> <h4>這是四級標題。</h4> <h5>這是五級標題。</h5> <h6>這是六級標題。</h6>
注意：瀏覽器會自動地在標題的先後添加空行
標題很重要
請確保將 HTML 標題 標籤只用於標題。不要僅僅是爲了生成粗體或大號的文本而使用標題。搜索引擎使用標題爲您的網頁的結構和內容編制索引。
由於用戶能夠經過標題來快速瀏覽您的網頁，因此用標題來呈現文檔結構是很重要的。
應該將 h1 用做主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。
--6.1.2段落
段落是經過 <p> 標籤訂義的。
<p>這是一個段落 </p> <p>這是另外一個段落</p>
瀏覽器會自動地在段落的先後添加空行。（</p> 是塊級元素）
使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標籤代替它
6.2排版基礎標籤（鏈圖表）
--6.2.1換行
<p>這個<br>段落<br>演示了分行的效果</p>
<br> 是沒有關閉標籤的空元素（<br> 標籤訂義換行）。
沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
在 XHTML、XML 以及將來版本的 HTML 中，全部元素都必須被關閉。
在開始標籤中添加斜槓，好比 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即便 <br> 在全部瀏覽器中都是有效的，但使用 <br /> 實際上是更長遠的保障。
br區分相關
不產生一個新段落的狀況下進行換行（新行），使用 <br /> 標籤
--6.2.2水平線
<hr /> 標籤在 HTML 頁面中建立水平線。
hr 元素可用於分隔內容。
<p>這是一個段落。</p> <hr /> <p>這是一個段落。</p> <hr /> <p>這是一個段落。</p>
沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。
--6.2.3空格
對於 HTML，沒法經過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。全部連續的空格或空行都會被算做一個空格。須要注意的是，HTML 代碼中的全部連續的空行（換行）也被顯示爲一個空格。
| HTML提供了5種空格實體（space entity），它們擁有不一樣的寬度，非斷行空格（ ）是常規空格的寬度，可運行於全部主流瀏覽器。其餘幾種空格（ ）在不一樣瀏覽器中寬度各異。 | |
| | 它叫不換行空格，全稱No-Break Space，它是最多見和咱們使用最多的空格，大多數的人可能只接觸了 ，它是按下space鍵產生的空格。在HTML中，若是你用空格鍵產生此空格，空格是不會累加的（只算1個）。要使用html實體表示纔可累加，該空格佔據寬度受字體影響明顯而強烈。 |
|   | 它叫「半角空格」，全稱是En Space，en是字體排印學的計量單位，爲em寬度的一半。根據定義，它等同於字體度的一半（如16px字體中就是8px）。名義上是小寫字母n的寬度。此空格傳承空格家族一向的特性：透明的，此空格有個至關穩健的特性，就是其佔據的寬度正好是1/2箇中文寬度，並且基本上不受字體影響。兩個普通空格 |
|   | 它叫「全角空格」，全稱是Em Space，em是字體排印學的計量單位，至關於當前指定的點數。例如，1 em在16px的字體中就是16px。此空格也傳承空格家族一向的特性：透明的，此空格也有個至關穩健的特性，就是其佔據的寬度正好是1箇中文寬度，並且基本上不受字體影響。四個普通空格 |
|   | 它叫窄空格，全稱是Thin Space。咱們不妨稱之爲「瘦弱空格」，就是該空格長得比較瘦弱，身體單薄，佔據的寬度比較小。它是em之六分之一寬。 |
| 以上表格內容引自坐在那邊看天空 | |
--6.2.4連接
1.簡介
HTML使用標籤 <a>來設置超文本連接。超連接能夠是一個字，一個詞，或者一組詞，也能夠是一幅圖像，您能夠點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當把鼠標指針移動到網頁中的某個連接上時，箭頭會變爲一隻小手。
默認狀況下，連接將以如下形式出如今瀏覽器中：
- 一個未訪問過的連接顯示爲藍色字體並帶有下劃線。
- 訪問過的連接顯示爲紫色並帶有下劃線。
- 點擊連接時，連接顯示爲紅色並帶有下劃線。
注意：
- 若是爲這些超連接設置了 CSS 樣式，展現樣式會根據 CSS 的設定而顯示。
- "連接文本" 沒必要必定是文本。圖片或其餘 HTML 元素均可以成爲連接
2.屬性
href屬性
在標籤<a> 中使用了href屬性來描述連接的地址。
<a href="url">連接文本</a>
href 屬性描述了連接的目標。
實例
<a href="https://www.cnblogs.com/ZanderZhao/">個人主頁</a>
<a href="https://www.cnblogs.com/ZanderZhao/">個人主頁</a>
target屬性
<a> 標籤的 target 屬性規定在何處打開連接文檔。
<a target="value">
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打開被連接文檔。 |
| _self | 默認。在相同的框架中打開被連接文檔。 |
| _parent | 在父框架集中打開被連接文檔。 |
| _top | 在整個窗口中打開被連接文檔。 |
| framename | 在指定的框架中打開被連接文檔。 |
若是在一個 <a> 標籤內包含一個 target 屬性，瀏覽器將會載入和顯示用這個標籤的 href 屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。若是這個指定名稱或 id 的框架或者窗口不存在，瀏覽器將打開一個新的窗口，給這個窗口一個指定的標記，而後將新的文檔載入那個窗口。今後之後，超連接文檔就能夠指向這個新的窗口。
- 打開新窗口
被指向的超連接使得建立高效的瀏覽工具變得很容易。例如，一個簡單的內容文檔的列表，能夠將文檔重定向到一個單獨的窗口：
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_window">Preface</a></li> <li><a href="chap1.html" target="view_window">Chapter 1</a></li> <li><a href="chap2.html" target="view_window">Chapter 2</a></li> <li><a href="chap3.html" target="view_window">Chapter 3</a></li> </ul>
當用戶第一次選擇內容列表中的某個連接時，瀏覽器將打開一個新的窗口，將它標記爲 "view_window"，而後在其中顯示但願顯示的文檔內容。若是用戶從這個內容列表中選擇另外一個連接，且這個 "view_window" 仍處於打開狀態，瀏覽器就會再次將選定的文檔載入那個窗口，取代剛纔的那些文檔。
在整個過程當中，這個包含了內容列表的窗口是用戶能夠訪問的。經過單擊窗口中的一個鏈接，可以使另外一個窗口的內容發生變化。
- 在框架中打開窗口
不用打開一個完整的瀏覽器窗口，使用 target 更一般的方法是在一個 <frameset> 顯示中將超連接內容定向到一個或者多個框架中。能夠將這個內容列表放入一個帶有兩個框架的文檔的其中一個框架中，並用這個相鄰的框架來顯示選定的文檔：
<frameset cols="100,*"> <frame src="toc.html"> <frame src="pref.html" name="view_frame"> </frameset>
當瀏覽器最初顯示這兩個框架的時候，左邊這個框架包含目錄，右邊這個框架包含前言。
這是 "toc.html" 的源代碼：
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_frame">Preface</a></li> <li><a href="chap1.html" target="view_frame">Chapter 1</a></li> <li><a href="chap2.html" target="view_frame">Chapter 2</a></li> <li><a href="chap3.html" target="view_frame">Chapter 3</a></li> </ul>
請注意，在文檔 "toc.html" 中，每一個連接的目標都是 "view_frame"，也就是右邊的框架。
當用戶從左邊框架中的目錄中選擇一個連接時，瀏覽器會將這個關聯的文檔載入並顯示在右邊這個 "view_frame" 框架中。當其餘連接被選中時，右邊這個框架中的內容也會發生變化，而左邊這個框架始終保持不變。
- 特殊的目標
有 4 個保留的目標名稱用做特殊的文檔重定向操做：
_blank
瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。
_self
這個目標的值對全部沒有指定目標的 <a> 標籤是默認目標，它使得目標文檔載入並顯示在相同的框架或者窗口中做爲源文檔。這個目標是多餘且沒必要要的，除非和文檔標題 <base> 標籤中的 target 屬性一塊兒使用。
_parent
這個目標使得文檔載入父窗口或者包含來超連接引用的框架的框架集。若是這個引用是在窗口或者在頂級框架中，那麼它與目標 _self 等效。
_top
這個目標使得文檔載入包含這個超連接的窗口，用 _top 目標將會清除全部被包含的框架並將文檔載入整個瀏覽器窗口。
提示：這些 target 的全部 4 個值都如下劃線開始。任何其餘用一個下劃線做爲開頭的窗口或者目標都會被瀏覽器忽略，所以，不要將下劃線做爲文檔中定義的任何框架 name 或 id 的第一個字符。
id屬性
id屬性可用於建立在一個HTML文檔書籤標記。
提示: 書籤是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，因此對於讀者來講是隱藏的。
實例
<!--在HTML文檔中插入ID:--> <a id="tips">有用的提示部分</a> <!--在HTML文檔中建立一個連接到"有用的提示部分(id="tips"）"：--> <a href="#tips">訪問有用的提示部分</a> <!--或者，從另外一個頁面建立一個連接到"有用的提示部分(id="tips"）"：--> <a href="https://www.runoob.com/html/html-links.html#tips">訪問有用的提示部分</a>
基本的注意事項
註釋： 請始終將正斜槓添加到子文件夾。假如這樣書寫連接：href="https://i.cnblogs.com"，就會向服務器產生兩次 HTTP 請求。這是由於服務器會添加正斜槓到這個地址，而後建立一個新的請求，就像這樣：href="https://i.cnblogs.com/"。
--6.2.5圖像
| 標籤 | 描述 |
|---|---|
| <img> | 定義圖像 |
| <map> | 定義圖像地圖 |
| <area> | 定義圖像地圖中的可點擊區域 |
<img>
在 HTML 中，圖像由<img> 標籤訂義。
<img> 是空標籤，意思是說，它只包含屬性，而且沒有閉合標籤。
<img src="url" alt="some_text">
要在頁面上顯示圖像，你須要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
--6.2.6表格
1.簡介
表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由 <td> 標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
| 標籤 | 描述 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用於表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
--6.2.7列表
| html列表標籤 | |
|---|---|
| 標籤 | 描述 |
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項 |
| <dl> | 定義列表 |
| <dt> | 自定義列表項目 |
| <dd> | 定義自定列表項的描述 |
----6.2.7.1無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標籤
<ul> <li>Coffee</li> <li>Milk</li> </ul>
----6.2.7.2有序列表
有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。
列表項使用數字來標記
<ol> <li>Coffee</li> <li>Milk</li> </ol>
----6.2.7.3自定義列表
自定義列表不只僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每一個自定義列表項以 <dt> 開始。每一個自定義列表項的定義以 <dd> 開始。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
列表項內部可使用段落、換行符、圖片、連接以及其餘列表等等。
6.3文本格式標籤（粗斜）
HTML 文本格式化標籤
| 標籤 | 描述 |
|---|---|
| <b> | 定義粗體文本 |
| <em> | 定義着重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號字 |
| <strong> | 定義加劇語氣 |
| <sub> | 定義下標字 |
| <sup> | 定義上標字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
HTML "計算機輸出" 標籤
| 標籤 | 描述 |
|---|---|
| <code> | 定義計算機代碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計算機代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預格式文本 |
HTML 引文, 引用, 及標籤訂義
| 標籤 | 描述 |
|---|---|
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個定義項目。 |
6.4功能拓展標籤
--6.4.1多媒體
----6.4.1.1音頻
HTML5 Audio 標籤
| 標籤 | 描述 |
|---|---|
| <audio> | 定義了聲音內容 |
| <source> | 規定了多媒體資源, 能夠是多個，在 <video> 與 <audio>標籤中使用 |
音頻格式的MIME類型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支持 audio 元素。 </audio>
----6.4.1.2視頻
| HTML5 Video 標籤 | |
|---|---|
| 標籤 | 描述 |
| <video> | 定義一個視頻 |
| <source> | 定義多種媒體資源,好比 <video> 和<audio> |
| <track> | 定義在媒體播放器文本軌跡 |
<video> 元素提供了 播放、暫停和音量控件來控制視頻。
同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸.若是設置的高度和寬度，所需的視頻空間會在頁面加載時保留。若是沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
<video> 與</video> 標籤之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。
<video> 元素支持多個 <source> 元素. <source> 元素能夠連接不一樣的視頻文件。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持Video標籤。 </video>
視頻格式
| 格式 | MIME-type | |
|---|---|---|
| MP4 | MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件 |
video/mp4 |
| WebM | WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件 |
video/webm |
| Ogg | Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件 |
video/ogg |
----6.4.1.3動畫
--6.4.2功能實現型
----6.4.2.1表單
HTML 表單
表單是一個包含表單元素的區域。
表單元素是容許用戶在表單中輸入內容,好比：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標籤 <form> 來設置:
<form> . input 元素 . </form>
HTML 表單用於收集不一樣類型的用戶輸入。
| html表單標籤 | |
|---|---|
| 標籤 | 描述 |
| <form> | 定義供用戶輸入的表單 |
| <input> | 定義輸入域 |
| <textarea> | 定義文本域 (一個多行的輸入控件) |
| <label> | 定義了 <input> 元素的標籤，通常爲輸入標題 |
| <fieldset> | 定義了一組相關的表單元素，並使用外框包含起來 |
| <legend> | 定義了 <fieldset> 元素的標題 |
| <select> | 定義了下拉選項列表 |
| <optgroup> | 定義選項組 |
| <option> | 定義下拉列表中的選項 |
| <button> | 定義一個點擊按鈕 |
| <datalist>New | 指定一個預先定義的輸入控件選項列表 |
| <keygen>New | 定義了表單的密鑰對生成器字段 |
| <output>New | 定義一個計算結果 |
----6.4.2.2浮動與定位
--6.4.3接口型
----6.4.3.1CSS樣式
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式.
CSS 是在 HTML 4 開始使用的,是爲了更好的渲染HTML元素而引入的.
CSS 能夠經過如下方式添加到HTML中:
內聯樣式- 在HTML元素中使用"style" 屬性
內部樣式表 -在HTML文檔頭部 <head> 區域使用<style> 元素 來包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是經過外部引用CSS文件.
----6.4.3.2腳本
| HTML 腳本標籤 | |
|---|---|
| 標籤 | 描述 |
| <script> | 定義了客戶端腳本 |
| <noscript> | 定義了不支持腳本瀏覽器輸出的文本 |
<script> 標籤用於定義客戶端腳本，好比 JavaScript。
<script> 元素既可包含腳本語句，也可經過 src 屬性指向外部腳本文件。
JavaScript 最經常使用於圖片操做、表單驗證以及內容動態更新。
HTML<noscript> 標籤
<noscript> 標籤提供沒法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中可以找到的全部元素。
只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 <noscript> 元素中的內容：
<script> document.write("Hello World!") </script> <noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>
----6.4.3.3web存儲
使用HTML5能夠在本地存儲用戶的瀏覽數據。
早些時候,本地存儲使用的是 cookie。可是Web 存儲須要更加的安全與快速. 這些數據不會被保存在服務器上，可是這些數據只用於用戶請求網站數據上.它也能夠存儲大量的數據，而不影響網站的性能.
數據以 鍵/值 對存在, web網頁的數據只容許該網頁訪問使用。
localStorage 和 sessionStorage
客戶端存儲數據的兩個對象爲：
localStorage - 用於長久保存整個網站的數據，保存的數據沒有過時時間，直到手動去除。
sessionStorage - 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁以後將會刪除這些數據。
在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 對象!
// 一些代碼.....
} else {
// 抱歉! 不支持 web 存儲。
}
localStorage 對象
localStorage 對象存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。
localStorage.sitename="個人主頁";
document.getElementById("result").innerHTML="網站名：" + localStorage.sitename;
實例解析：
使用 key="sitename" 和 value="菜鳥教程" 建立一個 localStorage 鍵/值對。
檢索鍵值爲"sitename" 的值而後將數據插入 id="result"的元素中。
以上實例也能夠這麼寫：
// 存儲
localStorage.sitename = "個人主頁";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;
移除 localStorage 中的 "sitename" :
localStorage.removeItem("sitename");
無論是 localStorage，仍是 sessionStorage，可以使用的API都相同，經常使用的有以下幾個（以localStorage爲例）：
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除全部數據：localStorage.clear();
獲得某個索引的key：localStorage.key(index);
提示: 鍵/值對一般以字符串存儲，你能夠按本身的須要轉換該格式。
下面的實例展現了用戶點擊按鈕的次數。
代碼中的字符串值轉換爲數字類型:
實例
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經點擊了按鈕 " + localStorage.clickcount + " 次 ";
sessionStorage 對象
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。
如何建立並訪問一個 sessionStorage：
實例
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在這個會話中你已經點擊了該按鈕 " + sessionStorage.clickcount + " 次 ";
6.5佈局型標籤（佈局框架）
--6.5.1區塊
1.定義
大多數 HTML 元素被定義爲塊級元素或內聯元素。
塊級元素在瀏覽器顯示時，一般會以新行來開始（和結束）。
實例: <h1>, <p>, <ul>, <table>
內聯元素在顯示時一般不會以新行開始。
實例: <b>, <td>, <a>, <img>
2.例子
| html分組標籤 | |
|---|---|
| 標籤 | 描述 |
| <div> | 定義了文檔的區域，塊級 (block-level) |
| <span> | 用來組合文檔中的行內元素， 內聯元素(inline) |
HTML <div> 元素
HTML <div> 元素是塊級元素，它可用於組合其餘 HTML 元素的容器。
<div> 元素沒有特定的含義。除此以外，因爲它屬於塊級元素，瀏覽器會在其先後顯示折行。
若是與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。
<div> 元素的另外一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的做用是顯示錶格化的數據。
HTML <span> 元素
HTML <span> 元素是內聯元素，可用做文本的容器
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。
--6.5.2佈局
| 標籤 | 描述 |
|---|---|
| <div> | 定義文檔區塊，塊級(block-level) |
| <span> | 定義 span，用來組合文檔中的行內元素。 |
HTML 佈局 - 使用<div> 元素
div 元素是用於分組 HTML 元素的塊級元素。
下面的例子使用五個 div 元素來建立多列布局：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>個人主頁</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的網頁標題</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜單</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 內容在這裏</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版權 © cmaker.tech</div> </div> </body> </html>
HTML 佈局 - 使用表格
使用 HTML <table> 標籤是建立佈局的一種簡單的方式。
大多數站點可使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者爲頁面建立背景以及色彩豐富的外觀。
lamp 即便可使用 HTML 表格來建立漂亮的佈局，但設計表格的目的是呈現表格化數據 - 表格不是佈局工具。
下面的例子使用三行兩列的表格 - 第一和最後一行使用 colspan 屬性來橫跨兩列：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>個人主頁</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的網頁標題</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜單</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 內容在這裏</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版權 © cmaker.tech</td> </tr> </table> </body> </html>
HTML 佈局 - 有用的提示
Tip: 使用 CSS 最大的好處是，若是把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。經過編輯單一的文件，就能夠改變全部頁面的佈局。如需學習更多有關 CSS 的知識
Tip: 因爲建立高級的佈局很是耗時，使用模板是一個快速的選項。經過搜索引擎能夠找到不少免費的網站模板（您可使用這些預先構建好的網站佈局，並優化它們）
--6.5.3框架
1.簡介
經過使用框架，你能夠在同一個瀏覽器窗口中顯示不止一個頁面。
iframe語法:
<iframe src="URL"></iframe>
該URL指向不一樣的網頁。
| HTML iframe 標籤 | |
|---|---|
| 標籤 | 說明 |
| <iframe> | 定義一個內聯的iframe |
2.屬性
height 和 width 屬性用來定義iframe標籤的高度與寬度。
屬性默認以像素爲單位, 可是你能夠指定其按比例顯示 (如："80%")。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 屬性用於定義iframe表示是否顯示邊框。
設置屬性值爲 "0" 移除iframe的邊框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用iframe來顯示目標連接頁面
iframe能夠顯示一個目標連接的頁面
目標連接的屬性必須使用iframe的屬性，以下實例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.baidu.com" target="iframe_a">Baidu.COM</a></p>
--6.5.4容器
7.概念
7.1顏色
HTML 顏色由紅色、綠色、藍色混合而成。
7.1.1顏色值
HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。
每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。
1600萬種不一樣顏色，三種顏色 紅，綠，藍的組合從0到255，一共有1600萬種不一樣顏色(256 x 256 x 256)。
7.1.2Web安全色
數年之前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色做爲 Web 標準被建議使用。其中的緣由是，微軟和 Mac 操做系統使用了 40 種不一樣的保留的固定系統顏色（雙方大約各使用 20 種）。
咱們不肯定現在這麼作的意義有多大，由於愈來愈多的計算機有能力處理數百萬種顏色，不過作選擇仍是你本身。
最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，全部的計算機可以正確地顯示全部的顏色
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
7.1.3RGBA
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上擴展包括了 「alpha」 通道，運行對顏色值設置透明度。
div {
background:rgba(255,0,0,0.5);
}
相對於使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 能夠實現設置顏色透明度的功能，這裏的 0.5 表示透明度，範圍 0~1，0 表示全透明。
一般咱們爲了省略一個 0:
div {
background:rgba(255,0,0,.5);
}
實例：
<p style="background-color:rgb(255,255,0)"> 經過 rbg 值設置背景顏色 </p> <p style="background-color:rgba(255,255,0,0.25)"> 經過 rbg 值設置背景顏色 </p> <p style="background-color:rgba(255,255,0,0.5)"> 經過 rbg 值設置背景顏色 </p> <p style="background-color:rgba(255,255,0,0.75)"> 經過 rbg 值設置背景顏色 </p>
7.1.4顏色名
- HTML 顏色名，目前全部瀏覽器都支持如下顏色名
- 141個顏色名稱是在HTML和CSS顏色規範定義的（17標準顏色，再加124）。下表列出了全部顏色的值，包括十六進制值。
- 17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。
按顏色名排序
單擊一個顏色名或者 16 進制值，就能夠查看與不一樣文字顏色搭配的背景顏色。
7.1.5HTML顏色值
顏色由紅(R)、綠(G)、藍(B)組成。
顏色值
顏色值由十六進制來表示紅、綠、藍（RGB）。
每一個顏色的最低值爲 0(十六進制爲 00)，最高值爲 255(十六進制爲FF)。
十六進制值的寫法爲 # 號後跟三個或六個十六進制字符。
三位數表示法爲：#RGB，轉換爲6位數表示爲：#RRGGBB。
顏色實例
| 顏色 | 3位十六進制顏色值 | 6位十六進制顏色值 | RGB |
|---|---|---|---|
| #000 | #000000 | rgb(0,0,0) | |
| #F00 | #FF0000 | rgb(255,0,0) | |
| #0F0 | #00FF00 | rgb(0,255,0) | |
| #00F | #0000FF | rgb(0,0,255) | |
| #FF0 | #FFFF00 | rgb(255,255,0) | |
| #0FF | #00FFFF | rgb(0,255,255) | |
| #F0F | #FF00FF | rgb(255,0,255) | |
| #888 | #888888 | rgb(136,136,136) | |
| #FFF | #FFFFFF | rgb(255,255,255) |
經過十六進制（Hex）的顏色值排序
7.2字符實體
簡介：
在 HTML 中，某些字符是預留的。
在 HTML 中不能使用小於號（<）和大於號（>），這是由於瀏覽器會誤認爲它們是標籤。
若是但願正確地顯示預留字符，咱們必須在 HTML 源代碼中使用字符實體（character entities）。 字符實體相似這樣：
&entity_name; 或 &#entity_number;
如需顯示小於號，咱們必須這樣寫：< 或 < 或 <
提示： 使用實體名而不是數字的好處是，名稱易於記憶。不過壞處是，瀏覽器也許並不支持全部實體名稱（對實體數字的支持卻很好）。
應用場景：
HTML 中的預留字符必須被替換爲字符實體。一些在鍵盤上找不到的字符也可使用字符實體來替換。
結合音標符
發音符號是加到字母上的一個"glyph(字形)"。
一些變音符號, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
變音符號能夠出現字母的上面和下面，或者字母裏面，或者兩個字母間。
變音符號能夠與字母、數字字符的組合來使用。
如下是一些實例:
| 音標符 | 字符 | Construct | 輸出結果 |
|---|---|---|---|
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
HTML字符實體
實體名稱對大小寫敏感，雖然 html 不區分大小寫，但實體字符對大小寫敏感。
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | |   | |
| < | 小於號 | < | < |
| > | 大於號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 鎊 | £ | £ |
| ¥ | 人民幣/日元 | ¥ | ¥ |
| € | 歐元 | € | € |
| § | 小節 | § | § |
| © | 版權 | © | © |
| ® | 註冊商標 | ® | ® |
| ™ | 商標 | ™ | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
現代的瀏覽器支持的字符集：
ISO-8859-1
ISO-8859-1 是大多數瀏覽器默認的字符集。
ISO-8859-1 的較低部分（從 1 到 127 之間的代碼）是最初的 ASCII 字符集（0-9 的數字，大寫和小寫英文字母表，以及一些特殊字符）。
ISO-8859-1 的較高部分（從 160 到 255 之間的代碼）包含了一些西歐國家使用的字符和一些被普遍使用的特殊字符，它們全都有實體名稱。
這些符號中的大多數均可以在不進行實體引用的狀況下使用，可是實體名稱或實體編號爲那些不容易經過鍵盤鍵入的符號提供了表達的方法。
HTML 預留字符
HTML and XHTML 預留了一些字符。好比，您不能使用包含這些字符的文本，由於瀏覽器可能會誤覺得是 HTML 標籤。
HTML and XHTML 中央處理器必須識別如下表格所列舉的五種特殊字符：
| 字符 | 實體編號 | 實體名稱 | 描述 |
|---|---|---|---|
|   | | 非間斷空格（non-breaking space） | |
| ¡ | ¡ | ¡ | 倒置感嘆號（inverted exclamation mark） |
| ¢ | ¢ | ¢ | 美分符號（cent） |
| £ | £ | £ | 英鎊符號（pound） |
| ¤ | ¤ | ¤ | 貨幣符號（currency） |
| ¥ | ¥ | ¥ | 日元符號（yen） |
| ¦ | ¦ | ¦ | 間斷的豎槓（broken vertical bar） |
| § | § | § | 小節號（section） |
| ¨ | ¨ | ¨ | 分音符號（spacing diaeresis） |
| © | © | © | 版權全部（copyright） |
| ª | ª | ª | 陰性序數記號（feminine ordinal indicator） |
| « | « | « | 左雙角引號（angle quotation mark (left)） |
| ¬ | ¬ | ¬ | 否認符號（negation） |
| | ­ | ­ | 軟連字符（soft hyphen） |
| ® | ® | ® | 註冊商標（registered trademark) |
| ¯ | ¯ | ¯ | 長音符號（spacing macron） |
| ° | ° | ° | 度符號（degree） |
| ± | ± | ± | 加減號/正負號（plus-or-minus） |
| ² | ² | ² | 上標 2（superscript 2） |
| ³ | ³ | ³ | 上標 3（superscript 3） |
| ´ | ´ | ´ | 尖音符號（spacing acute） |
| µ | µ | µ | 微米符號（micro） |
| ¶ | ¶ | ¶ | 段落符號（paragraph） |
| · | · | · | 中間點（middle dot） |
| ¸ | ¸ | ¸ | 變音符號（spacing cedilla） |
| ¹ | ¹ | ¹ | 上標 1（superscript 1） |
| º | º | º | 陽性序數記號（masculine ordinal indicator） |
| » | » | » | 右雙角引號（angle quotation mark (right)） |
| ¼ | ¼ | ¼ | 1/4 分數（fraction 1/4） |
| ½ | ½ | ½ | 1/2 分數（fraction 1/2） |
| ¾ | ¾ | ¾ | 3/4 分數（fraction 3/4） |
| ¿ | ¿ | ¿ | 倒置問號（inverted question mark） |
ISO 8859-1 字符實體
| 字符 | 實體編號 | 實體名稱 | 描述 |
|---|---|---|---|
| À | À | À | 大寫字母 A，重音（grave accent） |
| Á | Á | Á | 大寫字母 A，尖音（acute accent） |
| Â | Â | Â | 大寫字母 A，抑揚音（circumflex accent） |
| Ã | Ã | Ã | 大寫字母 A，齶化（tilde） |
| Ä | Ä | Ä | 大寫字母 A，帶有變音符號標記（umlaut mark） |
| Å | Å | Å | 大寫字母 A，帶有上圓圈（ring） |
| Æ | Æ | Æ | 大寫字母 AE |
| Ç | Ç | Ç | 大寫字母 C，變音（cedilla） |
| È | È | È | 大寫字母 E，重音（grave accent） |
| É | É | É | 大寫字母 E，尖音（acute accent） |
| Ê | Ê | Ê | 大寫字母 E，抑揚音（circumflex accent） |
| Ë | Ë | Ë | 大寫字母 E，帶有變音符號標記（umlaut mark） |
| Ì | Ì | Ì | 大寫字母 I，重音（grave accent） |
| Í | Í | Í | 大寫字母 I，尖音（acute accent） |
| Î | Î | Î | 大寫字母 I，抑揚音（circumflex accent） |
| Ï | Ï | Ï | 大寫字母 I，帶有變音符號標記（umlaut mark） |
| Ð | Ð | Ð | 冰島語大寫字母 eth |
| Ñ | Ñ | Ñ | 大寫字母 N，齶化（tilde） |
| Ò | Ò | Ò | 大寫字母 O，重音（grave accent） |
| Ó | Ó | Ó | 大寫字母 O，尖音（acute accent） |
| Ô | Ô | Ô | 大寫字母 O，抑揚音（circumflex accent） |
| Õ | Õ | Õ | 大寫字母 O，齶化（tilde） |
| Ö | Ö | Ö | 大寫字母 O，帶有變音符號標記（umlaut mark） |
| × | × | × | 乘號（multiplication） |
| Ø | Ø | Ø | 大寫字母 O，帶有斜線（slash） |
| Ù | Ù | Ù | 大寫字母 U，重音（grave accent） |
| Ú | Ú | Ú | 大寫字母 U，尖音（acute accent） |
| Û | Û | Û | 大寫字母 U，抑揚音（circumflex accent） |
| Ü | Ü | Ü | 大寫字母 U，帶有變音符號標記（umlaut mark） |
| Ý | Ý | Ý | 大寫字母 Y，尖音（acute accent） |
| Þ | Þ | Þ | 冰島語大寫字母 THORN |
| ß | ß | ß | 德語小寫字母 sharp s |
| à | à | à | 小寫字母 a，重音（grave accent） |
| á | á | á | 小寫字母 a，尖音（acute accent） |
| â | â | â | 小寫字母 a，抑揚音（circumflex accent） |
| ã | ã | ã | 小寫字母 a，齶化（tilde） |
| ä | ä | ä | 小寫字母 a，帶有變音符號標記（umlaut mark） |
| å | å | å | 小寫字母 a，帶有上圓圈（ring） |
| æ | æ | æ | 小寫字母 ae |
| ç | ç | ç | 小寫字母 c，變音（cedilla） |
| è | è | è | 小寫字母 e，重音（grave accent） |
| é | é | é | 小寫字母 e，尖音（acute accent） |
| ê | ê | ê | 小寫字母 e，抑揚音（circumflex accent） |
| ë | ë | ë | 小寫字母 e，帶有變音符號標記（umlaut mark） |
| ì | ì | ì | 小寫字母 i，重音（grave accent） |
| í | í | í | 小寫字母 i，尖音（acute accent） |
| î | î | î | 小寫字母 i，抑揚音（circumflex accent） |
| ï | ï | ï | 小寫字母 i，帶有變音符號標記（umlaut mark） |
| ð | ð | ð | 冰島語小寫字母 eth |
| ñ | ñ | ñ | 小寫字母 n，齶化（tilde） |
| ò | ò | ò | 小寫字母 o，重音（grave accent） |
| ó | ó | ó | 小寫字母 o，尖音（acute accent） |
| ô | ô | ô | 小寫字母 o，抑揚音（circumflex accent） |
| õ | õ | õ | 小寫字母 o，齶化（tilde） |
| ö | ö | ö | 小寫字母 o，帶有變音符號標記（umlaut mark） |
| ÷ | ÷ | ÷ | 除號（division） |
| ø | ø | ø | 小寫字母 o，帶有斜線（slash） |
| ù | ù | ù | 小寫字母 u，重音（grave accent） |
| ú | ú | ú | 小寫字母 u，尖音（acute accent） |
| û | û | û | 小寫字母 u，抑揚音（circumflex accent） |
| ü | ü | ü | 小寫字母 u，帶有變音符號標記（umlaut mark） |
| ý | ý | ý | 小寫字母 y，尖音（acute accent） |
| þ | þ | þ | 冰島語小寫字母 thorn |
| ÿ | ÿ | ÿ | 小寫字母 y，帶有變音符號標記（umlaut mark） |
8.完善
8.1hack
<!DOCTYPE html> 是 HTML5 中惟一的 doctype，也被視做將網頁 "升級" 到 HTML5 的第一步。
不少國外網站的 <!DOCTYPE html> 和 <HEAD> 之間都會有一段註釋,如:
<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—> <!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—> <!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—> <!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—> <!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>
改代碼做用於 css，來寫一些針對 IE 各版本的樣式差別。
先判斷用戶用的哪一個 IE 版本，而後在標籤上加上該版本的 class，這樣能夠方便 hack。
css 文件是這樣寫的：
.ie6 xxx {};
.ie7 xxx {};
這是目前最好的 hack 方式之一。
附錄
1.HTML5新標籤字母排列
| 標籤 | 描述 |
|---|---|
| <!--...--> | 定義註釋 |
| <!DOCTYPE> | 定義文檔類型 |
| <a> | 定義超文本連接 |
| <abbr> | 定義縮寫 |
| <acronym> | 定義只取首字母的縮寫，不支持HTML5 |
| <address> | 定義文檔做者或擁有者的聯繫信息 |
| <applet> | HTML5中不同意使用。定義嵌入的 applet。 |
| <area> | 定義圖像映射內部的區域 |
| <article>New | 定義一個文章區域 |
| <aside>New | 定義頁面的側邊欄內容 |
| <audio>New | 定義音頻內容 |
| <b> | 定義文本粗體 |
| <base> | 定義頁面中全部連接的默認地址或默認目標。 |
| <basefont> | HTML5不支持，不同意使用。定義頁面中文本的默認字體、顏色或尺寸。 |
| <bdi>New | 容許您設置一段文本，使其脫離其父元素的文本方向設置。 |
| <bdo> | 定義文字方向 |
| <big> | 定義大號文本，HTML5不支持 |
| <blockquote> | 定義長的引用 |
| <body> | 定義文檔的主體 |
| <br> | 定義換行 |
| <button> | 定義一個點擊按鈕 |
| <canvas>New | 定義圖形，好比圖表和其餘圖像,標籤只是圖形容器，您必須使用腳原本繪製圖形 |
| <caption> | 定義表格標題 |
| <center> | HTML5不支持，不同意使用。定義居中文本。 |
| <cite> | 定義引用(citation) |
| <code> | 定義計算機代碼文本 |
| <col> | 定義表格中一個或多個列的屬性值 |
| <colgroup> | 定義表格中供格式化的列組 |
| <command>New | 定義命令按鈕，好比單選按鈕、複選框或按鈕 |
| <datalist>New | 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。 |
| <dd> | 定義定義列表中項目的描述 |
| <del> | 定義被刪除文本 |
| <details>New | 用於描述文檔或文檔某個部分的細節 |
| <dfn> | 定義定義項目 |
| <dialog>New | 定義對話框，好比提示框 |
| <dir> | HTML5不支持，不同意使用。定義目錄列表。 |
| <div> | 定義文檔中的節 |
| <dl> | 定義列表詳情 |
| <dt> | 定義列表中的項目 |
| <em> | 定義強調文本 |
| <embed>New | 定義嵌入的內容，好比插件。 |
| <fieldset> | 定義圍繞表單中元素的邊框 |
| <figcaption>New | 定義<figure> 元素的標題 |
| <figure>New | 規定獨立的流內容（圖像、圖表、照片、代碼等等）。 |
| <font> | HTML5不支持，不同意使用。定義文字的字體、尺寸和顏色。 |
| <footer>New | 定義 section 或 document 的頁腳。 |
| <form> | 定義了HTML文檔的表單 |
| <frame> | 定義框架集的窗口或框架 |
| <frameset> | 定義框架集 |
| <h1> to <h6> | 定義 HTML 標題 |
| <head> | 定義關於文檔的信息 |
| <header>New | 定義了文檔的頭部區域 |
| <hr> | 定義水平線 |
| <html> | 定義 HTML 文檔 |
| <i> | 定義斜體字 |
| <iframe> | 定義內聯框架 |
| <img> | 定義圖像 |
| <input> | 定義輸入控件 |
| <ins> | 定義被插入文本 |
| <kbd> | 定義鍵盤文本 |
| <keygen>New | 規定用於表單的密鑰對生成器字段。 |
| <label> | 定義 input 元素的標註 |
| <legend> | 定義 fieldset 元素的標題。 |
| <li> | 定義列表的項目 |
| <link> | 定義文檔與外部資源的關係 |
| <map> | 定義圖像映射 |
| <mark>New | 定義帶有記號的文本。請在須要突出顯示文本時使用 <m> 標籤。 |
| <menu> | 不同意使用。定義菜單列表。 |
| <meta> | 定義關於 HTML 文檔的元信息。 |
| <meter>New | 定義度量衡。僅用於已知最大和最小值的度量。 |
| <nav>New | 定義導航連接的部分 |
| <noframes> | 定義針對不支持框架的用戶的替代內容。HTML5不支持 |
| <noscript> | 定義針對不支持客戶端腳本的用戶的替代內容。 |
| <object> | 定義內嵌對象 |
| <ol> | 定義有序列表。 |
| <optgroup> | 定義選擇列表中相關選項的組合。 |
| <option> | 定義選擇列表中的選項。 |
| <output>New | 定義不一樣類型的輸出，好比腳本的輸出。 |
| <p> | 定義段落。 |
| <param> | 定義對象的參數。 |
| <pre> | 定義預格式文本。 |
| <progress>New | 定義運行中的進度（進程）。 |
| <q> | 定義短的引用。 |
| <rp>New | <rp> 標籤在 ruby 註釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。 |
| <rt>New | <rt> 標籤訂義字符（中文註音或字符）的解釋或發音。 |
| <ruby>New | <ruby> 標籤訂義 ruby 註釋（中文註音或字符）。 |
| <s> | 不同意使用。定義加刪除線的文本。 |
| <samp> | 定義計算機代碼樣本。 |
| <script> | 定義客戶端腳本。 |
| <section>New | <section> 標籤訂義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。 |
| <select> | 定義選擇列表（下拉列表）。 |
| <small> | 定義小號文本。 |
| <source>New | <source> 標籤爲媒介元素（好比 <video> 和 <audio>）定義媒介資源。 |
| <span> | 定義文檔中的節。 |
| <strike> | HTML5不支持，不同意使用。定義加刪除線文本。 |
| <strong> | 定義強調文本。 |
| <style> | 定義文檔的樣式信息。 |
| <sub> | 定義下標文本。 |
| <summary>New | <summary> 標籤包含 details 元素的標題，"details" 元素用於描述有關文檔或文檔片斷的詳細信息。 |
| <sup> | 定義上標文本。 |
| <table> | 定義表格。 |
| <tbody> | 定義表格中的主體內容。 |
| <td> | 定義表格中的單元。 |
| <textarea> | 定義多行的文本輸入控件。 |
| <tfoot> | 定義表格中的表注內容（腳註）。 |
| <th> | 定義表格中的表頭單元格。 |
| <thead> | 定義表格中的表頭內容。 |
| <time>New | 定義日期或時間，或者二者。 |
| <title> | 定義文檔的標題。 |
| <tr> | 定義表格中的行。 |
| <track>New | <track> 標籤爲諸如 video 元素之類的媒介規定外部文本軌道。 |
| <tt> | 定義打字機文本。 |
| <u> | 不同意使用。定義下劃線文本。 |
| <ul> | 定義無序列表。 |
| <var> | 定義文本的變量部分。 |
| <video>New | <video> 標籤訂義視頻，好比電影片斷或其餘視頻流。 |
| <wbr>New | 規定在文本中的何處適合添加換行符。 |
2.HTML5 新標籤功能排序
| 標籤 | 描述 |
|---|---|
| 基礎 | |
| <!DOCTYPE> | 定義文檔類型。 |
| <html> | 定義一個 HTML 文檔 |
| <title> | 爲文檔定義一個標題 |
| <body> | 定義文檔的主體 |
| <h1> to <h6> | 定義 HTML 標題 |
| <p> | 定義一個段落 |
| <br> | 定義簡單的折行。 |
| <hr> | 定義水平線。 |
| <!--...--> | 定義一個註釋 |
| 格式 | |
| <acronym> | HTML5再也不支持。 定義只取首字母的縮寫。 |
| <abbr> | 定義一個縮寫。 |
| <address> | 定義文檔做者或擁有者的聯繫信息。 |
| <b> | 定義粗體文本。 |
| <bdi>New | 容許您設置一段文本，使其脫離其父元素的文本方向設置。 |
| <bdo> | 定義文本的方向。 |
| <big> | HTML5再也不支持。 定義大號文本。 |
| <blockquote> | 定義塊引用。 |
| <center> | HTML5再也不支持。 HTML 4.01 已廢棄。定義居中文本。 |
| <cite> | 定義引用(citation)。 |
| <code> | 定義計算機代碼文本。 |
| <del> | 定義被刪除文本。 |
| <dfn> | 定義定義項目。 |
| <em> | 定義強調文本。 |
| <font> | HTML5再也不支持。 HTML 4.01 已廢棄。 定義文本的字體、尺寸和顏色 |
| <i> | 定義斜體文本。 |
| <ins> | 定義被插入文本。 |
| <kbd> | 定義鍵盤文本。 |
| <mark>New | 定義帶有記號的文本。 |
| <meter>New | 定義度量衡。僅用於已知最大和最小值的度量。 |
| <pre> | 定義預格式文本 |
| <progress>New | 定義運行中的任務進度（進程）。 |
| <q> | 定義短的引用。 |
| <rp>New | 定義不支持 ruby 元素的瀏覽器所顯示的內容。 |
| <rt>New | 定義字符（中文註音或字符）的解釋或發音。 |
| <ruby>New | 定義 ruby 註釋（中文註音或字符）。 |
| <s> | 定義加刪除線的文本。 |
| <samp> | 定義計算機代碼樣本。 |
| <small> | 定義小號文本。 |
| <strike> | HTML5再也不支持。 HTML 4.01 已廢棄。 定義加刪除線的文本。 |
| <strong> | 定義語氣更爲強烈的強調文本。 |
| <sub> | 定義下標文本。 |
| <sup> | 定義上標文本。 |
| <time>New | 定義一個日期/時間 |
| <tt> | HTML5再也不支持。 定義打字機文本。 |
| <u> | 定義下劃線文本。 |
| <var> | 定義文本的變量部分。 |
| <wbr>New | 規定在文本中的何處適合添加換行符。 |
| 表單 | |
| <form> | 定義一個 HTML 表單，用於用戶輸入。 |
| <input> | 定義一個輸入控件 |
| <textarea> | 定義多行的文本輸入控件。 |
| <button> | 定義按鈕。 |
| <select> | 定義選擇列表（下拉列表）。 |
| <optgroup> | 定義選擇列表中相關選項的組合。 |
| <option> | 定義選擇列表中的選項。 |
| <label> | 定義 input 元素的標註。 |
| <fieldset> | 定義圍繞表單中元素的邊框。 |
| <legend> | 定義 fieldset 元素的標題。 |
| <datalist>New | 規定了 input 元素可能的選項列表。 |
| <keygen>New | 規定用於表單的密鑰對生成器字段。 |
| <output>New | 定義一個計算的結果 |
| 框架 | |
| <frame> | HTML5再也不支持。 定義框架集的窗口或框架。 |
| <frameset> | HTML5再也不支持。定義框架集。 |
| <noframes> | HTML5再也不支持。 定義針對不支持框架的用戶的替代內容。 |
| <iframe> | 定義內聯框架。 |
| 圖像 | |
| <img> | 定義圖像。 |
| <map> | 定義圖像映射。 |
| <area> | 定義圖像地圖內部的區域。 |
| <canvas>New | 經過腳本（一般是 JavaScript）來繪製圖形（好比圖表和其餘圖像）。 |
| <figcaption>New | 定義一個 caption for a <figure> element |
| <figure>New | figure 標籤用於對元素進行組合。 |
| Audio/Video | |
| <audio>New | 定義聲音，好比音樂或其餘音頻流。 |
| <source>New | 定義media元素 (<video> 和 <audio>)的媒體資源。media |
| <track>New | 爲媒體(<video> 和 <audio>)元素定義外部文本軌道。 |
| <video>New | 定義一個音頻或者視頻 |
| 連接 | |
| <a> | 定義一個連接 |
| <link> | 定義文檔與外部資源的關係。 |
| <nav>New | 定義導航連接 |
| 列表 | |
| <ul> | 定義一個無序列表 |
| <ol> | 定義一個有序列表 |
| <li> | 定義一個列表項 |
| <dir> | HTML5再也不支持。 HTML 4.01 已廢棄。 定義目錄列表。 |
| <dl> | 定義一個定義列表 |
| <dt> | 定義一個定義定義列表中的項目。 |
| <dd> | 定義定義列表中項目的描述。 |
| <menu> | 定義菜單列表。 |
| <command>New | 定義用戶可能調用的命令（好比單選按鈕、複選框或按鈕）。 |
| 表格 | |
| <table> | 定義一個表格 |
| <caption> | 定義表格標題。 |
| <th> | 定義表格中的表頭單元格。 |
| <tr> | 定義表格中的行。 |
| <td> | 定義表格中的單元。 |
| <thead> | 定義表格中的表頭內容。 |
| <tbody> | 定義表格中的主體內容。 |
| <tfoot> | 定義表格中的表注內容（腳註）。 |
| <col> | 定義表格中一個或多個列的屬性值。 |
| <colgroup> | 定義表格中供格式化的列組。 |
| 樣式/節 | |
| <style> | 定義文檔的樣式信息。 |
| <div> | 定義文檔中的節。 |
| <span> | 定義文檔中的節。 |
| <header>New | 定義一個文檔頭部部分 |
| <footer>New | 定義一個文檔底部 |
| <section>New | 定義了文檔的某個區域 |
| <article>New | 定義一個文章內容 |
| <aside>New | 定義其所處內容以外的內容。 |
| <details>New | 定義了用戶可見的或者隱藏的需求的補充細節。 |
| <dialog>New | 定義一個對話框或者窗口 |
| <summary>New | 定義一個可見的標題。 當用戶點擊標題時會顯示出詳細信息。 |
| 元信息 | |
| <head> | 定義關於文檔的信息 |
| <meta> | 定義關於 HTML 文檔的元信息。 |
| <base> | 定義頁面中全部連接的默認地址或默認目標。 |
| <basefont> | HTML5再也不支持。 HTML 4.01 已廢棄。 定義頁面中文本的默認字體、顏色或尺寸。 |
| 程序 | |
| <script> | 定義客戶端腳本。 |
| <noscript> | 定義針對不支持客戶端腳本的用戶的替代內容。 |
| <applet> | HTML5再也不支持。 HTML 4.01 已廢棄。 定義嵌入的 applet。 |
| <embed>New | 定義了一個容器，用來嵌入外部應用或者互動程序（插件）。 |
| <object> | 定義嵌入的對象。 |
| <param> | 定義對象的參數。 |
3.HTML5 新屬性全局屬性
| 屬性 | 描述 |
|---|---|
| accesskey | 設置訪問元素的鍵盤快捷鍵。 |
| class | 規定元素的類名（classname） |
| contenteditableNew | 規定是否可編輯元素的內容。 |
| contextmenuNew | 指定一個元素的上下文菜單。當用戶右擊該元素，出現上下文菜單 |
| data-*New | 用於存儲頁面的自定義數據 |
| dir | 設置元素中內容的文本方向。 |
| draggableNew | 指定某個元素是否能夠拖動 |
| dropzoneNew | 指定是否將數據複製，移動，或連接，或刪除 |
| hiddenNew | hidden 屬性規定對元素進行隱藏。 |
| id | 規定元素的惟一 id |
| lang | 設置元素中內容的語言代碼。 |
| spellcheckNew | 檢測元素是否拼寫錯誤 |
| style | 規定元素的行內樣式（inline style） |
| tabindex | 設置元素的 Tab 鍵控制次序。 |
| title | 規定元素的額外信息（可在工具提示中顯示） |
| translateNew | 指定是否一個元素的值在頁面載入時是否須要翻譯 |
- 1. leetcode（235）
- 2. Android Weekly Notes Issue #235
- 3. 簡易JSR 235 SDO 實現
- 4. 95-235-070-源碼-task-OneInputStreamTask
- 5. 【easy】235. Lowest Common Ancestor of a Binary Search Tree
- 6. 235. Lowest Common Ancestor of a Binary Search Tree
- 7. docker run 安裝jump 報錯container_linux.go:235
- 8. LeetCode --- 235. Lowest Common Ancestor of a Binary Search Tree
- 9. LeetCode 235. Lowest Common Ancestor of a Binary Search Tree
- 10. leetcode 235|236. Lowest Common Ancestor of a Tree
- 更多相關文章...
- • HTML 指南 - 網站建設指南
- • W3C HTML 活動 - W3C 教程
- • 適用於PHP初學者的學習線路和建議
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
- 1. leetcode（235）
- 2. Android Weekly Notes Issue #235
- 3. 簡易JSR 235 SDO 實現
- 4. 95-235-070-源碼-task-OneInputStreamTask
- 5. 【easy】235. Lowest Common Ancestor of a Binary Search Tree
- 6. 235. Lowest Common Ancestor of a Binary Search Tree
- 7. docker run 安裝jump 報錯container_linux.go:235
- 8. LeetCode --- 235. Lowest Common Ancestor of a Binary Search Tree
- 9. LeetCode 235. Lowest Common Ancestor of a Binary Search Tree
- 10. leetcode 235|236. Lowest Common Ancestor of a Tree