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实体
* ` ` 空格
* `<`        <
* `&gt`       >
* `&quot`   “ 引号
* `&copy`   © 版权
* `&yen`    ¥
* `×` ×
* `÷` ÷
* `®`    ®

# 列表标签
* 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 大于等于
* ！   不等于

### 用法

   

# 兼容原则
* 优雅降级
* 渐进增强