哪些属性不是html的全局属性

1. 全局属性概述

全局属性是指适用于HTML的所有元素的属性。它们在所有元素中都可用(但并非所有元素都支持所有全局属性)。

全局属性提供了一种通用的方法,使开发人员能够在应用程序中为所有HTML元素指定相同的属性。这可以减少代码量,并支持代码的可维护性。

HTML5为所有元素提供了一组全局属性。全局属性的值可将其应用于HTML文档中的任何元素。

以下是全局属性的完整列表:

accesskey

class

contenteditable

contextmenu

data-*

dir

draggable

dropzone

hidden

id

lang

spellcheck

style

tabindex

title

translate

上述属性是HTML中的标准全局属性。不过,还有一些属性不是HTML的全局属性。接下来,我们将探讨这些非全局属性。

2. 非全局属性

2.1. charset属性

charset是一个非全局属性,它用于指定HTML文档的字符编码。它通常与meta标签一起使用,如下所示:

<meta charset="UTF-8">

charset属性可以用于以下标签:

body

iframe

script

style

注意:虽然HTML5规范中将charset定义为非全局属性,但在实践中,charset应该始终出现在HTML文档的<head>标签中,而不是在其他标记中。

2.2. hreflang属性

hreflang是一个定义在link和a标签中的属性,它用于指定超链接文档的语言。这有助于搜索引擎正确地检索文档,并将文档提供给对目标语言感兴趣的用户。

以下是hreflang属性的用法示例:

<a href="https://example.com/" hreflang="en">English Site</a>

上面的示例指定了一个指向英文网站的超链接,hreflang属性的值设置为“en”。如果用户使用的是英语语言环境,搜索引擎会优先显示此链接。可以在HTML中的以下标签中使用hreflang属性:

a

area

link

2.3. rel属性

rel属性是用于指定当前文档与链接文档之间的关系的属性。可以在以下标签中使用rel属性:

a

area

link

以下是rel属性的一些常见值:

alternate - 当前文档是另一个文档的代替版本

author - 链接的文档的作者

bookmark - 文档的书签

help - 链接的文档是帮助文档

license - 文档的许可证

next - 下一文档(例如,下一页或下一章)

nofollow - 将关联文档视为不同的站点,因此不应传递链接权重

noreferrer - 不应该传递引用者的HTTP引用头

noopener - 不应该传递没有原始窗口关系的窗口的名称或其他识别信息

prev - 上一文档(例如,上一页或上一章)

search - 搜索结果列表

tag - 与文档关联的标记或关键字列表

2.4. sizes属性

sizes属性被用于在响应式Web设计中指定图像在不同屏幕分辨率下的大小。可以在<img>标签和<source>标签中使用sizes属性:

<img src="example.jpg" sizes="(max-width: 600px) 100vw, (max-width: 960px) 50vw, 33vw">

上面的示例中,图像的大小取决于屏幕大小。在最大宽度为600px的屏幕上,图像将以100%的视窗宽度显示。在最大宽度为960px的屏幕上,图像将以50%的视窗宽度显示。在大于960px的屏幕上,图像将以33%的视窗宽度显示。

2.5. srcset属性

srcset属性用于指定一组备选图像,以及它们在大于1像素比率的屏幕上显示的大小。可以在<img>标记和<source>标记中使用srcset属性,如下所示:

<img src="image1-small.jpg" srcset="image1-small.jpg 300w, image1-medium.jpg 600w, image1-large.jpg 900w">

上述示例将指定三个备选图像,分别将显示在300px,600px和900px宽度时。

2.6. type属性

type属性用于指定链接文档的MIME类型。可以在以下标记中使用type属性:

link

script

style

a

area

input

source

track

以下是type属性的一些常用值:

text/css - CSS样式表文件

text/javascript - JavaScript代码文件

application/javascript - JavaScript代码文件

text/html - HTML文档

image/jpeg - JPEG图像文件

image/png - PNG图像文件

video/mp4 - MP4视频文件

audio/mpeg - MPEG音频文件

application/pdf - PDF文件

2.7. media属性

通常与<link>标记中的rel属性一起使用,以定义样式表如何适应不同的输出设备。media属性在媒体查询中也很有用,它可以根据需要动态地添加、删除或修改页面上的内容。

以下是media属性的用法示例:

<link rel="stylesheet" href="style.css" media="(max-width: 600px)">

上述示例指定了一个最大宽度为600px的媒体查询,并将链接到样式表文件style.css。如果页面的视口宽度小于或等于600px,则应用此样式表。

3. 结论

本文介绍了HTML中的非全局属性。这些属性不会适用于HTML中的所有元素,而是仅适用于特定的元素。了解这些属性可以帮助开发人员更好地理解HTML文档结构,并获得Web开发的更多实践经验。