HTML基礎語法
HTML概述
什麼是HTML
HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言 (markup language)
超文本標記語言，標準通用標記語言下的一個應用。
超文本就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標記語言的結構包括:“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的信息，“主體”部分提供網頁的具體內容。
什麼是超文本？
標記語言的真正威力在於其收集能力，它可以將收集來的文檔組合成一個完整的信息庫，並且可以將文檔庫與世界上的其他文檔集合鏈接起來。這樣的話，讀者不僅可以完全控制文檔在屏幕上的顯示，還可以通過超鏈接來控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它將整個 Web 網絡連接起來。HTML5
萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改2014年10月29日，萬維網聯盟宣佈，經過接近8年的艱苦努力，該標準規範終於制定完成。
瀏覽器的原理
瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展示您選擇的網絡資源。這裏所說的資源一般是指 HTML 文檔，也可以是 PDF、圖片或其他的類型。資源的位置由用戶使用 URI（統一資源標示符）指定。
----------------------------------------------------------------------------------
HTML基礎語法
標記
HTML用於描述功能的符號叫標記<p>、<h1>
1.標記使用中必須用尖括號括起來
2.有封閉類標記、非封閉類標記之
封閉類標記：必須成對出現（也叫雙標記）
若一個封閉類標記沒有封閉，可能產生意想不到的效果
非封閉類標記：也叫空標記，或單標記。如<br><br/>
空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
不能包含內容
元素
HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的所有代碼。
1.即標記
2.每一對尖括號包圍的部分
屬性
1.用來修飾元素
2.每個屬性都有值
3.屬性聲明必須位於開始標誌裏
4.一個標記可以有多個屬性；之間用空格隔開
5.多個屬性之間不分先後
6.屬性和屬性值對大小寫不敏感(不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值)
元素與屬性
通用屬性
絕大多數元素都支持的屬性，也稱標準屬性
1.id 2.class 3.style 4.title
| 屬性 | 值 | 描述 |
|---|---|---|
| class | classname | 規定元素的類名（classname） |
| id | id | 規定元素的唯一 id |
| style | style_definition | 規定元素的行內樣式（inline style） |
| title | text | 規定元素的額外信息（可在工具提示中顯示） |
註釋
註釋語法：<!--註釋內容-->
註釋不可嵌套；註釋裏的內容不會顯示在瀏覽器中
- 註釋可用於HTML糾錯
- 條件註釋
<!--定義只有 Internet Explorer 執行的 HTML 標籤--->
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->HTML 全局屬性
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
HTML 事件屬性
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
----------------------------------------------------------------------------------
文檔結構
HTML的文檔結構
- 文檔類型聲明
- html頁面
1.文件頭:<head></head>
2.文檔主體部分：<body></body>
文檔聲明類型
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤之前。
<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因爲 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。HTML5 不基於 SGML，所以不需要引用 DTD。
標籤完整格式爲<!DOCTYPE>。只有確定了一個正確的文檔類型，超文本標記語言或可擴展超文本標記語言中的標籤和層疊樣式表才能生效，甚至對JavaScript腳本都會有所影響。
HTML 4.01 與 HTML5 之間的差異
在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!DOCTYPE html>常用的 DOCTYPE 聲明
head元素
<head></head>
- 用於定義頁面全局信息
1.所有其他頭元素的容器
2.緊跟在html標籤之後
- 可包含
title 、meta 、script、 style 、link...
title元素
<title></title>
爲文檔定義標題
1.標題元素內容出現在瀏覽器頂部
2.沒有屬性
3.必須出現在head元素中
4.一個文檔只能有一個標題元素
meta元素
<meta/>
用於定義網頁基本信息
1.空標記
2.常用屬性：content、http-equiv
----------------------------------------------------------------------------------
文本標記
文本標記概述
文本標記的作用
- 文本是網頁的主要組成
- 直接書寫的文本會被瀏覽器用默認的樣式顯示
- 包含在標記中的文本會被顯示爲標記所擁有的樣式
1.特殊字符
2.註釋
3.標題元素
4.段落元素
5.換行元素
6.分區元素
文本與特殊字符
- 空格摺疊
多個連續空格或製表符壓縮成單個空格，只顯示一個空格
需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示爲一個空格 - 特殊字符 需要轉義
特殊字符對照表:
html中空格:特殊符號 命名實體 十進制編碼 特殊符號 命名實體 十進制編碼 特殊符號 命名實體 十進制編碼 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι Ι Κ Κ Κ Λ Λ Λ Μ Μ Μ Ν Ν Ν Ξ Ξ Ξ Ο Ο Ο Π Π Π Ρ Ρ Ρ Σ Σ Σ Τ Τ Τ Υ Υ Υ Φ Φ Φ Χ Χ Χ Ψ Ψ Ψ Ω Ω Ω α α α β β β γ γ γ δ δ δ ε ε ε ζ ζ ζ η η η θ θ θ ι ι ι κ κ κ λ λ λ μ μ μ ν ν ν ξ ξ ξ ο ο ο π π π ρ ρ ρ ς ς ς σ σ σ τ τ τ υ υ υ φ φ φ χ χ χ ψ ψ ψ ω ω ω ϑ ϑ ϑ ϒ ϒ ϒ ϖ ϖ ϖ • • • … … … ′ ′ ′ ″ ″ ″ ‾ ‾ ‾ ⁄ ⁄ ⁄ ℘ ℘ ℘ ℑ ℑ ℑ ℜ ℜ ℜ ™ ™ ™ ℵ ℵ ℵ ← ← ← ↑ ↑ ↑ → → → ↓ ↓ ↓ ↔ ↔ ↔ ↵ ↵ ↵ ⇐ ⇐ ⇐ ⇑ ⇑ ⇑ ⇒ ⇒ ⇒ ⇓ ⇓ ⇓ ⇔ ⇔ ⇔ ∀ ∀ ∀ ∂ ∂ ∂ ∃ ∃ ∃ ∅ ∅ ∅ ∇ ∇ ∇ ∈ ∈ ∈ ∉ ∉ ∉ ∋ ∋ ∋ ∏ ∏ ∏ ∑ ∑ − − − − ∗ ∗ ∗ √ √ √ ∝ ∝ ∝ ∞ ∞ ∞ ∠ ∠ ∠ ∧ ∧ ⊥ ∨ ∨ ⊦ ∩ ∩ ∩ ∪ ∪ ∪ ∫ ∫ ∫ ∴ ∴ ∴ ∼ ∼ ∼ ≅ ≅ ≅ ≈ ≈ ≅ ≠ ≠ ≠ ≡ ≡ ≡ ≤ ≤ ≤ ≥ ≥ ≥ ⊂ ⊂ ⊂ ⊃ ⊃ ⊃ ⊄ ⊄ ⊄ ⊆ ⊆ ⊆ ⊇ ⊇ ⊇ ⊕ ⊕ ⊕ ⊗ ⊗ ⊗ ⊥ ⊥ ⊥ ⋅ ⋅ ⋅ ⌈ ⌈ ⌈ ⌉ ⌉ ⌉ ⌊ ⌊ ⌊ ⌋ ⌋ ⌋ ◊ ◊ ◊ ♠ ♠ ♠ ♣ ♣ ♣ ♥ ♥ ♥ ♦ ♦ ♦   ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ ¦ ¦ ¦ § § § ¨ ¨ ¨ © © © ª ª ª « « « ¬ ¬ ¬ ­ ­ ® ® ® ¯ ¯ ¯ ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ " " " < < < > > > ' '
HTML提供了5種空格實體（space entity）
它們擁有不同的寬度，非斷行空格（ ）是常規空格的寬度，可運行於所有主流瀏覽器。其他幾種空格（       ‌‍）在不同瀏覽器中寬度各異。
不換行空格，全稱No-Break Space，它是最常見和我們使用最多的空格，它是按下space鍵產生的空格。在HTML中，如果用空格鍵產生此空格，空格是不會累加的（只算1個）。要使用html實體表示纔可累加，該空格佔據寬度受字體影響明顯而強烈。
 
半角空格，全稱是En Space，en是字體排印學的計量單位，爲em寬度的一半。根據定義，它等同於字體度的一半（如16px字體中就是8px）。名義上是小寫字母n的寬度。此空格傳承空格家族一貫的特性：透明的，此空格有個相當穩健的特性，就是其佔據的寬度正好是1/2箇中文寬度，而且基本上不受字體影響。
 
全角空格，全稱是Em Space，em是字體排印學的計量單位，相當於當前指定的點數。例如，1 em在16px的字體中就是16px。此空格也傳承空格家族一貫的特性：透明的，此空格也有個相當穩健的特性，就是其佔據的寬度正好是1箇中文寬度，而且基本上不受字體影響。
 
窄空格，全稱是Thin Space。也稱之爲“瘦弱空格”，就是該空格長得比較瘦弱，身體單薄，佔據的寬度比較小。它是em之六分之一寬。
----------------------------------------------------------------------------------
使用文本標記
標題元素<hn>
- 標題元素一般用於標題，讓文字以醒目的方式顯示
- 基本語法：<h#></h#>
- #-1,2,3,4,5,6
- h1~h6 由大到小
段落元素<p>
- p元素提供了結構化文本的一種方式
- p元素中的文本會用單獨的段落顯示
- 與前後的文本都分開
- 添加一段額外的垂直空白距離作爲段落間距
-常見屬性：align
換行元素<br>
在任何地方創建手工換行
- 空標記
分區元素<span>、<div>
- 分區元素用於爲元素分組，用於頁面佈局
- 塊分區：<div></div>
- 行分區：<span></span>
- 設置同一行的文字內不同格式
行內元素與塊級元素
- 塊級元素
- 默認情況下，塊級元素會獨佔一行（元素前後都會換行）
- 塊級元素：<p><div><hn> - 行內元素
- 不會換行，可以和其他元素位於同一行
- 行內元素：<span><a>
---------------------------------------------------------------------------
圖像與鏈接
URL
- Uniform Resource Locator:統一資源定位符
- 組成部分:基本URL包含模式（協議）、服務器名稱（或IP地址）、路徑和文件名
完整的、帶有授權部分示例如下： 協議://用戶名:密碼@子域名.域名.頂級域名:端口號/目錄/文件名.文件後綴?參數=值#標誌 - 區別URI
URI—Uniform Resource Identifier統一資源定位符Web上可用的每種資源如HTML文檔、圖像、視頻片段、程序等都是一個來URI來定位的,
URI一般由三部組成：①訪問資源的命名機制 ②存放資源的主機名 ③資源自身的名稱，由路徑表示，着重強調於資源。
URL—Uniform Resource Location統一資源定位符
URL是Internet上用來描述信息資源的字符串，主要用在各種WWW客戶程序和服務器程序上，採用URL可以用一種統一的格式來描述各種信息資源，包括文件、服務器的地址和目錄等。
URL一般由三部組成：①協議(或稱爲服務方式) ②存有該資源的主機IP地址(有時也包括端口號) ③主機資源的具體地址。如目錄和文件名等
相對路徑和絕對路徑
- 絕對路徑
- 文件從最高級目錄開始的完整路徑（使用絕對路徑總是能能找到對應的文件） - 相對路徑
- 文件位置相對於當前文件的位置|
- 包括目錄名，或指向從當前目錄出發找到指定文件的路徑
- 使用“../”來表示上一級目錄，“../../”表示上上級的目錄，以此類推。
【win中/ linux\】
- 例: ../def/a.html image/a.html
圖像元素<img>
- 添加圖像到頁面
- 必須屬性: src
- 常用屬性： width height alt
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。 - 注意： 假如某個 HTML 文件包含十個圖像，那麼爲了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
---------------------------------------------------------------------------
鏈接
鏈接元素<a>
- 創建超鏈接<a href="url" target="">文本</a>
- 常用屬性
download（5） filename 規定被下載的超鏈接目標。
href URL 規定鏈接指向的頁面的 URL。
hreflang language_code 規定被鏈接文檔的語言。
media（5） media_query 規定被鏈接文檔是爲何種媒介/設備優化的。
rel text 規定當前文檔與被鏈接文檔之間的關係。
target _blank/parent/_self/_top/framename 規定在何處打開鏈接文檔。
type（5） MIME type 規定被鏈接文檔的的 MIME 類型。 - 什麼是超鏈接
超鏈接（hyper text），按照標準叫法稱爲錨（anchor），是使用 <a> 標籤標記的，可以用兩種方式表示。
錨的一種類型是在文檔中創建一個熱點，當用戶激活或選中（通常是使用鼠標）這個熱點時，會導致瀏覽器進行鏈接。瀏覽器會自動加載並顯示同一文檔或其他文檔中的某個部分，或觸發某些與因特網服務相關的操作，例如發送電子郵件或下載特殊文件等
錨的另一種類型會在文檔中創建一個標記，該標記可以被超鏈接引用
錨點
- 文檔中某一行的記號（鏈接到文檔中的某個位置）
- 定義： <a name="anchor">錨點</a>
- 鏈接： <a herf="#anchor">回到錨點</a>
- 例：
- 屬性
http://www.w3school.com.cn/tags/tag_a.asp
---------------------------------------------------------------------------
列表
作用與組成
- 將具有相似特徵或具有先後順序的幾行文字進行對齊排列
- 組成：列表類型+列表項
- 列表類型：<ol>有序； <ul>無序
- 列表項：<li>
有序列表<ol>
- 有次序
- ol 中只能包含<li>
無序列表
- 無特定次序
- ul 中只能包含<li>
列表嵌套
列表元素嵌套使用可以創建多層成列表
<ul>
<li>列表1
<ol>
<li>列表1-項1</li>
<li>列表1-項2</li>
</ol>
</li>
<li>列表2
<ol>
<li>列表2-項1</li>
<li>列表2-項2</li>
</ol>
</li>
<ul>
---------------------------------------------------------------------------
表格
作用
- 組織結構化信息
- 由從左到右，上到下的單元格組成
- 單元格
- 顯示數據
- 設置頁面佈局
創建
- 定義表格： <table></table>
- 標題： <caption></caption>
- 創建行： <tr></tr>
- 創建單元格： <td></td>
常用屬性
- table元素
- border
- width/height
- align
- cellpadding:單元格邊框與內容之間的間距
- cellspacing：單元格之間的間距 - tr元素
- align/valign - td元素
- align/valign
- width/height
- colspan/rowspan
行分組
表格可以分爲3個部分：表頭、表主體、表尾部
- 表頭： <thead></thead>
- 表主體： <tbody></tbody>
- 表尾行： <tfoot></tfoot>
- 包含一個或多個<tr>元素
不規則表格
設置單元格td 的跨行或者跨列屬性
- 跨列： colspan
- 水平延伸單元格
- 值爲正整數 - 跨行： rowspan
- 垂直延伸單元格數量
- 值爲正整數
示例
<table border="5" width="800px" cellspacing="2px" cellpadding="10px">
<thead align="center" style="background:#ddd;">
<tr>
<td>標題1</td>
<td>標題2</td>
</tr>
<thead>
<tbody align="left" valign="center" style="background:#fff;">
<!--作用於所有子元素 height="50px"-->
<!--無效屬相 width="1000px"-->
<tr height="80px" width="1000px">
<td width="400px">單元格11</td>
<td>單元格12</td>
</tr>
<!--覆蓋table align="right"-->
<tr align="right">
<!--td width取最長屬性 width="600px"-->
<td width="600px">單元格21</td>
<td>單元格22</td>
</tr>
<tr>
<td rowspan=2>單元格31<br><b>跨兩行</b></td>
<td>單元格32</td>
</tr>
<tr>
<td>單元格42<b>撐高換行</b>-----------------------------</td>
</tr>
</tbody>
<tfoot align="center" style="background:#eee;">
<tr>
<td colspan="2">底部<b>跨兩列</b></td>
</tr>
</tfoot>
</table>
表格嵌套
- 嵌套表格
- 單元格中放置另外一個表
- <td>元素中嵌套<table>
---------------------------------------------------------------------------
表單
概述
作用
- 用於顯示、收集信息，並提交到服務器
- 表單有兩個基本組成部分
- 實現數據交互的的可見界元素（文本框、按鈕）
- 提交後表單處理 - 界面元素
- 使用form元素創建表單
- 在form內添加其他表單可以包含的控件元素
表單元素
- 定義表單： <form></form>
- 主要屬性：
- action: 表單被提交時發生的動作（通常爲服務器方的腳步URL【jsp/php】）
- method: 表單數據的提交方式（post/get）
- enctype: 表單數據進行編碼的方式
-name: 表單名稱
表單控件
- 表單可以包含很多不同類型的控件
- 表單控件元素是包含在表單中具有可視化外觀的HTML元素，用於訪問者輸入信息
- 表單控件元素
- input元素： 文本輸入控件、按鈕、單選/複選按鈕、選擇框、文件選擇框、隱藏控件...
- textarea
- select、option
- 其他（label、下拉框）
input元素
input元素
- 用於手機用戶信息
- 單標記： <input/>
- 主要屬性：
- type: 指定輸入字段類型（文本框、複選款）
- value: 控件數據
- name: 控件名稱
文本框與密碼框
- 文本框： <input type="text">
- 密碼框： <input type="password">
- 主要屬性：
- value: 訪問者自由輸入的任何文本
- maxlength： 限制輸入字符數
- readonly: 設置文本只讀
單選、複選框
- 單選框： <input type="radio">
- 複選框： <input type="checkbox">
- 主要屬性：
- value: 文本（提交form時，如果選擇此單選按鈕，value將被髮送到服務器）
- name： 用於實現分組，一組單選/複選框按鈕名稱必須相同
- checked: 設置選中
按鈕
- 提交按鈕： <input type="submit">
- 傳送表單數據到服務器或其他處理程序 - 重置按鈕： <input type="reset">
- 清空表單內容 並 把所有表單控件設置爲初始值 - 普通按鈕： <input type="button">
- 執行客戶端腳本 - 主要屬性：
- value: 按鈕的標題文本
隱藏域
- 隱藏域： <input type="hidden">
- 表單中包含用戶不希望看到的信息
文件選擇框
- 文件選擇框： <input type="radio">
- 選擇上傳文件
其他元素
lebel元素
- 語法：<label>文本</label>
- 主要屬性：
- for: 表示與該元素想聯繫的控件ID，點擊該元素關聯的控件將獲取錄入光標 - 作用：
- 將文本域控件聯繫在一起，點擊文本等效單機控件 - 例
<input type="text" name="test" id="text">
<label for="text">測試for</label>
下拉框
- 分類：下拉框、滾動列表
- select元素： 創建選項框
- name: 選項框命名
- size: 大於1 則爲滾動列表
- multipe: 設置多選 - option元素： 創建選項
- value: 選項值
- selected: 預選中 - 例
<label for="selectT">下拉列表：</label>
<select id="selectT">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
多選列表：<select multiple>
<option value="1">AA</option>
<option value="2">BB</option>
<option value="3">CC</option>
</select>
滾動列表：<select size="2">
<option value="1">AA</option>
<option value="2">BB</option>
<option value="3">CC</option>
<option value="4">DD</option>
<option value="5">EE</option>
</select>
textarea元素
- 多行文本輸入框： <textarea></textarea>
- 主要屬性：
- cols: 指定文本域列數
- rows: 指定文本域行數
- readonly: 只讀
爲控件分組
- fieldset元素： 爲控件分組
- legend元素: 爲分組指定標題
- 示例：
fieldset>
<legend>分組標題</legend>
<label for="id1">輸入1：</label>
<input id="id1" type="text"/>
<label for="id2">輸入2：</label>
<input id="id2" type="text"/>
</fieldset>