html[Attributes Style]什么意思

最新推荐文章于 2022-09-15 11:05:38 发布

明月几时有666

最新推荐文章于 2022-09-15 11:05:38 发布

阅读量2.3k

点赞数 5

分类专栏： # CSS 文章标签： Attributes Style css

本文链接：https://blog.csdn.net/gao_zhennan/article/details/126188970

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言：我个人是一个执着喜欢钻牛角尖的人，即使遇到的问题并不影响我继续学习，但是不弄清楚它，心里感谢很不舒服。在遇到该问题时，我首先去网络上寻找答案，没想到全网就找到这一个解答：html[Attributes Style]是什么意思？，回答有点儿简单，没有解决我的问题。于是，我去“外面”找答案，也只找到了这一个解答：What does -webkit-locale mean in css? ，同样没有完全解决我的疑惑。不过，它们有很多值得参考的内容。最后，在查找了很多官方文档和其他相关网站后，才有了本篇文章。

文章目录

一、问题发生
二、问题分析
- 1、Attributes Style是什么样式
- 2. -webkit-locale=en 有什么作用
三、拓展知识
- 1、规范属性、试验性属性、私有属性
- 2. Chrome浏览器中的CSS样式来源

一、问题发生

当我使用Google Chrome浏览器检查html元素时，发现了如下图所示的样式。我并没有在html代码中显式的书写该样式，这应该是Chrome浏览器背地里添加的样式。

在这里插入图片描述

二、问题分析

我在看到这个样式时，我首先产生的问题是：**[Attributes Style]**是什么意思？其次产生的问题是: -webkit-locale有什么作用？接下来的内容主要围绕这两个问题展开。

1、Attributes Style是什么样式

在回答这个问题之前，我们先回顾下元素属性的相关知识。

在这里插入图片描述

元素(本例是p元素)可以拥有属性(Attribute)，属性为元素补充额外信息，这些信息不希望在内容中显示。

Class、id等类型的属性主要用于选择器定位元素；action、method、href等类型的属性发挥某种特定的功能;

还有一种属性，例如width、height、bgcolor等等，这类属性主要用于设置元素的样式。然而，现今设置样式应该是CSS的工作，这种类型的属性成为了遗留属性，主要在旧版本HTML中使用。现在，已经不提倡使用这类属性，设置样式应该使用CSS。但是，某些场景下这类属性有些还在使用，例如<canvas></canvas> (JavaScritp使用该元素绘制图形及图形动画) 必须使用height属性指定高度。

下面，我们以img元素为例，设置宽度和高度属性

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <img src="" alt="" width="100px" height="100px">
</body>
</html>

使用Chrome浏览器检查该元素
在这里插入图片描述

显示效果，如下图所示，aspect-ratio: auto 100 / 100;是Chrome浏览器自己添加的属性，应该就是左上角的小图片。Firefox浏览器不会添加如此的小图片。

在这里插入图片描述

CSS 基本语法

在这里插入图片描述

综上所述

在Chrome浏览器中以及使用webkit、blink内核的浏览器中，Attribute Style 就是由某些元素属性（Attribute）转换而来的样式属性（property）。

我之所以强调在Chrome浏览器以及使用webkit、blink内核的浏览器，是因为在某些浏览器中，例如FireFox，并不一定存在Attibute Style，图片有宽高，说明元素属性生效了，但是它并没有把元素属性作为样式来处理。

在这里插入图片描述

2. -webkit-locale=en 有什么作用

它属于从元素属性(attribute)转换而来样式属性(property)，而我们上文中的代码html元素中只定义了一个属性lang=en，因此 -webkit-locale: en和lang=en 作用相同，用于设置元素使用的语言。本例中，是给html元素添加的属性，就是说设置了整个网页内容主要使用的语言是英文。文档的其他元素，例如p元素，也是可以单独添加自己的lang属性。

关于lang属性以及相关知识:lang伪类的使用方法，有许多内容需要讲解，篇幅可能比本文还要大，这样就偏离了文章主题。因此，我会单独写一篇文章介绍下这部分知识。

到此，问题已基本解决。不过还有许多相关的拓展知识可以挖掘。感兴趣可以继续阅读~

三、拓展知识

1、规范属性、试验性属性、私有属性

我们在CSS中使用的属性(property)，通常包含下列三类：

规范属性，发布的CSS规范中定义的属性
试验性属性，已在规范的草案中定义，将来可能会标准化。
私有属性，浏览器厂商自己定义的属性，没有在规范或者规范的草案中出现。

在试验性属性还未标准化时，部分浏览器已经根据最初草案实现了它们的部分功能，为了与之后确定下来的规范属性进行兼容，所以每种浏览器给实验性属性添加自己的私有前缀与规范属性进行区分，当规范属性确立后，各大浏览器将逐步支持不带前缀的CSS新属性。私有，私有前缀也用于各浏览器厂商自己定义的私有属性。各浏览器使用的私有前缀，如下所示