美文网首页前端Vue专辑
html标签 全局属性

html标签 全局属性

作者: 岁月静好_不负此生 | 来源:发表于2019-11-19 22:16 被阅读0次

第一部分: 全局属性

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

相关文章

  • 「HTML 」语法

    HTML标签 书写规范标签属性 全局属性 标签分类 标签关系 注释标签 HTML5新语义标签兼容性低版本IE显示问...

  • 【HTML】全局属性:accesskey

    accesskey是html标签里的全局属性。 全局属性(global attribute)用来配置所有元素共有的...

  • HTML HTML5新增标签属性整理

    HTML5 新增属性详解 HTML5 新增标签详解 HTML5 新增全局属性详解

    html标签 全局属性

    第一部分: 全局属性 1.1 html全局属性 1. class: 类 2. style: 行内样式 3. tit...

  • HTML入门笔记1

    Get Started HTML的发明者 HTML起手式 常用的章节标签 全局属性 常用的内容标签 HTML的发明...

  • HTML基础知识

    HTML基础知识 HTML的历史:HTML,XHTML HTML的全局属性:全局标准属性,全局事件属性 HTML的...

  • html属性及事件

    HTML 全局属性 Window 事件属性 针对 window 对象触发的事件(应用到 标签): Form 事...

  • 前端基础总结:HTML基础知识

    HTML基础知识 1、HTML的历史:HTML,XHTML 2、HTML的全局属性:全局标准属性,全局事件属性 3...

  • HTML5全局属性和事件

    摘要: 全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等。HTML5中...

  • HTML常用标签属性及事件属性

    HTML中的标签属性可以赋予标签更多的信息,属性总是以key :value即名称/值对的形式出现。属性可分为全局属...

网友评论

    本文标题:html标签 全局属性

    本文链接:https://www.haomeiwen.com/subject/mitnictx.html