-2
私の悪い英語のために寂しい人。html5の新しいタグを自分のhtmlに追加するには
私のマスターは私の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 {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
header{
\t margin:auto;
\t padding:0px;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
#main{
\t width:1200px;
\t height:1865px;
\t margin:auto;
\t background-color:#FFF;
}
#menu{
\t width:1200px; \t
\t height:52px;
\t background-color:#222222;
\t
}
#logo{
\t float:left;
\t padding-left:30px;
\t padding-top:12px; \t
}
#menu ul li {
\t float:left;
\t text-decoration:none;
\t color:#9e9e9c;
\t padding-left:23px;
\t padding-top:15px;
\t padding-bottom:20px;
\t padding-right:25px;
\t display:inline-block;
\t position: relative;
\t
}
#menu ul li a{
\t text-decoration:none;
\t color:#9e9e9c;
}
#menu ul li a:hover{
\t color:#FFF;
\t
}
#menu ul li:hover{
\t background: #000; \t
}
#menu ul.sub-menu {
display:none;
position:absolute;
\t min-width:110px;
\t height:auto;
\t background-color:#000;
\t margin-top:20px;
\t margin-left:-25px;
\t
}
#menu li:hover ul.sub-menu {
display: block;
\t
\t
}
#search{
\t float:right;
\t padding-top:8px;
\t padding-right:30px;
}
#search input[type=text]{
\t width:195px;
\t height:34px;
\t border-radius:3px;
\t border:none; \t
}
#search input[type=submit]{
\t width:71px;
\t height:34px;
\t border-radius:3px;
\t border:none;
\t color:#333335; \t
}
#header{
\t height:294px;
\t width:1200px;
\t background-color:#9acd32; \t
}
#header-logo{
\t padding-top:72px;
\t padding-left:29px;
\t float:left; \t
}
#header-title{
\t color:#adff30;
\t float:left;
\t padding-top:80px;
\t padding-left:26px;
\t font-size:65px;
\t font-family:Arial, Helvetica, sans-serif; \t
}
#header-txt{
\t color:#adff30;
\t float:left;
\t font-family:Arial, Helvetica, sans-serif;
\t padding-top:30px;
\t padding-left:29px;
\t font-size:20px;
\t width:1200px;
}
#engage{
\t float:left;
\t padding-top:30px;
\t padding-left:29px;
\t
}
#engage input[type=button]{
\t width:106px;
\t height:34px;
\t font-family:Arial, Helvetica, sans-serif;
\t border:none;
\t border-radius:3px;
\t color:#333335;
}
#body{
\t width:1200px;
\t height:auto;
\t float:left;
}
#body-header{
\t font-family:Arial, Helvetica, sans-serif; \t
\t font-size:36px;
\t padding-left:34px;
\t padding-top:76px;
\t float:left;
}
#body-header-text{
\t font-family:Arial, Helvetica, sans-serif;
\t font-size:25px;
\t padding-left:13px;
\t padding-top:85px;
\t float:left;
\t color:#333335;
}
#body-txt{
\t font-family:Arial, Helvetica, sans-serif;
\t font-size:15px;
\t color:#333335;
\t float:left;
\t padding-left:34px;
\t padding-top:36px; \t
}
.body-news{
\t width:374px; \t
\t height:auto;
\t float:left;
\t
}
#body-news-left{
\t float:left;
\t margin-left:26px;
\t margin-top:18px;
}
#body-news-right{
\t float:left;
\t margin-left:37px;
\t margin-top:18px;
}
.news-pic{
\t width:359px;
\t height:300px;
\t padding-left:8px;
\t \t
}
.news-title{
\t font-family:Arial, Helvetica, sans-serif;
\t color:#3379b7;
\t font-size:20px;
\t padding-top:23px;
\t padding-left:8px;
\t width:auto;
\t height:auto; \t
}
.news-brieftxt{
\t font-family:Arial, Helvetica, sans-serif; \t
\t width:auto;
\t height:auto;
\t color:#333335;
\t font-size:13px;
\t padding-top:20px;
\t padding-left:8px;
\t line-height:17px;
}
#contact-form{
\t width:379px;
\t height:auto;
\t float:right;
\t margin-top:18px;
\t margin-left:10px; \t
}
#contact-from-title{
\t font-family:Arial, Helvetica, sans-serif;
\t color:#333335;
\t font-weight:bold;
\t padding-left:10px; \t
}
.input{
\t font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
\t color:#333335;
\t font-weight:700;
\t font-size:14px; \t
\t padding-left:10px;
\t padding-top:15px;
}
.input input[type=text]{
\t border:1px solid;
\t border-color:#CCCCCC;
\t width:326px;
\t height:37px;
\t border-radius:4px;
\t margin-top:3px;
\t
}
.input input[type=email]{
\t border:1px solid;
\t border-color:#CCCCCC;
\t width:326px;
\t height:37px;
\t border-radius:4px;
\t margin-top:3px;
\t
}
.input input[type=password]{
\t border:1px solid;
\t border-color:#CCCCCC;
\t width:326px;
\t height:37px;
\t border-radius:4px;
\t margin-top:3px;
\t
}
.input input[type=submit]{
\t border:1px solid;
\t border-color:#CCCCCC;
\t width:326px;
\t height:37px;
\t border-radius:4px;
\t margin-top:3px;
\t
}
#forgot{
\t padding-top:12px;
\t padding-left:10px; \t
\t font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
\t font-size:13px;
\t color:#2b82ec;
}
#forgot a{
\t color:#2b82ec;
\t text-decoration:none;
\t font-weight:600;
}
#remember input[type=checkbox]{
\t margin-top:12px;
\t margin-left:10px;
\t float:left; \t
}
#remember-txt{
\t margin-top:11px;
\t font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
\t font-size:13px;
\t color:#333335;
\t float:left;
\t width:290px;
\t \t
}
#login input[type=submit]{
\t font-weight:bold;
\t font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif; \t
\t font-size:13px;
\t width:94px;
\t height:36px;
\t float:left;
\t background-color:#43a047;
\t border:1px solid;
\t border-color:#CCCCCC;
\t border-radius:4px;
\t margin-top:12px;
\t margin-left:17px;
}
#article{
\t width:1200px;
\t height:auto; \t
\t background-color:#daa521;
\t margin-top:15px;
\t float:left;
\t
}
.article-class{
\t width:353px;
\t height:274px;
\t margin-top:58px; \t \t
}
#article-left{
\t float:left;
\t margin-left:30px; \t
}
#article-center{
\t float:left;
\t margin-left:40px;
}
#article-right{
\t float:right;
\t margin-right:30px;
}
.article-logo{
\t width:31px;
\t height:33px;
\t float:left; \t
}
.article-title{
\t width:auto;
\t height:auto;
\t font-family:Arial, Helvetica, sans-"Times New Roman", Times, serif;
\t font-weight:bold;
\t font-size:20px;
\t padding-top:4px; \t
}
.article-txt{
\t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; \t
\t width:auto;
\t height:auto;
\t color:#010005;
\t font-size:16px;
\t line-height:22px;
\t float:left;
}
.article-button input[type=button]{
\t margin-top:20px;
\t padding:5px 5px 5px 5px;
\t height:35px;
\t width:auto; \t
\t border:1px solid;
\t border-color:#CCCCCC;
\t border-radius:4px;
}
#table{
\t float:left;
\t margin-top:45px;
\t margin-left:44px;
\t width:1114px; \t
}
#first-row{
\t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
\t color:#FFF; \t
\t background-color:#daa521;
\t width:1113px;
\t height:58px;
\t font-weight:bold;
\t float:left;
\t font-size:14px;
\t border-top-left-radius:4px;
\t border-top-right-radius:4px;
}
#no{
\t padding-top:20px;
\t padding-left:37px;
\t padding-right:128px; \t
}
#name{
\t padding-right:100px; \t
}
#age{
\t padding-right:96px; \t
}
#job{
\t padding-right:105px; \t
}
#birth{
\t padding-right:90px; \t
}
#id{
\t padding-right:90px; \t
\t
}
#grade{
\t padding-right:80px; \t
\t
}
.rows{
\t width:1113px; \t
\t height:42px;
\t background-color:#FFF;
\t float:left;
\t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
\t font-size:14px;
}
.no{
\t padding-top:20px;
\t padding-left:37px;
\t padding-right:128px; \t \t
\t
}
.name{
\t padding-left:14px;
\t padding-right:124px; \t
}
.age{
\t padding-left:0px;
\t padding-right:75px; \t
\t
}
.job{
\t padding-right:82px; \t
}
.birth{
\t padding-right:70px; \t
}
.id{
\t padding-right:80px; \t
}
.action a{
\t text-decoration:none;
}
.action {
\t padding-left:70px;
\t margin-top:15px;
}
#footer{
\t float:left;
\t width:1200px;
\t height:auto;
}
#links{
\t margin-top:40px;
\t margin-left:470px; \t
\t
}
#links a{
\t text-decoration:none;
\t color:#3279b7;
\t font-family:"Times New Roman", Times, serif;
\t font-size:15px; \t
}
#copyright{
\t margin-top:10px;
\t margin-left:530px;
\t font-family:"Times New Roman", Times, serif;
\t font-size:11px;
\t color:#999; \t \t
}<!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>
\t <div id="main">
\t <div id="menu">
\t <div id="logo">
\t <img src="Images/logo.png" width="66" height="26" />
</div><!--logo-->
<ul id="main-menu">
\t <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>
\t <ul class="sub-menu">
\t <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">
\t <input type="text" name="text" />
<input type="submit" value="Search" name="search"/>
</div><!--search-->
</div><!--menu-->
</header>
<div id="header">
\t <div id="header-logo">
\t <img src="Images/header.png" width="65" height="62" />
\t </div><!--header-logo-->
<div id="header-title">
\t Dramatically Engage
</div><!--header-title-->
<div id="header-txt">
\t Objectively innovate empowered manufactured products whereas parallel platforms.
</div><!--header-txt-->
<div id="engage">
\t <input type="button" value="Engage now" />
</div><!--engage-->
</div><!--header-->
</header>
<div id="body">
\t <div id="body-header">
\t Superior Collaboration
\t </div><!--body-header-->
<div id="body-header-text">
\t Visualize Quality
</div><!--body-header-text-->
<div id="body-txt">
\t Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality \t \t \t \t \t 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">
\t <div class="news-pic">
\t <img src="Images/news-pic.png" width="359" height="300" />
</div><!--news-pic-->
<div class="news-txt">
\t <div class="news-title">
\t Efficiently Unleash
</div><!--news-title-->
<div class="news-brieftxt">
\t 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">
\t <div class="news-pic">
\t <img src="Images/news-pic.png" width="359" height="300" />
</div><!--news-pic-->
<div class="news-txt">
\t <div class="news-title">
\t Completely Synergize
</div><!--news-title-->
<div class="news-brieftxt">
\t 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">
\t <div id="contact-from-title">
\t Contact form
</div>
<form action="#" method="post" >
<div id="name" class="input">
\t Name:<br />
<input type="text" />
</div><!--name-->
<div id="email" class="input">
\t Email:<br />
<input type="email" />
</div><!--email-->
<div id="password" class="input">
\t Password:<br />
<input type="password" />
</div><!--password-->
<div id="forgot">
\t <a href="#">Forgot password?</a>
</div><!--forgot-->
<div id="remember">
\t <input type="checkbox" />
\t <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">
\t <div id="article-left" class="article-class">
\t <div class="article-logo">
\t <img src="Images/article-logo1.png" width="26" height="28" />
</div><!--article-logo-->
<div class="article-title">
\t Dynamically Procrastinate
</div><!--article-title-->
<div class="article-txt">
\t 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">
\t <input type="button" value="Procrastinate"/>
</div><!--article-button-->
</div><!--article-left-->
\t <div id="article-center" class="article-class">
\t <div class="article-logo">
\t <img src="Images/article-logo2.png" width="29" height="28" />
</div><!--article-logo-->
<div class="article-title">
\t Efficently Unleash
</div><!--article-title-->
<div class="article-txt">
\t 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 \t \t \t \t \t \t \t \t \t \t \t \t schmas.Collaboratively administrate empowered markets via plug-and-play networks.
</div><!--article-txt-->
<div class="article-button">
\t <input type="button" value="Unleash"/>
</div><!--article-button-->
</div><!--article-center-->
\t \t <div id="article-right" class="article-class">
\t <div class="article-logo">
\t <img src="Images/article-logo3.png" width="31" height="33" />
</div><!--article-logo-->
<div class="article-title">
\t Completely Synergize
</div><!--article-title-->
<div class="article-txt">
\t 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">
\t <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>
\t </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>
\t \t </div><!--table-->
<footer id="footer">
\t <div id="links">
\t <a href="#">Terms & Conditions</a>| <a href="#">Privacy Policy</a>|<a href="#">Contact</a>
\t </div><!--links-->
<div id="copyright">
\t Copyright © Examples.com 2015
</div>
</footer><!--footer-->
</div><!--main-->
</body>
</html>
このようなフォーラムで卑劣な言葉を使用しないでください。私はそれを削除しました。 – AVI