建立任务语法,建立gram_建立更强大的DOM

建立任务语法,建立gram

In Nate Koechley’s excellent talk on Frontend Engineering, he talks about the importance of building a “stronger DOM”. By marking up your site with meaningful elements and attributes, you give your markup more value and provide a richer experience for both users and machines.

在Nate Koechley关于Frontend Engineering 的精彩演讲中，他谈到了构建“更强DOM”的重要性。 通过使用有意义的元素和属性标记站点，可以为标记提供更多价值，并为用户和计算机提供更丰富的体验。

In addition, a strong DOM provides you with numerous attributes and elements that you can make use of to style the content to your hearts desire. This gives you much more power and control with your CSS, and helps to greatly decrease your usage of extraneous divs and classes

此外，强大的DOM为您提供了许多属性和元素，可用来根据您的内心需求对内容进行样式设置。 这为您CSS提供了更多功能和控制，并有助于大大减少您对无关的div和类的使用

A very quick way to improve your markup skills, and therefore the value of your content, is to expand your knowledge of HTML elements, and start making use of a few you might not have been aware of.

提高标记技巧以及内容价值的一种快速方法是扩展您对HTML元素的了解，并开始使用一些您可能没有意识到的知识。

和 (and)

The fieldset element is used to group related controls and labels within a form. They are a great way to help make your form easier to understand, and more accessible for speech-navigated user agents.

fieldset元素用于将表单中的相关控件和标签分组。 它们是帮助您使表单更易于理解和导航的用户代理更易使用的好方法。

It should be used in conjunction with the legend element to provide an even richer and more usable experience. The legend element basically defines a caption for the fieldset. Here’s an example of how you could use these elements in your markup:

它应与图例元素一起使用，以提供更丰富和更可用的体验。 图例元素基本上为字段集定义标题。 这是一个如何在标记中使用这些元素的示例：

3. Team Captain

   队长

4. Name

   名称

7. Player #2

   玩家＃2

8. Name

   名称

An often forgot element that you can start using immediately in your text is the q element. The q element is very similar to the blockquote element, but should be used in a different context. The blockquote element is meant to be used for longer, block-level quotes. The q element, on the other hand should be used for short quotes.

您经常可以在文本中立即开始使用的一个经常被遗忘的元素是q元素。 q元素与blockquote元素非常相似，但应在不同的上下文中使用。 blockquote元素旨在用于更长的块级引用。 另一方面，q元素应用于短引号。

All major browsers, other than IE6 and IE7, will automatically insert quotation marks around the content within the q element, according to the HTML spec. There’s a few ways to work around this, but my favorite solution is the one proposed by Stacy Cordoni in an A List Apart article from 2006. Her solution is to remove the quotes from around the q element using the :before and :after pseudo-classes to even the playing field. Then, with each of the major browsers not rendering quotes, you can insert them directly into your markup, ensuring that all browsers render your quote the same.

根据HTML规范，除IE6和IE7外，所有主要浏览器都会在q元素内的内容周围自动插入引号。 有几种方法可以解决此问题，但是我最喜欢的解决方案是Stacy Cordoni在2006年的A List Apart文章中提出的解决方案。她的解决方案是使用：before和：after伪-删除q元素周围的引号。课程甚至运动场。 然后，在每个主要浏览器都未提供引号的情况下，您可以将其直接插入到标记中，以确保所有浏览器都提供相同的引号。

• “Remember that drover, the one I shot in the mouth so’s the teeth come out the back of his head?”, asked Munny.
  “还记得那位下车者，我在嘴里开枪的那颗牙齿是从他的后脑出来的吗？”芒尼问。

The cite element is used to identify a reference or citation to another source, like a book or another website. By default, each of the major browsers render the cite element in italics. Making use of our q element example, adding the cite element would give us something like this:

cite元素用于标识对其他来源(如书或其他网站)的引用或引用。 默认情况下，每个主要浏览器均以斜体显示cite元素。 利用我们的q元素示例，添加cite元素将为我们提供以下内容：

• “Remember that drover, the one I shot in the mouth so’s the teeth come out the back of his head?”, asked Munny.
  “还记得那位下车者，我在嘴里开枪的那颗牙齿是从他的后脑出来的吗？”芒尼问。

The dfn element is used to markup the defining instance of a word or phrase. It’s important to note that it is not intended to markup the actual definition itself, but instead the word or phrase being defined. Most major browsers will render the content within the dfn element in italics, though of course you can alter that as you wish with CSS.

dfn元素用于标记单词或短语的定义实例。 重要的是要注意，它并不是要标记实际的定义本身，而是要定义的单词或短语。 大多数主流浏览器都会在dfn元素中以斜体显示内容，尽管您当然可以使用CSS进行更改。

• The dfn element is used to markup the defining instance of a word or phrase.
  dfn元素用于标记单词或短语的定义实例。

和 (and )

Here’s one for anyone who writes any sort of articles online. You can use the ins and del elements to identify content that has been either inserted or deleted since the content’s publication. The ins element, by default, is underlined, and the del element, by default, is striked through.

这是供在线撰写各种文章的任何人使用的。 您可以使用ins和del元素来标识自内容发布以来已插入或删除的内容。 缺省情况下，ins元素带有下划线，而缺省情况下，del元素被删除。

• SXSW’s parties are a great time to booze it up with mingle with fellow developers.

  SXSW的聚会是聚会的好时机 用 与其他开发人员混在一起。

The address element is slightly misleading. One would think you would use it to mark up a physical address, but that’s not necessarily the case. The address element is actually intended to contain the contact point for the document containing it. While this certainly could contain a physical address, it doesn’t have to. It could house any sort of contact information provided that it is contact information for the author and/or owner of the document in question.

地址元素有点误导。 有人会认为您会用它来标记物理地址，但不一定是这样。 地址元素实际上旨在包含包含它的文档的接触点。 尽管这当然可以包含一个物理地址，但不必如此。 它可以容纳任何形式的联系信息，只要它是有关文档的作者和/或所有者的联系信息即可。

For example, I could use the address element to provide my contact information since I am the owner of this article, like so:

例如，由于我是本文的所有者，因此可以使用address元素提供我的联系信息，如下所示：

• tim@timkadlec.com

  tim@timkadlec.com

By default, the address element is rendered in italics in each of the major browsers.

默认情况下，在每个主要浏览器中，address元素均以斜体显示。

你自己看 (See For Yourself)

If you’re interested, I put up a page with examples of each of the elements above. I did not apply any CSS, so you can see how each element is rendered by default in different browsers.

如果您有兴趣，我会在上面放置一个页面 ，上面列出了每个元素的示例。 我没有应用任何CSS，因此您可以看到默认情况下如何在不同的浏览器中呈现每个元素。

翻译自: https://timkadlec.com/2009/05/building-a-stronger-dom/

建立任务语法,建立gram