Question

使用html属性（例如width =“”而不是CSS）是否有任何缺点或优势？

示例：

<img alt="" src="images/img.png" width="40%" >

VS

<img alt="" src="images/img.png" style="width: 40%;" >

验证代码W3时，错误“img”元素上的“宽度”属性已过时。改用CSS。

我默认使用CSS，但我的同事似乎默认使用其他方式。在提出它们之前，我想确保我直截了当地确定html中的宽度是从旧的html版本中得到的，并且为了将来的验证和最佳实践，我们应该使用CSS。

其他例子是：

列表类型：

<ul>
    <li type="none">hello</li>
</ul>

<ul style="list-style-type: none;">
    <li>hello</li>
</ul>

文字对齐

<p align="center">hello</p>
<p style="text-align: center;">hello</p>

*清晰度：我正常使用样式表但是在示例中我使用内联样式进行更直接的比较。

Answer 1

这是一个历史人工制品。

使用进行最佳练习，以使用图像的高度和宽度属性来加速DOM的渲染。 HTML引擎会知道为图像分配多少空间。这也是许多IDE和WYSIWYG编辑器在您使用它们插入图像时添加它们的原因。对于现代浏览器和CSS引擎来说，这不是一个问题

有一点需要注意。对于HTML5中的图片，height和width 不已过时，但您必须使用像素。

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img和https://www.w3.org/TR/2011/WD-html-markup-20110405/img.html

那么现在最佳做法是什么？

在我看来，不要使用该属性。它阻碍了响应，媒体查询等。

当然，除非绝对必要，否则不要出于同样的原因使用内联样式。

例外

使用HTML电子邮件的属性。电子邮件客户端的CSS支持令人震惊且不一致。

Answer 2

始终使用css。最佳做法是将css外包给标题中的样式标记，或者更好地在单独的style.css文件中，并在您的元素上放置一个类。

通过这种方式，您可以将代码拆分为布局和样式，使其更加清晰。

当你获得更多的经验时，请看一下SCSS。

Answer 3

在这两种情况下，您都使用内联方法来更改不推荐的图像宽度。建议使用外部CSS /样式表文件，并将所有与样式相关的代码放在那里。尽可能使用HTML文件进行结构/布局，避免样式化。为什么外在造型？因为您可以将样式应用于多个页面，易于编辑一次并适用于所有页面，完全控制，减少文件大小，减少加载时间，高页面排名等。

Answer 4

参考问题......

例如，这是马铃薯的原始大小（原始大小）：

＆＃13;

<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg">

＆＃13;

我们假设我们将马铃薯的宽度设定为40％......然后突然我们决定将其设为80％而不触及该元素。

如果我们在该属性中使用属性表示，我们通常可以通过编写这个普通的CSS来覆盖它：

＆＃13;

img {
  width : 80%;
}

＆＃13;

<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg" width="40%">

＆＃13;

但是，如果我们在该属性中使用内联样式，我们需要使用!important来使用CSS覆盖该属性样式。

＆＃13;

img {
  width : 80% !important;
}

＆＃13;

<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg" style="width:40%;">

＆＃13;

源： https://css-tricks.com/presentation-attributes-vs-inline-styles/

Answer 5

将责任分开总是更好。纯粹利用HTML结构，并使用CSS为利用各自选择器的结构设置样式。为获得最佳效果，请始终利用网格系统来定位元素。我建议您查看 Bootstrap4 （https://getbootstrap.com/docs/4.0/getting-started/introduction/），以便利用随时可用的网格对齐类来实现响应式设计。 Bootstrap还有许多更酷的实用工具可供使用。希望这会有所帮助。

什么是HTML特性或CSS样式的最佳实践

5 个答案: