【原】HTML知識點總結(jié)（上）

新用戶5386csdo 2020-09-15

展開全文

1、HTML 簡介

　　W3C（World Wide Web Consortium），W3C 組織，萬維網(wǎng)聯(lián)盟，這個組織制訂網(wǎng)頁標(biāo)準(zhǔn)。W3C 標(biāo)準(zhǔn)不是一個標(biāo)準(zhǔn)，而是一系列的標(biāo)準(zhǔn)的集合，包含三部分的標(biāo)準(zhǔn)：結(jié)構(gòu)標(biāo)準(zhǔn)，表現(xiàn)標(biāo)準(zhǔn)和動作標(biāo)準(zhǔn)，與結(jié)構(gòu)標(biāo)準(zhǔn)對應(yīng)的是 HTML，與表現(xiàn)標(biāo)準(zhǔn)對應(yīng)的是 CSS，與動作標(biāo)準(zhǔn)對應(yīng)的是 JavaScript。

　　HTML 是一種在 Web 上使用的通用標(biāo)記語言，允許你格式化文本，添加圖片，創(chuàng)建鏈接、輸入表單、框架和表格等等，并可將之存為文本文件，瀏覽器即可讀取和顯示。HTML 的關(guān)鍵是標(biāo)簽，其作用是呈現(xiàn)內(nèi)容。瀏覽器用于讀取 HTML 文件，并將其作為網(wǎng)頁顯示，他并不是直接顯示的 HTML 標(biāo)簽，但是可以使用標(biāo)簽來決定如何展現(xiàn) HTML 頁面的內(nèi)容給用戶。

　　HTML 指的是超文本標(biāo)記語言：Hyper Text Markup Language。HTML 不是一種編程語言，而是一種標(biāo)記語言，標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)。HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。HTML 文檔包含了 HTML 標(biāo)簽及文本內(nèi)容，HTML文檔也叫做 web 頁面。

　　HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。HTML 標(biāo)簽通常是成對出現(xiàn)的，比如 <p> 和 </p>，標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽，開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。

　　HTML標(biāo)簽和 HTML元素通常都是描述同樣的意思，但是嚴(yán)格來講，一個 HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如：<p> 我是一個段落。</p> 。

2、HTML 標(biāo)簽

　　HTML 文檔由 HTML 元素定義。開始標(biāo)簽常被稱為起始標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag）。元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容，某些 HTML 元素具有空內(nèi)容，空元素在開始標(biāo)簽中進(jìn)行關(guān)閉，以開始標(biāo)簽的結(jié)束而結(jié)束，大多數(shù) HTML 元素可擁有屬性。

　　HTML 文檔由嵌套的 HTML 元素構(gòu)成：<html><head><body><p>我是一個段落。</p></body></head></html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p style="color:red">我是一個段落。</p>

</body>

</html>

　　HTML 元素可以設(shè)置屬性，屬性是 HTML 元素提供的附加信息，屬性一般描述于開始標(biāo)簽，屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。屬性值應(yīng)該始終被包括在引號內(nèi)。雙引號是最常用的，不過使用單引號也沒有問題。在某些個別的情況下，比如屬性值本身就含有雙引號，那么你必須使用單引號。

　　適用于大多數(shù) HTML 元素的屬性：

　　　　①：id　　定義元素的唯一 id

　　　?、冢篶lass　　為 html 元素定義一個或多個類名(classname)

　　　?、郏簊tyle　　規(guī)定元素的行內(nèi)樣式（inline style 內(nèi)聯(lián)樣式）

　　　　④：title　　描述了元素的額外信息 (作為工具條使用)

　　(1)、基礎(chǔ)標(biāo)簽

　　HTML5 聲明：<!DOCTYPE html> 聲明有助于瀏覽器正確顯示網(wǎng)頁，也是在告訴瀏覽器這是一個 HTML5 的網(wǎng)頁。<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前，<!DOCTYPE> 標(biāo)簽沒有結(jié)束標(biāo)簽，聲明不區(qū)分大小寫。

　　<html> 標(biāo)簽告知瀏覽器這是一個 HTML 文檔。<html> 標(biāo)簽是 HTML 文檔中最外層的元素，也是文檔的根元素，但是不包含 doctype 元素，也就是聲明 <!DOCTYPE html>，doctype 元素必須位于 html 元素之前，<html> 標(biāo)簽是所有其他 HTML 元素的容器。HTML5 中增加了一個新屬性：manifest，值為 URL 用于定義一個 URL，在這個 URL 上描述了文檔的緩存信息。

　　<html> 與 </html> 標(biāo)簽限定了文檔的開始點和結(jié)束點，在它們之間是文檔的頭部和主體，文檔的頭部由 <head> 標(biāo)簽定義，而主體由 <body> 標(biāo)簽定義。

　　<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head>元素中你可以插入腳本(scripts)，樣式文件(CSS)，及各種 meta 信息?？梢蕴砑釉陬^部區(qū)域的元素標(biāo)簽有 7 個：<title>，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。

　　<meta>標(biāo)簽描述了一些基本的元數(shù)據(jù)。元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。<meta>元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。元數(shù)據(jù)可以使用于瀏覽器(如何顯示內(nèi)容或重新加載頁面)，搜索引擎(關(guān)鍵詞)，或其他Web服務(wù)。注意：<meta> 通常位于 <head> 區(qū)域內(nèi)，在 HTML 中 <meta> 標(biāo)簽沒有結(jié)束標(biāo)簽。

　　元數(shù)據(jù)（Metadata）是數(shù)據(jù)的數(shù)據(jù)信息，<meta> 標(biāo)簽提供了 HTML 文檔的元數(shù)據(jù)。注意：元數(shù)據(jù)通常以名稱/值對出現(xiàn)。注意：如果沒有提供 name 屬性，那么名稱/值對中的名稱會采用 http-equiv 屬性的值。在 HTML5 中，有一個新的 charset 屬性，它使字符集的定義更加容易：HTML4： <meta http-equiv="content-type" content="text/html; charset=UTF-8">，HTML5： <meta charset="UTF-8">。

　　<meta> 標(biāo)簽使用實例：

定義編碼格式：<meta charset="UTF-8">

為搜索引擎定義關(guān)鍵詞：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

為網(wǎng)頁定義描述內(nèi)容：<meta name="description" content="HTML基礎(chǔ)">

定義網(wǎng)頁作者：<meta name="author" content="Mr mo"> 每30秒中刷新當(dāng)前頁面：<meta http-equiv="refresh" content="30">

常用的針對移動網(wǎng)頁優(yōu)化過 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

　　上面實例最后一項代碼解析：

　　width：控制 viewport(可視區(qū)) 的大小，可以是指定的一個值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度，單位為縮放為 100% 時的 CSS 的像素。

　　height：和 width 相對應(yīng)，指定高度。

　　initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時候縮放比例。

　　maximum-scale/minimum-scale：允許用戶縮放到的最大/最小比例。

　　user-scalable：用戶是否可以手動縮放。

　　<title> 標(biāo)簽定義HTML文檔的標(biāo)題。使用 <meta> 元素來描述HTML文檔的描述，關(guān)鍵詞，作者，字符集等。

　　<title> 標(biāo)簽在所有 HTML 文檔中是必需的。<title>元素：

　　　?、伲憾x瀏覽器工具欄中的標(biāo)題。

　　　?、冢禾峁╉撁姹惶砑拥绞詹貖A時的標(biāo)題。

　　　?、郏猴@示在搜索引擎結(jié)果中的頁面標(biāo)題。

　　注意：一個 HTML 文檔中不能有一個以上的 <title> 元素。如果你遺漏了 <title> 標(biāo)簽，文檔作為 HTML 是無效的。<title> 標(biāo)簽定義了不同文檔的標(biāo)題。定義了瀏覽器工具欄的標(biāo)題。當(dāng)網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標(biāo)題。顯示在搜索引擎結(jié)果頁面的標(biāo)題。所以選擇標(biāo)題的時候，一定要簡短，有說明性，采用關(guān)鍵詞，與頁面內(nèi)容相關(guān)。

　　<style> 標(biāo)簽定義了 HTML 文檔的樣式信息。在 <style> 元素中，你可以規(guī)定在瀏覽器中如何呈現(xiàn) HTML 文檔，每個 HTML 文檔能包含多個 <style> 標(biāo)簽。注意：如果沒有使用 "scoped" 屬性，則每一個 <style> 標(biāo)簽必須位于 head 頭部區(qū)域。"scoped" 屬性是 HTML5 中的新屬性，它允許我們?yōu)槲臋n的指定部分定義樣式，而不是整個文檔。如果使用 "scoped" 屬性，那么所規(guī)定的樣式只能應(yīng)用到 style 元素的父元素及其子元素。在 HTML5 中可以不定義類型（type）屬性，默認(rèn)值為 "text/css"。如需鏈接外部樣式表，就使用 <link> 標(biāo)簽。<style>定義文本樣式，<link> 定義資源引用地址。

　　<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系。<link> 標(biāo)簽通常用于鏈接到樣式表：<link rel="stylesheet" type="text/css" href="mystyle.css">。注意： link 元素是空元素，它僅包含屬性，此元素只能存在于 head 部分，不過它可出現(xiàn)任何次數(shù)。

　　JavaScript 使 HTML 頁面具有更強(qiáng)的動態(tài)和交互性。HTML 腳本標(biāo)簽 <script> 用于定義客戶端腳本。<noscript> 標(biāo)簽定義了不支持腳本瀏覽器輸出的文本，對于那些在瀏覽器中禁用腳本或者其瀏覽器不支持客戶端腳本的用戶來說，該元素非常有用。

　　<script> 標(biāo)簽定義客戶端腳本，比如 JavaScript。<script> 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。JavaScript 最常用于圖片操作、表單驗證以及內(nèi)容動態(tài)更改。注意：如果使用 "src" 屬性，則 <script> 元素必須是空的。

　　有多種執(zhí)行外部腳本的方法：

　　　?、伲喝绻?async="async"：腳本相對于頁面的其余部分異步地執(zhí)行（當(dāng)頁面繼續(xù)進(jìn)行解析時，腳本將被執(zhí)行）。

　　　　② ：如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執(zhí)行。

　　　?、郏喝绻炔皇褂?async 也不使用 defer：在瀏覽器繼續(xù)解析頁面之前，立即讀取并執(zhí)行腳本。

　　在 HTML5 中 "type" 屬性是可以省略的。src 屬性規(guī)定外部腳本的 URL。defer 屬性用于規(guī)定當(dāng)頁面已完成解析后，執(zhí)行腳本，僅適用于外部腳本。charset 屬性用于規(guī)定在腳本中使用的字符編碼，僅適用于外部腳本。"async" 屬性是 HTML5 中的新屬性，用于規(guī)定異步執(zhí)行腳本，僅適用于外部腳本。

　　引用外部腳本的語法：<script src="URL"></script> 其中 src="RUL" 中填寫同級目錄下的外部腳本文件名。

　　注意：

　　　?、伲和獠磕_本文件可以是任意擴(kuò)展名，通常開發(fā)者會將 JavaScript 外部腳本的擴(kuò)展名寫為 script.js。

　　　?、冢涸谕獠磕_本文件中，只能包含腳本語言代碼，不能包含其他代碼，如HTML代碼等，也不能包含 <script> 標(biāo)簽，因為 <script>元素屬于 HTML 語言中的元素。

　　　　③：在引用外部腳本文件時，<script> 標(biāo)簽與 </script> 標(biāo)簽之間不能有其他代碼，包括腳本語言代碼。

　　　　④：雖然在引用外部腳本文件時，<script> 標(biāo)簽與 </script>標(biāo)簽之間不能有其他代碼，但 </script> 標(biāo)簽也不能被省略。

　　<noscript> 標(biāo)簽提供無法使用腳本時的替代內(nèi)容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。<noscript> 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內(nèi)容。<noscript> 標(biāo)簽用來定義在腳本未被執(zhí)行時的替代內(nèi)容（文本）。此標(biāo)簽可被用于可識別 <noscript> 標(biāo)簽但無法支持其中的腳本的瀏覽器，如果瀏覽器支持腳本，那么它不會顯示出 noscript 元素中的文本。在 HTML4 中，<noscript> 標(biāo)簽只允許插入到 <body> 元素中，而在 HTML5 中，<noscript> 標(biāo)簽可以插入到 <head> 和 <body> 區(qū)域中。

　　<body> 標(biāo)簽定義文檔的主體。<body> 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等）。在 HTML4 中，所有 body 元素的"呈現(xiàn)屬性" 已廢棄。在 HTML 5 中，刪除了所有 body 元素的"呈現(xiàn)屬性"，可以使用樣式定義。

　　HTML 標(biāo)題是通過 <h1> - <h6> 標(biāo)簽來定義的。<h1> 定義最大的標(biāo)題標(biāo)簽，<h6> 定義最小的標(biāo)題。要確保將 HTML 標(biāo)題標(biāo)簽只用于標(biāo)題，不要僅僅是為了生成粗體或大號的文本而使用標(biāo)題。搜索引擎使用標(biāo)題為你的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。<h1> 定義重要等級最高的標(biāo)題。<h6> 定義重要等級最低的標(biāo)題。

　　HTML 段落是通過 <p> 標(biāo)簽來定義的，HTML 可以將文檔分割為若干段落，瀏覽器會自動地在段落的前后添加空行。<p> 元素是塊級元素，該元素會自動在其前后創(chuàng)建一些空白。如果希望在不產(chǎn)生一個新段落的情況下進(jìn)行換行，就使用 <br/> 標(biāo)簽。我們無法確定 HTML 被顯示的確切效果，屏幕的大小，以及對窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果，對于 HTML，無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行，所有連續(xù)的空格或空行都會被算作一個空格。每個段落前空 2 個字，可用 CSS 樣式定義：<p style="text-indent:2em"></p>

　　<br/> 標(biāo)簽插入一個簡單的換行符。沒有內(nèi)容的 HTML 元素被稱為空元素，空元素是在開始標(biāo)簽中關(guān)閉的，<br/> 就是一個空元素，所有空元素都必須被關(guān)閉 <br/>。在寫地址信息或者寫詩詞時 <br> 標(biāo)簽非常有用。注意：請使用 <br/> 標(biāo)簽來輸入空行，而不是分割段落。

　　<hr/> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線，用于分隔內(nèi)容。<hr/> 標(biāo)簽定義 HTML 頁面中的主題變化（比如話題的轉(zhuǎn)移），并顯示為一條水平線，該元素被用來分隔 HTML 頁面中的內(nèi)容（或者定義一個變化）。在 HTML5 中，<hr/> 定義內(nèi)容中的主題變化，并顯示為一條水平線，而在 HTML4 中，<hr/> 標(biāo)簽僅僅顯示為一條水平線?？墒褂?CSS 來為 <hr/> 元素定義樣式。

HTML 注釋  。注釋標(biāo)簽用來在源文檔中插入注釋，注釋不會在瀏覽器中顯示?？梢允褂米⑨寣δ愕拇a進(jìn)行解釋，這樣做有助于在以后的時間對代碼的編輯，特別是代碼量很大的情況下很有用，也可以在注釋內(nèi)容存儲針對程序所定制的信息，在這種情況下，這些信息對用戶是不可見的，但是對程序來說是可用的。除了在源文檔中有非常明顯的作用外，許多 Web 服務(wù)器也利用注釋來實現(xiàn)文檔服務(wù)端軟件特有的特性。這些服務(wù)器可以掃描文檔，從傳統(tǒng)的 HTML/XHTML 注釋中找到特定的字符序列，然后再根據(jù)嵌在注釋中的命令采取相應(yīng)的動作，這些動作可能是簡單的包括其他文件中的文本（即所謂的服務(wù)器端包含，server-inside include），也可能是復(fù)雜地執(zhí)行其他命令去動態(tài)生成文檔的內(nèi)容。

　　(2)、樣式標(biāo)簽

　　<article> (H5) 標(biāo)簽定義一個文章區(qū)域。<article> 標(biāo)簽定義獨立的內(nèi)容，他定義的內(nèi)容本身必須是有意義的且必須是獨立于文檔的其余部分。<article> 的潛在來源：論壇帖子、博客文章、新聞故事、評論。

　　<aside> (H5) 標(biāo)簽定義頁面的側(cè)邊欄內(nèi)容。<aside> 標(biāo)簽定義 <article> 標(biāo)簽外的內(nèi)容，<aside> 的內(nèi)容應(yīng)該與附近的內(nèi)容相關(guān)。<aside> 的的內(nèi)容可用作文章的側(cè)欄。

　　<section> (H5) 標(biāo)簽定義了文檔的某個區(qū)域。比如章節(jié)、頭部、底部或者文檔的其他區(qū)域。

　　<header> (H5) 標(biāo)簽定義文檔或者文檔的一部分區(qū)域的頁眉。<header> 元素應(yīng)該作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。在一個文檔中，你可以定義多個 <header> 元素。注意：<header> 標(biāo)簽不能被放在 <footer>、<address> 或者另一個 <header> 元素內(nèi)部。

　　<footer> (H5) 標(biāo)簽定義 <section> 或 document 的頁腳，也就是用于定義文檔或者文檔的一部分區(qū)域的頁腳。<footer> 元素應(yīng)該包含它所包含的元素的信息，在典型情況下，該元素會包含文檔創(chuàng)作者的姓名、文檔的版權(quán)信息、使用條款的鏈接、聯(lián)系信息等等。在一個文檔中，可以定義多個 <footer> 元素。假如你使用 <footer> 元素來插入聯(lián)系信息，應(yīng)該在 <footer> 元素內(nèi)使用 <address> 標(biāo)簽。

　　<hgroup> (H5) 標(biāo)簽被用來對標(biāo)題元素進(jìn)行分組。當(dāng)標(biāo)題有多個層級（副標(biāo)題）時，<hgroup> 元素被用來對一系列 <h1> - <h6> 元素進(jìn)行分組。

　　<details> (H5) 標(biāo)簽規(guī)定了用戶可見的或者隱藏的需求的補(bǔ)充細(xì)節(jié)。<details> 標(biāo)簽用來供用戶開啟關(guān)閉的交互式控件，任何形式的內(nèi)容都能被放在 <details> 標(biāo)簽里邊。<details> 元素的內(nèi)容對用戶是不可見的，除非設(shè)置了 open 屬性。該標(biāo)簽與 <summary> 標(biāo)簽配合使用可以為 details 定義標(biāo)題，標(biāo)題是可見的，用戶點擊標(biāo)題時，會顯示出 details。屬性 open 用于規(guī)定 details 是否可見。

　　<summary> (H5) 標(biāo)簽為 <details> 元素定義一個可見的標(biāo)題，當(dāng)用戶點擊標(biāo)題時會顯示出詳細(xì)信息。注意：<summary> 元素應(yīng)該是 <details> 元素的第一個子元素。

　　<dialog> (H5) 標(biāo)簽定義一個對話框、確認(rèn)框或窗口。open 屬性規(guī)定 dialog 元素是有效的，用戶可以與它進(jìn)行交互。

　　<div> 標(biāo)簽定義 HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分，該元素沒有特定的含義，他是可用于組合其他 HTML 元素的容器，常用于組合塊級元素，以便通過 CSS 來對這些元素進(jìn)行格式化。<div> 元素是塊級元素，所以瀏覽器會默認(rèn)在他前后添加一個換行符，如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性，常被用來布局網(wǎng)頁。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法，該元素的作用就是用于顯示表格化的數(shù)據(jù)。

　　<span> 標(biāo)簽用于對文檔中的行內(nèi)元素進(jìn)行組合，該標(biāo)簽沒有固定的格式表現(xiàn)，也沒有特定的含義，當(dāng)對它應(yīng)用樣式時，它才會產(chǎn)生視覺上的變化，如果不對 <span> 應(yīng)用樣式，那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。<span> 標(biāo)簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式，當(dāng)與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。被 <span> 元素包含的文本，可以使用 CSS 對它定義樣式，或者使用 JavaScript 對它進(jìn)行操作。