HTML基礎總結(完整版)
- HTML 概念介紹
- HTML 規範
- HTML元素
- HTML 元素嵌套規則
- HTML 屬性
- HTML meta元素
- HTML 錨點
- HTML 標簽
- HTML 表格
- HTML 音頻和視頻
- HTML 條件註釋
- HTML 文檔頭聲明
HTML 概念介紹
【概念】
(Hyper Text Markup Language)超文本標記語言，是用來描述網頁的一種語言
超文本(Hyper Text):不只包括文本，也可以包括圖片、鏈接、音樂、視頻等非文本元素
標記語言(Markup Language):標記語言是一套標記標簽，HTML使用標記標簽來描述網頁
【標簽】
單標簽：<img src="" alt="" />
** HTML標簽對大小寫不敏感，但要全小寫
【屬性】
標簽的屬性
常用屬性：
- class 類
- id 元素ID
- style 元素的行內樣式
- title 元素的額外信息，可在工具提示中顯示
【元素】
HTML元素以開始標簽起始，以結束標簽終止，元素的內容是開始標簽與結束標簽之間的內容。
【文檔】
HTML文檔被稱為網頁，由嵌套的HTML元素構成
【註釋】
註釋是在HTML插入的描述性文本，用來解釋該代碼或提示其他信息。
<!-- 註釋內容 -->ps: 註釋只出現在代碼中，不會在頁面中顯示；且註釋不可嵌套
HTML 規範
一個HTML的結構和解釋
<!DOCTYPE html> // 文件應以“<!DOCTYPE ......>”首行頂格開始，推薦使用“<!DOCTYPE html>” <html> <head> <meta charset="utf-8"/> // 必須聲明文檔的編碼charset，且與文件本身編碼保持一致，指定字符編碼的 meta 必須是 head 的第一個直接子元素。推薦使用UTF-8編碼<meta charset="utf-8"> <title>Document</title> // 頁面title是不可缺少的一項，title 必須作為 head 的直接子元素，並緊隨 charset 聲明之後 <meta name="keywords" content=""/> <meta name="description" content=""/> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="5/style.css"/> // 引入 CSS 時必須指明 rel="stylesheet" <link rel="shortcut icon" href="ico.ico"/> // link標簽必須在head標簽中引入 </head> <body> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> // 1. js引入要放在body的最下方(防止頁面阻塞) 2. 移動環境或只針對現代瀏覽器設計的 Web 應用，如果引用外部資源的 URL 協議部分與頁面相同，建議省略協議前綴。這是因為使用 protocol-relative URL 引入 CSS，在 IE7/8 下，會發兩次請求。是否使用 protocol-relative URL 應充分考慮頁面針對的環境 </body> </html>
HTML元素
塊級元素
【h1, h2, h3, h4, h5, h6】
含義：標題元素
註意：h1 在一個HTML中最好只出現一次(seo方面)
【hgroup】
含義：用於包括標題組
HTML5新增的標簽
【p】
含義：段落元素
【div】
含義：塊級空元素
【hr】
含義：分割元素
【pre】
含義：預定義格式文本
在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現出來，文本中的空白符(比如空格和換行符)都會顯示出來，通常表示已排版的內容，如代碼塊和字符畫等
【blockquote】
含義：HTML塊級引用元素
代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮進。若引文來源於網絡，則可以將原內容的出處URL地址設置到cite特性上，若要以文本的形式告知讀者引文的出處時，可以通過元素
【address】
含義：聯系信息
骨架類：html body
表單類：form fieldset output legend optgroup option
列表類：ul ol li dl dd dt
HTML5新增結構標簽：article aside header footer nav section
HTML5新增多媒體：figure figcaption
HTML5新增功能型：summary details
內聯元素
通用容器：span
強調重要：em strong
文字間隔：i(斜體) b(粗體)
不精確文字：s(在HTML5中重新定義為有錯的、過時的、不被建議使用的文本，常用於表示價格變動等)
高亮顯示：mark
次要評論：small
術語處理：dfn(定義術語) abbr(縮寫詞)
引用：cite(表示作品標題的引用，可以是書影音畫等) q(表示短引用，常用於引用別人說的話，用引號可以表達等價語義)
換行：br wbr(指定單詞可以換行的位置)
上下標：sup sub
文本刪改：ins(文檔中插入的內容) del(文檔中刪除的內容)
特定時間：time(表示日期)
註音標識：ruby(ruby標簽定義註音標識，多用於CJK文字，CJK是指中日韓統一表意文字(Chinese、Japanese、Korean)) rt(標記文字) tp(標記括號)
復制代碼
<ruby>
漢
<rp>(</rp>
<rt>hàn</rt>
<rp>)</rp>
語
<rp>(</rp>
<rt>yǔ</rt>
<rp>)</rp>
</ruby>文字方向：bdi(忽略周圍文字方向的文字) bdo(覆蓋兩種方向的設置，允許顯式設置方向，並覆蓋所有其他當前方向)
<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>代碼：code(計算機代碼) kbd(鍵盤碼) samp(計算機例子代碼) tt(打字機代碼) var(變量)
結構元素
section：表示文檔中的一個區域(或節)，是區塊級通用元素
article：表示文檔、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可復用的結構。
aside：表示一個和其余頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。
nav：HTML導航欄(
交互元素(瀏覽器的支持度太低)
details ： 主要用於描述文檔或文檔某個部分的細節
dialog ：用來定義對話框或窗口，且該對話框位於窗口的水平居中位置
HTML 元素嵌套規則
HTML 屬性
屬性：
【class】
規定元素的一個或多個類
註意: 類不能以數字開頭
class = "classA classB" // 多個類的寫法【id】
規定元素的唯一標識
註意：若瀏覽器中出現多個id名的情況，CSS樣式對所以該id名的元素都生效，但javascript腳本僅對第一個出現該id名的元素生效
【dir】
文字的方向
值：ltr/rtl/auto
【lang】
HTML的lang屬性可用於標記網頁或部分網頁的語言。也就是說lang這個屬性不僅僅可以用在html標簽上
en:英文
zh:中文
zh-CN：簡體中文
<html lang="en">
<p>You'd say that in Chinese as <span lang="zh">文獻情報中心</span>.</p>有什麽作用？
簡單來說，可能對於程序來說沒有太大的作用，但是它可以告訴瀏覽器，搜索引擎，一些處理Html的程序對頁面語言內容來做一些對應的處理或者事情。
比如可以
根據根據lang屬性來設定不同語言的css樣式，或者字體
- 告訴搜索引擎做精確的識別
- 讓語法檢查程序做語言識別
- 幫助翻譯工具做識別
- 幫助網頁閱讀程序做識別
等...
【style】
設置行間樣式
<div style="background:red;"></div>【tabindex】
規定元素的tab鍵次序（1開始）
<div>
<a tabindex="3">cc</a>
<a tabindex="2">bb</a>
<a tabindex="1">aa</a>
</div>【title】
規定關於元素的額外信息，鼠標移到元素上時顯示一段提示文本
<a href="#" title="我是一個超鏈接">百度</a>
HTML5新增的屬性
【contenteditable】
作用：指定是否可以在瀏覽器裏編輯內容
值：true/false
註意：設置document.designMode =‘on‘時，頁面的任意位置都可以編輯；使用contenteditable =‘true‘則只對具體元素和其包含的元素起作用
移動端：移動端ios5以及android3之後才支持該屬性
【data-】
作用：用於存儲頁面或應用程序的私有定制數據
註意：屬性名不應包含任何大寫字母，且在前綴"data-"之後必須有至少一個字符；屬性值可以是任意字符串
使用：可以在所有瀏覽器中使用getAttribute方法來獲取data-屬性的值，也可以使用javascript中dataset屬性訪問data-*屬性的值，不過IE10-瀏覽器不支持dataset
【draggable】IE8- 不支持
作用：用戶是否可以拖動元素
值：true/false/auto
註意：鏈接和圖像默認是可拖動的
【hidden】(IE7-不支持)
作用：顯示或隱藏該元素(與display:none的作用一樣)
值：hidden="" || hidden= "hidden"
【spellcheck】(IE9-不支持)
作用：規定是否對元素進行拼寫和語法檢查,對拼寫錯誤的單詞會在其下方出現紅線
範圍：可編輯區域（表單或contenteditable元素）
值：true/false
註意：移動端支持不好