HTML5前期學習準備（一）

HTML簡介

一、html的基本概念

HTML:HyperTextMarket language，超文本標記語言（所謂「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。）是用來描述網頁語言，html使用標記標籤來描述網頁，因此說html是一種標記語言，而不是編程語言。

-----html先知知識-----

在學習HTML以前最早應該瞭解的就是html環境的搭建，那麼必須從編輯器和解析器等方面作一個深刻的瞭解。如今爲大部分開發者青睞的編程軟件有sublime及visual studio code，固然現現在還有不少的集成開發軟件如Dreamweaver等。
而主流的選擇器內核及表明瀏覽器「Chrome、Safari、Firefox、Opera、IE（IEtest）；Firefox是開源的Presto（迅速的)表明做品Opera，Prefox是由Opera Software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。Webkit Safari內核，Chrome內核原型，他是蘋果公司本身的內核，也是蘋果的Safari瀏覽器使用的內核Blink由Google和Opera Software開發的瀏覽器排版引擎。」

---

二、html文檔的組成

完整的HTML文檔是有多個HTML元素按照必定的方式組成的（此處爲html5文檔），以下圖：

除了形式上較之前有所改變html5還增長了不少新的特性，好比：

• 用於繪畫的 canvas 元素
• 用於媒介回放的 video 和 audio 元素
• 對本地離線存儲的更好的支持
• 新的特殊內容元素，好比 article、footer、header、nav、section
• 新的表單控件，好比 calendar、date、time、email、url、search

三、html元素組成

HTML元素分爲單標籤元素、雙標籤元素及屬性，而元素的分類則有塊級元素行內元素和其餘元素。

1. 塊級元素
獨佔一行空間，用來佈局段落，列表，導航菜單，腳註等結構，不要將塊級元素嵌套在行內元素中。

<p>this is paragraph1</p>            
             <p>this is paragraph2</p>

2. 行內元素
與其餘元素共享一行空間，通常被嵌套在塊級元素中，一般做爲段落的一部分出現

<p>you are <strong>strong</strong></p>

3. 其餘元素（空元素、替代元素等）
空元素：只包含單個標籤，一般用於在文檔中插入部份內容，例如img

<div><img src="my.jpg" alt=""></div>

替代元素：替代元素已經脫離了CSS的範疇，它們的表現不依賴CSS，典型的替換元素有<img>，<object>，<video>，<textare>，<input>，<audio>，<canvas>等。

---

剛起步階段主要得學習html的標籤使用方法，而在html5中有不少的標籤。好比 p,h1,h2,h3,h4,h5,h6,ul,ol,dl,ul,img,a,table,form，div,span等

還有一些不經常使用標籤（部分已被html5捨棄但書寫並不出現錯誤）

• abrr 縮略語
• b不帶任何強調意義的標記一段文字，加粗
• strong 表示重要內容，加粗
• em 表示着重強調一段文字，傾斜
• i不帶任何強調意義的標記一段文字，傾斜
• cite 表示做品標題，將做品名傾斜
• del 表示從文檔中刪除的文字
• s表示文字已經再也不準確，也是刪除線
• u不帶強調意義的給一段文字加下劃線
• ins 表示加入文檔的文字，也是下劃線
• small 表示小號字體
• sub 表示下標文字
• sup 表示上標文字
• q表示引自其它的內容，被q標籤修飾的本身加引號表示引用
• pre 表示格式化一段文字，也能夠用來引入一段代碼
• span css中使用的添加樣式的模塊
• div會換行，span不會換行
• <!-- -->註釋

---

表格及表單

前期學習還有一個重要的知識點便是HTML中表格和表單的使用。

1）表格（Table）：

• table 聲明一個表格屬性:
  1.border 邊框線寬度，默認爲0
  2.width 寬度
  3.cellpadding 單元格內邊距，文字與內邊框的距離 如：cellpadding=10
  4.cellspacing 單元格間距 默認爲1 - 列表項目
• tr 行
  align（表格的排列方式/對齊方式）：center、left（默認）、right
• td 列
  1.width/height
  2.colspan 合併列，跨列向右跨
  3.rowspan 合併行，跨行向下跨
• th 表頭，會加粗，而且會居中
• caption 表格的標題
• 給表格劃分區域(不經常使用)
  thead、tbody（必須寫）、tfoot
• 語義元素(很少用)
  1.h1~h6:表示標題
  2.header:表示頭部
  3.nav:表示導航
  4.footer:表示尾部
  5.address:表示文檔或article的聯繫信息
  6.aside:表示側邊欄
  7.section:表示主題區域
  8.article:表示一段獨立的內容

2）表單（Form）：做用是能夠和服務器進行交互
1、Form中的屬性:
1.action:定義一個URL，當點擊提交按鈕時，向這個URL發送數據
2.method(get/post):用於向action URL發送數據的HTTP方法。默認是get。

注：get和post區別：
1）get方式表單封裝的數據直接顯示在url上。post方式數據不顯示在url上。
2）get方式安全級別較低，post級別較高。
3）get方式數據的長度，post支持大數據。•input 標籤:定義輸入字段，用戶可在其中輸入數據。

2、input 中 type屬性:
1）type=text 文本框
2）type=password 密碼
3）type=radio 單選按鈕 name屬性
4）type=checkbox 多選按鈕
單選和多選都有默認值：checked="checked"
5）type=reset 重置按鈕
6）type=submit 提交按鈕
7）type=file 上傳文件的輸入項
8）type=button 按鈕
9）type=image 圖片（也是提交按鈕，）
10）type=hidden 隱藏標籤（用戶不用看到的，可是我們開發時必需要使用的，能夠把數據封裝到隱藏標籤中，和表單一塊兒提交到後臺）

3、其餘標籤 一、選擇：select /select>選擇下拉框 option 表示內容 /option 二、文本域textarea textarea 文本內容 /textareavalue屬性: a.對於按鈕、重置按鈕和確認按鈕：定義按鈕上的文本。 b.對於圖像按鈕：定義傳遞向某個腳本的此域的符號結果。 c.對於複選框和單選按鈕：定義 input 元素被點擊時的結果。 d.對於隱藏域、密碼域以及文本域：定義元素的默認值。 注：不能與 type="file" 一同使用。與 type="checkbox" 和 type="radio" 一同使用時，此元素是必需的。•name屬性:爲 input 元素定義惟一的名稱。