可替代 HTML 粗体标记

好的，我知道在 HTML 中可以使用 <b>标记，但是在 <p>标记中不是有一个 "weight=bold"属性可以使用吗？

还是在 CSS 或者 Javascript 中？

309023 次浏览
小开

您想到的是 CSS 属性 font-weight:

p { font-weight: bold; }
小开

在 CSS 中，您必须将 font-weight: bold;设置为样式

小开

这些都是历史性的，可以追溯到恐龙在地球上行走的时代，而 CSS 还不存在。

更严重的是，忘掉 <b/>标记，在 CSS 规则中使用 font-weight:bold:)

小开

你也可以做 <p style="font-weight:bold;"> bold text here </p>

小开

如果文本的语义是 坚强，则使用 strong元素。如果没有，使用一个语义命名的类(一个清楚地显示元素含义的类，不要通过称它为 bold等来混合表示和数据)并在 CSS 中引用它。

超文本标示语言

<span class="important-message">I'm important!</span>

CSS

.important-message {
font-weight: bold;
}

有些人仍然使用 b元素作为表示钩子，但它是 没有被否定，尽管现在大多数人喜欢使用 strong元素。只要确保它们被正确使用。

小开

还要考虑 <strong>标签。它对于屏幕阅读器更好，因此对于可访问性也更好。搜索引擎也使用 <strong>标签来确定重要内容，类似于他们如何使用标题标签 <h1>，<h2>等(尽管 <b>也将有类似的意义搜索引擎)。如果你想强调文本的重要性，使用 <strong>。如果 不要想要强调重要性，可以使用 <b>标记，或者在元素或 CSS 中使用 font-weight:bold;样式。

尽管如此，如果您使用粗体显示整个段落，那么使用 CSS 选项可能更好。这将减少对屏幕阅读器的影响，而且强调整个段落可能是没有意义的。但另一方面，我也见过有人用粗体来强调整个段落，这是有充分理由的。在这种情况下，font-weight:bold;就是您想要使用的，可能在类/样式中使用。

最后，<strong>、 <b>或者 font-weight:bold;都将在视觉上完成类似的工作(可能完全相同) ，但是它们的含义略有不同。另外，如果您使用粗体，请确保使用头标记: <h1>、 <h2>等。

小开

在一个旁注下面的代码也将使其粗体。

<strong> text here </strong>
小开

使用 <strong>标签，因为它更具语义性。<b>已经贬值了，所以最好不要使用它。同时，粗体文本也被赋予了更多的搜索引擎优化(SEO)权重，所以最好使用一个真正的 <strong>，而不是使用 CSS 的 <p>或 <span>粗体。

小开

< b >标签活得好好的。< b > 没有被弃用，但它的使用已经得到澄清和限制。它没有语义意义，也不传达屏幕阅读器可能说的声音强调。然而，< b > 确实传递了 印刷的强调，< i > 标记也是如此。两者在印刷术中都有特定的地位，但在口语交际中没有特定的地位。

引自 http://www.whatwg.org/

B 元素表示一段文本，这段文本在文体上与普通散文相抵消，而不传达任何额外的重要性，比如文档摘要中的关键词，评论中的产品名称，或者其他一段文本，这些文本的典型排版表示都加粗了。
小开

<b>是最后的手段

可以使用 <b>，但只能作为 最后的手段使用。有很多元素可以作为 <b>的替代品，以下是它们最有用的次序:

更有用的选择

  • 重要文字: <strong>
  • 对于重音强调的文本: <em>
  • 对于标题，不仅仅是页面标题，还有段落标题和其他各种类型的标题: <h1> through <h6>

使用 <b>的实际边缘案例

我提倡使用 <b>的唯一情况是

  1. 你用不同的方式设计了 <strong>，你不想显示你想要的文本,

  2. 你不需要 斜体强调或者航向

  3. 您将为 粗体字使用内联 span 或带有类的 span。(例如: <span class='bold'>)

那么使用 <b>是合理的，因为在这种情况下，它可能比非语义跨度更简洁/更短，更具语义性，简洁/可读性是做出这种选择的一个很好的理由，因为 b 已经被重新定义为表示 印刷强调的元素。

小开 
<p style="font-weight:bold;"></p>
小开

尽管有一点,@Darryl Hein 的答案是正确的——因为不是 语义上的，所以从 XHTML 开始就不推荐使用 <b>。

<strong>表示语义突出显示的文本

font-weight: bold表示视觉上突出显示的文本

<strong>可以通过 css 进行调优，使其不是粗体的，尽管它是常规的默认设置。它可以是红色，斜体，或下划线(尽管所有这些可能性并不真正用户友好)。将它用于文本中的短语或单词，不是因为视觉设计，而是因为它们的含义

font-weight: bold应该用于与设计相关的粗体部分，如标题、子标题、表格标题单元格等。

小开

也许你想使用 CSS 类？

p.bold { font-weight:bold; }

这样你仍然可以像平常一样使用 <p>。

<p>This is normal text</p>
<p class="bold">This is bold text</p>

给你:

这是正常的短信。

这是粗体短信。

小开

你可使用以下连结:

<p id="p1">Some Text here </p>
#p1{
font-weight: bold;
}

或者

<Strong><p>Some text here </p></strong>

或者

您可以使用与粗体相似的 <h1> tag

小开

使用 <b>Text</b>标记可以生成文本或单词 Bold。

也可以使用 <strong>Text</strong>标记

标题标签 <h1>，<h2>，<h3>，... 是默认的粗体标签，并使您的文本在默认情况下粗体，除非您改变他们的 CSS 样式

上面的标签在 HTML 中是可用的，但是如果你想用 CSS改变样式，你可以使用

font-weight:bold
小开

一个非常古老的线索，我知道。-但为了完整性:

我用 <span class="bold">my text</span>

当我上传四种字体样式: 正常; 粗体; 斜体和粗体斜体到我的网站通过 css。

我觉得最终的输出比简单地修改字体要好，而且更接近设计者对加粗字体外观的设计意图。

斜体和黑体当然也是一样，这给了我额外的灵活性。

小开

您可以在

例如:

<p>This is my paragraph</p>

你可以将你的 CSS 内联如下:

<p style="font-weight:bold;">This is my paragraph</p>

或者将它放在外部 CSS 样式表中，如下所示:

p{
font-weight:bold;
}
小开

你可以像下面这样编码。

<html>
<head>
<style>
p.boldstats{
font-weight: bold
}
</style>
</head>


<body>
<p class="boldstats"> The bold finder </p>
</body>
</html>
小开

使用什么来代替 b元素取决于该元素内容的语义。

  • The elements b and strong have co-existed for a long time by now. In strong0, which has been superseded by HTML5, strong was meant to be used for "strong emphasis", i.e. stronger emphasis than the em element (which just indicated emphasis). In strong1, strong "represents strong importance, seriousness, or urgency for its contents"; the aspects of "seriousness" and "urgency" are new in the specification compared to HTML 4.01. So if you used b to represent content that was important, serious or urgent, it is recommended that you use strong instead. If you want, you can differentiate between these different semantics by adding meaningful class attributes, e.g. <strong class="urgent">...</strong> and <strong class="warning">...</strong> and use appropriate CSS selectors to style these types of "emphasis" different, e.g. using different colours and font sizes (e.g. in your CSS file: strong.warning { color: red; background-color: transparent; border: 2px solid red; }.).
    b的另一种替代方案是 em元素，它在 HTML 5.2中“表示内容的强调重点”。注意，这个元素通常用斜体表示(因此经常被推荐作为 i元素的替代品)。
    我会抵制诱惑，按照其他一些答案的建议来写类似 <strong class="bold">...</strong>的东西。首先，class 属性在非视觉环境中没有任何意义(听一本 ePub 的书，一般的文本对话，屏幕阅读器，盲文) ; 其次，维护代码的人需要阅读实际的内容来找出 为什么的粗体。
  • 如果你在整个段落或标题中使用了 b(相对于之前项目符号中使用的较短的文本跨度) ，我会将其替换为适当的 class属性，或者，如果适用的话，将 WAI-ARIA 角色(如 alert)替换为“具有重要且通常时间敏感的信息”的活动区域。正如上面提到的，您应该使用“语义”class属性值，这样维护代码的人(包括您未来的自己)就可以算出 为什么中有些东西是粗体的。
  • 并非 b的所有用途都表示某种语义。例如，当您将打印文档转换为 HTML 时，文本可能会加粗，其原因与强调或重要性无关，而是作为一个可视化指南。例如，字典中的标题并不比其他内容更“严肃”、“紧急”，所以你可以保留 b元素并可选地添加一个有意义的 class 属性，例如 <b class="headword">或者基于 b在非视觉上下文中没有意义的论点用 <span class="headword">替换标签。

在你的 CSS 文件中(而不是使用 style属性，正如其他一些答案所建议的那样) ，你有几个选项来设计“粗体”或重要文本的样式:

  • 指定不同颜色(前景及/或背景) ;
  • 指定不同的字体;
  • 指定边界(见上例) ;
  • 使用不同的字体重量使用 < strong > font-weight属性 ，这允许更多的值比只有 normal和 bold，即 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • 等等。

请注意，支持数字字体重量值并不总是很好。

小开 

    #bold{
font-weight: bold;
}
#custom{
font-weight: 200;
}
<body>
<p id="bold"> here is a bold text using css </p>
<p id="custom"> here is a custom bold text using css </p>
</body>

希望有用

小开

如今，人们倾向于使用网站构建器(如 Wordpress 这样的 CMS) ，而不是从头开始编写自己的博客。即使是专业的网页开发人员也这样做，因为它更快。

如果你能提到在现实生活中为自己的博客编写代码时要记住的优点和事情，那就太好了，例如:

  • 更大的灵活性(定制)
  • 支付域名
  • 支付和选择一个网站托管
  • 保安和维修
  • 一些网站建设者的模板和图形的版权和许可。你的网站可以被锁定到一个特定的网站主机，如果你使用你的主机的网站建设者。因此，你不能移动到另一个网站主机，因为如果你这样做，你可以不再使用该模板。
  • 遇到问题时，要求网站建设者的技术支持，当网站关闭。
  • 一些模板不是搜索引擎友好，这影响您的网站排名(搜索引擎优化)

无论如何，你可以使用 css/css3或 JavaScript 来制作交互式网页。甚至可以将所有类型的代码上传到设置默认博客主题格式的服务器中。


提交答案