首页 > 代码库 > html 随意整理
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="http://www.mamicode.com/图片地址.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 随意整理