替代HTML Bold标签


82

好的,所以我知道您可以在HTML中使用<b>标签,但是标签中没有"weight=bold"可以使用的属性<p>吗?

还是在CSS或Javascript中?


5
我开始悬赏这个问题,以提高其可见度,因为尽管技术上正确,但我认为最佳答案实际上是灾难性的。尤其是对于Google搜索“ html5中的粗体标记”的结果非常高的问题。
2011年

7
我把这个赏金票荒谬了。@mipadi有正确的答案。如果用户无法确定自己是否想要设置其他样式,p那将是他们自己的问题。也许他们会问一个不同的SO问题,以解决该问题。
雷利

Answers:


99

同时考虑<strong>标签。对于屏幕阅读器来说更好,因此对可访问性也更好。搜索引擎也使用<strong>标签来确定类似于他们如何使用标题标签的重要内容<h1><h2>等等(虽然<b>也会有类似的含义,搜索引擎)。如果要强调文本的重要性,请使用<strong>。如果你希望压力的重要性,使用<b>标签或使用font-weight:bold;风格的元素或CSS。

虽然,如果您将整个段落加粗,则最好使用CSS选项。这将减少对屏幕阅读器的影响,强调整个段落可能没有意义。但是另一方面,我看到粗体字之前曾有理由强调整个段落。在这种情况下,font-weight:bold;可能要使用的是类/样式。

最终,<strong><b>或者font-weight:bold;将所有的工作,完成类似的东西在视觉上(可能是完全一样的),但他们有略微不同的含义。此外,确保,如果你是加粗是标题,使用标题标签:<h1><h2>,等。


37
<b>在任何当前的HTML或XHTML标准中均不被弃用,甚至在即将发布的HTML 5中也不被弃用。<b>和<strong>具有不同的含义;<b>表示“粗体文本”。<strong>表示“更强调”,但不规定文本样式;浏览器默认为粗体。
thomasrutter

2
<b>的广泛使用已经减少,但是根据W3C规范,实际元素尚未弃用。
亚历克斯

4
<b>在HTML5中已被有效弃用...并替换为另一个<b>标记,其含义有些不同。这是一个奇怪的选择,但这基本上就是他们所做的。无论如何,不​​应将其设置为粗体样式。
查克(Chuck)

@Chuck:新的b元素是什么意思?
亚历克斯

1
请注意,现代屏幕阅读器(例如JAWS和Window Eyes的最新版本)在正常设置下不会传达<em>或<strong>元素的内容。用户必须进入校对模式才能使语音输出受到影响。良好的阅读:屏幕阅读器缺乏重视I,B,EM和HTML5强大的元素
乔恩·吉本斯

79

您正在考虑CSS属性font-weight

p { font-weight: bold; }

6
好吧,希望他不会复制您的确切信息……会弄乱一些事情:)
Darryl Hein

6
这是一个语法正确的示例。OP必须决定他希望如何使用它。
mipadi

6
“正确的语法”并不是全部,我希望这个答案更好,因为对于寻求b标记的解决方案,它具有较高的可见性,是该问题的最佳答案。这样做并不能带来良好的效果,这不仅是因为它主张使用具有其他更重要用途的元素的样式(通常是在文本中进行段落描述),而且还因为它主张使用CSS样式而不是<strong>,<h1>, <em>和<mark>。从技术上讲,它是可行的,但实际上,它会带来灾难。
卡扎伊2011年

4
@Tchalvak:我<p>以示例为例,因为OP将其用作示例。font-weight但是,可以在任何元素上使用。
mipadi

7
@mipadi我理解这一点,但是个人而言,如果一个陌生人要我“用锋利的刀剃他的脸”,我将忽略该请求的特定术语,并给他一把安全剃刀。
2011年

23

如果文本的语义在语义上很强,请使用strong元素。如果不是,请使用一种语义命名类(一个明确显示元素含义的类,不要通过调用bold等将表示和数据混合在一起),并在CSS中对其进行引用。

的HTML

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

的CSS

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

某些人仍然将b元素用作表示形式的钩子,但尚未弃用,尽管strong如今大多数人都喜欢此元素。只要确保正确使用它们即可。


4
不推荐使用<b>。HTML 4.01,XHTML 1,XHTML 1.1甚至即将发布的HTML 5仍支持该功能。它的弃用是神话。是否弃用是另一回事。不是。另请参见w3.org/TR/html401/index/elements.html
thomasrutter,2009年

小技巧:类名不能被称为“语义”,因为它不是受控词汇:任何地方都没有标准定义“重要消息”在应用程序中的含义。通过类的功能命名类仍然是一个好主意,因为它可以提高可读性和最佳实践。
thomasrutter

@thomasrutter ...这就是为什么我说think的原因。名称不必只对计算机具有语义。人们也阅读html。
Alex

10

所述的<b>标签是生命力。不推荐使用<b>,但已明确并限制了其使用。<b>没有语义含义,也没有传达声音强调,如屏幕阅读器可能会说的那样。但是,<b>确实传达了印刷的感觉,<i>标签也一样。两者在排字术中都有特定的位置,但在口头交流中则没有

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

b元素表示将在风格上偏离普通散文的文本范围,而没有传达任何额外的重要性,例如文档摘要中的关键字,评论中的产品名称或其他典型印刷字体加粗的文本范围。

8

您可以Bold使用<b>Text</b>标签制作文字或单词。

您也可以使用<strong>Text</strong>标签

head标签<h1><h2><h3>,...是默认加粗的标签,让您的文字在默认情况下大胆,除非你改变自己的风格与CSS

上述标签在HTML中可用,但是如果您想更改样式,CSS可以使用

font-weight:bold

7

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


7

您可以像下面这样编码。

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

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

6

您可以在您的字体上使用font-weight属性

例如:

<p>This is my paragraph</p>

您可以将CSS内联,如下所示:

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

或将其放在外部CSS样式表中,如下所示:

p{
  font-weight:bold;
}

5

这是恐龙走过地球而CSS根本不存在的历史和历史。

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


4

<b> 是不得已的方法

您可以使用<b>,但只能作为不得已的方法。有多种元素可以替代<b>,这是最有用的顺序:

更有用的选择

  • 对于重要的文字: <strong>
  • 对于强调强调的文字: <em>
  • 对于标题,不仅是页面标题,还包括段落标题和所有其他种类的标题: <h1> through <h6>

实用的案例 <b>

我主张使用的唯一情况<b>

  1. 您使用<strong>了不希望显示的样式,而您不想使用的样式有所不同,

  2. 您不需要斜体或标题,并且

  3. 您将使用内联跨度或带有类的跨度,仅用于加粗文本。(例如:<span class='bold'>

那么使用它是合理的<b>,因为在这种情况下,它可能比非语义范围更干净/更短,并且语义更多,而简洁/可读性是做出该选择的一个很好的理由,因为b已被重新定义为用作元素表示印刷重点


4

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


1
内联样式即将在html 5中弃用:P
锁定

你确定吗?我认为仅不推荐使用内联样式标签,即。(big,s,strike,tt,u)
John Boker

2
即使不弃用它们,也几乎总是一个坏主意。您最好返回使用<font>标记。
tgecho

对于小型CSS文件,仍建议使用内联样式。检查Yslow和Google的PageSpeed。这很奇怪,但听起来很合理(打来的电话少吗?)
Yannis Dran

@Kzqai:我同意100%。对于我的特定情况,由于div上的ajax请求的负载过大,我必须摆脱任何内联样式。只需删除任何内联样式,就可以为我节省几毫秒的加载时间。
Adrian P.

1

也许您想使用CSS类?

p.bold { font-weight:bold; }

这样,您仍然可以照常使用<p>

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

给你:

这是普通文字。

这是粗体文本。


1

我知道一个很旧的线程。-但出于完整性考虑:

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

当我上传四种字体样式时:普通;胆大; 斜体和粗体斜体通过CSS进入我的网站。

我觉得结果输出比简单地修改字体要好,并且更接近设计者的粗体字体外观。

斜体和粗体当然也一样,这给了我更多的灵活性。


1

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

  • 元素bstrong已经并存很长时间了。在HTML 4.01(已被HTML5取代)中,该strong符号用于“强力强调”,即,比em元素(刚刚表示强调)要强。在HTML 5.2中strong“代表其内容的高度重要性,严重性或紧迫性”;与HTML 4.01相比,规范中的“严重性”和“紧急性”方面是新的。因此,如果您曾经b代表重要,严重或紧迫的内容,建议您改strong而使用。如果需要,可以通过添加有意义的类属性来区分这些不同的语义,例如<strong class="urgent">...</strong><strong class="warning">...</strong>并使用适当的CSS选择器为这些“强调”类型设置不同的样式,例如使用不同的颜色和字体大小(例如,在CSS文件中:)strong.warning { color: red; background-color: transparent; border: 2px solid red; }元素的
    另一种替代方法bem元素,在HTML 5.2中“它代表强调强调其内容”。请注意,此元素通常以斜体显示(因此经常被推荐作为该i元素的替代)。
    我会拒绝遵循其他答案中的建议编写类似的诱惑<strong class="bold">...</strong>。首先,在非视觉环境中,class属性没有任何意义(听ePub书,一般文本到语音,屏幕阅读器,盲文);其次,为什么有些东西被加粗了。
  • 如果您使用b了整个段落或标题(而不是较短的文本,这是上一个要点的用例),那么我将其替换为适当的class属性,或者在适用时使用WAI-ARIA角色(例如alert现场直播) “具有重要且通常对时间敏感的信息”区域。如上所述,您应该使用“语义”class属性值,以便维护代码(包括您将来的自己)的人们可以弄清楚为什么将其加粗。
  • 并非所有对的使用都b可以表示某种语义。例如,当您将打印的文档转换为HTML时,文本可能会以粗体显示,其原因与强调或重要性无关,而只是作为视觉指导。例如,字典中的headwords并不比其他内容“严重”,“紧急”,因此您可以保留该b元素,并可选地添加一个有意义的类属性,例如<b class="headword"><span class="headword">根据b具有在非视觉环境中没有意义。

在CSS文件中(而不是style像其他一些答案所建议的那样使用属性),您可以使用多种方式设置“粗体”或重要文本的样式:

  • 指定不同的颜色(前景和/或背景);
  • 指定不同的字体;
  • 指定边界(请参见上面的示例);
  • 使用不同的字体粗细使用font-weight属性,这允许更多的值不仅仅是normalbold,即normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • 等等

请注意,对数字字体粗细值的支持并不总是很好。


1

    #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>

我希望它能奏效




0

您可以使用以下命令:

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

要么

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

要么

您可以使用<h1> tag与粗体字有些相似的字词


1
由于p可能是块级,因此您希望强力进入p。
卡扎伊2011年

0

如今,人们倾向于使用网站构建器(如Wordpress之类的CMS),而不是从头开始编写自己的博客。甚至专业的Web开发人员也可以这样做,因为它速度更快。

如果您在现实生活中编写自己的博客时,可以提及优点和注意事项,那就太好了,例如:

  • 更大的灵活性(定制)
  • 支付域名
  • 付费并选择网络托管
  • 安全与维护
  • 某些网站建设者的模板和图形的版权和许可。如果您使用主机的网站构建器,则您的网站可能被锁定到特定的虚拟主机。因此,您不能移动到另一个Web主机,因为如果这样做,您将无法再使用该模板。
  • 网站宕机时寻求网站建设者的技术支持时会遇到麻烦。
  • 一些模板对搜索引擎不友好,这会影响您的网站排名(SEO)

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


-2

尽管有一点,但@Darryl Hein的答案是正确的-<b>自XHTML以来,根本不建议这样做,因为它不是语义的

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

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

<strong>可以将CSS调整为不大胆,尽管这是常规的默认设置。可以将其设置为红色,斜体或带下划线(尽管所有这些可能性实际上都不是用户友好的)。将其用于文本中的短语/单词,不是因为视觉设计,而是与其含义相关

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


我认为html5中<b>的修订定义不正确。
卡扎伊2011年

同时,您自己写那<b>是不得已的方法,而我写道不建议使用b。矛盾在哪里?
警卫队

3
抱歉,应该更具体一点,因为我的意思是...previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and [conventionally boldened]”.根据dev.w3.org/html5/markup/b.html#b,它在html 5中具有重新定义的语义:在html5中。这就是我认为<b>是有效的原因/有效/不得已/没有语义/被重新定义为语义等。只是一个细微的差别。
卡扎伊2011年

-3

使用<strong>标签,因为它更具语义。<b>已贬值,因此最好不要使用它。此外,粗体字还具有更大的搜索引擎优化(SEO)权重,因此,始终最好使用实数<strong>而不是使用CSS<p><span>粗体。


4
不要使用事物,因为它们具有“更多的语义”-使用它们是因为它们具有适用于您所写内容的语义。我们不知道OP具有的文本语义是什么。
昆丁
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.