嗨，伙计们，我的英语不好。
我的主人告诉我，我必须在我的html文件中添加html5标签，如页眉，页脚，主页等。但是当我添加例如标题标签时，我的页面会搞砸。
任何人都可以将此标记添加到我的index.html中或回答我如何添加这些标记？非常感谢。
plnkr.co/KLYxwSD8WE6RwXcntQlg
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
header{
margin:auto;
padding:0px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#main{
width:1200px;
height:1865px;
margin:auto;
background-color:#FFF;
}
#menu{
width:1200px;
height:52px;
background-color:#222222;
}
#logo{
float:left;
padding-left:30px;
padding-top:12px;
}
#menu ul li {
float:left;
text-decoration:none;
color:#9e9e9c;
padding-left:23px;
padding-top:15px;
padding-bottom:20px;
padding-right:25px;
display:inline-block;
position: relative;
}
#menu ul li a{
text-decoration:none;
color:#9e9e9c;
}
#menu ul li a:hover{
color:#FFF;
}
#menu ul li:hover{
background: #000;
}
#menu ul.sub-menu {
display:none;
position:absolute;
min-width:110px;
height:auto;
background-color:#000;
margin-top:20px;
margin-left:-25px;
}
#menu li:hover ul.sub-menu {
display: block;
}
#search{
float:right;
padding-top:8px;
padding-right:30px;
}
#search input[type=text]{
width:195px;
height:34px;
border-radius:3px;
border:none;
}
#search input[type=submit]{
width:71px;
height:34px;
border-radius:3px;
border:none;
color:#333335;
}
#header{
height:294px;
width:1200px;
background-color:#9acd32;
}
#header-logo{
padding-top:72px;
padding-left:29px;
float:left;
}
#header-title{
color:#adff30;
float:left;
padding-top:80px;
padding-left:26px;
font-size:65px;
font-family:Arial, Helvetica, sans-serif;
}
#header-txt{
color:#adff30;
float:left;
font-family:Arial, Helvetica, sans-serif;
padding-top:30px;
padding-left:29px;
font-size:20px;
width:1200px;
}
#engage{
float:left;
padding-top:30px;
padding-left:29px;
}
#engage input[type=button]{
width:106px;
height:34px;
font-family:Arial, Helvetica, sans-serif;
border:none;
border-radius:3px;
color:#333335;
}
#body{
width:1200px;
height:auto;
float:left;
}
#body-header{
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
padding-left:34px;
padding-top:76px;
float:left;
}
#body-header-text{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
padding-left:13px;
padding-top:85px;
float:left;
color:#333335;
}
#body-txt{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#333335;
float:left;
padding-left:34px;
padding-top:36px;
}
.body-news{
width:374px;
height:auto;
float:left;
}
#body-news-left{
float:left;
margin-left:26px;
margin-top:18px;
}
#body-news-right{
float:left;
margin-left:37px;
margin-top:18px;
}
.news-pic{
width:359px;
height:300px;
padding-left:8px;
}
.news-title{
font-family:Arial, Helvetica, sans-serif;
color:#3379b7;
font-size:20px;
padding-top:23px;
padding-left:8px;
width:auto;
height:auto;
}
.news-brieftxt{
font-family:Arial, Helvetica, sans-serif;
width:auto;
height:auto;
color:#333335;
font-size:13px;
padding-top:20px;
padding-left:8px;
line-height:17px;
}
#contact-form{
width:379px;
height:auto;
float:right;
margin-top:18px;
margin-left:10px;
}
#contact-from-title{
font-family:Arial, Helvetica, sans-serif;
color:#333335;
font-weight:bold;
padding-left:10px;
}
.input{
font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
color:#333335;
font-weight:700;
font-size:14px;
padding-left:10px;
padding-top:15px;
}
.input input[type=text]{
border:1px solid;
border-color:#CCCCCC;
width:326px;
height:37px;
border-radius:4px;
margin-top:3px;
}
.input input[type=email]{
border:1px solid;
border-color:#CCCCCC;
width:326px;
height:37px;
border-radius:4px;
margin-top:3px;
}
.input input[type=password]{
border:1px solid;
border-color:#CCCCCC;
width:326px;
height:37px;
border-radius:4px;
margin-top:3px;
}
.input input[type=submit]{
border:1px solid;
border-color:#CCCCCC;
width:326px;
height:37px;
border-radius:4px;
margin-top:3px;
}
#forgot{
padding-top:12px;
padding-left:10px;
font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
font-size:13px;
color:#2b82ec;
}
#forgot a{
color:#2b82ec;
text-decoration:none;
font-weight:600;
}
#remember input[type=checkbox]{
margin-top:12px;
margin-left:10px;
float:left;
}
#remember-txt{
margin-top:11px;
font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
font-size:13px;
color:#333335;
float:left;
width:290px;
}
#login input[type=submit]{
font-weight:bold;
font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
font-size:13px;
width:94px;
height:36px;
float:left;
background-color:#43a047;
border:1px solid;
border-color:#CCCCCC;
border-radius:4px;
margin-top:12px;
margin-left:17px;
}
#article{
width:1200px;
height:auto;
background-color:#daa521;
margin-top:15px;
float:left;
}
.article-class{
width:353px;
height:274px;
margin-top:58px;
}
#article-left{
float:left;
margin-left:30px;
}
#article-center{
float:left;
margin-left:40px;
}
#article-right{
float:right;
margin-right:30px;
}
.article-logo{
width:31px;
height:33px;
float:left;
}
.article-title{
width:auto;
height:auto;
font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
font-weight:bold;
font-size:20px;
padding-top:4px;
}
.article-txt{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:auto;
height:auto;
color:#010005;
font-size:16px;
line-height:22px;
float:left;
}
.article-button input[type=button]{
margin-top:20px;
padding:5px 5px 5px 5px;
height:35px;
width:auto;
border:1px solid;
border-color:#CCCCCC;
border-radius:4px;
}
#table{
float:left;
margin-top:45px;
margin-left:44px;
width:1114px;
}
#first-row{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF;
background-color:#daa521;
width:1113px;
height:58px;
font-weight:bold;
float:left;
font-size:14px;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
#no{
padding-top:20px;
padding-left:37px;
padding-right:128px;
}
#name{
padding-right:100px;
}
#age{
padding-right:96px;
}
#job{
padding-right:105px;
}
#birth{
padding-right:90px;
}
#id{
padding-right:90px;
}
#grade{
padding-right:80px;
}
.rows{
width:1113px;
height:42px;
background-color:#FFF;
float:left;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
}
.no{
padding-top:20px;
padding-left:37px;
padding-right:128px;
}
.name{
padding-left:14px;
padding-right:124px;
}
.age{
padding-left:0px;
padding-right:75px;
}
.job{
padding-right:82px;
}
.birth{
padding-right:70px;
}
.id{
padding-right:80px;
}
.action a{
text-decoration:none;
}
.action {
padding-left:70px;
margin-top:15px;
}
#footer{
float:left;
width:1200px;
height:auto;
}
#links{
margin-top:40px;
margin-left:470px;
}
#links a{
text-decoration:none;
color:#3279b7;
font-family:"Times New Roman", Times, serif;
font-size:15px;
}
#copyright{
margin-top:10px;
margin-left:530px;
font-family:"Times New Roman", Times, serif;
font-size:11px;
color:#999;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project 1</title>
<link href="Style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div id="main">
<div id="menu">
<div id="logo">
<img src="Images/logo.png" width="66" height="26" />
</div><!--logo-->
<ul id="main-menu">
<li><a href="a">Home</a></li>
<li><a href="a">About</a></li>
<li><a href="a">Products</a></li>
<li><a href="a">Services</a>
<ul class="sub-menu">
<li><a href="a">service 1</a></li>
<li><a href="a">service 2</a></li>
<li><a href="a">service 3</a></li>
<li><a href="a">service 4</a></li>
</ul>
</li>
</ul>
<div id="search">
<input type="text" name="text" />
<input type="submit" value="Search" name="search"/>
</div><!--search-->
</div><!--menu-->
</header>
<div id="header">
<div id="header-logo">
<img src="Images/header.png" width="65" height="62" />
</div><!--header-logo-->
<div id="header-title">
Dramatically Engage
</div><!--header-title-->
<div id="header-txt">
Objectively innovate empowered manufactured products whereas parallel platforms.
</div><!--header-txt-->
<div id="engage">
<input type="button" value="Engage now" />
</div><!--engage-->
</div><!--header-->
</header>
<div id="body">
<div id="body-header">
Superior Collaboration
</div><!--body-header-->
<div id="body-header-text">
Visualize Quality
</div><!--body-header-text-->
<div id="body-txt">
Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectal capital without superior collaboration and idea-sharing.Holistically ponitificate installed base portals after maintainable products
</div><!--body-txt-->
<div id="body-news-left" class="body-news">
<div class="news-pic">
<img src="Images/news-pic.png" width="359" height="300" />
</div><!--news-pic-->
<div class="news-txt">
<div class="news-title">
Efficiently Unleash
</div><!--news-title-->
<div class="news-brieftxt">
Collaboratively administrate empowered markets via plug-and-play networks.Dynamically procrastinate B2C
users after installed base benefits.Dramatically visualize customer directed convergence without revolutionary ROI.
</div><!--news-brieftxt-->
</div><!--news-txt-->
</div><!--body-news-left-->
<div id="body-news-right" class="body-news">
<div class="news-pic">
<img src="Images/news-pic.png" width="359" height="300" />
</div><!--news-pic-->
<div class="news-txt">
<div class="news-title">
Completely Synergize
</div><!--news-title-->
<div class="news-brieftxt">
Dramatically maintain clicks-and-mortar solutions without functional solutions.Efficiently unleash cross-medi
information without cross-media value.Quickly maximize timely deliverables for real-time schemas.
</div><!--news-brieftxt-->
</div><!--news-txt-->
</div><!--body-news-right-->
<div id="contact-form">
<div id="contact-from-title">
Contact form
</div>
<form action="#" method="post" >
<div id="name" class="input">
Name:<br />
<input type="text" />
</div><!--name-->
<div id="email" class="input">
Email:<br />
<input type="email" />
</div><!--email-->
<div id="password" class="input">
Password:<br />
<input type="password" />
</div><!--password-->
<div id="forgot">
<a href="#">Forgot password?</a>
</div><!--forgot-->
<div id="remember">
<input type="checkbox" />
<div id="remember-txt">Remember</div>
</div><!--remember-->
</div><!--contact-form-->
<div id="login"><input type="submit" value="LOGIN" />
</div><!--login-->
</form>
</div><!--body-->
<div id="article">
<div id="article-left" class="article-class">
<div class="article-logo">
<img src="Images/article-logo1.png" width="26" height="28" />
</div><!--article-logo-->
<div class="article-title">
Dynamically Procrastinate
</div><!--article-title-->
<div class="article-txt">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users
after installed base benefits.Dramatically visualize customer directed convergence without revolutionary ROI.
</div><!--article-txt-->
<div class="article-button">
<input type="button" value="Procrastinate"/>
</div><!--article-button-->
</div><!--article-left-->
<div id="article-center" class="article-class">
<div class="article-logo">
<img src="Images/article-logo2.png" width="29" height="28" />
</div><!--article-logo-->
<div class="article-title">
Efficently Unleash
</div><!--article-title-->
<div class="article-txt">
Dramatically maintain click-and-mortar solutions without functional solutions. Efficiently unleash cross-media
information without cross-media value. Quickly maximize timely deliverables for real-time schmas.Collaboratively administrate empowered markets via plug-and-play networks.
</div><!--article-txt-->
<div class="article-button">
<input type="button" value="Unleash"/>
</div><!--article-button-->
</div><!--article-center-->
<div id="article-right" class="article-class">
<div class="article-logo">
<img src="Images/article-logo3.png" width="31" height="33" />
</div><!--article-logo-->
<div class="article-title">
Completely Synergize
</div><!--article-title-->
<div class="article-txt">
Professionally cultivate one-to-one customer service with robust ideas. Completely synergize resource taxing
relationships via premier niche markets. Dynamically innovate resource-leveling customer service for state
of the art customer service.
</div><!--article-txt-->
<div class="article-button">
<input type="button" value="synergize"/>
</div><!--article-button-->
</div><!--article-right-->
</div><!--article-->
<div id="table">
<table width="1114" >
<thead>
<tr id="first-row">
<th id="no">No</th>
<th id="name">Name and Family</th>
<th id="age">Age</th>
<th id="job">Job</th>
<th id="birth">Birthday</th>
<th id="id">ID NO.</th>
<th id="grade">Grade</th>
<th id="action">Action</th>
</tr>
</thead>
<tbody>
<tr class="rows">
<td class="no">1</td>
<td class="name">Hashem Dick</td>
<td class="age">13</td>
<td class="job">Dick blower</td>
<td class="birth">2016/8/19</td>
<td class="id">6598-1425</td>
<td class="grade">bachelor</td>
<td class="action"><a href="#"><img src="Images/action1.png" /></a><a href="#">
<img src="Images/action2.png" /></a></td>
</tr>
<tr class="rows">
<td class="no">1</td>
<td class="name">Hashem Dick</td>
<td class="age">13</td>
<td class="job">Dick blower</td>
<td class="birth">2016/8/19</td>
<td class="id">6598-1425</td>
<td class="grade">bachelor</td>
<td class="action"><a href="#"><img src="Images/action1.png" /></a><a href="#">
<img src="Images/action2.png" /></a></td>
</tr>
<tr class="rows">
<td class="no">1</td>
<td class="name">Hashem Dick</td>
<td class="age" >13</td>
<td class="job">Dick blower</td>
<td class="birth">2016/8/19</td>
<td class="id">6598-1425</td>
<td class="grade">bachelor</td>
<td class="action"><a href="#"><img src="Images/action1.png" /></a><a href="#">
<img src="Images/action2.png" /></a></td>
</tr>
<tr class="rows">
<td class="no">1</td>
<td class="name">Hashem Dick</td>
<td class="age">13</td>
<td class="job">Dick blower</td>
<td class="birth">2016/8/19</td>
<td class="id">6598-1425</td>
<td class="grade">bachelor</td>
<td class="action"><a href="#"><img src="Images/action1.png" /></a><a href="#">
<img src="Images/action2.png" /></a></td>
</tr>
<tr class="rows">
<td class="no">1</td>
<td class="name">Hashem Dick</td>
<td class="age">13</td>
<td class="job">Dick blower</td>
<td class="birth">2016/8/19</td>
<td class="id">6598-1425</td>
<td class="grade">bachelor</td>
<td class="action"><a href="#"><img src="Images/action1.png" /></a><a href="#">
<img src="Images/action2.png" /></a></td>
</tr>
<tr class="rows">
<td class="no">1</td>
<td class="name">Hashem Dick</td>
<td class="age">13</td>
<td class="job">Dick blower</td>
<td class="birth">2016/8/19</td>
<td class="id">6598-1425</td>
<td class="grade">bachelor</td>
<td class="action"><a href="#"><img src="Images/action1.png" /></a><a href="#">
<img src="Images/action2.png" /></a></td>
</tr>
<tr class="rows">
<td class="no">1</td>
<td class="name">Hashem Dick</td>
<td class="age">13</td>
<td class="job">Dick blower</td>
<td class="birth">2016/8/19</td>
<td class="id">6598-1425</td>
<td class="grade">bachelor</td>
<td class="action"><a href="#"><img src="Images/action1.png" /></a><a href="#">
<img src="Images/action2.png" /></a></td>
</tr>
</tbody>
</table>
</div><!--table-->
<footer id="footer">
<div id="links">
<a href="#">Terms & Conditions</a>| <a href="#">Privacy Policy</a>|<a href="#">Contact</a>
</div><!--links-->
<div id="copyright">
Copyright © Examples.com 2015
</div>
</footer><!--footer-->
</div><!--main-->
</body>
</html>
答案 0 :(得分：0)
只需改变一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
到此：
<!DOCTYPE html>
<html>
因为<!DOCTYPE html>是HTML5的doctype声明。