Home Web Front-end HTML Tutorial HTML中em与b等的区别_html/css_WEB-ITnose

HTML中em与b等的区别_html/css_WEB-ITnose

Jun 24, 2016 am 11:32 AM

  最近在学习HTML基本知识,看到b标签和strong还有em,都是表示强调目的的,那他们之间的区别是什么呢?总结如下:

  1. 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight: bolder },仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在HTML4.01中并不被推荐使用;

  2. 和 是表达要素(phrase elements)。 (emphasized text)表示一般的强调文本,而 (strong emphasized text)表示比 语义更强的的强调文本。

  3. 在新的html5中, 仍旧是表达要素(phrase elements)。但这时的 表示html页面上的强调(emphasized text), 表示句子中的强调(即强调语义)。

    i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本,例如:一个分类名称,一个技术术语,一个外语中的谚语,一个想法等。或者代表斜体的排版方式

    b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如:文档概要中的关键字,评论中的产品名。或者代表强调的排版方式。

 

  参考内容如下:

  1. stackoverflow:

    They have the same effect on normal web browser rendering engines, but there is afundamental difference between them.

    在大多数浏览器的渲染引擎上都是一个效果,但是两者的基础不同

    As the author writes in a discussion list post:

    Think of three different situations:

    有三个不同的应用场景:浏览器、盲人、移动电话

  2. web browsers
  3. blind people
  4. mobile phones
  5. "Bold" is a style - when you say "bold a word", people basically know that it means to add more, let's say "ink" around the letters until they stand out more amongst the rest of the letters.

    BOLD 是一种样式,当人们说“加粗一个单词”时,大家会认为增加一些(比如叫墨水)到这些词上以便让这些词看起来比旁边的词更显眼

    That, unfortunately, means nothing to a blind person. And on mobile phones and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.

    但是,不幸的是,这对盲人来说毫无作用。而且对手机或者其他的手持设备来说,由于其屏幕的分辨率很小,文本已经被加过粗了,我们也无法再加粗一个已经加粗的了。

     is a style - we know what "bold" is supposed to look like.

    标签是一种style,我们都知道“加粗”应该长什么样。

     however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people). And strong on a Palm Pilot may be an underline (since you can't bold a bold).

    标签一种对有些事情需要被理解的暗示。“strong” 在浏览器应该(也一般会)意味着bold,但是(对于盲人来说),它就可以被像Jaws一样的语音程序理解成一种强调音。strong在手持设备上可能会是一个下划线(因为你不能在加粗了)。

    HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web".  is semantic - it describes the text it surrounds ("this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed ("this text should be bold").
    HTML从来都不是只意味着样式。去搜一下tim berners-lee 和语义web。标签就是一种语义,它描述的场景是它所包含的内容应该比你显示的其他文本更strong,而不是它所包含的文本应该其他的加粗。

  6. http://www.zhihu.com/question/19551271 

 

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

See all articles