第一部分: 全局属性
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标签 和 表单元素