语义分割理念:完全卷积_更多HTML5语义:对现有功能的更改

语义分割理念:完全卷积

htmlcss2thumb

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein,Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3,第二版 》一书。 副本在世界各地的商店中都有出售,或者您可以在此处以电子书形式购买

While new elements and APIs have been the primary focus of HTML5, this latest iteration of web markup has also brought with it changes to existing elements. For the most part, any changes made have been done with backwards-compatibility in mind, to ensure that the markup of existing content is still usable.

尽管新元素和API一直是HTML5的主要关注点,但最新的Web标记迭代还带来了对现有元素的更改。 在大多数情况下,所做的任何更改都要考虑到向后兼容性,以确保现有内容的标记仍然可用。

We’ve already considered some of the changes (the doctype declaration, character encoding, and content types, for example). Let’s look at other significant changes introduced in the HTML5 spec.

我们已经考虑了一些更改(例如doctype声明,字符编码和内容类型)。 让我们看看HTML5规范中引入的其他重要变化。

不推荐使用“不推荐使用”一词 (The Word “Deprecated” is Deprecated)

In previous versions of HTML and XHTML, elements that were no longer recommended for use (and so removed from the spec), were considered “deprecated.” In HTML5, there is no longer any such thing as a deprecated element; the term now used is “obsolete.”

在早期版本HTML和XHTML中,不再推荐使用(因此已从规范中删除)的元素被视为“已弃用”。 在HTML5中,不再存在任何不推荐使用的元素。 现在使用的术语是“过时的”。

Obsolete elements fall into two basic categories: “conforming” obsolete features and “non-conforming” obsolete features. Conforming features will provide warnings in the validator, but will still be supported by browsers. So you are permitted to use them but their use is best avoided.

过时的元素分为两个基本类别:“符合”过时的特征和“不符合”过时的特征。 符合性功能将在验证器中提供警告,但浏览器仍将支持。 因此,允许您使用它们,但最好避免使用它们。

Non-conforming features, on the other hand, are considered fully obsolete and should not be used. They will produce errors in the validator.

另一方面,不合格的功能被认为已完全过时,不应使用。 它们将在验证器中产生错误。

The W3C has a description of these features, with examples.

W3C 通过示例描述了这些功能。

链接内的块元素 (Block Elements Inside Links)

Although most browsers handled this situation well in the past, it was never actually valid to place a block-level element (such as a div) inside an a element. Instead, to produce valid HTML, you’d have to use multiple a elements and style the group to appear as a single block.

虽然大多数浏览器在过去处理这种情况很好,这是从来没有真正有效的放置一个块级元素(如div )内a元素。 相反,产生有效HTML,你就必须使用多a元素和风格的组显示为一个单独的块。

In HTML5, you’re now permitted to wrap almost anything in an a element without having to worry about validation errors. The only block content you’re unable to wrap with an a element are other interactive elements such as form elements, buttons, and other a elements.

在HTML5中,现在可以将几乎所有内容包装到a元素中,而不必担心验证错误。 您无法与包裹的唯一模块内容a元素是其他互动元素,如表单元素,按钮和其他a元素。

加粗字体 (Bold Text)

A few changes have been made in the way that bold text is semantically defined in HTML5. There are essentially two ways to make text bold in most browsers: by using the b element, or the strong element.

在HTML5中在语义上定义了粗体文本的方式已进行了一些更改。 在大多数浏览器中,有两种方法可以使文本变为粗体:使用b元素或strong元素。

Although the b element was never deprecated, before HTML5 it was discouraged in favor of strong. The b element previously was a way of saying “make this text appear in boldface.” Since HTML is supposed to be all about the meaning of the content, leaving the presentation to CSS, this was unsatisfactory.

尽管b元素从未被弃用,但在HTML5之前不鼓励使用strong 。 以前的b元素是一种表示“使该文本以黑体显示的方式”。 由于HTML应该只包含内容的含义,因此将演示文稿留给CSS使用,因此效果不理想。

According to the spec, in HTML5, the b element has been redefined to represent a section of text “to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.” Examples given are key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

根据规范 ,在HTML5中, b元素已被重新定义以表示文本的一部分“出于功利目的而引起人们注意,而没有传达任何额外的重要性,也没有暗示其他声音或情绪。” 给出的示例包括文档摘要中的关键字,评论中的产品名称,交互式文本驱动软件中的可操作字或文章目录。

The strong element, meanwhile, still conveys more or less the same meaning. In HTML5, it represents “strong importance, seriousness, or urgency for its contents.” Interestingly, the HTML5 spec allows for nesting of strong elements. So, if an entire sentence consisted of an important warning, but certain words were of even greater significance, the sentence could be wrapped in one strong element, and each important word could be wrapped in its own nested strong.

同时, strong元素仍然传达或多或少相同的含义。 在HTML5中,它表示“其内容的重要性,重要性或紧迫性”。 有趣的是,HTML5规范允许嵌套strong元素。 因此,如果整个句子都包含一个重要的警告,但是某些单词的意义甚至更大,那么该句子可以用一个strong元素包裹,而每个重要的单词都可以用自己的嵌套strong包裹。

斜体文字 (Italicized Text)

Along with modifications to the b and strong elements, changes have been made in the way the i element is defined in HTML5.

除了对bstrong元素的修改之外,还对HTML5中定义i元素的方式进行了更改。

Previously, the i element was used to simply render italicized text. As with b, this definition was unsatisfactory. In HTML5, the definition has been updated to “a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.” So the appearance of the text has nothing to do with the semantic meaning, although it may very well still be italic—that’s up to you.

以前, i元素仅用于呈现斜体文本。 与b ,此定义也不令人满意。 在HTML5中,定义已更新为“以替代的声音或语气来跨越文本范围,或者以指示不同文本质量的方式偏离正常散文。” 因此,文本的外观与语义无关,尽管它很可能仍是斜体的,这取决于您。

An example of content that can be offset using i tags might be an idiomatic phrase from another language, such as reductio ad absurdum, a latin phrase meaning “reduction to the point of absurdity.” Other examples could be text representing a dream sequence in a piece of fiction, or the scientific name of a species in a journal article.

可以使用i标签偏移的内容的示例可能是另一种语言的惯用语,例如reductio ad absurdum ,这是拉丁语,意思是“减少到荒谬的程度”。 其他示例可以是代表小说中梦境序列的文本,也可以是期刊文章中某个物种的科学名称。

The em element is unchanged, but its definition has been expanded to clarify its use. It still refers to text that’s emphasized, as would be the case colloquially. For example, the following two phrases have the exact same wording, but their meanings change because of the different use of em:

em元素未更改,但已对其定义进行扩展以阐明其用法。 它仍然指的是强调的文本,口语中就是这种情况。 例如,以下两个短语具有完全相同的措词,但是它们的含义因em的不同用法而改变:

<p>Harry’s Grill is the best <em>burger</em> joint in town.</p>
<p>Harry’s Grill <em>is</em> the best burger joint in town.</p>

In the first sentence, because the word “burger” is emphasized, the meaning of the sentence focuses on the type of “joint” being discussed. In the second sentence, the emphasis is on the word “is,” thus moving the sentence focus to the question of whether Harry’s Grill really is the best of all burger joints in town.

在第一句中,因为强调了“汉堡”一词,所以该句的含义集中于所讨论的“关节”的类型。 在第二句中,重点放在“是”一词上,因此将句子焦点移到了“ Harry's Grill”是否真的是城里所有汉堡店中最好的问题。

Neither i nor em should be used to mark up a publication title; instead, you should use cite.

iem都不应该用来标记出版物的标题; 相反,您应该使用cite

Of all the four elements discussed here (b, i, em, and strong), the only one that gives contextual importance to its content is the strong element.

在这里讨论的所有四个元素( biemstrong )中,唯一对其内容赋予上下文重要性的元素是strong元素。

大大小小的文字 (Big and Small Text)

The big element was previously used to represent text displayed in a large font. The big element is now a non-conforming obsolete feature and should not be used. The small element, however, is still valid but has a different meaning.

big元素以前用于表示以大字体显示的文本。 big元素现在是不合格的过时功能,不应使用。 但是, small元素仍然有效,但含义不同。

Previously, small was intended to describe “text in a small font.” In HTML5, it represents “side comments such as small print.” Some examples where small might be used include information in footer text, fine print, and terms and conditions. The small element should only be used for short runs of text. So you wouldn’t use small to mark up the body of an entire “terms of use” page.

以前, small是用来描述“小字体的文本”的。 在HTML5中,它表示“侧面注释,例如小字体”。 可能使用small一些示例包括页脚文本中的信息,精美的文字以及条款和条件。 small元素仅应用于短文本。 因此,您将不会使用small标记整个“使用条款”页面的正文。

Although the presentational implications of small have been removed from the definition, text inside small tags will more than likely still appear in a smaller font than the rest of the document.

虽然表象的影响small已经从定义中删除,里面的文字small标签将很可能仍然会出现在与文档的其余部分较小的字体。

For example, the footer of The HTML5 Herald includes a copyright notice. Since this is essentially legal fine print, it’s perfect for the small element:

例如, HTML5先驱报的页脚包含版权声明。 由于这本质上是合法的精美印刷品,因此非常适合small元素:

<small>&copy; SitePoint Pty. Ltd.</small>

眼痛的cite (A cite for Sore Eyes)

The cite element was initially redefined in HTML5 accompanied by some controversy. In HTML4, the cite element represented “a citation or a reference to other sources.” Within the scope of that definition, the spec permitted a person’s name to be marked up with cite (in the case of a quotation attributed to an individual, for example).

cite元素最初是在HTML5中重新定义的,并引起了一些争议。 在HTML4中, cite元素表示“对其他来源的引用或引用”。 在该定义的范围内,规范允许cite某人的名字(例如,在引用归因于某人的情况下)。

The earlier versions of the HTML5 spec forbade the use of cite for a person’s name, seemingly going against the principle of backwards compatibility. Now the spec has gone back to a more similar definition to the original one, defining cite as “a reference to a creative work. It must include the title of the work or the name of the author (person, people, or organization) or a URL reference, or a reference in abbreviated form.”

HTML5规范的早期版本禁止使用citecite一个人的名字,这似乎违背了向后兼容的原则。 现在,规范又回到了与原始规范更相似的定义,将cite定义为“对创意作品的cite ”。 它必须包含作品的标题或作者的名称(人员,人员或组织),URL引用或缩写形式的引用。”

Here’s an example, taken from the spec:

这是一个示例,摘自规范:

<p>In the words of <cite>Charles Bukowski</cite> -
<q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>

说明(非定义)列表 (Description (not Definition) Lists)

The existing dl (definition list) element, along with its associated dt (term) and dd (description) children, has been redefined in the HTML5 spec. Previously, in addition to terms and definitions, the spec allowed the dl element to mark up dialogue, but the spec now prohibits this.

现有的dl (定义列表)元素及其关联的dt (term)和dd (description)子元素已在HTML5规范中重新定义。 以前,除了术语和定义外,该规范还允许dl元素标记对话,但是现在该规范禁止这样做。

In HTML5, these lists are no longer called “definition lists”; they’re now the more generic-sounding “description lists” or “association lists.” They should be used to mark up any kind of name-value pairs, including terms and definitions, metadata topics and values, and questions and answers.

在HTML5中,这些列表不再称为“定义列表”; 它们现在是听起来更通用的“描述列表”或“关联列表”。 它们应用于标记任何种类的名称/值对,包括术语和定义,元数据主题和值以及问题和答案。

Here’s an example using CSS terms and their definitions:

这是一个使用CSS术语及其定义的示例:

<dl>
  <dt>Selector:</dt>
  <dd>The element(s) targeted.</dd>
  <dt>Property:</dd>
  <dd>The feature used to add styling to the targeted element, defined before a colon.</dd>
  <dt>Value:</dd>
  <dd>The value given to the specified property, declared after the colon.</dd>
</dl>

翻译自: https://www.sitepoint.com/more-html5-semantics-changes-to-existing-features/

语义分割理念:完全卷积

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值