標籤：用法 定位 drop 隱藏 target center maxlength padding 代碼
# 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 隨意整理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
