html 隨意整理
# HTML基本語法
### HTML標簽
* 單標簽 `<標簽名>內容<標簽名/>`
* 雙標簽 `<標簽名>` 或 `</標簽名>`
* 也叫 元素
### 屬性
* 屬性屬於標簽
* 一個標簽可以有多個屬性，每個屬性有不同的意義
* 屬性值最好寫在雙引號中
### 代碼規範
* 縮進 Tab或4個空格
### 註釋
`<!-- 註釋內容 -->`
# HTML 主體結構標簽
### 文檔聲明
* `<!doctype html>`
### html標簽
* `<html></html>`
### head標簽
* `<head></head>`
* 裏面會包含 諸如頁面標題，搜索引擎信息等相關的標簽
### body標簽
* `<body></body>`
* 頁面的主體內容
* 屬性
* background
* bgcolor
* text
* link 超鏈接默認顏色
* vlink 點擊過後的顏色
* alink 正在點擊的顏色
# head頭部標簽
### 標簽
* `<title></title>` 定義標題
* `<meta />`
* `<link href=""></link>`
### meta功能
* 定義字符集編碼
* `<meta charset="utf-8">`
* `<meta http-equiv="content-type" content="text/html;charset=utf-8">`
* 刷新或跳轉
* `<meta http-equiv="refresh" content="3">`
* `<meta http-equiv="refresh" content="3;url=http://unclealan.cn">`
* 設置關鍵字
* `<meta name="keywords" content="每個次用英文,隔開">`
* 設置頁面描述
* `<meta name="desctiption" content="80字之內一段話">`
### 定義網站標題圖標
* `<link rel="shortcut icon" href="圖片地址.ico">`
# 格式排版標簽
### 換行標簽 br
* `<br />`
### 分隔線 hr
* `<hr />`
* 語義：段落與段落之間的分割
* 屬性
* width
* size
* align
* noshade
### 段落標簽 p
* `<p></p>`
* 語義：表示段落
* 屬性
* align : left/right/center
### 原樣輸出標簽 pre
* `<pre></pre>`
* 語義：需要原格式輸出 顯示代碼
### 標題標簽 hr
* `<h2></h1>` 一級標題
* `<h2></h2>` 二級標題
* `<h3></h3>` 三級標題
* `<h4></h4>` 四級標題
* `<h5></h5>` 五級標題
* `<h6></h6>` 六級標題
### 居中標簽
* `<center></center>`
* 不建議使用
# HTML實體
* ` ` 空格
* `<` <
* `>` >
* `"` “ 引號
* `©` ? 版權
* `¥` ￥
* `×` ×
* `÷` ÷
* `®` ?
# 列表標簽
* ul 雙 無序列表 屬性 type(disc(默認)/square/circle)
* li 雙 列表項 屬性 type 值同上
* ol 雙 有序列表 屬性 reversed(降序) type(1/a/A/I) start(值數字)
* dl 雙 定義列表
* dt 雙 列表項目的標題
* dd 雙 列表項目的描述
# 文本標簽(雙)
* em 強調 表現為斜體
* strong 強調 表現為加粗
* cite 引證，距離 書名 電影名
* dfn 定義項目
* kbd 鍵盤按鍵
* abbr 定義縮寫 配合title
* bdo 配合 dir屬性(ltr, rtl) 改變文字書寫方向
* code 定義代碼
* var 定義變量
* del 已經刪除的 刪除線
* ins 當前的 下劃線
* sup 上標文字
* sub 下標文字
* q 引用 短
* blockquote 引用 長
* address 定義地址
* b 加粗 強調
* i 斜體 科學專業術語
* u 下劃線 定義與其他文本不同風格的文本
# 超鏈接
### URL
* 統一資源定位符
* 萬維網的每一個文件都有一個URL
### a標簽
* href 值 URL
* target 新網頁從哪個窗口打開 _self / _blank
* title 提示
* download 下載 H5自增
### 路徑
* 相對路徑 ./ ../
* 絕對路徑
### 錨點
* `<a name="錨點的名字"></a>`
* 使用超鏈接 `#` 跳轉到指定錨點
# 圖像
### img標簽 屬性
* src
* alt 圖片無法顯示時顯示的文字
* title
* border 值 數字
* width 圖片寬度
* height 圖片高度
* usemap
### 常見的圖片格式
* jpg/jpeg
* gif
* png
### 圖片熱點 圖片映射
* map id/name
* area shape(circle rect poly) href title target ...
# 表格
### table 標簽
* border
* width
* height
* cellspacing 單元格之間的間隙 默認2
* cellpadding 單元格和單元格內容之間的間隙 默認0
* align
* bgcolor
* background
### tr標簽 表示一行
* align 行內文字的水平對齊方式 left/center/right
* valign 行內文字的垂直對齊方式 top/middle/bottom
* height 行高度
* bgcolor
### td標簽 表示單元格
* align
* valign
* width
* height
### th標簽 表頭
屬性 同 td
### thead標簽
### tbody標簽
### tfoot 標簽
### caption標簽 定義表格標題##
### colgroup/col
# 表單
### form標簽
* action
* method 值 get/post 默認get
* target
* enctype
### input標簽 單
* name 屬性
* type 屬性
* text 默認 文本框
* password 密碼框
* radio 單選框
* checkbox 復選框
* file 文件上傳
* submit 提交按鈕
* reset 重置按鈕
* button 普通按鈕
* image 把圖片作為提交按鈕樣子 不推薦
* hidden 隱藏域
* value屬性 默認值 type值不同vlaue的意義不一樣
* size 屬性 控制輸入框寬度 適用於 text/password
* maxlength 屬性 最大輸入字符個數 適用與text/password
* checked 屬性 默認選中 適用於 radio/checkbox
* readonly 只讀 適用於text/password
* disabled 表示不可用
### button元素
* type屬性
* submit（默認）
* reset
* button
### select 標簽
* name
* size
* multiple 設置多選
* disabed
### option 標簽
* value
* disabled
* selected 默認選項
### optgroup 對select下的option進行分組
### textarea 文本域
* name
* disabled
* rows 高度
* cols 寬度
* readonly
### label
* for 表單控件的ID
### fieldset 表單的外框
### legend 標題
### 框架分幀
* iframe
### HTML全局屬性
* title
* id
* class
* dir
* style
07.31
# H5新增標簽
### 結構標簽 （雙）
* header 頭面 頁面頭部 section的頭部
* footer 頁腳
* nav 導航
* aside 側邊欄
* main 主體內容
* section 小節
* article 文章
* details 屬性open
* summary
* dialog 對話框 屬性 open
### 文本標簽
* mark 標記
* time 時間
* meter 度量 溫度/電量/容量
* 屬性 max/min/value/low/high/optimum
* progress 進度 完成了多少
* 屬性 max/value
* wbr 單詞內換行 單
* ruby 漢語拼音
* rt 漢語拼音
### 圖像
* figure 獨立文檔流 如文章插圖
* figcaption figure的標題
* canvas 畫布
### 列表標簽 兼容性差
* menu
* menuitem
* command
### 多媒體標簽
* video
* src
* width
* height
* controls
* autoplay
* muted
* loop
* poster
* preload
* audio
* src
* controls
* autoplay
* loop
* muted
* preload
* source 單
* src
* type 指定音視頻的 MIME類型
# MIME類
### 圖片
* .jpg image/jpeg
* jpeg image/jpeg
* .gif image/gif
* .png image/png
### 文本類
* .html text/html
* .css text/css
### 可執行文件
.exe application/
### 表單
* keygen
* datalist
* output 輸出
# H5智能表單
### input 新增 type值
* email
* url
* number
* range
* tel
* search
* color
* date
* month
* week
* time
* datetime-lcoal
### Form元素 新增的 屬性
* autocomplete 值 off/on
* novalidate 不進行驗證
### 表單控件新增的屬性
* pattern input/textarea
* placeholder input/textarea
* autofocus
* autocomplete off/of
* required
### 提交按鈕 新增屬性
* formaction
* formmethod
* formtarget
* formectype
* formautocomplte
* formnovalidate
# H5新增全局屬性
* contenteditalbe 是否可編輯 true/false
* contextmenu
* spellcheck 是否語法檢查 true/false
* draggable 是否拖動 true/false
* dropzome
* translate 是否翻譯 yes/no
* hidden 隱藏 不需要值
* data-*
# 條件註釋
### 基礎運算符
* lt 小於
* gt 大於
* lte 小於等於
* gte 大於等於
* ！ 不等於
### 用法
<!--[if 運算符 IE 版本]>
<![endif]-->
# 兼容原則
* 優雅降級
* 漸進增強
html 隨意整理