參考總結：http://www.w3school.com.cn/h.asp
目錄
HTML and HTML5
html架構
html頭部元素（head内）
- title：定義文檔标題
- base：定義頁面上所有連結的預設位址或預設目标
- target:規定在何處打開頁面上的所有連結。
- link：定義文檔與外部資源（外鍊樣式表等）之間的關系
- style：定義文檔的樣式資訊（内聯樣式表）
- meta：定義關于html文檔的中繼資料
- content屬性
- name屬性
- http-equiv屬性
- scheme屬性
- scirpt：定義用戶端腳本（插入JS）
HTML and HTML5
html ：HTML 是用來描述網頁的一種語言。html标簽：HTML 标記标簽通常被稱為 HTML 标簽 (HTML tag)。
- HTML 指的是超文本标記語言 (Hyper Text Markup Language)
- HTML 不是一種程式設計語言，而是一種标記語言 (markup language)
- 标記語言是一套标記标簽 (markup tag)
- HTML 使用标記标簽來描述網頁
HTML 文檔 = 網頁
- HTML 标簽是由尖括号包圍的關鍵詞，比如 <html>
- HTML 标簽通常是成對出現的，比如 <b> 和 </b>
- 标簽對中的第一個标簽是開始标簽，第二個标簽是結束标簽
- 開始和結束标簽也被稱為開放标簽和閉合标簽
- HTML 文檔描述網頁
- HTML 文檔包含 HTML 标簽和純文字
- HTML 文檔也被稱為網頁
html5：html的一個版本，HTML5 将成為 HTML、XHTML 以及 HTML DOM 的新标準。
html5 新特性：
- 用于繪畫的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支援
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
html架構
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html頭部元素（head内）
<head> 元素是所有頭部元素的容器。<head> 内的元素可包含腳本，訓示浏覽器在何處可以找到樣式表，提供元資訊，等等。
以下标簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
- title：定義文檔标題
<!DOCTYPE html>
<html >
<head>
<!-- 防止亂碼 -->
<meta charset="utf-8">
<title>定義文檔标題</title>
</head>
<body>
</body>
</html>
- base：定義頁面上所有連結的預設位址或預設目标
定義和用法
<base> 标簽為頁面上的所有連結規定預設位址或預設目标。
通常情況下，浏覽器會從目前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。
使用 <base> 标簽可以改變這一點。浏覽器随後将不再使用目前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 标簽中的 URL。
HTML5 - 基礎總結 - 基本介紹+head頭部元素HTML and HTML5html架構html頭部元素（head内）
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>定義文檔标題</title>
<base href="https://www.baidu.com/img/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<base target="_blank">
</head>
<body>
<!-- 通過相對路徑查找檔案，預設從base指定路徑檔案夾内尋找
即：https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png -->
<img src="xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" /><br />
</body>
</html>
HTML5 - 基礎總結 - 基本介紹+head頭部元素HTML and HTML5html架構html頭部元素（head内）
- target:規定在何處打開頁面上的所有連結。
- link：定義文檔與外部資源（外鍊樣式表等）之間的關系
- link 元素是空元素，它僅包含屬性。
- 此元素隻能存在于 head 部分，不過它可出現任何次數。
<!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title>定義文檔标題</title> <base href="https://www.baidu.com/img/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" /> <base target="_self"> <!-- 外聯樣式表 --> <link rel="stylesheet" type="text/css" href="style.css" target="_blank" rel="external nofollow" /> <!-- ⽂檔tag圖示 --> <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" /> <!-- 比shortcut icon 多支援gif，推薦一般時候使用shortcut icon --> <link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" /> </head> <body> </body> </html>
- style：定義文檔的樣式資訊（内聯樣式表）
<style> 标簽用于為 HTML 文檔定義樣式資訊。在 style 中，您可以規定在浏覽器中如何呈現 HTML 文檔。
type 屬性是必需的，定義 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>定義文檔标題</title>
<html>
<style type="text/css">
P{
color: blue;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>hello style</h1>
<p>hello h5</p>
</body>
</html>
- meta：定義關于html文檔的中繼資料
<meta> 元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta> 标簽位于文檔的頭部，不包含任何内容。<meta> 标簽的屬性定義了與文檔相關聯的名稱/值對。
注：
- <meta> 标簽永遠位于 head 元素内部。
- 中繼資料總是以名稱/值的形式被成對傳遞的。
<!DOCTYPE html>
<html >
<head>
<title>定義文檔标題</title>
<!-- 字元編碼，防止網頁亂碼 -->
<meta charset="utf-8">
<!-- 編寫發送浏覽器的頭部資訊 -->
<!-- content-type: text/html;charset=utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- charset:iso-8859-1 -->
<meta http-equiv="charset" content="iso-8859-1">
<!-- expires:31 Dec 2008 -->
<meta http-equiv="expires" content="31 Dec 2008">
<!-- SEO -->
<!-- keyords 常用于搜尋引擎可進行模糊搜尋到該網站的關鍵字 -->
<meta name="keywords" content="8-12個以英⽂逗号隔開的單詞或詞語">
<!-- description 是網站的相關介紹 -->
<meta name="description" content="80字以内的⼀段話，與⽹站内容相關">
<!-- viewport 進行移動界面自适配，并且禁止使用者進行修改适配大小 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
</body>
</html>
- content屬性
content 屬性提供了名稱/值對中的值。該值可以是任何有效的字元串。
content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。
- name屬性
name 屬性提供了名稱/值對中的名稱。HTML 和 XHTML 标簽都沒有指定任何預先定義的 <meta> 名稱。通常情況下，您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。
"keywords" 是一個經常被用到的名稱。它為文檔定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類。
類似這樣的 meta 标簽可能對于進入搜尋引擎的索引有幫助：
如果沒有提供 name 屬性，那麼名稱/值對中的名稱會采用 http-equiv 屬性的值。<meta name="keywords" content="HTML,ASP,PHP,SQL">
- http-equiv屬性
http-equiv 屬性為名稱/值對提供了名稱。并訓示伺服器在發送實際的文檔之前先在要傳送給浏覽器的 MIME 文檔頭部包含名稱/值對。
當伺服器向浏覽器發送文檔時，會先發送許多名稱/值對。雖然有些伺服器會發送許多這種名稱/值對，但是所有伺服器都至少要發送一個：content-type:text/html。這将告訴浏覽器準備接受一個 HTML 文檔。
使用帶有 http-equiv 屬性的 <meta> 标簽時，伺服器将把名稱/值對添加到發送給浏覽器的内容頭部。例如，添加：
這樣發送到浏覽器的頭部就應該包含：<meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008">當然，隻有浏覽器可以接受這些附加的頭部字段，并能以适當的方式使用它們時，這些字段才有意義。content-type: text/html charset:iso-8859-1 expires:31 Dec 2008
- scheme屬性
scheme 屬性用于指定要用來翻譯屬性值的方案。此方案應該在由 <head> 标簽的 profile 屬性指定的概況檔案中進行了定義。
- scirpt：定義用戶端腳本（插入JS）
<script> 标簽用于定義用戶端腳本，比如 JavaScript。
script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本檔案。
必需的 type 屬性規定腳本的 MIME 類型。
JavaScript 的常見應用時圖像操作、表單驗證以及動态内容更新。
注意：
- 假如此元素内部的代碼沒有位于某個函數中，那麼這些代碼會在頁面被加載時被立即執行。<frameset> 标簽之後的腳本會被忽略。
<!DOCTYPE html> <html > <head> <title>定義文檔标題</title> <!-- 字元編碼，防止網頁亂碼 --> <meta charset="utf-8"> <!-- 可以放在head内也可以放在body内和外，通常放在body下，html内 --> <script type="text/javascript"></script> </head> <body> <script type="text/javascript"> <!-- js代碼塊 --> document.write("<h1>Hello World!</h1>") </script> </body> <script type="text/javascript"></script> </html>HTML5 - 基礎總結 - 基本介紹+head頭部元素HTML and HTML5html架構html頭部元素（head内）