html标签 全局属性

第一部分: 全局属性

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标签 和 表单元素

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,815评论 0 0
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,026评论 1 25
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 1,308评论 0 10
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,219评论 1 41
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,039评论 0 3