美文网首页前端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标签 全局属性

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