-2

所以有人告诉我下面的代码用 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>

我真的很感激任何帮助。谢谢你！

4

6 回答 6

3

使用 w3c 验证器进行检查

前往关注

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

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

于 2014-01-21T23:50:39.527 回答
0

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

例子：

<img src="smiley.gif" alt="Smiley face" height="42" width="42">
于 2014-01-21T23:49:26.627 回答
0

不完全是 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-orientated-css-oocss/

于 2014-01-22T00:04:24.107 回答
0

要成为格式良好的 HTML，所有内容都需要在html标签内，除了DOCTYPE.

于 2014-01-21T23:46:15.183 回答
0

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

我建议你有一个单独的文件，Style如果Script有的话，并包含在你的<head></head>标签中

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

于 2014-01-22T00:09:50.500 回答
-2

position: absolute除非万不得已，否则不要元素。您不需要不会visibility: visible;隐藏或不会覆盖hidden. 此外，如果您要对其中的大多数属性具有相同的属性，那么最好为所有这些属性分配一个类名并在其中一次添加这些属性。

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

也不要将您<div id="mainNavD">的内容和它的内容包装在<p>标签中。你根本不需要那个p。

于 2014-01-21T23:49:14.423 回答