Question

所以我被告知以下代码在html中编写得不好。有人可以告诉我它有什么问题并修复它吗？它在我的浏览器中工作得很好，Visual Studio不会给我一个错误。如果我有错误的方式编写此模板或者这是合适的，请通知我。

    <style type="text/css">
#home { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 25px; top: 18px; margin-right: 25px; visibility: hidden; }
#aboutUs { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 25px; top: 18px; margin-right: 25px; visibility: visible; }
#services { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 180px; top: 18px; margin-right: 25px; visibility: visible; }
#support { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 325px; top: 18px; margin-right: 25px; visibility: visible; }
#contactUs { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 460px; top: 18px; margin-right: 25px; visibility: visible; }
#information { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 600px;  top: 18px; margin-right: 25px; visibility: visible; }
#sponsored { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 755px; top: 18px; margin-right: 25px; visibility: visible; }
#reviews { z-index: 100;  position: absolute; color: #003366; font-size: 24px;  margin-    left: 910px; top: 18px;  margin-right: 25px; visibility: visible; }
</style>

<!DOCTYPE html>
<html> 
    <head>
        <!-- Cheange Title of Webpage below -->
        <title>DTSU - Home</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    </head>
    <body>
        <!-- Div Buttons for Pages -->
        <p>
            <div id="mainNavD">
                <a href="home.html" id="home">Home</a>
                <a href="aboutUs.html" id="aboutUs">About Us</a>
                <a href="services.html" id="services">Services</a>
                <a href="support.html" id="support">Support</a>
                <a href="contactUs.html" id="contactUs">Contact Us</a>
                <a href="information.html" id="information">Information</a>
                <a href="sponsored.html" id="sponsored">Sponsored</a>
                <a href="reviews.html" id="reviews">Reviews</a>
                <img src="pictures/mainNavBar.jpg"/>
            </div>
        </p>
        <!-- Header and Logo Combo -->
        <div id="headerD">
            <img src="pictures/header.jpg" />
            <div id="logoD"></div>
        </div>

        <!-- Home Page Content -->
    </body>
</html>

我非常感谢任何帮助。谢谢！

Answer 1

使用w3c验证器检查

转到以下

http://validator.w3.org/#validate_by_input

复制并粘贴您的html并查看错误。您的代码有3个错误和7个警告。

Answer 2

要构建格式良好的HTML，除了html之外，所有内容都必须位于DOCTYPE标记内。

Answer 3

在你的图片中尝试使用alt，它可以帮助seo和一些浏览器。

示例：

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Answer 4

不完全是HTML，但从CSS的角度来看，如果所有共享属性都在一个共享类中，而不是为每个ID反复重复，那就太好了。

例如，CSS：

.common { z-index: 100;  position: absolute; color: #003366; font-size: 24px; top: 18px;  margin-right: 25px; visibility: visible; }
#reviews { margin-left: 910px; }

和HTML：

<a href="reviews.html" id="reviews" class="common">Reviews</a>

也许这个链接可以提供帮助; http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

Answer 5

最好将所有内容分开，将样式表放在不同的文件中，javascript或Jquery放在不同的文件中，只有在需要覆盖某些样式时才包含HTML中的所有inline-style标记页。它保持清洁，并帮助您将来添加任何进一步的功能。

我建议您使用Style和Script的单独文件（如果有），并在<head></head>标记中加入

对于正确的格式良好的文档，请使用Atul提供的链接。

Answer 6

除非是最后的手段，否则不要position: absolute元素。对于不会隐藏或未覆盖visibility: visible;组组的元素，您不需要hidden。此外，如果您要为大多数这些属性设置相同的属性，最好为所有这些属性分配一个类名，并在那里添加一些属性。

然后，您可以添加另一个类来更改值，也可以定位它们的id。将<style></style>放在<head>标记内，如果您已经链接了外部样式表，那么您也可以将这些样式放在该样式表中，而不是将它们直接应用到html。

也不要将<div id="mainNavD">及其内容包装在<p>标记中。您根本不需要p。

请帮助纠正HTML

6 个答案: