第一部分: 全局属性
1.1 html 全局属性
1. class: 类
2. style: 行内样式
3. title: 标题
原生 title 属性会有一定时间的延时作用, 不常用
4. id: 唯一 ID
命名规则:
必须以字母 A-Z 或 a-z 开头
其后的字符: 字母(A-Za-z), 数字(0-9), 连字符("-"), 下划线("_"), 冒号(":") 以及点号(".")
值对大小写敏感
5. tabindex: 设置元素的 Tab 键控制次序.
属性值: number => 规定元素的 tab 键控制顺序(1 是第一).
6. dir: 文字方向
属性值: ltr(默认, 从左到右) | rtl(从右到左) | auto( 让浏览器根据内容来判断文本方向. 仅在文本方向未知时推荐使用)
通过 CSS 一样可以控制文本方向.
7. lang: 元素内容的语言
8. accesskey: 访问元素的键盘快捷键.
规定激活 (使元素获得焦点) 元素的快捷键.
注意: 在不同操作系统中不同的浏览器中访问快捷键的方式不同的
1.2 html5 全局属性
1. data-*: 自定义属性
只是一个规范, 在 JS 中就可以通过 dataset 对象进行操作
2. draggable: 是否可以拖动
配合 HTML5 的 拖放来实现元素的拖放
属性值: true(可拖动) | false(不可拖动) | auto (根据浏览器的默认特性, 有些元素默认是可以拖动的)
3. contenteditable: 是否可编辑
常用来处理富文本
属性值: true(可编辑) | false(不可编辑)
4. hidden: 是否隐藏
使用该属性, 则会隐藏元素, 行为类似于 display: none;
5. 无用属性 或 兼容性较差属性
MDN 还有一些实验性全局属性, HTML 也开始倾向于原生组件方式.
contextmenuNew 指定一个元素的上下文菜单. 当用户右击该元素, 出现上下文菜单
dropzoneNew 指定是否将数据复制, 移动, 或链接, 或删除
spellcheckNew 检测元素是否拼写错误
translateNew 指定是否一个元素的值在页面载入时是否需要翻译
第二部分: HTML 标签
2.1 基础标签
1. <!DOCTYPE> 定义文档类型.
2. <HTML> 定义一个 HTML 文档
3. <title> 为文档定义一个标题
4. <body> 定义文档的主体
5. <h1> to <h6> 定义 HTML 标题
6. <p> 定义一个段落
7. <br> 定义简单的折行.
在 HTML 中,<br> 标签没有结束标签.
8. <hr> 定义水平线.
在 HTML 中,<hr> 标签没有结束标签.
9. 定义一个注释
2.2 格式标签
1. <b> 定义粗体文本.
2. <address> 定义文档作者或拥有者的联系信息.
语义化标签, 效果可以使用 CSS 实现
3. <em> 定义强调文本.
4. <i> 定义斜体文本.
5. <pre> 定义预格式文本
6. <s> 定义加删除线的文本.
7. <u> 定义下划线文本.
8. <del> 定义被删除文本.
9. 不常用标签
- <abbr>
- 定义一个缩写.
- <bdo>
- 定义文本的方向.
- <blockquote>
- 定义块引用.
- <cite>
- 定义引用(citation).
- <code>
- 定义计算机代码文本.
- <dfn>
- 定义定义项目.
- <ins>
- 定义被插入文本.
- <kbd>
- 定义键盘文本.
- <q>
- 定义短的引用.
- <samp>
- 定义计算机代码样本.
- <small>
- 定义小号文本.
- <strong>
- 定义语气更为强烈的强调文本.
- <sub>
- 定义下标文本.
- <sup>
- 定义上标文本.
- <var>
- 定义文本的变量部分.
10. H5 不支持属性
- <acronym>
- HTML5 不再支持. 定义只取首字母的缩写.
- <big>
- HTML5 不再支持. 定义大号文本.
- <center>
- HTML5 不再支持. HTML 4.01 已废弃. 定义居中文本.
- <font>
- HTML5 不再支持. HTML 4.01 已废弃. 定义文本的字体, 尺寸和颜色
- <strike>
- HTML5 不再支持. HTML 4.01 已废弃. 定义加删除线的文本.
- <tt>
- HTML5 不再支持. 定义打字机文本.
2.3 框架标签
1. <iframe> 定义内联框架.
提示: 您可以把需要的文本放置在 <iframe> 和 </iframe> 之间, 这样就可以应对不支持 <iframe> 的浏览器.
属性值:
width: 定义宽度
height: 定义高度
src: 显示文档的 URL
name: 规定框架的名称
...
2. H5 不支持属性
- <frame>
- HTML5 不再支持. 定义框架集的窗口或框架.
- <frameset>
- HTML5 不再支持. 定义框架集.
- <noframes>
- HTML5 不再支持. 定义针对不支持框架的用户的替代内容.
2.4 图像标签
1. <img> 定义图像
属性值:
alt: 规定图像的替代文本.
width: 图像宽度
height: 图像高度
src: 图像链接
ismap: 将图像规定为服务器端图像映射.
usemap: 将图像定义为客户器端图像映射.
crossorigin(H5 属性): 设置图像的跨域属性
2. <map> 图像映射
用于客户端图像映射. 图像映射指带有可点击区域的一幅图像.
3. <area> 图像地图内部的区域.
- <area>
- 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像).
- <area>
- 元素始终嵌套在
- <map>
- 标签内部
2.5 链接标签
1. <a> 链接
提示: 如果没有使用 href 属性, 则不能使用 hreflang,media,rel,target 以及 type 属性.
属性值:
href: 规定链接的目标 URL.
target: _blank | _parent | _self | _top | framename 规定在何处打开目标 URL. 仅在 href 属性存在时使用.
rel: 规定当前文档与目标 URL 之间的关系.
hreflang: 规定目标 URL 的基准语言. 仅在 href 属性存在时使用. 其仅提供建议, 并没有内置的功能
type(New): 规定目标 URL 的 MIME 类型 其仅提供建议, 并没有内置的功能.
media(New): 规定目标 URL 的媒介类型. 默认值: all. 仅在 href 属性存在时使用.
download(New): 此属性指示浏览器下载 URL 而不是导航到它, 因此将提示用户将其保存为本地文件. 如果属性有一个值, 那么此值将在下载保存过程中作为预填充的文件名(如果用户需要, 仍然可以更改文件名). 此属性对允许的值没有限制, 但是 / 和 \ 会被转换为下划线. 大多数文件系统限制了文件名中的标点符号, 故此, 浏览器将相应地调整建议的文件名.
此属性仅适用于同源 URL
尽管 HTTP URL 需要位于同一源中, 但是可以使用 blob: URL 和 data: URL , 以方便用户下载使用 JavaScript 生成的内容(例如使用在线绘图 web 应用程序创建的照片)
如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名, HTTP 头属性优先于此属性
如果 HTTP 头属性 Content-Disposition 被设置为 inline(即 Content-Disposition='inline'), 那么 Firefox 优先考虑 HTTP 头 Content-Dispositiondownload 属性
2. <link> 定义文档与外部资源的关系.
<link> 标签最常见的用途是链接样式表, 但不仅限于这个作用. 此外也可以被用来创建站点图标(比如 PC 端的 "favicon" 图标和移动设备上用以显示在主屏幕的图标) .
注意: 此元素只能存在于 head 部分, 不过它可出现任何次数.
属性值:
href 定义被链接文档的位置.
hreflang 定义被链接文档中文本的语言.
media 规定被链接文档将显示在什么设备上.
rel 必需. 定义当前文档与被链接文档之间的关系.
type 规定被链接文档的 MIME 类型.'sizes(New) 定义了链接属性大小, 只对属性 rel="icon" 起作用.
2.6 列表标签
1. <ul> 无序列表
2. <ol> 有序列表
3. <li> 列表项
4. <dl> 定义列表
5. <dt> 定义列表中的项目.
6. <dd> 定义列表中项目的描述.
7. <menu> 菜单列表.
浏览器支持度很差
2.7 表格
1. <table> 表格
属性值:
border 规定表格单元是否拥有边框.
2. <caption> 表格标题.
3. <th> 表头单元格.
属性值 :
colspan 规定表头单元格可横跨的列数.
rowspan 规定表头单元格可横跨的行数.
4. <tr> 表格中的行.
5. <td> 表格中的单元.
属性值 :
colspan 规定表头单元格可横跨的列数.
rowspan 规定表头单元格可横跨的行数.
6. <thead> 表头内容.
7. <tbody> 表格中的主体内容.
8. <tfoot> 表格中的表注内容(脚注).
9. 其他标签
- <col>
- 定义表格中一个或多个列的属性值.
- <colgroup>
- 定义表格中供格式化的列组.
2.8 样式 / 节 标签
1. <style> 文档的样式信息.
属性值:
media 为样式表规定不同的媒体类型.
type 规定样式表的 MIME 类型.
2. <div> 定义文档中的节.
3. <span> 定义文档中的节.
2.9 元信息
1. <head> 定义关于文档的信息
- <head>
- 元素是所有头部元素的容器.
- <head>
- 元素必须包含文档的标题(title), 可以包含脚本, 样式, meta 信息 以及其他更多的信息.
能用在 < head > 元素:
- <title>
- (在头部中, 这个元素是必需的)
- <style>
- <base>
- <link>
- <meta>
- <script>
- < noscript >
2. <meta> 定义关于 HTML 文档的元信息.
<meta> 标签提供了 HTML 文档的元数据. 元数据不会显示在客户端, 但是会被浏览器解析.
META 元素通常用于指定网页的描述, 关键词, 文件的最后修改时间, 作者及其他元数据.
3. <base> 定义页面中所有链接的默认地址或默认目标.
为页面上的所有的相对链接规定默认 URL 或默认目标, 一份中只能有一个 <base> 元素
如果指定了多个 < base> 元素, 只会使用第一个 href 和 target 值, 其余都会被忽略.
属性值:
href 规定页面中所有相对链接的基准 URL.
target 规定页面中所有的超链接和表单在何处打开. 该属性会被每个链接中的 target 属性覆盖.
2.10 程序标签
1. <script> 定义客户端脚本.
属性值:
charset 规定在脚本中使用的字符编码(仅适用于外部脚本).
defer 规定当页面已完成解析后, 执行脚本(仅适用于外部脚本).
src 规定外部脚本的 URL.
type 规定脚本的 MIME 类型.
async(New) 规定异步执行脚本(仅适用于外部脚本).
2. <noscript> 针对不支持客户端脚本的用户的替代内容.
noscript 元素用来定义在脚本未被执行时的替代内容(文本).
3. <object> 定义嵌入的对象.
表示引入一个外部资源, 这个资源可能是一张图片, 一个嵌入的浏览上下文, 亦或是一个插件所使用的资源.
此元素允许您规定插入 HTML 文档中的对象的数据和参数, 以及可用来显示和操作数据的代码.
<object> 标签用于包含对象, 比如图像, 音频, 视频, Java applets,ActiveX,PDF 以及 Flash.
属性值:
data 规定对象使用的资源的 URL.
height 规定对象的高度.
width 规定对象的宽度.
type 规定 data 属性中规定的数据的 MIME 类型.
name 为对象规定名称. 用于在 JavaScript 中引用 <object> 元素
usemap 规定与对象一同使用的客户端图像映射的名称.
4. <param> 定义对象的参数.
可为包含它的 < object> 或者 <applet>(已弃用标签) 标签提供参数.
属性值: 一起使用来规定由 <object> 标签规定的插件的参数.
value 描述参数值.
name 定义参数的名称(用在脚本中).
后记
不包含 H5 标签 和 表单元素
来源: http://www.jianshu.com/p/4456708d655c