html5标签属性ref_HTML5数据标签和属性

最新推荐文章于 2024-09-04 13:51:32 发布

cungui5726

最新推荐文章于 2024-09-04 13:51:32 发布

阅读量3k

点赞数

文章标签： java python css javascript html ViewUI

原文链接：https://thenewcode.com/490/The-HTML5-data-tag-and-attribute

版权

html5标签属性ref

What if I told you that it was possible for you to make an HTML attribute with any name you wanted, set to any value, while always being assured that it was valid code?

如果我告诉过您，可以始终确保它是有效的代码，那么可以使用所需的任何名称，设置为任何值来创建HTML属性怎么办？

“Silly Dudley!” you might say. “That’s impossible! I know HTML5 is a lot looser than earlier versions of the language, but it’s not freeform poetry! You can’t just make up your own attributes!”

“傻傻的达德利！” 你可能会说。 “这不可能！我知道HTML5比该语言的早期版本宽松得多，但它不是自由形式的诗歌！您不能仅仅弥补自己的属性！”

Actually, you can. There are just two conditions:

其实可以。只有两个条件：

The attribute name has to start with data-
属性名称必须以data-开头-
The name you use has to follow web naming conventions.
您使用的名称必须遵循Web命名约定。

That’s it. Still don’t believe me? Okay: fire up your editor of choice, make a valid HTML5 page, and enter this in the <body>:

而已。还是不相信我？好的：启动您选择的编辑器，创建一个有效HTML5页面，然后在<body>输入以下内容：

<h1 data-holyHaleakala="big mojo">Heading 1</h1>

Then go ahead and validate that bad boy. I’ll wait.

然后继续验证那个坏男孩。我会等。

Yes, it really works. You can even data as an element:

是的，它确实有效。您甚至可以将data作为元素：

<data>content</data>

Now that we’ve verified that fact, what are the data tag and attribute useful for? While articles here will delve into practical code, I’ll provide an example in this one:

既然我们已经验证了这一事实，那么数据标签和属性有什么用？尽管此处的文章将深入研究实用代码，但我将在其中提供一个示例：

You have images on your site that could be inappropriate for work environments or children. You want to load those images onto the page, but not show them by default; instead, you’ll have the user indicate that they want to see them by using a toggle switch integrated into the UI of your site.

您网站上的图像可能不适合工作环境或儿童。您希望将这些图像加载到页面上，但默认情况下不显示它们；取而代之的是，您将使用集成到您网站的用户界面中的切换开关，让用户指示他们希望看到它们。

解 (Solution)

Create a data attribute with an appropriate name and value, and apply it to those particular images:

创建具有适当名称和值的data属性，并将其应用于那些特定的图像：

<img src="hot-koala-action.jpg" data-nsfw="true">

Then, in your CSS, use an attribute selector to turn them off by default:

然后，在CSS中，使用属性选择器默认将其关闭：

img[data-nsfw=true] {
	display: none;
}

You could then use JavaScript, CSS, or a combination thereof to make the NSFW images visible when the user indicated that they wished to see them.

然后，当用户指示希望查看NSFW图像时，可以使用JavaScript ，CSS或其组合使NSFW图像可见。

Note that this is not an absolutely foolproof solution, as someone with enough knowledge could simply block CSS or JavaScript for the page entirely, and thus see the images. The only absolutely safe route would be turning the images on via a server-side language such as PHP).