logo标签列表

CSS和Html问题

htmlcss
6

我刚刚找到了一篇Web开发面试题，但是我不确定其中两个问题的答案。对于问题1，我选择了答案e。对于问题2，我选择了答案b，但我不确定是否有更好的方法。

  1. 考虑到标题可能使用大号、粗体、红色字体水平居中，哪种标记结构对于文档主体内的标题最具语义性？

    a. <h1>这是一个标题</h1>

    b. <p align="center"><font size="+3"><b>这是一个标题</b></font></p>

    c. <h1 style="font-weight:bold; font-size:large; text-align:center; color:red;">这是一个标题</h1>

    d. <title>这是一个标题</title>

    e. <h1 class="LargeRedBoldCenterHeading">这是一个标题</h1>

    f. <span class="title">这是一个标题</span>

  2. 以下每个页脚标记解决方案是否可接受？为什么或为什么不？你会提出哪些替代方案？

    a. <div id="footer">
    版权所有 2010 My Company | 这段文字是任意的。
    </div>

    b. <div id="footer">
    <p>版权所有 2010 My Company | 这段文字是任意的。</p>
    </div>

Q1 看起来 a 是赢家......Q2......仍在争议中..... - FlyingCat
6个回答
4
1.的正确答案是a，因为页面上应该只有一个h1标签（所以如果它只是用于h1，那么类可能是不必要的），并且因为在e中使用的类不是语义化的（例如“标题”），而是描述了一种非常特定的样式，所以如果稍后更改了显示标题的方式，则将无用。
实际上，您可以像这样排除其他选项：

  • b）使用align属性，使用font标记，使用b标记（这个有点棘手，但他们更喜欢您使用em），使用p标记作为标题。

  • c）使用内联样式

  • d）在中使用元素尝试呈现内容。这属于<head>，即使它被错误地放置在<body>中也不应在页面上显示任何内容。</p></li> <li><p>e）使用命名不当的类。类应描述类的含义（例如“EmphasisedHeader”，“HelpButton”等），而不是类的呈现方式。把它们看作标签-你喜欢<code><LargeRedBoldCenterHeading></code>标签还是<code><EmphasisedHeader></code>标签？</p></li> <li><p>f）无效的HTML</p></li> </ul> 对于问题<code>2.</code>，答案比较棘手。由于<code>div</code>默认已经是块元素，因此<code>p</code>标记是不必要的。</br><div class="h-2"></div>在HTML 5中，有一个<code>footer</code>元素，事实上，在早期的一些更有吸引力但被放弃的提案中，允许您命名任何您喜欢的元素（可能使用自己的“元doctype”），并且只需像<code>div</code>一样呈现它们（例如，您可以使用<code><adbox></code>标记而不是<code><div class ="adbox"></code>）。</br><div class="h-2"></div>可以认为它们应该在<code><ul id="footer"></code>中，并且每个元素都在<code><li></code>中，但是尝试以符合规范和跨浏览器方式使用<code>|</code>分隔符进行样式设置将非常痛苦。</br><div class="h-2"></div>我会选择<code>a。</code>

3

对于第一个问题，我会选择选项A。你不太可能使用多个h1，而且你选择的类名将演示与类名绑定在一起。例如，如果你想在某个时候将其更改为绿色（类名将变得多余），那么你将遇到问题。

对于页脚，两者都可以接受，具体取决于你是否需要将p作为CSS的额外钩子。

我可能仍然会使用p，因为它是“段落式”的。

1

关于Q1的问题，上面已经回答得很好了。答案是(a)，而不是(e)。

对于Q2，我个人不会采取任何一种方式。由于文本是任意的，我们无法知道标记试图表示什么语义。但是，假设它与版权声明没有直接关系，我会在标记中将其分离，因为它是独立的。可以这样：

<div id="footer">
  <small class="copyright">Copyright 2010 My Company</small> |
  <tagOfArbitraryMeaning>This text is arbitrary.</tagOfArbitraryMeaning>
</div>

（小字体可能看起来像是表现性的，但“小字”在我的脑海中绝对有语义意义）

或者更好的是：

<div id="footer">
  <a href="http://mycompany.website/copyrightinfo.html" rel="licence">Copyright 2010 My Company</a> |
  <tagOfArbitraryMeaning>This text is arbitrary.</tagOfArbitraryMeaning>
</div>

然而，这两个选项都没有提供，所以如果我必须在两者之间选择，我可能会选择（b），纯粹是因为将文本直接放在<div/>中感觉很奇怪，因为它实际上是用来组合其他元素而不是直接容纳文本的。

<div/>仅用于组合其他元素，就像<blockquote/>和<fieldset/>等其他块级标签一样... 好吧-根据HTML4/XHTML1，这就是<div/>应该使用的方式-HTML5有不同的想法，并发明了<section/>元素，它做的事情与<div/>过去所做的完全相同，而使用<div/>似乎被完全不鼓励...非常奇怪。

1
1

问题1：我会选择A。它为标题的事实赋予了语义意义。额外的类是不必要的，因为它非常特定于当前页面的布局和/或设计。

问题2：选择A。段落标签不合适，因为页脚中包含的文本实际上不是一段文字。真正的段落至少包含一个句子，并且具有单个想法或主题；示例使用的只是一小段信息片段，并且不以段落形式呈现给用户。

我认为问题2的答案完全是主观的。虽然你提出了一个很好的观点，不要使用 p。 - alex
@alex 我想有人可能会认为这段文字只涉及版权信息，因此是一个单一的想法，但我仍然不认为它是一个真正的段落，就像你在书、杂志、文章等中看到的那样。 - derekerdmann
0

你在选择第一个选项时选择了正确的e，前提是你将在同一页上使用不同种类的h1标签，但我建议你更好地命名你的类。 align 是一种有点过时的HTML选项，可以使用CSS来实现。此外，请避免在HTML标签内定义style。

对于Q2，b是更好的选择，这样您就可以在整个网站上保持一致性（例如，在

标签上设置的边距和填充）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接