Question

我是编码世界和XHTML的新手。我正在将样本页面放在一起，但是已经阅读了一些相互矛盾的文章，有人建议导航div块出现在内容div块之上，反之亦然，或者根本不重要？以下是我的基本代码示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />

    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Sample page</title>

    <link rel="stylsheet" type="text/css" href="web.css" media="all" />

    <style type="text/css" media="all">

    body {

        margin: 0;
        padding: 0;
        font-family: arial, verdana, sans-serif;
        font-size: medium;
        font-weight: normal;
        font-style: none;
        text-decoration: none;

    }

    #wrapper {

        border: 1px solid #eeeeee;
        width: 960px;
        margin: 0px auto;

    }

    #header {

        background-color: orange;

    }

    #leftnav {

        background-color: yellow;
        float: left;

    }

    #rightnav {

        background-color: blue;
        float: right;

    }


    #content {

        background-color: gray;

    }


    #footer {
        clear: both;
        background-color: green;

    }

    </style>

</head>

<body>

    <div id="wrapper">
        <div id="header">
            header
        </div>

        <div id="leftnav">
            leftnav
        </div>

        <div id="rightnav">
            rightnav
        </div>

        <div id="content">
            content
        </div>

        <div id="footer">
            footer
        </div>
    </div>

</body>
</html>

Answer 1

我认为你需要详细说明你的问题。我无法弄清楚你是否关注SEO或HTML代码。在任何地方宣布潜水不是SEO问题。但为了更好的可读性，最好按顺序制作网页。

喜欢顶部的标题。底部中心和页脚的内容。可以在内容之前或之后提及左侧或右侧导航菜单，但我建议您首先应该左侧导航，然后是内容，然后右侧....

Answer 2

将导航块放在内容块之前的建议与SEO无关，但与可用性相关，特别是对于那些有屏幕阅读器的人。

我们的想法是将第一个（图形浏览器不可见）链接放到页面内容中，以便绕过导航。

Answer 3

理想情况下，从SEO角度来看，您希望最重要的代码在HTML源代码中显得最高。这是可能导致页面中某些内容被认为对搜索引擎有多重要的众多因素之一。

如果是我，我会对提供的基本模板进行以下调整

将内容div移动到源代码中的导航元素上方。
将内联CSS代码移动到外部CSS文件，以帮助减少页面加载时间，并允许最重要的内容在源代码中移动得更高。

Answer 4

您的代码有误，但以下是您可以解决的问题：您正在使用XHTML，因此您必须包含XML语言信息，您还应该在HTML声明中包含您的一般语言信息，如下所示：

Microsft的Bing会将此标记为错误，并通知您适当更改它。

不要使用边距或浮点数！这就像说，好吧，请将这个元素向左移动一点向右移动。没有意义！使用绝对定位和百分比将元素放在网页CSS中。今天有太多不同尺寸的屏幕和太多的分辨率。浮动和边缘是1995年，我不知道为什么人们仍在使用这些方法。我们现在也有一个由移动设备驱动的社会。请记住，设备上的一个像素将大于或小于另一个设备上的一个像素。你可以拥有5台17英寸的笔记本电脑，所有笔记本电脑的分辨率完全不同！可以为图像和元素指定固定的像素宽度和高度，但在放置这些元素时必须使用百分比，否则它们将不会出现在备用设备和LCD屏幕上的正确位置。

如果使用百分比值使用绝对定位来定位元素，例如：

“position：absolute; left：30％; top：5％;”，然后该特定元素将显示在屏幕上，距左侧30％，屏幕顶部5％，无论设备如何渲染吧！但是，如果您使用固定像素值定位元素，请说：

“position：absolute; left：160px; top：45px;”这将无法在您正在查看的屏幕上的任何屏幕上正确呈现。不要这样做！想一想吗？你有2个独立的分辨率，一个是1024x768，另一个是1366x768，显然使用固定值会导致严重的问题。百分比是屏幕或浏览器分辨率的百分比，而像素值是几乎不变的固定值。

至于您的问题，您可以按照您希望的方式包含导航或任何其他内容，只需确保使用CSS ID和相应的DIV标记映射回来。无论何时何地在CSS中指定它们都无关紧要。它完全取决于你。只是远离所有“填充”和“边缘”的东西，它毫无意义。通过绝对定位，您无需浮动任何东西，因为屏幕的左上角或右下角也可以完全按照您的需要进行操作。

XHTML和搜索引擎优化

4 个答案: