1、HTML 簡介
W3C(World Wide Web Consortium),W3C 組織,萬維網聯盟,這個組織制訂網頁標准。W3C 標准不是一個標准,而是一系列的標准的集合,包含三部分的標准:結構標准,表現標准和動作標准,與結構標准對應的是 HTML,與表現標准對應的是 CSS,與動作標准對應的是 JavaScript。
HTML 是一種在 Web 上使用的通用標記語言,允許你格式化文本,添加圖片,創建鏈接、輸入表單、框架和表格等等,並可將之存為文本文件,浏覽器即可讀取和顯示。HTML 的關鍵是標簽,其作用是呈現內容。浏覽器用於讀取 HTML 文件,並將其作為網頁顯示,他並不是直接顯示的 HTML 標簽,但是可以使用標簽來決定如何展現 HTML 頁面的內容給用戶。
HTML 指的是超文本標記語言:Hyper Text Markup Language。HTML 不是一種編程語言,而是一種標記語言,標記語言是一套標記標簽 (markup tag)。HTML 使用標記標簽來描述網頁。HTML 文檔包含了 HTML 標簽及文本內容,HTML文檔也叫做 web 頁面。
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。HTML 標簽通常是成對出現的,比如 <p> 和 </p>,標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽,開始和結束標簽也被稱為開放標簽和閉合標簽。
HTML標簽 和 HTML元素 通常都是描述同樣的意思,但是嚴格來講,一個 HTML 元素包含了開始標簽與結束標簽,如:<p> 我是一個段落。</p> 。
2、HTML 標簽
HTML 文檔由 HTML 元素定義。開始標簽常被稱為起始標簽(opening tag),結束標簽常稱為閉合標簽(closing tag)。元素的內容是開始標簽與結束標簽之間的內容,某些 HTML 元素具有空內容,空元素在開始標簽中進行關閉,以開始標簽的結束而結束,大多數 HTML 元素可擁有屬性。
HTML 文檔由嵌套的 HTML 元素構成:<html><head><body><p>我是一個段落。</p></body></head></html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> </head> <body> <p style="color:red">我是一個段落。</p> </body> </html>
HTML 元素可以設置屬性,屬性是 HTML 元素提供的附加信息,屬性一般描述於開始標簽,屬性總是以名稱/值對的形式出現,比如:name="value"。屬性值應該始終被包括在引號內。雙引號是最常用的,不過使用單引號也沒有問題。在某些個別的情況下,比如屬性值本身就含有雙引號,那麼你必須使用單引號。
適用於大多數 HTML 元素的屬性:
①:id 定義元素的唯一 id
②:class 為 html 元素定義一個或多個類名(classname)
③:style 規定元素的行內樣式(inline style 內聯樣式)
④:title 描述了元素的額外信息 (作為工具條使用)
(1)、基礎標簽
HTML5 聲明:<!DOCTYPE html> 聲明有助於浏覽器正確顯示網頁,也是在告訴浏覽器這是一個 HTML5 的網頁。<!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標簽之前,<!DOCTYPE> 標簽沒有結束標簽,聲明不區分大小寫。
<html> 標簽告知浏覽器這是一個 HTML 文檔。<html> 標簽是 HTML 文檔中最外層的元素,也是文檔的根元素,但是不包含 doctype 元素,也就是聲明 <!DOCTYPE html>,doctype 元素必須位於 html 元素之前,<html> 標簽是所有其他 HTML 元素的容器。HTML5 中增加了一個新屬性:manifest,值為 URL 用於定義一個 URL,在這個 URL 上描述了文檔的緩存信息。
<html> 與 </html> 標簽限定了文檔的開始點和結束點,在它們之間是文檔的頭部和主體,文檔的頭部由 <head> 標簽定義,而主體由 <body> 標簽定義。
<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts),樣式文件(CSS),及各種 meta 信息。可以添加在頭部區域的元素標簽有 7 個:<title>,<style>,<meta>,<link>,<script>,<noscript> 和 <base>。
<meta>標簽描述了一些基本的元數據。元數據也不顯示在頁面上,但會被浏覽器解析。<meta>元素通常用於指定網頁的描述,關鍵詞,文件的最後修改時間,作者,和其他元數據。元數據可以使用於浏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。注意:<meta> 通常位於 <head> 區域內,在 HTML 中 <meta> 標簽沒有結束標簽。
元數據(Metadata)是數據的數據信息,<meta> 標簽提供了 HTML 文檔的元數據。注意:元數據通常以 名稱/值 對出現。注意:如果沒有提供 name 屬性,那麼名稱/值對中的名稱會采用 http-equiv 屬性的值。在 HTML5 中,有一個新的 charset 屬性,它使字符集的定義更加容易:HTML4: <meta http-equiv="content-type" content="text/html; charset=UTF-8">,HTML5: <meta charset="UTF-8">。
<meta> 標簽使用實例:
定義編碼格式:<meta charset="UTF-8"> 為搜索引擎定義關鍵詞:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 為網頁定義描述內容:<meta name="description" content="HTML基礎"> 定義網頁width:控制 viewport(可視區) 的大小,可以是指定的一個值,如 600,或者特殊的值,如 device-width 為設備的寬度,單位為縮放為 100% 時的 CSS 的像素。
height:和 width 相對應,指定高度。
initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。
maximum-scale/minimum-scale:允許用戶縮放到的最大/最小比例。
user-scalable:用戶是否可以手動縮放。
<title> 標簽定義HTML文檔的標題。使用 <meta> 元素來描述HTML文檔的描述,關鍵詞,作者,字符集等。
<title> 標簽在所有 HTML 文檔中是必需的。<title>元素:
①:定義浏覽器工具欄中的標題。
②:提供頁面被添加到收藏夾時的標題。
③:顯示在搜索引擎結果中的頁面標題。
注意:一個 HTML 文檔中不能有一個以上的 <title> 元素。如果你遺漏了 <title> 標簽,文檔作為 HTML 是無效的。<title> 標簽定義了不同文檔的標題。定義了浏覽器工具欄的標題。當網頁添加到收藏夾時,顯示在收藏夾中的標題。顯示在搜索引擎結果頁面的標題。所以選擇標題的時候,一定要簡短,有說明性,采用關鍵詞,與頁面內容相關。
<style> 標簽定義了 HTML 文檔的樣式信息。在 <style> 元素中,你可以規定在浏覽器中如何呈現 HTML 文檔,每個 HTML 文檔能包含多個 <style> 標簽。注意:如果沒有使用 "scoped" 屬性,則每一個 <style> 標簽必須位於 head 頭部區域。"scoped" 屬性是 HTML5 中的新屬性,它允許我們為文檔的指定部分定義樣式,而不是整個文檔。 如果使用 "scoped" 屬性,那麼所規定的樣式只能應用到 style 元素的父元素及其子元素。在 HTML5 中可以不定義類型(type)屬性,默認值為 "text/css"。如需鏈接外部樣式表,就使用 <link> 標簽。<style>定義文本樣式,<link> 定義資源引用地址。
<link> 標簽定義了文檔與外部資源之間的關系。<link> 標簽通常用於鏈接到樣式表:<link rel="stylesheet" type="text/css" href="mystyle.css">。注意: link 元素是空元素,它僅包含屬性,此元素只能存在於 head 部分,不過它可出現任何次數。
JavaScript 使 HTML 頁面具有更強的動態和交互性。HTML 腳本標簽 <script> 用於定義客戶端腳本。<noscript> 標簽定義了不支持腳本浏覽器輸出的文本,對於那些在浏覽器中禁用腳本或者其浏覽器不支持客戶端腳本的用戶來說,該元素非常有用。
<script> 標簽定義客戶端腳本,比如 JavaScript。<script> 元素既可包含腳本語句,也可通過 src 屬性指向外部腳本文件。JavaScript 最常用於圖片操作、表單驗證以及內容動態更改。注意:如果使用 "src" 屬性,則 <script> 元素必須是空的。
有多種執行外部腳本的方法:
①:如果 async="async":腳本相對於頁面的其余部分異步地執行(當頁面繼續進行解析時,腳本將被執行)。
② :如果不使用 async 且 defer="defer":腳本將在頁面完成解析時執行。
③:如果既不使用 async 也不使用 defer:在浏覽器繼續解析頁面之前,立即讀取並執行腳本。
在 HTML5 中 "type" 屬性是可以省略的。src 屬性規定外部腳本的 URL。defer 屬性用於規定當頁面已完成解析後,執行腳本,僅適用於外部腳本。charset 屬性用於規定在腳本中使用的字符編碼,僅適用於外部腳本。"async" 屬性是 HTML5 中的新屬性,用於規定異步執行腳本,僅適用於外部腳本。
引用外部腳本的語法:<script src="URL"></script> 其中 src="RUL" 中填寫同級目錄下的外部腳本文件名。
注意:
①:外部腳本文件可以是任意擴展名,通常開發者會將 JavaScript 外部腳本的擴展名寫為 script.js。
②:在外部腳本文件中,只能包含腳本語言代碼,不能包含其他代碼,如HTML代碼等,也不能包含 <script> 標簽,因為 <script>元素屬於 HTML 語言中的元素。
③:在引用外部腳本文件時,<script> 標簽與 </script> 標簽之間不能有其他代碼,包括腳本語言代碼。
④:雖然在引用外部腳本文件時,<script> 標簽與 </script>標簽之間不能有其他代碼,但 </script> 標簽也不能被省略。
<noscript> 標簽提供無法使用腳本時的替代內容,比方在浏覽器禁用腳本時,或浏覽器不支持客戶端腳本時。<noscript> 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。只有在浏覽器不支持腳本或者禁用腳本時,才會顯示 <noscript> 元素中的內容。<noscript> 標簽用來定義在腳本未被執行時的替代內容(文本)。此標簽可被用於可識別 <noscript> 標簽但無法支持其中的腳本的浏覽器,如果浏覽器支持腳本,那麼它不會顯示出 noscript 元素中的文本。在 HTML4 中,<noscript> 標簽只允許插入到 <body> 元素中,而在 HTML5 中,<noscript> 標簽可以插入到 <head> 和 <body> 區域中。
<body> 標簽定義文檔的主體。<body> 元素包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等)。在 HTML4 中,所有 body 元素的"呈現屬性" 已廢棄。在 HTML 5 中,刪除了所有 body 元素的"呈現屬性",可以使用樣式定義。
HTML 標題是通過 <h1> - <h6> 標簽來定義的。<h1> 定義最大的標題,<h6> 定義最小的標題。要確保將 HTML 標題標簽只用於標題,不要僅僅是為了生成粗體或大號的文本而使用標題。搜索引擎使用標題為你的網頁的結構和內容編制索引。應該將 h1 用作主標題(最重要的),其後是 h2(次重要的),再其次是 h3,以此類推。<h1> 定義重要等級最高的標題。<h6> 定義重要等級最低的標題。
HTML 段落是通過 <p> 標簽來定義的,HTML 可以將文檔分割為若干段落,浏覽器會自動地在段落的前後添加空行。<p> 元素是塊級元素,該元素會自動在其前後創建一些空白。如果希望在不產生一個新段落的情況下進行換行,就使用 <br/> 標簽。我們無法確定 HTML 被顯示的確切效果,屏幕的大小,以及對窗口的調整都可能導致不同的結果,對於 HTML,無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。當顯示頁面時,浏覽器會移除源代碼中多余的空格和空行,所有連續的空格或空行都會被算作一個空格。每個段落前空 2 個字,可用 CSS 樣式定義:<p style="text-indent:2em"></p>
<br/> 標簽插入一個簡單的換行符。沒有內容的 HTML 元素被稱為空元素,空元素是在開始標簽中關閉的,<br/> 就是一個空元素,所有空元素都必須被關閉 <br/>。在寫地址信息或者寫詩詞時 <br/> 標簽非常有用。注意: 請使用 <br/> 標簽來輸入空行,而不是分割段落。
<hr/> 標簽在 HTML 頁面中創建水平線,用於分隔內容。<hr/> 標簽定義 HTML 頁面中的主題變化(比如話題的轉移),並顯示為一條水平線,該元素被用來分隔 HTML 頁面中的內容(或者定義一個變化)。在 HTML5 中,<hr/> 定義內容中的主題變化,並顯示為一條水平線,而在 HTML4 中,<hr/> 標簽僅僅顯示為一條水平線。可使用 CSS 來為 <hr/> 元素定義樣式。
HTML 注釋 <!-- 注釋內容 --> 。 注釋標簽用來在源文檔中插入注釋,注釋不會在浏覽器中顯示。可以使用注釋對你的代碼進行解釋,這樣做有助於在以後的時間對代碼的編輯,特別是代碼量很大的情況下很有用,也可以在注釋內容存儲針對程序所定制的信息,在這種情況下,這些信息對用戶是不可見的,但是對程序來說是可用的。除了在源文檔中有非常明顯的作用外,許多 Web 服務器也利用注釋來實現文檔服務端軟件特有的特性。這些服務器可以掃描文檔,從傳統的 HTML/XHTML 注釋中找到特定的字符序列,然後再根據嵌在注釋中的命令采取相應的動作,這些動作可能是簡單的包括其他文件中的文本(即所謂的服務器端包含,server-inside include),也可能是復雜地執行其他命令去動態生成文檔的內容。
(2)、樣式標簽
<article> (H5) 標簽定義一個文章區域。<article> 標簽定義獨立的內容,他定義的內容本身必須是有意義的且必須是獨立於文檔的其余部分。<article> 的潛在來源:論壇帖子、博客文章、新聞故事、評論。
<aside> (H5) 標簽定義頁面的側邊欄內容。<aside> 標簽定義 <article> 標簽外的內容,<aside> 的內容應該與附近的內容相關。<aside> 的的內容可用作文章的側欄。
<section> (H5) 標簽定義了文檔的某個區域。比如章節、頭部、底部或者文檔的其他區域。
<header> (H5) 標簽定義文檔或者文檔的一部分區域的頁眉。<header> 元素應該作為介紹內容或者導航鏈接欄的容器。在一個文檔中,你可以定義多個 <header> 元素。注意:<header> 標簽不能被放在 <footer>、<address> 或者另一個 <header> 元素內部。
<footer> (H5) 標簽定義 <section> 或 document 的頁腳,也就是用於定義文檔或者文檔的一部分區域的頁腳。<footer> 元素應該包含它所包含的元素的信息,在典型情況下,該元素會包含文檔創作者的姓名、文檔的版權信息、使用條款的鏈接、聯系信息等等。在一個文檔中,可以定義多個 <footer> 元素。假如你使用 <footer> 元素來插入聯系信息,應該在 <footer> 元素內使用 <address> 標簽。
<hgroup> (H5) 標簽被用來對標題元素進行分組。當標題有多個層級(副標題)時,<hgroup> 元素被用來對一系列 <h1> - <h6> 元素進行分組。
<details> (H5) 標簽規定了用戶可見的或者隱藏的需求的補充細節。<details> 標簽用來供用戶開啟關閉的交互式控件,任何形式的內容都能被放在 <details> 標簽裡邊。<details> 元素的內容對用戶是不可見的,除非設置了 open 屬性。該標簽與 <summary> 標簽配合使用可以為 details 定義標題,標題是可見的,用戶點擊標題時,會顯示出 details。屬性 open 用於規定 details 是否可見。
<summary> (H5) 標簽為 <details> 元素定義一個可見的標題,當用戶點擊標題時會顯示出詳細信息。注意:<summary> 元素應該是 <details> 元素的第一個子元素。
<dialog> (H5) 標簽定義一個對話框、確認框或窗口。open 屬性規定 dialog 元素是有效的,用戶可以與它進行交互。
<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分,該元素沒有特定的含義,他是可用於組合其他 HTML 元素的容器,常用於組合塊級元素,以便通過 CSS 來對這些元素進行格式化。<div> 元素是塊級元素,所以浏覽器會默認在他前後添加一個換行符,如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設置樣式屬性,常被用來布局網頁。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法,該元素的作用就是用於顯示表格化的數據。
<span> 標簽用於對文檔中的行內元素進行組合,該標簽沒有固定的格式表現,也沒有特定的含義,當對它應用樣式時,它才會產生視覺上的變化,如果不對 <span> 應用樣式,那麼 <span> 元素中的文本與其他文本不會任何視覺上的差異。<span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式,當與 CSS 一同使用時,<span> 元素可用於為部分文本設置樣式屬性。被 <span> 元素包含的文本,可以使用 CSS 對它定義樣式,或者使用 JavaScript 對它進行操作。
(3)、格式標簽
<wbr> (H5) (Word Break Opportunity) 標簽規定在文本中的何處適合添加換行符。如果單詞太長,或者擔心浏覽器會在錯誤的位置換行,那麼就可以使用 <wbr> 元素來添加 Word Break Opportunity(單詞換行時機),他的作用就是告訴浏覽器在這個標記處可以斷行,但只是建議而不是必定會在此處斷行,因為要根據整行文字長度而定,因此只要在連續的文本中間適當的插入若干 <wbr> 標簽就能解決斷行問題。
<meter> (H5) 標簽定義度量衡。僅用於已知最大和最小值的度量。比如:磁盤使用情況,查詢結果的相關性等。注意: <meter> 不能作為一個進度條來使用, 進度條請使用 <progress> 標簽。
<progress> (H5) 標簽定義運行中的任務進度(進程)。請將 <progress> 標簽與 JavaScript 一起使用來顯示任務的進度。注意:<progress> 標簽不適合用來表示度量衡(例如,磁盤空間使用情況或相關的查詢結果)。表示度量衡,請使用 <meter> 標簽代替。
<time> (H5) 標簽定義公歷的時間(24 小時制)或日期,時間和時區偏移是可選的,在該元素的內容中未指定日期或時間時,使用該屬性。該元素能夠以浏覽器可讀的方式對日期和時間進行編碼,比如,用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中,搜索引擎也能夠生成更智能的搜索結果。datetime 屬性規定日期/時間。另一種方式,則是由元素的內容給定日期/時間,該屬性在所有浏覽器中不會渲染任何特殊的效果。
<mark> (H5) 標簽定義帶有記號的文本,請在需要突出顯示文本時使用 <mark> 標簽。
HTML 使用 <b> 與 <i> 標簽對輸出的文本進行格式定義, 如:b粗體 或 i斜體。通常標簽 <strong> 替換加粗標簽 <b> 來使用,<em> 替換 <i>標簽使用。然而,這些標簽的含義是不同的:<b> 與 <i> 定義粗體或斜體文本。<strong> 或者 <em> 意味著你要呈現的文本是重要的,所以要突出顯示。現今所有主要浏覽器都能渲染各種效果的字體,不過,未來浏覽器可能會支持更好的渲染效果。
<b> 標簽定義粗體的文本。注意:根據 HTML5 的規范,<b> 標簽應該做為最後的選擇,只有在沒有其他標記比較合適時才使用它。HTML5 規范聲明:標題應該用 <h1> - <h6> 標簽表示,被強調的文本應該用 <em> 標簽表示,重要的文本應該用 <strong> 標簽表示,被標記的或者高亮顯示的文本應該用 <mark> 標簽表示。也可以使用 CSS 的 "font-weight" 屬性設置粗體文本。
<i> 標簽定義與文本中其余部分不同的部分,並把這部分文本呈現為斜體文本。<i> 標簽被用來表示科技術語、其他語種的成語俗語、想法、宇宙飛船的名字等等。在沒有其他適當語義的元素可以使用時,就使用 <i> 元素。其他語義的元素如下:<em> 元素定義被強調的文本,<strong> 元素定義重要的文本,<mark> 元素定義被標記的/高亮顯示的文本,<cite> 元素定義作品的標題,<dfn> 元素定義一個定義項目。在 HTML4 中,<i> 標簽呈現斜體的文本,然而,在 HTML5 中沒有必要這麼做,可以使用樣式表來格式化 <i> 元素中的文本。
<strong> 標簽是一個短語標簽,用來定義計算機程序的樣本重要的文本。注意:並不反對使用這個標簽,但是如果只是為了達到某種視覺效果而使用這個標簽的話,建議使用 CSS,這樣可能會取得更豐富的效果。所有短語標簽:<em> 呈現為被強調的文本,<strong> 定義重要的文本,<dfn> 定義一個定義項目,<code> 定義計算機代碼文本,<samp> 定義樣本文本。<var> 定義變量,可以將此標簽與 <pre> 及 <code> 標簽配合使用。在 HTML4 中,<strong> 標簽定義加粗的被強調的文本,而在 HTML5 中,<strong> 標簽定義重要的文本。
<em> 標簽是一個短語標簽,用來呈現為被強調的文本。注意:並不反對使用這個標簽,但是如果只是為了達到某種視覺效果而使用這個標簽的話,建議使用 CSS ,這樣可能會取得更豐富的效果。
<dfn> 標簽是一個短語標簽,用來定義一個定義項目。<code> 標簽是一個短語標簽,用來定義計算機代碼文本。<samp> 標簽是一個短語標簽,用來定義計算機程序的樣本文本。<var> 標簽是一個短語標簽,用來定義變量。提示:我們並不反對使用這些標簽,但是如果你只是為了達到某種視覺效果而使用這些標簽的話,我們建議你使用 CSS ,這樣可能會取得更豐富的效果。
<cite> 標簽定義作品(比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等)的標題。注意:人名不屬於作品的標題。在 HTML4 中,<cite> 標簽定義一個引用,而在 HTML5 中,<cite> 標簽定義作品的標題。
<big> 標簽定義大號文本,HTML5 不再支持,可以使用 CSS 代替。
<small> 標簽定義小號文本,主要用於定義小型文本和旁注。
<pre> 標簽定義預格式文本,也就是在 HTML 代碼中的文本編寫什麼樣,就會在 HTML 頁面顯示什麼樣,對空行和空格可進行控制,也就是被包圍在 <pre> 標簽中的文本通常會保留空格和換行符,而文本也會呈現為等寬字體。<pre> 標簽的一個常見應用就是用來表示計算機的源代碼。
<bdo> 標簽定義文本方向。bdo 指的是 bidi 覆蓋(Bi-Directional Override),用來覆蓋默認的文本方向。<p><bdo dir="rtl">我會反著顯示。</bdo></p> dir 為 <bdo>標簽的屬性,rtl 是值,定義反向顯示,該屬性另一個值是 ltr,是默認值,文本方向是正常顯示的。
<bdi> (H5) 標簽允許設置一段文本,使其脫離其父元素的文本方向設置。bdi 指的是 bidi 隔離(Bi-directional Isolation)。在發布用戶評論或其他你無法完全控制的內容時,該標簽很有用。
<q> 標簽定義短的引用。浏覽器經常會在這種引用的周圍插入引號,該元素有一個屬性 cite,值為 URL 用於規定引用的源 URL。請使用 <blockquote> 來標記摘自另一個源的塊引用。
<blockquote> 標簽定義摘自另一個源的塊引用。浏覽器通常會對 <blockquote> 元素進行縮進。該元素也有一個屬性 cite,值為 URL 用於規定引用的來源。如果標記是不需要段落分隔的短引用,請使用 <q>。在 HTML4 中,<blockquote> 標簽定義一段長引用,而在 HTML5 中,<blockquote> 標簽定義摘自另一個源的塊引用。
<del> 標簽定義被刪除文字。<ins> 標簽定義被插入文本。提示:<del> 和 <ins> 一起使用,描述文檔中的更新和修正,浏覽器通常會在已刪除文本上添加一條刪除線,在新插入文本下添加一條下劃線。<del> 和 <ins> 擁有相同的兩個屬性:cite 和 datetime,cite 的值都為 URL ,<del> 的 cite 屬性規定一個文檔的 URL,該文檔解釋了文本被刪除的原因,<ins> 的 cite 屬性規定一個文檔的 URL,該文檔解釋了文本被插入的原因。datetime 的值表示為:YYYY-MM-DDThh:mm:ssTZD,<del> 規定文本被刪除/被插入的日期和時間。
<s> 標簽對那些不正確、不准確或者沒有用的文本進行標識。<s> 標簽不應該用來定義替換的或者刪除的文本,如果要定義替換的或者刪除的文本,請使用 <del> 和 <ins> 標簽。在 HTML4 中,<s> 標簽已被廢棄,並且被用來給文本加刪除線,而 HTML5 重新定義了 <s> 標簽,現在是被用來定義那些不再正確的文本。
<u> 標簽定義與常規文本風格不同的文本,像拼寫錯誤的單詞或者漢語中的專有名詞。在 HTML 中,<u> 元素已廢棄,原被用來定義下劃線,而在 HTML5 中重新定義了 <u> 元素。請盡量避免使用 <u> 為文本加下劃線,用戶會把它混淆為一個超鏈接。注意:HTML5 規范建議開發者盡量使用其他元素替代 <u> 元素。
<sup> 標簽定義上標。上標文本將會顯示在當前文本流中字符高度的一半為基准線的上方,但是與當前文本流中文字的字體和字號都是一樣的。上標文本能用來添加腳注。
<sub> 標簽定義下標文本。下標文本將會顯示在當前文本流中字符高度的一半為基准線的下方,但是與當前文本流中文字的字體和字號都是一樣的。下標文本能用來表示化學公式。
<abbr> 標簽定義縮寫。當把鼠標移至帶有 <abbr> 標簽的縮寫詞/首字母縮略詞上時,<abbr> 標簽的 title 屬性可被用來展示縮寫詞/首字母縮略詞的完整版本。<abbr> 標簽用來表示一個縮寫詞或者首字母縮略詞。通過對縮寫詞語進行標記,就能夠為浏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。
<address> 標簽定義文檔作者或擁有者的聯系信息。如果 <address> 元素位於 <body> 元素內部,則它表示該文檔作者/所有者的聯系信息,如果 <address> 元素位於 <article> 元素內部,則它表示該文章作者/所有者的聯系信息。<address> 元素的文本通常呈現為斜體,大多數浏覽器會在該元素的前後添加換行,或可用 <br/> 換行顯示。不應該使用 <address> 標簽來描述郵政地址,除非這些信息是聯系信息的組成部分。<address> 元素通常被包含在 <footer> 元素的其他信息中。
(4)、鏈接標簽
<a> 標簽定義超鏈接,用於從一個頁面鏈接到另一個頁面。<a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。如果沒有使用 href 屬性,則不能使用 hreflang、media、rel、target 以及 type 屬性。通常在當前浏覽器窗口中顯示被鏈接頁面,除非規定了其他 Target 屬性。可以使用 CSS 來改變鏈接的樣式。
HTML 使用超級鏈接與網絡上的另一個文檔相連,幾乎可以在所有的網頁中找到鏈接,點擊鏈接可以從一張頁面跳轉到另一張頁面,超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當你把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。在 <a> 標簽中使用 href 屬性來描述鏈接的地址,默認情況下,鏈接將以以下形式出現在浏覽器中:一個未訪問過的鏈接顯示為藍色字體並帶有下劃線;訪問過的鏈接顯示為紫色並帶上下劃線;點擊鏈接時,鏈接顯示為紅色並帶上下劃線。<a href="url">跳轉</a> "鏈接文本" 不必一定是文本,圖片或其他 HTML 元素都可以成為鏈接,使用 Target 屬性,可以定義被鏈接的文檔在何處顯示。
<a> 標簽的 target 屬性,target="_blank" 定義在新窗口顯示目標網頁。target="_self" 定義在當前窗體打開目標網頁,此為默認值,這個目標是多余且不必要的,除非和文檔標題 <base> 標簽中的 target 屬性一起使用。target="_top" 定義在當前窗體打開鏈接,並替換當前的整個窗體(框架頁)。假如你的頁面被固定在框架之內,可用 _top 值跳出框架,用 top 目標將會清除所有被包含的框架並將文檔載入整個浏覽器窗口,框架網頁中在上部窗口中顯示目標網頁。target="_parent" 這個目標使得文檔載入父窗口或者包含超鏈接引用的框架的框架集,如果這個引用是在窗口或者在頂級框架中,那麼它與目標 self 等效,框架網頁中當前整個窗口位置顯示目標網頁。
去掉超鏈接的下劃線,並定義顏色(默認定義為黑色):a{color:#000;text-decoration:none} 定義鼠標移動到超鏈接上的顏色,a:hover{color:red}
圖像超鏈接:<a href="http://hovertree.com"><img src="images/demo.jpg"></a>
本文本鏈接:<p><a href="/index.html">本文本</a> 指向本網站中的一個頁面的鏈接。</p>。相對路徑,如 htef="/abc/",代表本站內超文本。
HTML 鏈接的 id 屬性。也可用class,id 是代表唯一的,而 class 是一個集,也就是所有 class 名稱一樣的都可被定義。id 屬性可用於創建在一個 HTML 文檔書簽標記。用 id 命名那麼這個書簽就是唯一的。在 HTML 文檔中插入ID:<a id="tips">超鏈接</a>。在 HTML 文檔中創建一個鏈接到 "超鏈接(id="tips")":<a href="#tips">跳轉</a>。或者,從另一個頁面創建一個鏈接到 "超鏈接(id="tips")部分":<a href="index.html#tips">點我跳轉</a>。
電子郵件鏈接:<a href="mailto:123456@qq.com">電子郵件</a> 當前系統需要安裝 EMAIL 客戶端程序才能使用,可用 火狐/IE 測試,會跳轉鏈接到一個郵件。
<base> 標簽定義頁面中所有鏈接的默認地址或默認目標。該標簽作為 HTML 文檔中所有的鏈接標簽的默認鏈接。在 HTML 中,<base> 標簽沒有結束標簽,且為為元信息標簽。在一個文檔中,最多能使用一個 <base> 元素。<base> 標簽必須位於 <head> 元素內部,而且 <base> 標簽需要排在 <head> 元素中第一個元素的位置,這樣 head 區域中其他元素就可以使用 <base> 元素中的信息了。如果使用了 <base> 標簽,則必須具備 href 屬性或者 target 屬性或者兩個屬性都具備。<base target="_blank"> 可定義頁面中所有的超鏈接都從新窗口打開,如其中有不需要在新窗口打開的,可在 <a> 標簽內自行定義:<a href="url" target="_self">鏈接</a>。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <base href="http://www.demo.com/images/" target="_blank"> </head> <body> <img src="images.gif"><br/> <a href="http://www.demo.com">跳轉</a> </body> </html>上面代碼中,圖像是默認鏈接的 demo.com 中一張名為 images 的圖片,點擊超鏈接跳轉到該網站,並且在新窗口打開目標頁面。
<nav> (H5) 標簽定義導航鏈接的部分,並不是所有的 HTML 文檔都要使用到 <nav> 元素。<nav> 元素只是作為標注一個導航鏈接的區域,在不同設備上(手機或者PC)可以制定導航鏈接是否顯示,以適應不同屏幕的需求。
(5)、圖像標簽
HTML 圖像是通過<img> 標簽來定義的。圖像的名稱和尺寸是以屬性的形式提供的,添加動態圖片和添加靜態圖片格式是一樣的,只是圖像文件格式可能會有所不同。注意:從技術上講,圖像並不會插入 HTML 頁面中,而是鏈接到 HTML 頁面上。<img> 標簽的作用是為被引用的圖像創建占位符。通過在 <a> 標簽中嵌套 <img> 標簽,可以給圖像添加到另一個文檔的鏈接,浏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置於兩個段落之間,那麼浏覽器會首先顯示第一個段落,然後顯示圖片,最後顯示第二段。在 HTML 中,<img> 標簽沒有結束標簽。
<img src="images/head.gif" width="90" height="90" alt="替代文本" title="圖片描述"><img> 標簽有兩個必需的屬性:src 和 alt。 要在頁面上顯示圖像,就需要使用源屬性(src),src 指 "source(來源)",源屬性的值是圖像的 URL 地址,URL 指存儲圖像的位置。如果從另一個文件夾中添加圖像,需要選擇圖片的路徑:<img src="D/images/logo.jpg">。如果從另一個網站中添加圖像,需要選擇網站圖片的路徑,假如名為 "head.gif" 的圖像位於 www.demo.com 的 images 目錄中,那麼其 URL 為 http://www.demo.com/images/head.gif。alt 屬性用來為圖像定義一串預備的可替換的文本。在浏覽器無法載入圖像時,替換文本屬性告訴讀者他們失去的信息。此時,浏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣,這樣有助於更好的顯示信息,並且對於那些使用純文本浏覽器的人來說是非常有用的。
注意:title 屬性用於把鼠標移動到圖片上時顯示文字信息,只有在重要的圖片或者網站標志 LOGO 上加此屬性。width 和 height 屬性用於設置圖像的高度與寬度。屬性值默認單位為像素:px。指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度,頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小,加載頁面時有可能會破壞HTML頁面的整體布局。注意:假如某個 HTML 文件包含十個圖像,那麼為了正確顯示這個頁面,需要加載 11 個文件,加載圖片是需要時間的,在加載頁面時,要注意插入頁面圖像的路徑,如果不能正確設置圖像的位置,浏覽器無法加載圖片,圖像標簽就會顯示一個破碎的圖片。
ismap 屬性是一個布爾屬性,可直接使用,用於將圖像規定為服務器端圖像映射,圖像映射指的是帶有可點擊區域的圖像。usemap 屬性值為 #mapname 用於將圖像定義為客戶器端圖像映射。HTML5 中增加了一個 新屬性 crossorigin 值為 anonymous、use-credentials 用於設置圖像的跨域屬性。
在文字中插入圖像,需要使用 CSS 定義,圖像需要與文字底部對齊則定義為:.img{vertical-align:bottom},如果這裡不設置的話圖像會與文字底部會有一點距離。圖像需要與文字中間對齊則設置為:.img{vertical-align:middle}。圖像需要與文字頂部對齊則設置為-:.img{vertical-align:top}。
vertical-align 這個屬性的默認值是 baseline(基線),插入的 img 元素會放置在父元素的基線上,由於圖片撐起了高度,所以文字下移。其實並不是文字下移,而是圖像的高度與文字不同,就像鶴立雞群。vertical-align 是“垂直的”+“對齊”的意思,用於設置元素的垂直排列的,多用在表格中,用來定義行內元素的基線相對於該元素所在行的基線的垂直對齊,所有浏覽器都支持 vertical-align 屬性。
它的值比較多:
baseline:基線,默認值。元素放置在父元素的基線上。
sub:垂直對齊文本的下標。
sup:垂直對齊文本的上標。
top:把元素的頂端與行中最高元素的頂端對齊。
text-top:把元素的頂端與父元素字體的頂端對齊。
middle:把此元素放置在父元素的中部。
bottom:把元素的頂端與行中最低的元素的頂端對齊。
text-bottom:將支持valign特性的對象的文本與對象底端對齊。
length:用長度值指定由基線算起的偏移量,可以為負值。基線對於數值來說為 0。
percentage(%):用百分比指定由基線算起的偏移量,可以為負值,基線對於百分數來說就是 0%。vertical-align 屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值,這會使元素降低而不是升高。在表格單元格中,這個屬性會設置單元格框中的單元格內容的對齊方式。valign 用來定義表格的對齊方式,valign 代表行的垂直對齊方式,(top(頂部對齊) | middle(中部對齊) | bottom(下部對齊) | baseline(基線對齊))。valign 可以通俗的理解為上中下,而和 align 的區別是: align 為左中右,用於設置文本的對齊方式,text-align:center 居中,text-align:left 居左,text-align:right 居右。
定義圖像在文字中的位置也可以將底外邊距設置為負值,強行設置,假如圖像的高度為 90px,則可定義為:.img1{margin-bottom:-45px;},也就是圖像距離底部縮進45像素。像素不同可以定義其處在不同的位置,但是這樣設置會增加本行的高度。不建議這樣定義,但可用在特殊地方。
<map> 標簽定義圖像地圖。<area> 標簽定義圖像地圖中的可點擊區域。可用於創建圖像映射,使其帶有可供點擊區域的圖像地圖,其中的每個區域都是一個超級鏈接。
<map> 標簽用於客戶端圖像映射。圖像映射指帶有可點擊區域的一幅圖像。<img> 標簽中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決於浏覽器),所以應同時向 <map> 添加 id 和 name 屬性。注意: 在 HTML5 中, 如果 id 屬性在 <map> 標簽中指定, 則必須同樣指定 name 屬性。name 屬性用於為 image-map 規定名稱,必需的屬性。
<area> 標簽定義圖像映射內部的區域。注意:<area> 元素永遠嵌套在 <map> 元素內部。<img> 標簽中的 usemap 屬性與 <map> 元素中的 name 相關聯,以創建圖像與映射之間的關系。在 HTML 中,<area> 標簽沒有結束標簽。
<area> 標簽屬性,href 屬性規定區域的目標 URL。alt 屬性規定區域的替代文本,如果使用 href 屬性,則該屬性是必需的。coords 屬性值為 coordinates 規定區域的坐標。shape 屬性值為(default(默認)、circle、rect、poly)規定區域的形狀。target 屬性規定在何處打開目標 URL。media 屬性規定目標 URL 是為何種媒介/設備優化的,默認為:all。在 HTML5 中增加了一個新屬性 rel ,他的值為(alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag))規定當前文檔與目標 URL 之間的關系。
圖像映像的語法:
<img src="images/demo.jpg" alt="太陽系" usemap="#sun"> <map name="sun"> <area shape="circle" coords="132,570,122" alt="太陽" href="index.html" target="_blank"> </map><area> 標簽的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的坐標。坐標的數字及其含義取決於 shape 屬性中決定的區域形狀。可以將客戶端圖像映射中的超鏈接區域定義為矩形、圓形或多邊形等:rect : 矩形,coords 對應的坐標為左上角和右下角。circle : 圓,coords 對應的是圓心(x,y),和半徑 r。poly:多邊形,coords 對應的是每個點的坐標。
下面列出了每種形狀的適當值:
圓形:shape="circle",coords="x,y,r" 這裡的 x 和 y 定義了圓心的位置("0,0" 是圖像左上角的坐標),r 是以像素為單位的圓形半徑。
矩形:shape="rectangle",coords="x1,y1,x2,y2" 第一對坐標是矩形的左上角的頂點坐標,另一對坐標是對角的頂點坐標(右下角),("0,0" 是圖像左上角的坐標),請注意,定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。
多邊形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..." 每一對 "x,y" 坐標都定義了多邊形的一個頂點("0,0" 是圖像左上角的坐標)。定義三角形至少需要三組坐標;定義多邊形則需要更多數量的頂點。
用 HTML 語言創建圖像映射時,我們需要確定圖像區域中的點坐標,用以下幾種方法可以實現:
①:可以利用系統自帶的畫圖工具確定坐標。
②:可以用 PS 確定坐標。按 Ctrl+r 快捷鍵,右鍵選定顯示距離為像素,默認是厘米。
③:采用逆向思維把圖像轉換成圖像映射,可以利用以下代碼實現:
<p> <a href="http://tool.hovertree.com/" target="_blank"><img src="images/demo.jpg" ismap alt="太陽系"></a> </p>之所以圖片代碼前引用一段 url 是為了鼠標停留在圖片上時,可以在浏覽器窗口的狀態欄中看到返回值出現的點坐標,小手指點在哪裡,對應的就是像素點的縱橫坐標值,記下這個值,把它應用到創建圖像映射的語法中,就能實現區域取值了。注意:某些浏覽器不支持此功能不能查看坐標返回值,比如 360浏覽器,可以使用 IE 浏覽器記錄。
<canvas> (H5) 標簽定義圖形,比如圖表和其他圖像,標簽只是圖形容器,你必須使用腳本來繪制圖形。<canvas> 標簽通過腳本(通常是 JavaScript)來繪制圖形(比如圖表和其他圖像)。注意:<canvas> 標簽只是圖形容器,必須使用腳本來繪制圖形。<canvas> 元素中的任何文本將會被顯示在不支持 <canvas> 的浏覽器中。width 和 height 屬性規定畫布的寬度和高度。
<figure> (H5) 標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)。<figure> 元素的內容應該與主內容相關,同時元素的位置相對於主內容是獨立的,如果被刪除,則不應對文檔流產生影響。
<figcaption> (H5) 標簽為 <figure> 元素定義標題。<figcaption> 元素應該被置於 <figure> 元素的第一個或最後一個子元素的位置。
<picture> (H5) 標簽可以設置多張圖片,主要被用來處理響應式圖片。<picture> 元素類似於 <video> 和 <audio> 元素。<picture> 元素本身沒有屬性,被用來當做 <source> 元素的容器。<source> 元素是用來加載多媒體的比如視頻和音頻,已經被更新用到圖片的加載並且一些新的屬性已經被添加,srcset 屬性的必需的,定義了圖片資源。<picture> 元素可以設置不同的資源,第一個設置的資源為首選使用的:
<picture> <source srcset="smallflower.jpg" media="(max-width:400px)"> <source srcset="flowers.jpg"> <img src="imges/flowers.jpg" alt="Flowers"> </picture>注意:火狐浏覽器支持 picture 標簽。360 和 IE 不支持 picture 標簽,需要搭載 JS 環境讓 IE 浏覽器識別 picture 標簽。
(6)、多媒體標簽
<audio> (H5) 標簽定義音頻內容,也就是定義聲音,比如音樂或其他音頻流。目前,HTML5 標准支持的3種文件格式:MP3、WAV、Ogg。有些浏覽器不支持某種格式,建議采取兩種格式寫。音頻格式的 MIME 類型:MP3-MIME-type:audio/mpeg 。Wav-MIME-type:audio/wav 。Ogg-MIME-type:audio/ogg 。可以在 <audio> 和 </audio> 之間放置文本內容,這些文本信息將會被顯示在那些不支持 <audio> 標簽的浏覽器中。
<audio> 是 HTML5 新增加的標簽,src 屬性用於規定音頻文件的 URL。autoplay 屬性:如果出現該屬性,則音頻在就緒後馬上播放。controls 屬性:如果出現該屬性,則向用戶顯示音頻控件(比如播放/暫停按鈕)。loop 屬性:如果出現該屬性,則每當音頻結束時重新開始播放。muted 屬性:如果出現該屬性,則音頻輸出為靜音。preload 屬性值為(auto、metadata、none),用於規定當網頁加載時,音頻是否默認被加載以及如何被加載。
<video> (H5) 標簽定義視頻,比如電影片段或其他視頻流。目前,HTML5 標准支持三種視頻格式:MP4、WebM、Ogg。MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器。WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器。Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis 音頻編解碼器。視頻格式的 MIME 類型:MP4:video/mp4。WebM:video/webm。Ogg:video/ogg。 可以在 <video> 和 </video> 標簽之間放置文本內容,這樣不支持 <video> 元素的浏覽器就可以顯示出該標簽的信息。
<video> 是 HTML5 新增加的標簽,src 屬性定義要播放的視頻的 URL。width 和 height 屬性用於設置視頻播放器的寬度/高度。autoplay 屬性值:如果出現該屬性,則視頻在就緒後馬上播放。controls 屬性:如果出現該屬性,則向用戶顯示控件,比如播放按鈕。loop 屬性:如果出現該屬性,則當媒介文件完成播放後再次開始播放。muted 屬性:如果出現該屬性,視頻的音頻輸出為靜音。poster 屬性值為 URL 用於規定視頻正在下載時顯示的圖像,直到用戶點擊播放按鈕。preload 屬性值為(auto、metadata、none):如果出現該屬性,則視頻在頁面加載時進行加載,並預備播放,如果使用 "autoplay",則忽略該屬性。
<source> (H5) 標簽為媒介元素(比如 <video> 和 <audio>)定義媒介資源。<source> 標簽允許規定兩個視頻/音頻文件共浏覽器根據它對媒體類型或者編解碼器的支持進行選擇。src 屬性用於規定媒體文件的 URL。type 屬性規定媒體資源的 MIME 類型。
<track> (H5) 標簽為媒體元素(比如 <audio> and <video>)規定外部文本軌道。該元素用於規定字幕文件或其他包含文本的文件,當媒體播放時,這些文件是可見的。src 屬性是必需的,用於規定軌道文件的 URL。default 屬性規定該軌道是默認的。如果用戶沒有選擇任何軌道,則使用默認軌道。kind 屬性值為(captions、chapters、descriptions、metadata、subtitles)用於規定文本軌道的文本類型。srclang 屬性用於規定軌道文本數據的語言,如果 kind 屬性值是 "subtitles",則該屬性是必需的。label 屬性規定文本軌道的標簽和標題。
(7)、表單標簽
HTML 表單用於搜集不同類型的用戶輸入,表單是一個包含表單元素的區域,表單元素是允許用戶在表單中輸入內容,如:文本域、下拉列表、單選框、復選框等等。
表單使用表單標簽 <form>來設置,多數情況下被用到的表單標簽是輸入標簽<input>。輸入類型是由類型屬性(type)定義的。大多數經常被用到的輸入類型如下:
①:文本字段通過 <input type="text"> 標簽來定義,當用戶要在表單中鍵入字母、數字等內容時,就會用到文本字段輸入。
②:密碼字段通過 <input type="password"> 來定義。注意:密碼字段字符不會明文顯示,而是以星號或圓點替代。
③:單選框通過 <input type="radio"> 來定義。當用戶從若干給定的的選擇中選取其一時,就會用到單選框。
④:復選框通過<input type="checkbox"> 來定義。用戶需要從若干給定的選擇中選取一個或若干選項。
⑤:提交按鈕通過<input type="submit"> 來定義。
⑥:下拉列表框通過 <form> 標簽下的 <select> 標簽來定義。<option value="bmw">BMW(寶馬)</option> 標簽則是定義下拉列表框中的內容。
其他:①:預選下拉列表框和下拉列表框格式是一樣的,只需在作為預選值的標簽中添加 selected(選擇):<option value="audi" selected>Audi(奧迪)</option>。
②:多行文本輸入使用標簽 <textarea rows="5" cols="30">定義,其中 rows 為行,cols 為列,可用於設定文本框的大小,也可以不設定,這不影響文本框輸入文本的多少,只是會影響文本框顯示的大小。更好的方法是通過 CSS 來定義文本域的寬和高。
<form> 標簽用於創建供用戶輸入的 HTML 表單。<form> 元素包含一個或多個如下的表單元素:<input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label>。注意:表單本身並不可見。HTML5 新增了兩個新的屬性:autocomplete 和 novalidate,同時不再支持 HTML4 中的某些屬性。該標簽的屬性 action 是必需的,規定當提交表單時,向何處發送表單數據,其值為服務器地址,可能的值:絕對 RUL,指向其他站點,如:action="www.demo.com/index.html",相對 URL,指向站點內的文件,如:action="index.html"。
<form> 屬性兩個最重要的屬性:action 和 method, action 用於規定當提交表單時向何處發送表單數據。而 method 規定用於發送表單數據的 HTTP 方法,默認使用 GET 方式。accept-charset 屬性規定服務器可處理的表單數據字符集。name 屬性規定表單的名稱,可用於在 JS 中引用元素,或者在表單提交之後引用表單數據。enctype 屬性規定在向服務器發送表單數據之前如何對其進行編碼,適用於 method="post" 的情況。target 屬性可用於規定在何處打開 action URL。autocomplete 屬性值為(on、off)用於規定是否啟用表單的自動完成功能。novalidate 屬性:如果使用該屬性,則提交表單時不進行驗證。
<input> 標簽定義一個輸入控件,規定了用戶可以在其中輸入數據的輸入字段。<input> 元素在 <form> 元素中使用,用來聲明允許用戶輸入數據的 input 控件,輸入字段可通過多種方式改變,取決於 type 屬性。注意:<input> 元素是空的,它只包含標簽屬性。可以使用 <label> 元素來定義 <input> 元素的標注。可以使用 CSS 來定義 <input> 元素的對齊方式。在 HTML5 中, <input> 添加了幾個新屬性,並且添加了對應的值。在 HTML 中,<input> 標簽沒有結束標簽。
<input> 元素屬性:type 屬性規定要顯示的 <input> 元素的類型,他的類型有:text(默認,單行的文本字段,寬度為20個字符)、button(按鈕)、radio(單選按鈕)、checkbox(復選框)、password(密碼)、submit(提交按鈕)、image(圖像作為提交按鈕)、reset(重置按鈕)、hidden(隱藏輸入字段)、file(定義文件選擇字段和 "浏覽..." 按鈕,供文件上傳)。以下都為 HTML5 新增加的 type 屬性值:search(用於輸入搜索字符串)、url(用於輸入 URL 的字段)、email(用於 e-mail 地址)、tel(用於輸入電話號碼)、color(拾色器)、number(用於輸入數字的字段)、range(用於精確值不重要的輸入數字的控件,比如 slider 控件)、time(用於輸入時間的控件,不帶時區)、month(month 和 year 控件,不帶時區)、week(week 和 year 控件,不帶時區)、date(date 控件,包括年、月、日,不包括時間)、 datetime(date 和 time 控件,包括年、月、日、時、分、秒、幾分之一秒,基於 UTC 時區)、 datetime-local(date 和 time 控件,包括年、月、日、時、分、秒、幾分之一秒,不帶時區)。 value 屬性規定 <input> 元素的值。 name 屬性規定 <input> 元素的名稱。 src 屬性規定顯示為提交按鈕的圖像的 URL,只針對 type="image"。 alt 屬性定義圖像輸入的替代文本,只針對 type="image"。 checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素,只針對 type="checkbox" 或者 type="radio"。 readonly 屬性規定輸入字段是只讀的。 disabled 屬性規定應該禁用的 <input> 元素。 size 屬性規定以字符數計的 <input> 元素的可見寬度。 maxlength 屬性規定 <input> 元素中允許的最大字符數。 accept 屬性值為(audio/* video/* image/* MIME_type)用於規定通過文件上傳來提交的文件的類型,只針對 type="file"。
下面是 HTML5 為 <input> 元素新添加的屬性:placeholder 屬性規定可描述輸入 <input> 字段預期值的簡短的提示信息 。required 屬性規定必需在提交表單之前填寫輸入字段。autocomplete 屬性值為(on、off)用於規定 <input> 元素輸入字段是否應該啟用自動完成功能。autofocus 屬性規定當頁面加載時 <input> 元素應該自動獲得焦點。multiple 屬性規定允許用戶輸入到 <input> 元素的多個值。pattern 屬性規定用於驗證 <input> 元素的值的正則表達式。step 屬性規定 <input> 元素的合法數字間隔。list 屬性值為 datalist_id,該屬性引用 <datalist> 元素,其中包含 <input> 元素的預定義選項。width 和 height 屬性用於規定 <input>元素的寬度/高度,只針對 type="image"。max 和 min 屬性規定 <input> 元素的最大/最小值。form 屬性值為 form_id 用於規定 <input> 元素所屬的一個或多個表單。formaction 屬性規定當表單提交時處理輸入控件的文件的 URL,只針對 type="submit" 和 type="image"。formenctype 屬性規定當表單數據提交到服務器時如何編碼,只適合 type="submit" 和 type="image"。formmethod 屬性值為(get、post) 用於定義發送表單數據到 action URL 的 HTTP 方法,只適合 type="submit" 和 type="image"。formtarget 屬性值為(_blank、_self、_parent、_top、framename)用於規定表示提交表單後在哪裡顯示接收到響應的名稱或關鍵詞,只適合 type="submit" 和 type="image"。formnovalidate 屬性覆蓋 form 元素的 novalidate 屬性,當表單提交時 <input> 元素不進行驗證,該屬性可與 type="submit" 配合使用。
復選框中默認選擇一個選項(預選項)是這樣定義的:<input type="checkbox" name="vehicle" value="Rocket" checked>。 checked 屬性是預選,復選框中的預選項是可以取消的,單選框中默認選擇一個選項(預選項)和復選框的預選項格式是一樣的,不同的是單選按鈕中的預選項不可以取消掉,只能換一個選擇。
表單中發送電子郵件,可以在表單標簽 <form> 的 action 屬性中定義,<form action="mailto:123456@qq.com" method="post" enctype="text/plain">。method 屬性是傳輸方法,POST 是一種隱秘的傳送方式,傳送數據無限制,安全級別高。GET 是直接傳送方式,傳送數據有限制,安全級別不高。enctype 屬性是內容類型,enctype=text/plain 也就表示普通的文本。
<datalist> (H5) 標簽規定了 <input> 元素可能的選項列表。<datalist> 標簽被用來為 <input> 元素提供"自動完成"的特性,用戶能看到一個下拉列表,裡邊的選項是預先定義好的,將作為用戶的輸入數據,可以使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。
<label> 標簽為 <input> 元素定義標注(標記)。label 元素不會向用戶呈現任何特殊效果,不過,它為鼠標用戶改進了可用性。如果在 label 元素內點擊文本,就會觸發此控件,也就是說,當用戶選擇該標簽時,浏覽器就會自動將焦點轉到和標簽相關的表單控件上。<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。提示:"for" 屬性可把 label 綁定到另外一個元素,需要把 "for" 屬性的值設置為相關元素的 id 屬性的值。for 屬性值為 element_id 用於規定 label 與哪個表單元素綁定。form 是 HTML5 一個新屬性用於規定 label 字段所屬的一個或多個表單。
<textarea> 標簽定義一個多行的文本輸入控件。文本區域中可容納無限數量的文本,其中的文本的默認字體是等寬字體,通常是 Courier,該字體是一種常見的計算機字體。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小,不過更好的辦法是使用 CSS 的 height 和 width 屬性。name 屬性規定了文本區域的名稱。readonly 屬性規定文本區域為只讀。disabled 規定禁用文本區域。HTML5 還增加了一些新的屬性:placeholder 屬性規定一個簡短的提示,描述文本區域期望的輸入值。required 屬性規定文本區域是必需的/必填的。autofocus 屬性規定當頁面加載時,文本區域自動獲得焦點。maxlength 屬性規定文本區域允許的最大字符數。wrap 屬性值為(hard、soft)用於規定當提交表單時,文本區域中的文本應該怎樣換行。form 屬性定義文本區域所屬的一個或多個表單。
<button> 標簽定義一個按鈕。在 <button> 元素內部,可以放置內容,比如文本或圖像。這是該元素與使用 <input> 元素創建的按鈕之間的不同之處。始終要為 <button> 元素規定 type 屬性。不同的浏覽器對 <button> 元素的 type 屬性使用不同的默認值。注意:如果在 HTML 表單中使用 <button> 元素,不同的浏覽器可能會提交不同的按鈕值。所以要使用 <input> 在 HTML 表單中創建按鈕。name 屬性規定按鈕的名稱。type 屬性值為(button、submit、reset)用於規定按鈕的類型。value 屬性規定按鈕的初始值,可由 JS 進行修改。disabled 屬性規定應該禁用該按鈕。HTML5 中的新屬性:autofocus(自動獲得焦點)、form(按鈕屬於一個或多個表單)、formaction(向何處發送數據,覆蓋 form 元素的 action 屬性,與 type="submit" 配合使用)、formenctype(發送表單之前如何編碼,覆蓋 form 元素的 enctype 屬性,與 type="submit" 配合使用)、formmethod(發送表單的方法,覆蓋 form 元素的 method 屬性,與 type="submit" 配合使用)、formnovalidate(提交表單時不進行驗證,覆蓋 form 元素的 novalidate 屬性,與 type="submit" 配合使用)以及 formtarget(在何處打開 action URL,覆蓋 form 元素的 target 屬性,與 type="submit" 配合使用)。
<select> 元素用來創建下拉列表。<select> 元素中的 <option> 標簽定義了列表中的可用選項。<select> 元素是一種表單控件,可用於在表單中接受用戶輸入。name 屬性定義下拉列表的名稱。size 屬性規定下拉列表中可見選項的數目。multiple 屬性:當該屬性為 true 時,可選擇多個選項。disabled 屬性:當該屬性為 true 時,會禁用下拉列表。HTML5 增加了一些新的屬性:autofocus 屬性規定在頁面加載時下拉列表自動獲得焦點。form 屬性定義 select 字段所屬的一個或多個表單。required 屬性規定用戶在提交表單前必須選擇一個下拉列表中的選項。
<option> 標簽定義下拉列表中的一個選項,也就是一個條目。<option> 標簽中的內容作為 <select> 或者 <datalist> 一個元素使用。<option> 標簽可以在不帶有任何屬性的情況下使用,但是通常需要使用 value 屬性,此屬性會指示出被送往服務器的內容。注意:請與 select 元素配合使用此標簽,否則這個標簽是沒有意義的。如果列表選項很多,可以使用 <optgroup> 標簽對相關選項進行組合。value 屬性定義送往服務器的選項值。disabled 屬性規定此選項應在首次加載時被禁用。label 屬性定義當使用 <optgroup> 時所使用的標注。selected 屬性規定選項(在首次顯示在列表中時)表現為選中狀態。
<optgroup> 標簽經常用於把相關的選項組合在一起。如果你有很多的選項組合, 你可以使用<optgroup> 標簽能夠很簡單的將相關選項組合在一起。label 屬性為選項組規定描述。disabled 屬性規定禁用該選項組。
<fieldset> 標簽定義了一組相關的表單元素,並使用外框包含起來。該標簽可以將表單內的相關元素分組,而且會在相關表單元素周圍繪制邊框。提示:<legend> 標簽為 <fieldset> 元素定義標題。HTML5 給 <fieldset> 元素新增加了屬性:name(規定 fieldset 的名稱)。disabled(規定該組中的相關表單元素應該被禁用)、form(規定 fieldset 所屬的一個或多個表單)。
<legend> 元素為 <fieldset> 元素定義標題。可以使用 CSS 來設置 <legend> 元素的對齊方式。
<keygen> (H5) 標簽規定用於表單的密鑰對生成器字段。當提交表單時,私鑰存儲在本地,公鑰發送到服務器。keytype 屬性值為(rsa、dsa、ec)用於定義密鑰的安全算法,默認值為 rsa,規定 RSA 安全算法,RSA 密鑰強度可由用戶選擇。dsa 規定 DSA 安全算法,DSA 密鑰長度可由用戶選擇。ec 規定 EC 安全算法,EC 密鑰強度可由用戶選擇。autofocus 屬性使 <keygen> 字段在頁面加載時獲得焦點。challenge 屬性:如果使用該屬性,則將 <keygen> 的值設置為在提交時詢問。name 屬性定義 <keygen> 元素的唯一名稱,用於在提交表單時搜集字段的值。disabled 屬性禁用 <keygen> 元素字段。form 屬性定義該 <keygen> 字段所屬的一個或多個表單。
<output> (H5) 標簽作為計算結果輸出顯示,比如執行腳本的輸出。name 屬性定義對象的唯一名稱,在表單提交時使用。for 屬性值為 element_id 用於描述計算中使用的元素與計算結果之間的關系。form 屬性定義輸入字段所屬的一個或多個表單。
(8)、列表標簽
列表形式在網站設計中占有比較大的比重,內容顯示非常整齊直觀,便於理解。HTML 的列表元素是一個有列表標簽封裝的結構,包含的列表項由 <li> 標簽組成。
<li> 標簽定義列表項目。可用在有序列表 <ol>、無序列表 <ul> 和菜單列表 <menu> 中。可以使用 CSS 來定義列表和列表項目的類型。
<ul> 標簽定義無序列表。將 <ul> 標簽與 <li> 標簽一起使用,創建無序列表。可以使用 CSS 為列表定義樣式。
<ol> 標簽定義了一個有序列表。 列表排序以數字來顯示,使用 <li> 標簽定義列表選項。可以使用 CSS 來定義列表樣式。在 HTML5 中增加了一個新屬性,reversed 屬性用於指定列表倒序(9,8,7...)。
有序列表是編號列表,用於對網頁中的某些內容進行編號排列,以便使讀者清晰的了解每行的順序。同樣,有序列表也是一列項目,列表項目默認使用數字進行標記。有序列表始於 <ol> 標簽,每個列表項始於 <li> 標簽。<ol> 標簽可用 CSS 樣式進行定義:type 和 start ,type 用於指定編號的樣式,如:1.A.a.I.i。start 用於指定起始編號,如不定義 start,默認使用阿拉伯數字。
無序列表是項目列表,列表的內容可以按任意順序排列,列表項目不是連續編號而是一個特定的符號默認來標記,也就是使用粗體圓點(典型的小黑圓圈)進行標記。無序列表使用 <ul>標簽,<li> 標簽是列表項。<ul> 標簽可用 CSS 樣式定義項目編號的顯示,disc 默認的實體圓點,circle 空心圓圈,square 實心方塊。
將一個列表嵌入到另一個列表中,作為另一個列表的一部分,叫做嵌套列表,無論是有序列表的嵌套還是無序列表的嵌套,浏覽器都可以自動的分行排列。HTML嵌套列表使用的標簽:<ol> <ul> <li>。
有時候無序列表不需要 <li> 標簽前邊默認的圓點,比如在 HTML 頁面布局時,可以使用無序列表創建導航欄選項,那麼這時候需要清除他的默認樣式,則用 CSS 樣式定義:list-style:none。
自定義列表用於對清單條目進行簡短的說明,一個列表可以對應一個或多個說明項,因每個列表項有一個縮進的說明項,與字典的編排有相同的格式,所以有稱為“字典列表”。自定義列表不僅僅是一列項目,而是項目及其注釋的組合。首標簽 <dl> 和 尾標簽 </dl> 之間為列表內容,列表項目標簽用 <dt>,列表項目的說明用標簽 <dd>,通常 <dt> 和 <dd> 是一起出現的。
<dl> 標簽定義一個描述列表。<dl> 標簽與 <dt> 和 <dd> 一起使用。在 HTML4 中,<dl> 標簽定義一個定義列表,而在 HTML5 中,<dl> 標簽定義一個描述列表。
<dt> 標簽定義一個描述列表的項目/名字。在 HTML4 中,<dt> 標簽定義一個定義列表的條目,而在 HTML5 中,<dt> 標簽定義一個描述列表的項目/名字。
<dd> 標簽被用來對一個描述列表中的項目/名字進行描述。在 <dd> 標簽內,可以放置段落、換行、圖片、鏈接以及其他列表等等。在 HTML4 中,<dd> 標簽被用來描述一個定義列表中的條目,而在 HTML5 中,<dd> 標簽被用來描述一個描述列表的項目/名字。
<menu> 標簽定義了一個命令列表或菜單。<menu> 標簽通常用於文本菜單,工具條和命令列表選項,可以使用 CSS 來定義菜單列表樣式。HTML4 的 <menu> 元素已廢棄,而在 HTML5 中 <menu> 元素被重新定義,並且新增加了2個屬性:type 屬性值為(list、context、toolbar)用於描述顯示菜單的類型,默認值為 "list",規定一個用戶可執行或激活的命令列表(li 元素)。context:規定一個上下文菜單,菜單必須在用戶與命令進行交互之前被激活。toolbar:規定一個工具欄菜單,主動式命令,允許用戶立即與命令進行交互。label 屬性用於描述菜單項的標記。目前幾乎沒有主流浏覽器支持這2個屬性。
<command> (H5) 定義命令按鈕,比如單選按鈕、復選框或按鈕。<command> 標簽可以定義用戶可能調用的命令,當使用 <menu> 元素時,command 元素將作為菜單或者工具欄的一部分顯示出來。但是,用 command 規定鍵盤快捷鍵時,command 元素能被放置在頁面的任何位置,但元素不可見。注意:目前,主流浏覽器都不支持 <command> 標簽。label 屬性是必需的屬性,規定 command 的名字,對用戶可見。type 屬性用於定義 command 的類型,該屬性的值為:command 默認值,規定帶有 action 的普通命令。checkbox:使用復選框規定可切換的命令。radio:使用單選按鈕規定可切換的命令。disabled 屬性規定 command 是否可用。checked 屬性規定當頁面加載時,command 是否被選中,僅用於 radio 或 checkbox 類型。icon 屬性值為 URL 用於規定作為 command 來顯示的圖像的 URL。radiogroup 屬性規定可進行切換且將被切換的 command 所屬的組名,僅在類型為 radio 時使用。
(9)、表格標簽
表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,還是需要顯示邊框。可以使用邊框屬性來顯示一個帶有邊框的表格:<table border="1"><tr><td>100噸</td></tr></table>,若 border="",則表示無邊框。在 HTML5 中,border 屬性僅用於指示表格是否用於布局目的,且只允許屬性值為 "" 或 "1",而且只支持該屬性。
一個 HTML 表格包括 <table> 元素,一個或多個 <tr>、<th> 以及 <td> 元素。<tr> 元素定義表格行,<th> 元素定義表頭,<td> 元素定義表格單元。更復雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。水平顯示的表頭,是把所有表頭 <th> 標簽添加到一個表格 <tr> 標簽內,豎直顯示的表頭,就是把每個表頭 <th> 標簽添加到每個表格 <tr> 標簽內。
<tr> 標簽定義 HTML 表格中的行。一個 <tr> 元素包含一個或多個 <th> 或 <td> 元素。在 HTML5 中,不支持 <tr> 標簽在 HTML4 中的任何屬性。
<th> 標簽定義 HTML 表格中的表頭單元格。大多數浏覽器會把表頭顯示為粗體居中的文本。<td> 標簽定義 HTML 表格中的標准單元格。HTML 表格有兩種單元格類型:表頭單元格,即包含頭部信息(由 <th> 元素創建)。標准單元格,即包含數據(由 <td> 元素創建)。<th> 元素中的文本通常呈現為粗體並且居中,而 <td> 元素中的文本通常是普通的左對齊文本。HTML 5 中不再支持 HTML4 中的某些屬性。如果需要將內容橫跨多個行或列,可以使用 colspan 和 rowspan 屬性!colspan 屬性規定表頭單元格可橫跨的列數。rowspan 屬性規定表頭單元格可橫跨的行數。headers 屬性值為 header_id 用於規定與表頭單元格相關聯的一個或多個表頭單元格。scope 屬性值為(col、colgroup、row、rowgroup)用於規定表頭單元格是否是行、列、行組或列組的頭部。<td> 元素除了不支持 <th> 元素的 scope 屬性外,其余3個都支持。
可以使用 CSS 樣式 vertical-align 定義表頭單元格內容的垂直排列方式。他的默認值為:baseline 基線對齊。vertical-align:top 頂部對齊。vertical-align:middle 中間對齊。vertical-align:bottom 底部對齊。
<caption> 標簽定義表格的標題。<caption> 標簽必須直接放置到 <table> 標簽之後,並且只能對每個表格定義一個標題,通常這個標題會被居中於表格之上。然而,CSS 屬性 "text-align" 和 "caption-side" 可用來設置標題的對齊方式和顯示位置。caption-side 主要用來規定表格標題的放置方式,默認值為 top,即把表格標題定位在表格之上。caption-side:bottom 規定把把表格標題定位在表格之下。
<thead> 標簽用於組合 HTML 表格的表頭內容。<thead> 元素應該與 <tbody> 和 <tfoot> 元素結合起來使用,用來規定表格的各個部分(表頭、主體、頁腳)。通過使用這些元素,使浏覽器有能力支持獨立於表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。<thead> 標簽必須被用在以下情境中:作為 <table> 元素的子元素,出現在 <caption>、<colgroup> 元素之後,<tbody>、 <tfoot> 和 <tr> 元素之前。注意:<thead> <tbody> <tfoot>元素內部必須包含一個或者多個 <tr> 標簽。<thead>、<tbody> 和 <tfoot> 元素默認不會影響表格的布局。不過,可以使用 CSS 來為這些元素定義樣式,從而改變表格的外觀。在 HTML5 中,不再支持 HTML4 中這3個標簽的任何屬性。
<tbody> 標簽用於組合 HTML 表格的主體內容。<tbody> 元素應該與 <thead> 和 <tfoot> 元素結合起來使用,用來規定表格的各個部分(主體、表頭、頁腳)。<tbody> 標簽必須被用在以下情境中:作為 <table> 元素的子元素,出現在 <caption>、<colgroup> 和 <thead> 元素之後。
<tfoot> 標簽用於組合 HTML 表格的頁腳內容。<tfoot> 元素應該與 <thead> 和 <tbody> 元素結合起來使用,用來規定表格的各個部分(頁腳、表頭、主體)。<tfoot> 標簽必須被用在以下情境中:作為 <table> 元素的子元素,出現在 <caption>、<colgroup> 和 <thead> 元素之後,<tbody> 和 <tr> 元素之前。
<colgroup> 標簽用於對表格中的列進行組合,以便對其進行格式化。通過使用 <colgroup> 標簽,可以向整個列應用樣式,而不需要重復為每個單元格或每一行設置樣式。注意:只能在 <table> 元素之內,在任何一個 <caption> 元素之後,在任何一個 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 標簽。如果想對 <colgroup> 中的某列定義不同的屬性,請在 <colgroup> 標簽內使用 <col> 標簽。HTML5 只支持 span 屬性用於規定列組應該橫跨的列數。
<col> 標簽規定了 <colgroup> 元素內部的每一列的列屬性。通過使用 <col> 標簽,可以向整個列應用樣式,而不需要重復為每個單元格或每一行設置樣式。在 HTML 中,<col> 標簽沒有結束標簽。HTML5 只支持 span 屬性用於規定 <col> 元素應該橫跨的列數。
(10)、插件標簽
<embed> (H5) 標簽定義了一個容器,用來嵌入外部應用或者互動程序(插件)。src 屬性規定被嵌入內容的 URL。type 屬性規定嵌入內容的 MIME 類型。width 和 height 屬性規定嵌入內容的寬度/高度。
<object> 標簽定義一個嵌入的對象。此元素允許你規定插入 HTML 文檔中的對象的數據和參數,以及可用來顯示和操作數據的代碼。<object> 標簽用於包含對象,比如圖像、音頻、視頻、Java applets(用 Java 編寫的可包含在網頁中的小應用程序)、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素,<applet> 元素已被廢棄,從其字面來理解就是小程序,主要被用於定義嵌入的小程序。不過由於漏洞以及缺乏浏覽器支持,這一點並未實現,浏覽器的對象支持有賴於對象類型,不幸的是,主流浏覽器都使用不同的代碼來加載相同的對象類型而幸運的是,object 對象提供了解決方案。如果未顯示 object 元素,就會執行位於 <object> 和 </object> 之間的代碼。通過這種方式,我們能夠嵌套多個 object 元素,每個對應一個浏覽器。
name 屬性為對象規定名稱,type 屬性規定對象的 MIME 類型。usemap 屬性值為(#加上要使用的 map 元素的名稱)用於規定與對象一起使用的圖像映射的名稱,該屬性與 <map> 元素的 name 屬性相關聯,創建對象和映射之間的關系。width 和 height 屬性規定對象的寬度/高度。其余在 HTML4 中定義的屬性在 HTML5 中都不被支持,但是新增加了一個屬性:form 屬性規定對象所屬的一個或多個表單。在 HTML5 中,object 可以在 form 表單中提交,並且不再出現在 <head> 元素區域內。
<param> 標簽定義對象的參數。<param> 元素允許為插入文檔的對象規定 run-time 設置,也就是說,此標簽可為包含它的 <object> 標簽提供參數。run-time 是運行電腦的時間,簡稱運行時,就是系統在運行的時候的一些機制,其中最主要的是消息機制。name 屬性定義參數的名稱,該屬性通常與 value 屬性一起使用來規定由 <object> 標簽規定的插件的參數,name 屬性的值可以是指定對象支持的任何名稱。value 屬性描述參數值。在 HTML 中,<param> 標簽沒有結束標簽。大部分主流浏覽器都支持 <param> 標簽,但是 <object> 定義的文件格式並不是所有的浏覽器都支持。
(11)、框架標簽
通過使用框架,你可以在同一個浏覽器窗口中顯示不止一個頁面。HTML 框架通過 <iframe> 標簽來實現。定義一個內聯的 iframe(內聯框架/內嵌框架)。
語法:<iframe src="URL"></iframe> 該 URL 指向不同的網頁。
<iframe> 標簽規定一個內聯框架。一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔,包括滾動條。你可以把需要的文本放置在 <iframe> 和 </iframe> 之間,這樣就可以應對不支持 <iframe> 的浏覽器。可以使用 CSS 為 <iframe> 定義樣式,包括滾動條和移除邊框等。src 屬性規定在 <iframe> 中顯示的文檔的 URL。width 和 height 屬性規定 <iframe> 的寬度/高度,默認單位為像素,也可以指定其按比例顯示(如:"80%")。name 屬性規定 <iframe> 的名稱。HTML5 廢棄了其余在 HTML4 中的一些屬性,並增加了新的屬性,seamless 屬性規定 <iframe> 看起來像是父文檔中的一部分。srcdoc 屬性值為 HTML_code 用於規定頁面中的 HTML 內容顯示在 <iframe> 中,即要顯示在 iframe 中的 HTML 內容,值必需是有效的 HTML 語法。sandbox 屬性用於對 <iframe> 的內容定義一系列額外的限制,它的值為:""(啟用所有限制條件)、allow-forms(允許表單提交)、allow-scripts(允許執行腳本)、allow-same-origin(允許將內容作為普通來源對待,如果未使用該關鍵字,嵌入的內容將被視為一個獨立的源)、allow-top-navigation(嵌入的頁面的上下文可以導航(加載)內容到頂級的浏覽上下文環境,如果未使用該關鍵字,這個操作將不可用)。
如果指定了空字符串:sandbox="",那麼該屬性對呈現在 iframe 框架中的內容將啟用一些額外的限制條件。sandbox 屬性的值既可以是一個空字符串,將會啟用所有的限制,也可以是用空格分隔的一系列指定的字符串。HTML5 通過 sandbox 屬性提升 iFrame 的安全性,該屬性可以防止不信任的 Web 頁面執行某些操作,還可以防止如下操作:①、防止訪問父頁面的 DOM。從技術角度來說,這是因為相對於父頁面 iframe 已經成為不同的源了。②、防止執行腳本。③、防止通過腳本嵌入自己的表單或是操控表單。④、防止對 Cookie、本地存儲或本地 SQL 數據庫的讀寫。
<iframe> 可以顯示一個目標鏈接的頁面,目標鏈接的屬性必須使用 iframe 的屬性,如下實例:
<iframe src="index.html" name="iframeA"></iframe> <p> <a href="https://" target="iframeA">百度知道</a> </p>上面的代碼中,因為 <a> 標簽的 Target 屬性是名為 iframeA 的 iframe 框架,所以在點擊鏈接時頁面會顯示在 iframe 框架中。可自定義一個頁面保存為 index.html 用於演示。
3、HTML 知識
(1)、布局
網頁布局對改善網站的外觀非常重要,需要慎重設計網頁布局,常使用 DIV+CSS 的方式進行頁面布局,大多數網站會把內容安排到多個列中,就像雜志或報紙那樣。
HTML 頁面布局主要使用 <div> 元素,該元素是用於分組 HTML 元素的塊級元素。<div> 標簽定義文檔的區塊,<span> 標簽定義文檔中的節,可用於組合文檔中的行內元素。
CSS 用於對元素進行定位,或者為頁面創建背景以及色彩豐富的外觀。使用 CSS 最大的好處是,如果把 CSS 代碼存放到外部樣式表中,那麼站點會更易於維護,通過編輯單一的文件,就可以改變所有頁面的布局。由於創建高級的布局非常耗時,使用模板是一個快速的選項,通過搜索引擎可以找到很多免費的網站模板,也可以使用這些預先構建好的網站布局,然後對其進行優化。
(2)、統一資源定位器
統一資源定位器即 URL(Uniform Resource Locators), Web 浏覽器通過 URL 從 Web 服務器請求頁面,URL 編碼會將字符轉換為可通過因特網傳輸的格式,URL 是一個網頁地址,可以由字母組成,如"baidu.com",或互聯網協議(IP)地址: 202.108.22.5。大多數人進入網站使用網站域名來訪問,因為名字比數字更容易記住。當你點擊 HTML 頁面中的某個鏈接時,對應的 <a> 標簽指向萬維網上的一個地址,一個統一資源定位器(URL) 用於定位萬維網上的文檔。
一個網頁地址實例:http://run.hovertree.com/html/index.html 語法規則:scheme://host.domain:port/path/filename。說明:
scheme(方案):定義因特網服務的類型,最常見的類型是 http。
host(主機):定義域主機(http 的默認主機是 www)。
domain(域):定義因特網域名,比如 baidu.com。
:port(端口):定義主機上的端口號(http 的默認端口號是 80)。
path(路徑):定義服務器上的路徑(如果省略,則文檔必須位於網站的根目錄中)。
filename(文件名):定義文檔/資源的名稱。
常見的 URL Schemes(方案):http,超文本傳輸協議,用於以 http:// 開頭的普通網頁,不加密。https,安全超文本傳輸協議,用於安全網頁,解密所有信息交換。ftp,文件傳輸協議,用於將文件下載或上傳至網站。file,本地計算機上的文件。
URL 只能使用 ASCII 字符集來通過因特網進行發送,由於 URL 常常會包含 ASCII 集合之外的字符,URL 必須轉換為有效的 ASCII 格式,URL 編碼使用 "%" 其後跟隨兩位的十六進制數來替換非 ASCII 字符。URL 不能包含空格,URL 編碼通常使用 +(%2B) 來替換空格。
(3)、HTTP 方法
什麼是 HTTP?HTTP 即超文本傳輸協議,他被設計目的是保證客戶端與服務器之間的通信。HTTP 的工作方式是客戶端與服務器之間的請求 - 響應協議,即客戶端(浏覽器)向服務器提交 HTTP 請求,服務器向客戶端返回響應,響應包含關於請求的狀態信息以及可能被請求的內容。
在客戶端和服務器端進行數據交互時,有很多種方法,最常被用到的兩種方法是:GET 和 POST,GET 是從指定的資源請求數據,而 POST 是向指定的資源提交要被處理的數據。
GET 與 POST 的區別:
比較項 GET POST 後退按鈕/刷新 不影響 數據會被重新提交(浏覽器應該告知用戶數據會被重新提交)。 對數據長度的限制 當發送數據時,GET 方法向 URL 添加數據,URL 的長度是受限制的,URL 的最大長度是 2048 個字符。 無限制。 書簽 可收藏為書簽 不可收藏為書簽 緩存 能被緩存 不能緩存 歷史 參數保留在浏覽器歷史中 參數不能保留在浏覽器歷史中 可見性 數據在 URL 中對所有人都是可見的 數據不會顯示在 URL 中 安全性 與 POST 相比,GET 的安全性較差,因為所發送的數據是 URL 的一部分。 POST 比 GET 更安全,因為參數不會被保存在浏覽器歷史或 web 服務器日志中。注意:在發送密碼或其他敏感信息時絕不能使用 GET 請求!
(4)、HTTP 消息
當浏覽器從 web 服務器請求服務時,可能會發生錯誤,最常見的就是 404:服務器無法找到被請求的頁面。
(5)、HTML 字符集
字符集用於規定浏覽器正確的顯示 HTML 頁面,萬維網早期使用的字符集是 ASCII。ASCII 支持 0-9 的數字,大寫和小寫英文字母表,以及一些特殊字符。由於很多國家使用的字符並不屬於 ASCII,現代浏覽器的默認字符集是 ISO-8859-1,如果網頁使用不同於 ISO-8859-1 的字符集,就應該在 <meta> 標簽進行指定。
ISO 字符集是國際標准組織 (ISO) 針對不同的字母表/語言定義的標准字符集,但是這些符集都有容量限制,而且不兼容多語言環境,Unicode 聯盟開發了 Unicode 標准,該標准涵蓋了世界上的所有字符、標點和符號,不論是何種平台、程序或語言,Unicode 都能夠進行文本數據的處理、存儲和交換。
Unicode 聯盟開發了該標准的目標是用標准的 Unicode 轉換格式 (UTF) 來取代現有的字符集,許多操作系統以及所有的現代浏覽器都支持 Unicode 標准,Unicode 可以被不同的字符集兼容,最常用的編碼方式是 UTF-8,也是國際編碼格式,還有 UTF-16,而 GB2312 是由中國國家標准總局發布的漢字編碼字符集,適用於漢字處理、漢字通信等系統之間的信息交換,通行於中國大陸,中國大陸幾乎所有的中文系統和國際化的軟件也都支持 GB2312。
(6)、字符實體
在 HTML 中,某些字符是預留的。HTML 中的預留字符必須被替換為字符實體,一些在鍵盤上找不到的字符也可以使用字符實體來替換。在 HTML 中不能使用小於號(<)和大於號(>),因為浏覽器會誤認為它們是標簽,如果希望正確地顯示預留字符,必須在 HTML 源代碼中使用字符實體。如需顯示小於號,必須這樣寫:< 或 < ,如需顯示大於號,必須這樣寫:> 或 >,使用實體名而不是數字的好處是,名稱易於記憶,不過壞處是,浏覽器也許並不支持所有實體名稱,但對實體數字的支持卻很好。
HTML 中的常用字符實體是不間斷空格( )。浏覽器總是會截短 HTML 頁面中的空格。如果在文本中寫 10 個空格,在顯示該頁面之前,浏覽器會刪除它們中的 9 個,如需在頁面中增加空格的數量,必須使用: 或   。
下面是五種特殊字符,也是 HTML 的預留字符:
字符 描述 實體名稱 實體編碼 " 引號 " " ' 撇號 ' ' & 和號 & & < 小於號 < < > 大於號 > >
其他常見實體編碼:
字符/符號 描述 實體名稱 實體編碼 空格   § 小節 § § × 乘號 × × ÷ 除號 ÷ ÷ © 版權 © © ® 注冊商標 ® ® ™ 商標 ™ ™
注意:實體名稱對大小寫敏感!