html 语义 / css

Question

样式设计时遇到了一个小问题，所以我停下来考虑我的语义标记。这就是我现在的状态。

H1 - site logo 
H2 - page title - eg: contact page
H3 - title of each shop
H4 - Description title

现在是我不确定的部分： H4 - 重复并用于，

1) "Open Close" title
2) "Services" title
3) "Location" title
4) "Ratings" title 
5) "Comments" title 

1到5都是信息标题，如你所见，我目前每个商店有6个H4元素， 2 3 4 和 5 具有相同的样式，1 具有不同的样式，描述标题的 H4 也具有不同的样式。

一种方法是使用 H6，但“打开关闭”的 H5 字体较小，这意味着 H5 会比 H6 小。我宁愿编辑元素来改进代码的语义，而不是简单地围绕当前代码设计样式。谢谢

Answer 1

如果您愿意进入 HTML5 领域，您可以将内容放入

中，如下所示：

<header>
<hgroup>
    <h1>Site Title</h1>
    <h2>Sub Heading</h2>
  </hgroup>
</header>

<section>
  <hgroup class="shop">
    <h1>Shop Name/Title</h1>
    <h2>Description</h2>
    <h3>Open/Close</h3>
    <h3>Services</h3>
    <h3>Etc.</h3>
  </hgroup>
</section>

使用

将允许您重用 元素在语义上。

Answer 2

我想当你考虑语义时，你仍然对表示考虑太多。

您应该将设计过程分为两个阶段。首先，您只考虑语义 - 您可能会尝试不观看浏览器中的页面。查看原始 HTML 代码，并思考代码是否看起来不错。

在 HTML5 中，有

和

标签。使用它们将您的内容分组，并在每个部分中放置一个

标签。这在语义上会很好。

如果您使用 HTML4，则可以使用

来标记部分，并使用

..

作为标题，但仍然不要考虑字体大小！

完成之后，您可能会开始考虑 演示。为每个部分分配一个类，并根据标题所在的部分定义标题。示例：

<article>
  <h1><img src="logo" alt=""/>Page title</h1>
  <section class="shop">
    <h1>Shop 1</h1>
    <section class="items">
      <h1>Open Close</h1>
      <!-- something -->
    </section>
    <section class="items">
      <h1>Services</h1>
      <!-- something -->
    </section>
    <!-- more sections... -->
  </section>
  <section class="shop important">
    <h1>Shop 2</h1>
    <!-- and so on... -->

然后您可以根据需要自由设置标题样式，使用 CSS 选择器的全部功能（在适当的情况下）。

article > h1 { // Page header
  font-size: 200%;
}
section.shop  > h1 { // Shop title
  font-size: 150%;
}
section.shop + section.shop > h1 {  // All but the first..
  color: gray;
}
section.items > h1 { // item title
  font-size: 110%;
}
section.shop.important > section.items:first-child > h1 {
  color: red;
}

“items”类可能应该以不同的方式命名，但我不确定“shop”部分的各部分的目的是什么。它只是作为示例给出的，因为您可以安全地完全省略该类，并且您仍然可以使用正确的选择器来设置它们的样式：

section.shop > section > h1 {
  // format of the "items" section
}

Answer 3

你可以使用CSS来设置各种标题的样式，这样你就可以有诸如

<h1>The sites title</h1>
<h2>This is the contacts page</h2>
<h3>Address</h3>
our address
<h3>Phone nunbers</h3>
phone numbers

etc之

类的东西。然后在css中你可以有

h1
{
    font-size: 10pt;
}

h2
{
    font-size:15pt;
}

etc。（这使得h2标签的尺寸更大！）

Answer 4

如果您关心 SEO，则应使用 H1 作为页面标题。检查H1 标签、SEO 和语义

Answer 5

您可以为字体大小创建类，例如

CSS。

.large {
    font-size: 2em;
}

.larger {
    font-size: 22.5em;
}

.huge {
    font-size: 3em;
}

类似地，您可以为不同的页面制作具有不同 ID 的不同包装器。然后使用 ID 来设置元素的样式。

对于标题，您可以创建一个类 .desc （或您喜欢的任何其他内容）。然后你可以有 div 像

1. #services
2. $about-us
3. #contact

现在你可以专门设计你的 < code>h4 元素，通过向其添加类 .desc 来实现。

HTMLCSS

<h4 class="desc">
</h4>

​

#services h4.desc {
    /*The styling comes here*/
}
#about-us h4.desc {
    /*The styling comes here*/
}
#contact h4.desc {
    /*The styling comes here*/
}