HTML5學習

編輯器

推薦： IDEA https://www.jetbrains.com/idea/

必要學習知識

1. HTML
2. XHTML
3. CSS
4. CSS3
5. JavaScript
6. JQuery
7. HTML5

HTML5新特徵

1. canvas標籤
2. video和audio
3. 本地離線存儲的更好支持
4. 特殊內容元素 article footer header nav
5. 新的表單控件 calendar date time email
6. 瀏覽器支持

HTML樣式

標籤

<style>:樣式定義
<link> :資源引用 

屬性

rel = "stylesheet" :外部樣式表
type = "text/css":引入文檔的類型
margin-left :邊距

三種樣式插入方式

1. 外部樣式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

1. 內部樣式表

<style type = "text/css">
body {backgroud-color:red}
p{margin-left:20px}
</style>

1. 內聯樣式表

<p stype="color:red">

HTML列表

1. 無序列表
   <ul> </ul> 效果:disc circle square
   <li> </li>
2. 有序列表
   <ol> </ol> 效果:Aa,I,i,start
   <li> </li>
3. 嵌套列表
   嵌套有序和無序列表
4. 自定義列表
   <dl> <dt> <dd>

HTML5表單

表單作用
獲取不同類型的用戶輸入

常用的表單標籤

<form>:表單
<input>:輸入域
<textarea>:文本域
<label>:控制標籤
<filedset>:定義域名 
<legend>:域的標題
<select>:選擇列表
<optgroup>:選項組
<option>:下拉列表中的選項
<button>:按鈕

常用表單

複選框

<input type = "checkbox">

單選按鈕

<input type = "radio" name = "指定組">

下拉列表

<select>
        <option>選項一</option>
        <option>選項二</option>
</select>

文本域

<textarea cols="20" row="30">在此輸入信息</textarea>

創建按鈕

<input type = "button" value="按鈕">