链接/锚元素的基本 html5 问题？

发布于 2024-10-19 09:56:44 字数 2723 浏览 1 评论 0原文

我最终希望重建一个符合 Web 标准的旧网站，并认为我会尝试涉足 html5 和 css3。我知道这些都还没有得到跨浏览器的完全支持，但我愿意暂时在任何限制内工作。

然而，我已经把头撞到了早期的墙上，坦白地说，我现在感觉很愚蠢。我似乎无法在代码生成的页面中突出显示文本或打开链接。

html:

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="UTF-8" />
        <title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
        <link rel="stylesheet" href="HIcss3.css" />
        <script src="HIjs.js"></script>
    </head>
    <body>
        <div class="title">
            <div id="search">
                <form id="searcher" onclick="startSearch('sbox')">
                    <input type="text" id="sbox" size="15" value="Search This Site"> 
                    <input type="button" id="sbutt" value="Find"> 
                </form> 
            </div> 
        </div>
        <div class="navigation">
            <div id="about"> <a href="about.htm"> About </a> </div>
            <div id="blog"> <a href="blog.htm"> Blog </a> </div>
            <div id="research"> <a href="research.htm"> Research/ Academic Papers </a> </div>
            <div id="hypercourse"> <a href="hypercourses"> Hypercourses </a> </div>
            <div id="links"> <a href="links"> Links </a> </div>
            <div id="contact"> <a href="about.htm#contact"> Contact </a> </div>
        </div>

        <div class="download">
            <a href="http://www.mozilla.com/firefox/" target="_blank">
                Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
            </a> 
        </div>

        <p>
            Welcome to HI Updates!
        </p>

    </body>
</html>

css:

body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}

h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}

a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}

div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }


div.download {text-align:left} 
div.download img {border:0; float:left; width:3em; height:3em}

div.navigation {}
#about {}
#blog  {}

这对我在 html 4 中的最后一个布局来说不是问题，我感觉我一定忽略了一些非常明显的东西......更糟糕的是，它顺利地通过了验证器：P

谢谢！

原文

I'm ultimately looking to rebuild an old website that complies to web standards, and thought I would try getting my feet wet in html5 and css3. I know neither of these are fully supported across browsers yet, but I'm willing to work within whatever limits for the time-being.

However, I'm already ramming my head against an early wall, and frankly feel pretty stupid right now. I can't seem to highlight text OR open links in the pages generated by my code.

html:

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="UTF-8" />
        <title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
        <link rel="stylesheet" href="HIcss3.css" />
        <script src="HIjs.js"></script>
    </head>
    <body>
        <div class="title">
            <div id="search">
                <form id="searcher" onclick="startSearch('sbox')">
                    <input type="text" id="sbox" size="15" value="Search This Site"> 
                    <input type="button" id="sbutt" value="Find"> 
                </form> 
            </div> 
        </div>
        <div class="navigation">
            <div id="about"> <a href="about.htm"> About </a> </div>
            <div id="blog"> <a href="blog.htm"> Blog </a> </div>
            <div id="research"> <a href="research.htm"> Research/ Academic Papers </a> </div>
            <div id="hypercourse"> <a href="hypercourses"> Hypercourses </a> </div>
            <div id="links"> <a href="links"> Links </a> </div>
            <div id="contact"> <a href="about.htm#contact"> Contact </a> </div>
        </div>

        <div class="download">
            <a href="http://www.mozilla.com/firefox/" target="_blank">
                Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
            </a> 
        </div>

        <p>
            Welcome to HI Updates!
        </p>

    </body>
</html>

css:

body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}

h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}

a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}

div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }


div.download {text-align:left} 
div.download img {border:0; float:left; width:3em; height:3em}

div.navigation {}
#about {}
#blog  {}

This was not a problem with my last layout in html 4, and feel I must be overlooking something REALLY obvious... even worse, it went through the validator without a hitch :P

Thanks!

分享到QQ

分享到微博