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

# 列表标签
* 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]-->


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



<!--if lt IE 9]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]-->


优质内容筛选与推荐>>
1、hibernate - 基础框架源码 - 百度云
2、MySQL复制表-SELECT INTO FROM
3、自定义js标签库
4、第一篇博客,随笔留念
5、炒股与哲学


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号