您的位置：首页 > Web前端 > HTML5

HTML5新增的主体结构元素

2018-02-07 22:30 447 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--<script src="./index.js"></script>-->
</head>

<body>
<article>
<header>
<h1>宇宙</h1>
<p>hello,欢迎来到宇宙</p>
</header>
<article>
<header>
作者
</header>
<p>
评论
</p>
<footer>
time
</footer>
</article>
<footer>
<p>这是底部</p>
</footer>
</article>

<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width="600" height="400"></embed>
</object>
</article>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文</p>
<aside>
<h1>名词解释</h1>
<p>语法：这是一个对语言来说很重要的内容体</p>
</aside>
</article>

<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">2015-3-10</a></li>
<li>
<a href="#">大牛：真希望能好好学一下</a>
</li>
</ul>
</nav>
</aside>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<nav>
<ul>
<li>
<a href="#">主页</a>
</li>
<li>
<a href="#">开发文档</a>
</li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3的历史</h1>
<nav>
<ul>
<li>
<li><a href="#">HTML5历史</a></li>
<li><a href="#">CSS3历史</a></li>
</li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>...</p>
</section>
<section>
<h1>CSS3历史</h1>
</section>
<footer>
<a href="#">删除</a>
<a href="#">修改</a>
</footer>
</article>

<footer>
<p><small>版权声明：</small></small>
</footer>
</body>
</html>

<meta charset="utf-8" />
<section>
<h1>苹果</h1>
<p>这是一个水果，可以吃。而且很好吃</p>
</section>
<article>
<h1>苹果</h1>
<p>这是一个水果，可以吃。而且很好吃</p>
<section>
<h2>红富士</h2>
<p>这是一种外表很红得苹果，吃起来也不错</p>
</section>
<section>
<h2>国光</h2>
<p>这是一种外表很红得苹果，吃起来也不错</p>
</section>
</article>

<section>
<h1>水果</h1>
<article>
<h2>pingguo</h2>
<p>内容</p>
</article>
<article>
<h2>pingguo</h2>
<p>内容</p>
</article>
<article>
<h2>pingguo</h2>
<p>内容</p>
</article>
</section>

time和微格式

<meta charset="utf-8" />

<time datatime="2015-10-10">2015-10-10</time>
<time datatime="2015-10-T20:00">2015-10-10</time>
<time datatime="2015-10-T20:00Z">2015-10-10</time>
<time datatime="2015-10-T20:00+09:00">2015-10-10</time>

<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datatime="2016-10-10" pubdate>2016-10-10</time>
</p>
<p>舞会时间
<time datetime="2016-10-12">2016-10-12</time>
</p>
</header>
</article>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航