Html 更改默认显示属性是一种好做法吗？

TL；DR在我的CSS中更改默认的

显示
属性是一种不好的做法吗

问题
最近，在我们的项目中，我们必须定位2个标题标签，使它们看起来像一个。它们有相同的字体大小和相似的样式，所以唯一的问题是如何将一个放在另一个旁边。我们对此有两种不同的想法，我们将讨论更改默认的
显示属性是否是一种好的做法

所以，我们的基本代码

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>


标题：
我的头球

我们希望的结果是：

标题：我的标题

注:
代码需要由两个不同的标题组成，因为在移动版本中，我们希望在单独的行中显示它们（因此保留默认的
display:block
）

方法1：使用
display:inline
这是相当大的进步。块元素成为内联元素，因此它们位于同一行中。这种方法的缺点是
h1
和
h2
的默认显示属性都已更改

方法2：使用
float
H1
可以使用
float:left
属性定位在左侧。这种方法保留默认的display属性不变，但是如果
.container
不够长，无法在一行中容纳两个标题，则需要进行一些修改

问题
这一切都引出了一个简单的问题：更改HTML元素的默认
display
属性是一种不好的做法吗？是否违反了标准，如果可能应避免？或者它是我们的谋生之道，而这并不重要，只要代码在语义上是正确的（因此标题放在
h1
，文章放在
article
等…）
更改默认css属性不是一个好主意，应该避免，以防止标记中出现不必要的缺陷。相反，您应该为所有要自定义的html元素提供“id”或更好的“类”，并为这些元素进行样式设置

此外，当引擎试图查找页面中的所有元素时，使用诸如“h1”、“div”等css是最慢的方法

在您的示例中，使用display或float并不重要，只要您为h1元素提供了一个css类

此外，使用正确的html元素来获得更好的语义对于SEO等方面也很有用。
确保更改默认行为是多余的，甚至会影响性能。作为一个主观的解决方案，我建议使用
flex
（但我不确定它的性能，尽管你可以用谷歌搜索），它得到了广泛的支持，并且不改变任何元素css属性，它只是一个布局问题，看看这个


.container{
显示器：flex；
调整内容：灵活启动；
弯曲方向：立柱；
调整项目：基线；
}
.container.mobile{
弯曲方向：行；
}
web
标题：
我的头球

可移动的
标题：
我的头球

tl；dr更改CSS中的默认显示属性是一种不好的做法吗

不，正如W3C本身所表示的那样

作为一名HTML作者，您的工作是构建一个页面，使页面的每个部分都具有文档中描述的预期语义，以便软件（浏览器、屏幕阅读器、机器人等）能够正确解释您的内容

作为CSS作者，您的工作是改变正确标记的默认样式，以您想要的方式呈现它。这包括更改默认的
显示
属性，就像更改默认的
颜色一样

但是，任何软件都可以确定CSS属性的某些用法会改变它们解释页面的方式。例如，一个搜索引擎可以决定，与父母的背景颜色相同的文本在排名系统中不应占权重

关于子目，使用
元素标记子目。您应该做的是决定一个
元素，将其包装在
中，并将副标题类型文本包装在
、
或类似文本中

以下是W3C文档中正确副标题的示例：

<header>
  <h1>HTML 5.1 Nightly</h1>
  <p>A vocabulary and associated APIs for HTML and XHTML</p>
  <p>Editor's Draft 9 May 2013</p>
</header>

回答你的主要问题：

tl；dr在我的CSS中更改默认的
显示
属性是一种不好的做法吗

不

为什么？
答：因为这都是关于语义的

HTML中的元素、属性和属性值由
本规范）具有一定的含义（语义）。例如
ol
元素表示一个有序列表，以及
lang
属性
表示内容的语言

这些定义允许使用HTML处理器，如Web浏览器或
搜索引擎，以一种特定的方式呈现和使用文档和应用程序
作者可能没有考虑的各种各样的上下文


因此，在您的情况下，如果您确实需要在语义上有两个标题，那么可以更改它们的样式，包括
显示属性

但是如果不需要在语义上有两个标题，但是只用于纯粹的化妆品/设计（响应代码），那么你做得不正确。

看看这个例子：


标题：我的标题
更新
看来我可能已经模糊了，因为安东尼·拉特利奇显然没有看到（或忽略了回顾）。我提供了一个屏幕截图，其中有一些关于如何使用的提示





问答
这一切都引出了一个简单的问题：更改HTML元素的默认显示属性是一种不好的做法吗

不，一点也不。事实上，这是一种非常常见的web开发实践
<h1>
  <span>Header:</span>
  <span>my header</span>
</h1>

<h1>Welcome to my page</h1>
<p>I like cars and lorries and have a big Jeep!</p>
<h2>Where I live</h2>
<p>I live in a small hut on a mountain!</p>

 <table>
   <tbody>
       <tr>
        <td><img></td>
        <td><input type="button"/></td>
       </tr>
 ...

  <div style="display: inline-block"></div>

  <div onclick='makeASandwich();'></div>

  <section id="demo1" class="area">
    <!--==Pure CSS Demo #1==-->
    <!--======Flexbox=======-->
    <header class="titles">
      <h1>Demo 1 -&nbsp;</h1>
      <h2>display: flex</h2>
    </header>
   </section>

<div class="container" style="display: flex;">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

<hgroup class="headingContainer">
  <h1>Main title</h1>
  <h2>Secondary title</h2>
</hgroup>

$('element').css('display','');

<span></span>

$('span').css('display','none');

$('span').css('display','');

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');