HTML 是用來描述網頁的一種語言。
1、HTML 指的是超文本標記語言 (Hyper Text Markup Language)
2、HTML 不是一種編程語言，而是一種標記語言 (markup language)
3、標記語言是一套標記標簽 (markup tag)
4、HTML 使用標記標簽來描述網頁
HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
1、HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
2、HTML 標簽通常是成對出現的，比如 <b> 和 </b>
3、標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
4、開始和結束標簽也被稱為開放標簽和閉合標簽
HTML 文檔 = 網頁
1、HTML 文檔描述網頁
2、HTML 文檔包含 HTML 標簽和純文本
3、HTML 文檔也被稱為網頁
Web 瀏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容
如何使用樣式
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：
（1）外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
（2）內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
（3）內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
我們通過使用 <a> 標簽在 HTML 中創建鏈接。
有兩種使用 <a> 標簽的方式：
通過使用 href 屬性 - 創建指向另一個文檔的鏈接
通過使用 name 屬性 - 創建文檔內的書簽
超文本：什么是超文本？我的理解就是超鏈接，你可以根據網頁顯示的內容，根據超鏈接（也可以說為定義的錨）鏈接到網頁的任何位置，鏈接到當前網頁或者網絡上的任何一個網頁、圖像、文檔等等上去（也就是你的目標鏈接）。
href/target/name用來創建鏈接
Html布局：
（1）使用 <div> 元素的 HTML 布局
（2）使用 HTML5 的網站布局
HTML5 提供的新語義元素定義了網頁的不同部分：
HTML5 語義元素
header 定義文檔或節的頁眉
nav 定義導航鏈接的容器
section 定義文檔中的節
article 定義獨立的自包含文章
aside 定義內容之外的內容（比如側欄）
footer 定義文檔或節的頁腳
details 定義額外的細節
summary 定義 details 元素的標題
（3）使用表格的 HTML 布局
HTML 響應式 Web 設計
什么是響應式 Web 設計？
RWD 指的是響應式 Web 設計（Responsive Web Design）
RWD 能夠以可變尺寸傳遞網頁
RWD 對于平板和移動設備是必需的
（1）自己創建【自己寫的代碼讓其自適應】
（2）使用 Bootstrap【 CSS 框架】
另一個創建響應式設計的方法，是使用現成的 CSS 框架。
Bootstrap 是最流行的開發響應式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 幫助您開發在任何尺寸都外觀出眾的站點：顯示器、筆記本電腦、平板電腦或手機
HTML 框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面
使用的是frame標簽
例如：垂直框架
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
效果圖：
水平框架：
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
效果圖：
框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。
使用框架的壞處：
開發人員必須同時跟蹤更多的HTML文檔
很難打印整張頁面
框架結構標簽（<frameset>）
框架結構標簽（<frameset>）定義如何將窗口分割為框架
每個 frameset 定義了一系列行或列
rows/columns 的值規定了每行或每列占據屏幕的面積
框架標簽（Frame）
Frame 標簽定義了放置在每個框架中的 HTML 文檔。
在下面的這個例子中，我們設置了一個兩列的框架集。第一列被設置為占據瀏覽器窗口的 25%。第二列被設置為占據瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置于第一個列中，而 HTML 文檔 "frame_b.htm" 被置于第二個列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
iframe:
HTML <head> 元素
<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 標簽定義文檔的標題。
title 元素在所有 HTML/XHTML 文檔中都是必需的。
title 元素能夠：
定義瀏覽器工具欄中的標題
提供頁面被添加到收藏夾時顯示的標題
顯示在搜索引擎結果中的頁面標題
HTML <base> 元素
<base> 標簽為頁面上的所有鏈接規定默認地址或默認目標（target）
HTML <link> 元素
<link> 標簽定義文檔與外部資源之間的關系。
<link> 標簽最常用于連接樣式表
HTML <style> 元素
<style> 標簽用于為 HTML 文檔定義樣式信息。
您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式
HTML <meta> 元素
元數據（metadata）是關于數據的信息。
<meta> 標簽提供關于 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。
典型的情況是，meta 元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。
<meta> 標簽始終位于 head 元素中。
元數據可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
針對搜索引擎的關鍵詞
一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。
下面的 meta 元素定義頁面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定義頁面的關鍵詞：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 屬性的作用是描述頁面的內容。
總的來說meta提供文檔的元數據，提供描述啊，作者信息啊，修改版本啊等。能提供文檔的關鍵詞，搜索更有針對性。
URL的英文全稱是 Uniform Resource Locator，中文也譯為“統一資源定位符”。
http 超文本傳輸協議 以 http:// 開頭的普通網頁。不加密。
https 安全超文本傳輸協議 安全網頁。加密所有信息交換。
ftp 文件傳輸協議 用于將文件下載或上傳至網站
HTML5 增加了多個新的輸入類型：
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
html5:
HTML5 中的新內容？
HTML5 的新的文檔類型（DOCTYPE）聲明非常簡單：
<!DOCTYPE html>
HTML5 - 新特性
HTML5 的一些最有趣的新特性：
新的語義元素，比如 <header>, <footer>, <article>, and <section>。
新的表單控件，比如數字、日期、時間、日歷和滑塊。
強大的圖像支持（借由 <canvas> 和 <svg>）
強大的多媒體支持（借由 <video> 和 <audio>）
強大的新 API，比如用本地存儲取代 cookie。
HTML5 定義了八個新的語義 HTML 元素。所有都是塊級元素。如下8個：
header, section, footer, aside, nav, main, article, figure {
display: block;
}
向 HTML 添加新元素
您可以通過瀏覽器 trick 向 HTML 添加任何新元素：【自己命名的新標簽元素，還可以自定義樣式】
html5新的表單元素
標簽 描述
<datalist> 定義輸入控件的預定義選項。
<keygen> 定義鍵對生成器字段（用于表單）。
<output> 定義計算結果。
新的輸入類型:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
新的輸入屬性:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step
語義元素：
語義元素清楚地向瀏覽器和開發者描述其意義。
非語義元素的例子：<div> 和 <span> - 無法提供關于其內容的信息。
語義元素的例子：<form>、<table> 以及 <img> - 清晰地定義其內容。
HTML5 提供了定義頁面不同部分的新語義元素：
<article> 定義文章。
<aside> 定義頁面內容以外的內容。
<details> 定義用戶能夠查看或隱藏的額外細節。
<figcaption> 定義 <figure> 元素的標題。
<figure> 規定自包含內容，比如圖示、圖表、照片、代碼清單等。
<footer> 定義文檔或節的頁腳。
<header> 規定文檔或節的頁眉。
<main> 規定文檔的主內容。
<mark> 定義重要的或強調的文本。
<nav> 定義導航鏈接。
<section> 定義文檔中的節。
<summary> 定義 <details> 元素的可見標題。
<time> 定義日期/時間。
HTML5的遷移：從 HTML4 遷移至 HTML5【新語義化】
HTML5畫布：canvas
