HTML5学习笔记一：新增主体结构元素
2015-01-29 22:07
681 查看
Dreamweaver快捷键： 属性面板：Ctrl+F3 新建文档：Ctrl+N 选择用网页查看：F12
新增的主体结构元素：
section元素（例子如下）：
<!DOCTYPE HTML>
<html>
<body>
<section>
<h2>section元素使用方法</h2>
<p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
</section>
</body>
</html>
article元素（例子如下）：
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1> apple教程</h1>
<p>时间：<time pubdate="pubdate">2013-2-1</time></p>
</header>
<p>轻松学习apple教程，就来</p>
<a href="http://www.apple.com">www.apple.com</a><br />
<footer>
<p><small>底部版权信息：apple.com公司所有</small></p>
</footer>
</article>
</body>
</html>
article元素的嵌套（例子如下）：
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>article元素的嵌套</h1>
<p>发表日期：<time pubdate="pubdate">2012/10/10</time></p>
</header>
<p>article元素是什么？怎样使用article元素？……</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：唯一 </h3>
<p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>
</header>
<p>这篇文章很不错啊，顶一下！</p>
</article>
<article>
<header>
<h3>发表者：唯一</h3>
<p><time pubdate datetime="2013-2-20 T:21-26:00">1小时前</time></p>
</header>
<p>这篇文章很不错啊</p>
</article>
</section>
</article>
</body>
</html>
aside元素（例子如下）：
<!DOCTYPE html>
<html>
<head>
<title>标题文件</title>
<link rel="stylesheet" href="mystyles.css"><!--rel 属性指示被链接的文档是一个样式表,rel属性规定当前文档与被链接文档之间的关系-->
</head>
<body>
<header>
<h1>站点主标题</h1>
</header>
<nav><!--<nav> 标签定义导航链接的部分-->
<ul>
<li>主页</li>
<li>图片</li>
<li>音频</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>文章1</blockquote>
<blockquote>文章2</blockquote>
</aside>
</body>
</html>
nav元素（例子如下）：
<!DOCTYPE html>
<html>
<body>
<h1>Time元素</h1>
<p id="p1">
<time datetime="2013-3-17"> 今天是2013年3月17日 </time>
</p>
<p id="p2">
<time datetime="2013-3-17T17:00"> 现在时间是2013年3月17日晚上5点 </time>
<p>
<p id="p3">
<time datetime="2013-12-31"> 新款冬装将于今年年底上市 </time>
</p>
<p id="p4">
<time datetime="2013-3-15" pubdate="true"> 本消息发布于2013年3月15日 </time>
</p>
</body>
</html>
新增的主体结构元素：
section元素（例子如下）：
<!DOCTYPE HTML>
<html>
<body>
<section>
<h2>section元素使用方法</h2>
<p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
</section>
</body>
</html>
article元素（例子如下）：
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1> apple教程</h1>
<p>时间：<time pubdate="pubdate">2013-2-1</time></p>
</header>
<p>轻松学习apple教程，就来</p>
<a href="http://www.apple.com">www.apple.com</a><br />
<footer>
<p><small>底部版权信息：apple.com公司所有</small></p>
</footer>
</article>
</body>
</html>
article元素的嵌套（例子如下）：
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>article元素的嵌套</h1>
<p>发表日期：<time pubdate="pubdate">2012/10/10</time></p>
</header>
<p>article元素是什么？怎样使用article元素？……</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：唯一 </h3>
<p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>
</header>
<p>这篇文章很不错啊，顶一下！</p>
</article>
<article>
<header>
<h3>发表者：唯一</h3>
<p><time pubdate datetime="2013-2-20 T:21-26:00">1小时前</time></p>
</header>
<p>这篇文章很不错啊</p>
</article>
</section>
</article>
</body>
</html>
aside元素（例子如下）：
<!DOCTYPE html>
<html>
<head>
<title>标题文件</title>
<link rel="stylesheet" href="mystyles.css"><!--rel 属性指示被链接的文档是一个样式表,rel属性规定当前文档与被链接文档之间的关系-->
</head>
<body>
<header>
<h1>站点主标题</h1>
</header>
<nav><!--<nav> 标签定义导航链接的部分-->
<ul>
<li>主页</li>
<li>图片</li>
<li>音频</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>文章1</blockquote>
<blockquote>文章2</blockquote>
</aside>
</body>
</html>
nav元素（例子如下）：
<!DOCTYPE html>
<html>
<body>
<h1>Time元素</h1>
<p id="p1">
<time datetime="2013-3-17"> 今天是2013年3月17日 </time>
</p>
<p id="p2">
<time datetime="2013-3-17T17:00"> 现在时间是2013年3月17日晚上5点 </time>
<p>
<p id="p3">
<time datetime="2013-12-31"> 新款冬装将于今年年底上市 </time>
</p>
<p id="p4">
<time datetime="2013-3-15" pubdate="true"> 本消息发布于2013年3月15日 </time>
</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 学习笔记2-新增的主体结构元素
- html5权威指南 学习笔记(1) 之 新增的主体结构元素
- HTML5 学习笔记3-非主体结构元素
- Web前端学习笔记(2)-html5新增的结构元素
- HTML5新增非主体结构元素
- HTML5新增的主体结构元素和非主体结构元素
- HTML5教程:3.1 新增的主体结构元素
- html5新增元素主体结构
- HTML5新增的主体结构元素
- HTML5学习笔记2013.1.6——新增元素之input元素的类型
- HTML5新增的主体元素和新增的非主体结构元素
- html5学习笔记(3)--主题结构元素-1
- 【HTML5初涉】新增主体结构元素和非主体结构元素
- HTML5 学习笔记5-表单新增元素和属性（续写）
- html5新增主体结构元素aside
- html5中新增非主体结构元素
- 【HTML5】新增的主体结构元素
- HTML5新增的主体结构元素
- HTML5教程:3.1 新增的主体结构元素
- html5新增的主体结构元素