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>

HTML5学习笔记一：新增主体结构元素的更多相关文章

  1. [html5]学习笔记一 新增的非主体结构元素

    html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素. 1.header元素 header元素是一种具有引导和导航作用的结构元素, ...

  2. [html5]学习笔记一 新增的主题结构元素

    html5 新增的主体结构元素有:article,section,nav,aside,time,pubdate元素. 1. article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引 ...

  3. html5学习笔记(3)--主题结构元素-1

    Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  4. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

  5. HTML5学习笔记三：aside元素，time元素与微格式

    一.aside元素 表示当前页面或文章的附属信息部分,相关的引用,侧边栏,广告等有别于主要内容的部分:主要有一下两种用法: 1. 被包含在article元素中作为主要内容的附属信息部分,可以是与当前文 ...

  6. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  8. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  9. amazeui学习笔记--css（HTML元素4）--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

  10. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. git:hook declined FATAL: W refs/heads DENIED by fallthru error

    hook declined FATAL: W refs/heads DENIED by fallthru error git提交代码时报错,网上查了,最终结果竟然是测试人员没有给我配置写的权限,配置了 ...

  2. Python入门学习之input()与raw_input()的区别

    登陆博客时才发现已经注册一年了,由于之前一直都没有打算从事软件开发行业,所以博客便被束之高阁,软件开发,对于我来说,是成长,更是磨炼.头脑风暴总是来去自由,记录灵感,与大家一起共享思维进步的成果. P ...

  3. 异常处理：你不可能总是对的2 - 零基础入门学习Python033

    异常处理:你不可能总是对的2 让编程改变世界 Change the world by program 我们已经了解足够多的可能碰到的异常,那我们这节课就来谈谈如何检测这些异常并处理它们. 异常检测我们 ...

  4. iOS学习之详解AppDelegate

    AppDelegate, 类似于监听接口. 用个很简单的例子说:ios系统会控制每个程序的开始和结束.但是ios又不知道每个程序的开始需要运行成么代码,结束需要运行什么代码.这个时候,ios就制定了一 ...

  5. MVC中ActionFilterAttribute用法并实现统一授权

    MVC中ActionFilterAttribute经常用来处理权限或者统一操作时的问题. 先写一个简单的例子,如下: 比如现在有一个用户管理中心,而这个用户管理中心需要登录授权后才能进去操作或浏览信息 ...

  6. Postgres的用户认证

    我们先来讲讲postgresql的用户认证吧. 我想我们有必要明白以下几个问题: 第一.postgresql的用户和操作系统的用户没有任何直接的的关系.虽然在postgaresql的初始安装中,它会有 ...

  7. Friendly number

    Friendly number Long numbers can be made to look nicer, so let’s write some code to do just that. Yo ...

  8. 网络版shell之网络编程练习篇--telnet服务端

    网络版shell之网络编程练习篇--telnet服务端   以前写过一个shell命令解释器,对与shell命令解释器的执行流程有了清晰的认识,这段时间学习网络编程,至于网络编程的细节以及知识点,已经 ...

  9. 【转】android TV CTS 4.0.3_r1测试

    原文网址:http://blog.sina.com.cn/s/blog_539ad34301012764.html 做CTS测试已经一月有余,经过不断的摸索,现总结经验,与大家分享. 一.Downlo ...

  10. pyqt 图片（label上显示

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from decimal import * from PyQt4.Q ...