扩展HTML5标签集合

时间:2012-03-23 08:02:56

标签: html xml html5

如您所知,HTML5引入了一些新的html标记,如页脚,标题,...

什么阻止我们使用大量其他新标签并将shiv应用于这些新标签? (来自功能,行为,风格,结构,......观点)

我想使用以下代码(更多语义,简洁和可读,向前迈进Web 3.0):

<style type="text/css">
    book {
        display: block;
        color: red;
    }

    book title {
        display: inline-block;
        font-weight: bold;
    }
</style>

<book>
    <title>
        My Title
    </title>
</book>

而不是使用以下传统(!)代码:

   <style type="text/css">
        div.book {
            color: red;
        }

        div.book div.title {
            font-weight: bold;
        }
    </style>

    <div class="book">
        <span class="title">My title</span>
    </div>

4 个答案:

答案 0 :(得分:5)

这似乎是RDFa的一个用例。实际上,RDFa specification中有一个非常相似的例子。这是你可以做的(我知道,它比你提出的更冗长,但谁说更多的语义意味着更简洁?)

<html
  xmlns="http://www.w3.org/1999/xhtml"
  prefix="bibo: http://purl.org/ontology/bibo/
          dc: http://purl.org/dc/terms/"
>
  <head>
    <title>Title of the web page</title>
    <style type="text/css">
      div[typeof="bibo:Book"] {
        color: red;
      }
      span[property="dc:title"] {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div typeof="bibo:Book">
      <span property="dc:title">My title</span>
    </div>
  </body>
</html>

在这里,你说有一个bibo:Book类型的实体(你需要定义一个引用词汇表的命名空间,这里是Bibliography ontology),这个实体有一个dc:title (再次,该属性在Dublin Core词汇表中定义)。 你可以看到我正在使用CSS2选择器来适当地格式化这本书。

答案 1 :(得分:2)

<title>已经是HTML中的一个元素。如果您在所有HTML消费者中执行此操作,您知道会发生什么吗?例如在IE8及更早版本中?

即使您将自己局限于HTML中当前不存在的元素,如何防止将来发明同名元素,以及浏览器中的行为会破坏您的页面?

答案 2 :(得分:1)

您可以在原始XML中完成所需的工作......

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="main.css" type="text/css"?>
<Root>
  <book>
    <title>
      My Title
    </title>
  </book>
</Root>

和main.css:

book {
    display: block;
    color: red;
}

book title {
    display: inline-block;
    font-weight: bold;
}

足够简洁?

答案 3 :(得分:1)

使用自己的标签可以很好地解决问题,听起来很诱人。但是,你没有添加任何意义(语义);一个发明的标签没有明确的含义,假装标签 name 描述的是一种幻觉。

Custom tags have several problems。但是,您的简单示例还演示了HTML规范中定义的标记的扩展使用。谁知道如果文档包含多个title元素或title元素超出其“合法”范围head元素,会发生什么?谁知道搜索引擎会考虑什么呢?

重点是title是在HTML中定义的,浏览器会以自己的方式对待它,而这些方式是您无法控制的。如果浏览器决定将错误放置的title元素视为head中符合标准的元素,并因此以某种方式使用它(例如,在顶部栏或标签控件中),您可以做什么关于它?如果它甚至覆盖符合标准的title元素,你会怎么做?

如果您只使用自定义标记,则可能决定忽略IE问题(使用JavaScript无法完全解决,因为JavaScript可能会被禁用)。但是,当某些浏览器供应商开始支持扩展标记并且它恰好与您的标记具有相同的名称(但含义不同)时,您仍然会使用可能在明天崩溃的内容。 <book>是一个很好的候选人。有一天它甚至可能会出现在HTML规范中; HTML5草稿已经有<article>

您的样式表可能会覆盖当前CSS中可描述的任何默认表示,但浏览器可能使用扩展的CSS功能,或者可能使用CSS中无法描述的表示功能。新标签可能具有默认的功能,让您感到惊讶,现在很难预料到。