HTML5和CSS - 自定义标签？

Question

我正在制作一个纯HTML 5的学习网站。

在我的CSS之前可能是这样的：

div.BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

#content {
  width: 90%;
  background: url(transwhite.png);
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

我认为使用HTML5，我可以在代码中这样做：

<header>  
<hgroup>
    <content>
    <BoxHouse>
        <h1>HTML 5</h1>  
        <h2>The mark-up language for fun and profit</h2>
    </BoxHouse>
    </content>
</hgroup>  

将此文本翻译为中文：

给出下面的新CSS：

BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

content {
  width: 90%;
  background-image: url('../transwhite.png');
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

“但明显它不起作用。我做错了什么？”

- ator

---

你为什么要使用“FloatingBox”创建规则？ - Topera

你的HTML没有浮动框。 - Topera

好的，看起来我混淆了我的CSS。 - ator

Answer 1

在HTML5中，您不能使用自定义标签。 您应该直接在CSS中选择h1，h2等，或者在它们上使用类。

<header class="content">  
<hgroup class="BoxHouse">
    <h1>HTML 5</h1>  
    <h2>The mark-up language for fun and profit</h2>
</hgroup>

另外，background-image: url(transwhite.png); 这个图片是半透明的白色背景吗？如果是的话，您可以在CSS3中使用RGBA颜色。其中A表示Alpha通道，因此您可以使用background-color: rgba(255,255,255,0.5); 来创建一个50%透明度的白色框。这比使用opacity属性的优点是文本不会透明，仍然是清晰和实心的。

- Ric

---

我曾经像AXL一样认为我们可以在HTML5中使用自定义标签。我忘记了我从哪里听到的。你确定不能吗？你怎么知道的？ - ma11hew28

你好，我认为如果你将HTML5作为XML（XHTML5）提供，你可以使用自定义标签，但我认为你需要使用自定义DTD。我记不清确切的来源了，因为我之前看过一段时间了。虽然如此，我不建议这样做，最好坚持使用现有的标签，因为它们具有已知的语义含义。新标签没有任何意义，例如标题、文章、部分 - 这些创建文档大纲，即文档的结构，但BoxHouse对于浏览器、搜索引擎等没有任何意义。当与类和ID组合时，HTML5标签应该可以满足您的所有需求。 - Ric

如果在标签上附加data-，则可以使用自定义属性，例如<h1 data-myattr="value">Heading</h1>。欲了解更多信息，请参阅此处：http://html5doctor.com/html5-custom-data-attributes/ - Ric

看起来HTML5 Doctor在这里回答了这个问题：http://html5doctor.com/your-questions-13/ - Ric

Answer 2

你想做的事情是有道理的。但这不是CSS的工作方式。

你可以利用类似<em>和<strong>这样的老标签来保持你的HTML简洁，但你不能创建新的标签。相反，使用用户友好的<span class="myclass">...

- Anthony