HTML基礎入門
作者: 代碼搬運媛
Email：[email protected]
QQ：282505458
微信：15311464808
說明：本文檔用于學習交流，可傳播可分享，如有錯誤，請聯系作者，感謝矯正與探讨
網站相關網絡知識
網絡軟體分類
B/S結構：Browser（浏覽器）/ Service（伺服器）。不需要下載下傳，如前端、php
C/S結構：Client（用戶端）/ Service（伺服器）。需下載下傳，如微信、qq
網站工作原理
關于響應結果的傳回：
（1）200：響應成功
（2）403：拒絕響應
（3）404：未找到
（4）500：伺服器内部錯誤
URL位址（統一資源占位符）
舉例：http://www.jd.com/list.html?aid=10&name=luola&age=4;
http -- Hyper text transfer protocol 超文本傳輸協定
HTTP協定采用了非常簡單的請求-響應模式
超文本傳輸協定（HTTP）的設計目的是保證客戶機與伺服器之間的通信。
HTTP 的工作方式是客戶機與伺服器之間的請求-應答協定。
web 浏覽器可能是用戶端，而計算機上的網絡應用程式也可能作為伺服器端。
舉例：用戶端（浏覽器）向伺服器送出 HTTP 請求；伺服器向用戶端傳回響應。響應包含關于請求的狀态資訊以及可能被請求的内容。
浏覽器向伺服器發送http請求的方式：get 與 post
get僅請求資源，post會請求資源及資料。
兩種HTTP請求方法：get 和 post
get：從指定的資源請求資料
post：向指定的資源送出要被處理的資料
比較兩種方式：
| GET | POST | |
|---|---|---|
| 後退按鈕/重新整理 | 無害 | 資料會被重新送出（浏覽器應該告知使用者資料會被重新送出）。 |
| 書簽 | 可收藏為書簽 | 不可收藏為書簽 |
| 緩存 | 能被緩存 | 不能緩存 |
| 編碼類型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。為二進制資料使用多重編碼。 |
| 曆史 | 參數保留在浏覽器曆史中。 | 參數不會儲存在浏覽器曆史中。 |
| 對資料長度的限制 | 是的。當發送資料時，GET 方法向 URL 添加資料；URL 的長度是受限制的（URL 的最大長度是 2048 個字元）。 | 無限制。 |
| 對資料類型的限制 | 隻允許 ASCII 字元。 | 沒有限制。也允許二進制資料。 |
| 安全性 | 與 POST 相比，GET 的安全性較差，因為所發送的資料是 URL 的一部分。 在發送密碼或其他敏感資訊時絕不要使用 GET ！ | POST 比 GET 更安全，因為參數不會被儲存在浏覽器曆史或 web 伺服器日志中。 |
| 可見性 | 資料在 URL 中對所有人都是可見的。 | 資料不會顯示在 URL 中 |
https -- Hyper text transfer protocol secure 更加安全的超文本傳輸協定
HTTP協定傳輸的資料都是未加密的，也就是明文的，是以使用HTTP協定傳輸隐私資訊非常不安全，為了保證這些隐私資料能加密傳輸，于是網景公司設計了SSL（Secure Sockets Layer）協定用于對HTTP協定傳輸的資料進行加密，進而就誕生了HTTPS。簡單來說，HTTPS協定是由SSL+HTTP協定建構的可進行加密傳輸、身份認證的網絡協定，要比http協定安全。
www.jd.com -- 域名，表示向哪個伺服器請求
list.html -- 檔案名，請求的具體内容
？ -- ？及後面為具體參數，如網站根目錄（或叫資源路徑），uid 為參數名，10 為參數值。整體叫查詢串，多個參數之間用 & 分隔，&兩邊不能有空格
端口 -- port （我們通常說的是協定端口） http 為80端口，https為443端口。用法為：www.jd.com:80
如果把IP位址比作一間房子 ，端口就是出入這間房子的門。真正的房子隻有幾個門，但是一個IP位址的端口可以有65536（即：2^16）個之多！端口是通過端口号來标記的，端口号隻有整數，範圍是從0 到65535（2^16-1）。不同的端口有不同的職能。
httpd.exe -- 代表程式正在運作
http -- 無狀态的含義，表示預設不記錄IP。即一台主機連續兩次通路同一網址，預設不區分，會以為是兩台主機發出的請求。
動态網站
網站大量資料存放在資料庫中，從資料庫中查詢的資料不同，顯示在網頁上的内容就是不同的。
動态網站是以資料庫為基礎的，網站結構不變，資料内容動态改變的網站。
動态網站的組成
（1）浏覽器 -- 解釋網頁代碼
（2）CSS（層疊樣式表） -- 修飾網頁内容的大小、顔色、位置
（3）HTML（超文本标記語言） -- 标記出網頁中都有什麼内容
（4）JS 用戶端腳本語言 -- 使用者互動、頁面特效
（5）伺服器 -- 負責相應請求，把網頁檔案發給浏覽器
（6）伺服器端腳本語言 -- 拼裝、生成頁面，如PHP、Python、Java
（7）資料庫 -- 存儲資料
伺服器傳回給浏覽器的是哪些代碼？
内容（HTML）+ 表現（CSS）+ 行為（JS）
浏覽器通過 URL 向伺服器送出請求
什麼是HTML
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本标記語言 (Hyper Text Markup Language)
- HTML 不是一種程式設計語言，而是一種标記語言 (markup language)
- 标記語言是一套标記标簽 (markup tag)
- HTML 使用标記标簽來描述網頁
HTML 标簽
HTML 标記标簽通常被稱為 HTML 标簽 (HTML tag)。
- HTML 标簽是由尖括号包圍的關鍵詞，比如 <html>
- HTML 标簽通常是成對出現的，比如
<b> 和 </b>
- 标簽對中的第一個标簽是開始标簽，第二個标簽是結束标簽
- 開始和結束标簽也被稱為開放标簽和閉合标簽
HTML 文檔 = 網頁
- HTML 文檔描述網頁
- HTML 文檔包含 HTML 标簽和純文字
- HTML 文檔也被稱為網頁
Web 浏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們。浏覽器不會顯示 HTML 标簽，而是使用标簽來解釋頁面的内容。
字尾
html與htm的差別：
與windows系統有關，windows早期規定檔案字尾名隻能有三個字母，後期無限制。是以現在也常用此來識别新舊檔案。
HTML元素
HTML 文檔是由 HTML 元素定義的。
HTML 元素指的是從開始标簽（start tag）到結束标簽（end tag）的所有代碼。
HTML 元素文法
- HTML 元素以開始标簽起始 ,以結束标簽終止 稱為雙标簽
- HTML 元素以一個标簽終止 ，稱為單标簽
- 元素的内容是開始标簽與結束标簽之間的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在開始标簽中進行關閉（以開始标簽的結束而結束）
- 大多數 HTML 元素可擁有屬性
- 始終為屬性值加引号
為數不多的單标簽：
<br/> 強制換行
<hr/> 水準分割線
<img/> 插入圖檔
<meta/> 可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞 <source/>資源标簽 浏覽器可能不支援其中的聲音格式，可以使用此标簽多标注音源
此标簽必須配合聲音或者視訊标簽使用。為保證相容性，可以同時有多個source标簽導入不同格式的音視訊。
标簽之間的文字表示當浏覽器不支援時，在頁面上顯示的文字。
<video>
<source src=”001.MP4” type=””/>
<source src=”002.ogg” type=””/>
</video> 适用于大多數元素的屬性：class、id、style、title
style
style 屬性規定元素的行内樣式（inline style）
style 屬性将覆寫任何全局的樣式設定，例如在 <style> 标簽或在外部樣式表中規定的樣式。
titile
title 屬性規定關于元素的額外資訊。
這些資訊通常會在滑鼠移到元素上時顯示一段工具提示文本（tooltip text）。
提示：title 屬性常與 form 以及 a 元素一同使用，以提供關于輸入格式和連結目标的資訊。同時它也是 abbr 和 acronym 元素的必需屬性。
注意：
大多數浏覽器沒有結束（/）也可以識别，但推薦都加上（/）以免發生不可預測的bug。
知識拓展：
音頻檔案名：
混成壓縮：可以把壓縮的資料無損還原。 MPEG，JPEG
有損壓縮：MP3，OGG
無損壓縮：FLAC，WAV，APE
塊級元素與行内元素
塊級元素
（1）預設尺寸：寬度100%，高度0，高度會被内容撐開。
（2）高度、寬度可以設定
（3）預設排列：不能并排，獨占一行。
示例：h1~h6、ul、li、dl、ol、p、div、form
注意：預設情況下，HTML 會自動地在塊級元素前後添加一個額外的空行，比如段落、标題元素前後。
行内元素
（1）預設尺寸：寬度0，高度是一個字元的高度；寬度會被内容撐開
（2）寬度、高度設定無效
（3）預設排列：并排顯示
示例：img，a、input、textarea、button、b、i、u、del
html檔案主體結構
<!DOCTYPE html><!--這是H5标準-->
<html lang="en">
<!--頭部是告訴浏覽器的内容-->
<head>
<meta charset="utf-8">
<title>标題</title>
</head>
<body>
<!--主體内容，讓浏覽者看的内容-->
</body>
</html> 這個在html開頭lang="en"是什麼意思？
1、屬性 lang 是英語 language 的縮寫，意思是語言，”en” 代表英語，”zh-CN” 代表中文
2、不寫這個屬性沒有任何問題，因為浏覽器會智能判斷你用的語言和網頁之間的差異，幫你顯示出 來，但會提示你要不要翻譯。
真正的開發的時候，要不不寫，要寫就寫全了。用 en 沒任何問題，但會降低浏覽器的效率。
注釋
注釋對于 HTML 糾錯也大有幫助，因為您可以一次注釋一行 HTML 代碼，以搜尋錯誤。
格式；
<!--這是html注釋--> （1）對代碼起解釋說明作用。
（2）屏蔽相同屬性不同值得代碼。
（3）注釋不能嵌套。
（4）注釋浏覽器不解析，不執行
（5）注釋在開始标簽有一個驚歎号，但是結束标簽中沒有。
基本的HTML标簽
HTML标簽的标準屬性
标準屬性，幾乎所有标簽都支援
核心屬性
以下标簽不提供下面的屬性：base、head、html、meta、param、script、style 以及 title 元素。
| 屬性 | 值 | 描述 |
|---|---|---|
| class | classname | 規定元素的類名（classname） |
| id | 規定元素的唯一 id | |
| style_definition | 規定元素的行内樣式（inline style） | |
| title | text | 滑鼠懸停顯示文字 |
語言屬性
以下标簽不提供下面的屬性：base、br、frame、frameset、hr、iframe、param 以及 script 元素。
| dir | ltr（左到右） | rtl（右到左） | 設定元素中内容的文本方向。 |
| lang | language_code | 設定元素中内容的語言代碼。語言代碼參考 |
| xml:lang | 設定 XHTML 文檔中元素内容的語言代碼。語言代碼參考 |
鍵盤屬性
| accesskey | character | 設定通路元素的鍵盤快捷鍵。 |
| tabindex | number | 設定元素的 Tab 鍵控制次序。 |
head标簽
頭元素
頭元素包含關于文檔的概要資訊，也稱為元資訊（meta-information）。Meta 意為“關于某方面的資訊”。
可以這麼說，中繼資料（meta-data）是關于資料的資訊，而元資訊是關于資訊的資訊。
頭元素内的元素不會被浏覽器顯示出來。
根據 HTML 标準，僅有幾個标簽在 HTML 的頭部分是合法的。它們是：<base>, <link>, <meta>, <title>, <style> 和 <script>。
head 标簽
用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、訓示浏覽器在哪裡找到樣式表、提供元資訊等等。
文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的标題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的資料都不會真正作為内容顯示給讀者。
下面這些标簽可用在 head 部分：base 、link、meta、script、style、title
title 定義文檔的标題，它是 head 部分中唯一必需的元素。
title标簽
title元素可定義文檔的标題。
浏覽器會以特殊的方式來使用标題，并且通常把它放置在浏覽器視窗的标題欄或狀态欄上。同樣，當把文檔加入使用者的連結清單或者收藏夾或書簽清單時，标題将成為該文檔連結的預設名稱。
base标簽
base标簽為頁面上的所有連結規定預設位址或預設目标。
通常情況下，浏覽器會從目前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。
使用 <base> 标簽可以改變這一點。浏覽器随後将不再使用目前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 标簽中的 URL。
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" />
<a rel="nofollow" href="http://www.w3school.com.cn">W3School</a>
</body> Link标簽
link 标簽定義文檔與外部資源的關系。
link 标簽最常見的用途是連結樣式表。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head> 屬性：
charset：定義被連結文檔的字元編碼方式。
href：定義被連結文檔的位置。
media:規定被連結文檔将顯示在什麼裝置上。 screen tty tv projection handheld print braille aural all
| screen | 計算機螢幕（預設）。 |
| tty | 電傳打字機以及類似的使用等寬字元網格的媒介。 |
| tv | 電視機類型裝置（低分辨率、有限的滾屏能力）。 |
| projection | 放映機。 |
| handheld | 手持裝置（小螢幕、有限帶寬）。 |
| 列印預覽模式/列印頁面。 | |
| braille | 盲人點字法回報裝置。 |
| aural | 語音合成器。 |
| all | 适用于所有裝置。 |
rel：定義目前文檔與被連結文檔之間的關系。常用 stylesheet
target: 定義在何處加載被連結文檔。_blank _parent _self _top framename
| _blank | 在新視窗中打開被連結文檔。 |
| _self | 預設。在相同的架構中打開被連結文檔。 |
| _parent | 在父架構集中打開被連結文檔。 |
| _top | 在整個視窗中打開被連結文檔。 |
| framename | 在指定的架構中打開被連結文檔。 |
type:規定被連結文檔的 MIME 類型。常見 text/css
meta标簽
meta 元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。
meta 标簽位于文檔的頭部，不包含任何内容。meta 标簽的屬性定義了與文檔相關聯的名稱/值對。
關鍵字、描述、定時重新整理
<!-- 設定字元集 -->
<!-- html5 支援的html設定字元集-->
<meta charset="utf-8"/>
<!-- html 4.01 支援-->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- 網站關鍵字 -->
<meta name="keywords" content="8-12個以英文逗号隔開的單詞或者語句如:姓 名;name;age;中文;"/>
<!-- 網頁的描述資訊 -->
<meta name="description" content="80字以内的一段話，與網站相關"/>
<!-- 網站作者 -->
<meta name="author" content="Martin Lee" />
<!-- 網頁版權 -->
<meta name="copyright" content="2008-2017 版權所有"/>
<!-- 3秒後自動跳轉 -->
<meta http-equiv="refresh" content="5;url=http://lol.qq.com"/>
<!-- 添加ico圖示 -->
<link rel="icon" href="圖檔路徑" type="image/x-icon"> 語義化标簽
作用：
（1）對開發者更好，增強可讀性，清晰的網頁結構，友善開發團隊開發及維護；
（2）有利于SEO搜尋引擎
<!-- 表示強調，浏覽器上顯示為加粗 -->
<strong>夢想</strong>
<!-- 表示強調，浏覽器上顯示為斜體 -->
<em>認真學習</em>
<!-- 表示引用著作，浏覽器上顯示為斜體 -->
<cite>紅樓夢</cite>
<!-- 時間标簽 -->
<time datatime="2015-1-2">今天下雪了</time>
<!-- 縮寫标簽 -->
<abbr title="world wide web">www</abbr> 水準分割線
<hr> 标簽在 HTML 頁面中建立一條水準線。
水準分隔線（horizontal rule）可以在視覺上将文檔分隔成各個部分。
預設：border：1px;
應用：
hr{border:0; height:1px; backgroundcolor:#ddd;} body 标簽
body 元素定義文檔的主體。
body 元素包含文檔的所有内容（比如文本、超連結、圖像、表格和清單等等。）
background：背景圖檔
bgcolor：背景顔色
link：文檔中為通路連結的顔色
text：文檔中所有文字的顔色
事件屬性：
onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 插入單個折行
<br> 可插入一個簡單的換行符。
<br> 标簽是空标簽（意味着它沒有結束标簽，是以這是錯誤的：<br></br>）。 如果您希望文本流在内聯表格或圖像的下一行繼續輸出，請使用 clear 屬性，該屬性有三個可選的值：left、right 或者 all，每個值都代表一個邊界或兩邊的邊界。
clear
标題标簽
HTML 标簽是通過 <h1> - <h6> 等标簽定義的。
h1 定義最大的标題，h6 定義最小的标題。
h4标簽與普通文本字号相似。是以一般使用h1~h4标簽。
請確定将 HTML heading 标簽隻用于标題。不要僅僅是為了産生粗體或大号的文本而使用标題。
搜尋引擎使用标題為您的網頁的結構和内容編制索引。
因為使用者可以通過标題來快速浏覽您的網頁，是以用标題來呈現文檔結構是很重要的。
應該将 h1 用作主标題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。
段落标簽 <p>
HTML 段落是通過 <p> 标簽進行定義的。
==塊級元素，預設有段間距。浏覽器會自動在段落前後加空行。==
提示：當顯示頁面時，浏覽器會移除源代碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。
連結
HTML 連結是通過 <a> 标簽進行定義的。
<a rel="nofollow" target="_blank" href="http://www.w3school.com.cn">This is a link</a> href：指定連結的位址
target： blank 在新頁面打開連結， self 在本頁面打開連結
錨點連結
跳轉到頁面指定位置
<a rel="nofollow" href="#c1">深粉色</a>
<h3 id="c1">深粉色</h3>
<p style="height:400px;background-color:deeppink;"></p>
<a rel="nofollow" href="#top">傳回頂部</a>
傳回頂部也可以不寫#top，因為預設就是傳回頂部。 Name 屬性用于建立被命名的錨（named anchors）。當使用命名錨（named anchors）時，我們可以建立直接跳至頁面中某個節的連結，這樣使用者就無需不停的滾動頁面來尋找他們需要的資訊。
命名錨經常被用在長的文檔中建立目錄。可以為每個章節賦予一個命名錨，然後連接配接到這些錨的連結被置于文檔的上部。
假如浏覽器找不到已定義的命名錨，那麼就會定位到文檔的頂端。不會有錯誤發生。
<a name="label">Text to be displayed</a> 站内跳轉
<!--跳轉到與目前檔案在同一檔案夾下的3.html檔案中-->
<!--
. 表示目前檔案所在的檔案夾
.. 表示目前這個檔案所在檔案夾的上一級檔案夾
-->
<a rel="nofollow" href="./3.html">跳轉</a>
<!--
/ 代表伺服器根目錄，網站上的頁面都存在它的下面。根據實際情況，它會是系統中某一特定的檔案夾
-->
<a rel="nofollow" href="/182/02_html/3.html">通過根目錄跳轉到3.html</a> 友情連結 -- 站外跳轉
<!--
href 表示要跳轉的地方，如果跳轉到站外，http://必須有
-->
<a rel="nofollow" href="http://www.baidu.com">百度</a>
<!--帶問号一起跳轉，表示跳轉的時候同時把資料傳遞過去，這些資料被稱為參數-->
<a rel="nofollow" href="./3.html?a=10">帶參數跳轉</a> 可以傳遞參數的三種方式：get、post、a
注意：a标簽不能嵌套b标簽。
文本标簽
hn 标題标簽，定義6級标題，而且會自動插入一個空行
<b> 粗字型标簽
<i> 斜體字标簽
<u> 下劃線字标簽
<sub> 文字下标
<sup> 文字上标
<font> 字型标簽
<em> 斜體強調标簽
<strong> 加粗強調
<small> 小型字型标簽
<big> 大型字型
<tt> 打字機文字
<cite> 用于引證舉例 通常為斜體字
<del> 删除線
<details> 定義元素細節 使用者點選檢視
<summary> 為datails 标簽定義标題
<dialog> 聊天标簽，屬性：open=‘true’
<bdo> 文本方向
rtl：right to left；從右到左
ltr：left to right; 從左到右
<bdo dir="rtl">你的原子筆</bdo> <!-- 頁面上這些筆會從右到左顯示 -->
字型樣式
字型族font-family
• font-family:"微軟雅黑","黑體";
使用逗号隔開多種字型（優先級從前向後，如果系統中沒有找到目前字型，則往後面尋找）
字型大小font-size
• font-size:12px;
• 網頁預設字型大小是16px
字型粗細font-weight
• font-weight:400;
• normal（預設）
• bold（加粗）
• bolder（相當于<strong>和<b>标簽）
• lighter （正常）
• 100 ~ 900 整百（400=normal，700=bold）
字型顔色color
• 顔色的英文單詞color:red;
• 十六進制色：color: #FFFF00;
• RGB(紅綠藍)color:rgb(255,255,0)
• RGBA（紅綠藍透明度）A是透明度在0~1之間取值。color:rgba(255,255,0,0.5)
字型斜體font-style
• font-style:italic
• normal 文本正常顯示
• italic 文本斜體顯示
• oblique 文本傾斜顯示
文本屬性
行高line-height
• line-height:50px;
• 可以将父元素的高度撐起來
文本水準對齊方式text-align
• left 左對齊
• center 文字居中
• right 右對齊
文本所在行高的垂直對齊方式vertical-align
• baseline 預設
• sub 垂直對齊文本的下标，和<sub>标簽一樣的效果
• super 垂直對齊文本的上标，和<sup>标簽一樣的效果
• top 對象的頂端與所在容器的頂端對齊
• text-top 對象的頂端與所在行文字頂端對齊
• middle 元素對象基于基線垂直對齊
• bottom 對象的底端與所在行的文字底部對齊
• text-bottom 對象的底端與所在行文字的底端對齊
文本縮進text-indent
• text-indent:2em;
• 通常用在段落開始位置的首行縮進
字母之間的間距letter-spacing
單詞之間間距word-spacing
文本的大小寫text-transform
• capitalize 文本中的每個單詞以大寫字母開頭。
• uppercase 定義僅有大寫字母。
• lowercase 定義僅有小寫字母。
文本的裝飾text-decoration
• none 預設。
• underline 下劃線。
• overline 上劃線。
• line-through 中線。
自動換行word-wrap
• word-wrap: break-word;
清單
無序清單
ul 标簽定義無序清單。
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> type：disc (預設值，實心圓) 、square(實心方塊)、 circle(空心圓)
有序清單
ol 标簽定義有序清單。
type：1（預設值，數字清單）、a（小寫字母清單）、A（大寫字母清單）、i（羅馬小寫）、I（羅馬大寫）
start ：數字，屬性規定有序清單的開始點。
自定義清單
dd 可在定義清單中定義條目的定義部分。
自定義清單不僅僅是一列項目，而是項目及其注釋的組合。
自定義清單以 <dl> 标簽開始。每個自定義清單項以 <dt> 開始。每個自定義清單項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl> 圖像
HTML 圖像是通過 <img> 标簽進行定義的。
<img src="w3school.jpg" width="104" height="142" /> title：滑鼠懸停顯示的文字
alt：圖檔加載失敗顯示的問題
width：圖檔寬度
height：圖檔高度
src：圖檔位址
align：bottom：圖檔底部與文字對齊（浏覽器預設樣式）
middle：圖檔中間與文字對齊
top：圖檔上部與文字對齊
left：帶有圖像的一個段落。圖像的 align 屬性設定為 "left"。圖像将浮動到文本的左側。
請注意，從技術上講，<img> 标簽并不會在網頁中插入圖像，而是從網頁上連結圖像。<img> 标簽建立的是被引用圖像的占位空間。
實作結果網頁共向伺服器請求了兩次，第一次請求網址，第二次請求圖檔。
切記，
1)為保證圖檔顯示效果，尺寸單獨設定寬或高即可。
2). 代表目前檔案的位置(目前目錄)
3)代表目前檔案的位置的上一級檔案夾(上一級目錄)
4）在開發過程中禁止使用絕對路徑
圖檔超連結
點選圖檔就會跳轉
<a rel="nofollow" href="">
<img src="./1.jpg">
</a> 圖檔鏡像
使用圖檔鏡像的要點：img的usemap屬性值與map的name值相同。
img:usemap
Map屬性：id, name
Area:
shape 圖形屬性：rect | circle | poly
rect：長方形（用左上角與右下角的坐标定位）
circle：圓形（圓心坐标與半徑定位）
poly：多邊形（各點坐标定位）
coords：坐标值
href：跳轉位址
target：打開方式
alt：圖檔加載失敗時顯示的提示資訊
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map> 表格
<table> 标簽定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更複雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
table 塊元素
width：寬度
border：邊框
bgcolor：背景色
cellpadding：單元格與内容的距離
cellspacing：單元格之間的留白
align：規定表格相對周圍元素的對齊方式。left|center|right
tr元素
valign：規定表格行中内容的垂直對齊方式。 top middle bottom baseline
tr 标簽定義 HTML 表格中的行。
tr 元素包含一個或多個 th 或 td 元素。
align：定義表格行的内容對齊方式。left|center|right| justify |char
justify(對行進行伸展，這樣每行都可以有相等的長度)
char(将内容對準指定字元。
baseline 與基線對齊。
th元素
定義表格内的表頭單元格。此 th 元素内部的文本通常會呈現為粗體。
align：規定單元格内容的水準排列方式。 left | right | center| justify | char
valign：規定單元格内容的垂直排列。 top | middle | bottom | baseline
colspan：指明此單元格可橫跨的列數
rowspan：指明此單元格可橫跨的行數。
height：規定表格單元格的高度。
width：規定表格單元格的寬度。
td标簽
td标簽定義 HTML 表格中的标準單元格。
HTML 表格有兩類單元格：
- 表頭單元 - 包含頭部資訊（由 th 元素建立）
- 标準單元 - 包含資料（由 td 元素建立）
td 元素中的文本一般顯示為正常字型且左對齊。
align:規定單元格内容的水準對齊方式。 left right center justify (每行相等) char (對準指定字元）
valign: 規定單元格内容的垂直排列方式。top middle bottom baseline (基線對齊)
colspan:規定單元格可橫跨的列數。
rowspan:規定單元格可橫跨的行數。
width:寬度
height:高度
bgcolor:背景色
caption标簽
定義表格标題。
caption标簽必須跟在table标簽之後，且每個表格隻能定義一個标題。通常這個标題會居中顯示于表格之上。
align ：規定标題的對齊方式 left | right | top | bottom
表單 form
HTML 表單用于搜集不同類型的使用者輸入。
fotm 标簽
form 用來定義表單。
表單元素是允許使用者在表單中（比如：文本域、下拉清單、單選框、複選框等等）輸入資訊的元素。
供使用者填寫資料，傳遞給伺服器，讓伺服器給數 據做處理。
action：必填，送出資料到哪個位址，是相對路徑（即接收資料的檔案）
method：必填，用什麼方式送出資料。 get | post
get：預設，送出資料後會在位址欄顯示，長度不宜太長
post：脫離位址欄，通過類似隐藏的方式送出給接收檔案。（送出後，資料不會在位址欄顯示，相對安全）
==注意：檔案名或路徑禁止使用中文及空格==
input标簽
input标簽用于定義輸入域，搜集使用者資訊。屬于行内标簽
根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、複選框、密碼、單選按鈕、多選框、按鈕、上傳檔案、隐藏域、自定義圖像按鈕等等。
name：定義元素名稱
value：此表單項的預設值
hidden：隐藏域，用于傳遞資料，為了友善操作資料，不希望使用者看到
disabled：禁用
readonly ：規定輸入字段為隻讀
size：定義輸入字段的寬度
src：定義以按鈕方式送出的圖檔的路徑
alt：定義圖像的替代文本
align：輸入圖像的對齊方式 left right top middle bottom
checked：規定此元素在第一次加載時被選中，即預設被選中。單選與多選會用到
maxlength：規定輸入字段的最大長度
type：此輸入域的類型
text：普通文本域
password：密碼域，輸入的内容為小圓點或星号
radio：單選框，隻能選中一個而且必須選中一個
==注意: 單選框所有name名稱保持一緻，這樣才會有互相排斥的效果。 選中使用關鍵詞checked==
checkbox：複選框，可以選擇0到多個
==注意: 複選框name也要一緻，并且在name名稱後面加上[]（中括号）選中使用關鍵詞checked
選中後送出預設送出的是value值==
file：上傳檔案，送出資料的方式必須是post
reset：重置按鈕
submit：送出按鈕
button：按鈕
image：自定義圖像按鈕
select标簽 下拉清單
select 元素可建立單選或多選菜單。
name：下拉清單的名稱
size：下拉清單中可見選項的數目
disabled：禁用下拉清單
multiple：可選擇多個選項
option标簽
option 元素定義下拉清單中的一個選項（一個條目）。
浏覽器将 option标簽中的内容作為 select标簽的菜單或是滾動清單中的一個元素顯示。
option 元素位于 select 元素内部。
selected：預設選中狀态
==重點：單選/多選的預設選擇為checked；下拉清單為selected。==
value:定義送往伺服器的選項值。
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> optgroup 标簽
optgroup 标簽定義選項組。
optgroup 元素用于組合選項。當您使用一個長的選項清單時，對相關的選項進行組合會使處理更加容易。
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select> label：為選項組規定描述。
disable：規定禁用該選項組。
==注意：表單中除了送出按鈕,其它項目都要有 name屬性值 ,否則表單不能把它送出出去.==
架構
通過使用架構，你可以在同一個浏覽器視窗中顯示不止一個頁面。
通過使用架構，你可以在同一個浏覽器視窗中顯示不止一個頁面。每份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> ==注意：架構标簽不能與body同用==
基本的注意事項 - 有用的提示：
假如一個架構有可見邊框，使用者可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 <frame> 标簽中加入：noresize="noresize"。
為不支援架構的浏覽器添加 <noframes> 标簽。
重要提示：不能将 <body></body> 标簽與 <frameset></frameset> 标簽同時使用！不過，假如你添加包含一段文本的 <noframes> 标簽，就必須将這段文字嵌套于 <body></body> 标簽内。（在下面的第一個執行個體中，可以檢視它是如何實作的。）
字元實體
諸如 “<” 之類的符号在HTML中擁有特殊的含義，是以在文本中使用它們。
為了在 HTML 中顯示小于号 (<)，我們需要使用字元實體。
常用字元實體
-
[ ] 顯示結果 實體名稱 實體編号 空格 & nbsp; & #160; < 小于号 & lt; & #60; > 大于号 & gt; & #62; & 和号 & amp; & #38; " 引号 & quot; & #34; ' 撇号 ' (IE不支援) & #39; © 版權 & copy; & #169; ® 注冊商标 & reg; & #174;
設定IE9以下浏覽器支援html5
<!--[if it IE9]>
<script src=”http://www.itxdl.cn/h5/html5.js”></script>
<![endif]>--> ![HTML 入門與實戰[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)