Question

我正在使用Dreamweaver编写一个简单的网站索引页面。当我运行W3验证器时，我收到以下错误消息，我无法解决：元素“header”underfined [XHTML 1.0 Strict] 元素“nav”undefined [XHTML 1.0 Strict]

这是我的HTML / CSS代码：

<!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 name="description" content="Yahoo Web Hosting Review and PHP Tutorial"/>
<meta name="keywords" content="Web,Hosting,Yahoo,PHP, configuration, advantages, disadvantages,
how to, instructions"/>
<title>Yahoo Web Hosting Reviews and Tutorial</title>

<link rel="stylesheet" type="text/css" href="css/styles.css"/>

</head>

<body>
<div class="container">
<div id="header">
<header>Yahoo Web Hosting Reviews and PHP Tutorial</header>
</div>
<nav>
<a href="../index.html">Home</a>&nbsp;&nbsp;&nbsp;<a 
href="../PHP.html">PHP</a>&nbsp;&nbsp;&nbsp;<a href="../Reviews.html">Reviews</a></nav>
</div>
<div class="main-content">
<h1>Yahoo Web Hosting</h1>
<p class="definition">Is it a good fit for you?</p>
<h2>PHP Configuration How-To</h2></div>
<div id="footer">
<div class="footer-content">Copyright 2014 John Doe. All rights reserved.</div>

</div></body>
</html>

CSS代码：

#header {
    background-color: #000;
    border-top-color: #6CF;
    border-right-color: #6CF;
    border-bottom-color: #6CF;
    border-left-color: #6CF;
    height: 120px;
    width: auto;
    margin-top: 5px;
    padding-left: 5px;
    top: auto;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: #FFF;
    font-size: xx-large;
    font-weight: bold;
}
.main-content {
    text-align: center;
    height: 500px;
    position: relative;
    padding: 100px;
}
.footer-content {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 90%;
    background-color: #6CF;
    padding: 10px;
    position: relative;
    bottom: 0px;
    width: auto;
}
.container {
    background-color: #6CF;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    color: #000;
}
.content {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 500px;
}
#footer {
    background-color: #6CF;
    height: 50px;
    position: relative;
    width: auto;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    bottom: 0px;
}
h1 {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: #000;
    text-align: center;
    background-color: #FFF;
}
#nav {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 100%;
    font-weight: bolder;
    color: #000;
    text-align: left;
    height: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: auto;
}

感谢任何帮助。我是新手，但是我试图理解这个问题让我的大脑挣扎。

Answer 1

header元素是HTML 5 doctype的一部分，因此出错。 http://html5doctor.com/the-header-element/ 导航也是如此。

这是有效的XHTML，因为你使用xhtml1-strict。

 <div class="container">
   <div id="header">
   Yahoo Web Hosting Reviews and PHP Tutorial
   </div>
 </div>

Answer 2

与@JohanVandenRym一样，header和nav是HTML5的一部分。作为替代解决方案，您可以将doctype更改为HTML5。

使用它：

<!DOCTYPE html>
<html>

而不是：

<!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">

更新：

如果您尝试将doctype保持为严格的XHTML。您应该使用header更改nav和div。

<div id="header">
  <div>Yahoo Web Hosting Reviews and PHP Tutorial</div>
</div>

<div id="nav">
  <a href="../index.html">Home</a>&nbsp;&nbsp;&nbsp;<a href="../PHP.html">PHP</a>&nbsp;&nbsp;&nbsp;<a href="../Reviews.html">Reviews</a>
</div>

错误代码元素“”undefined [XHTML 1.0 Strict]

2 个答案: