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. 使用MSSM管理工具登录LOCALDB

    调试程序没有安装 sql server时,可以使用localdb.这是一个简易的sql server数据库,用于本地测试是很方便,省去安装SQL SERVER的工作 电脑上安装了VS2013 VS20 ...

  2. mac删除顽固图标

    cd  /Users/shelley/Library/Application\ Support/Dock cp  10CCA448-0975-41DE-B47A-8E89FD634227.db  10 ...

  3. shell中的for、while、until

    for var in list do commands done 在每个迭代中,变量var会包含列表中的当前值,第一个迭代会使用列表中的第一个值,第二个迭代使用第二个值. 在do和done中,$var ...

  4. php读取文件的各种方法

    博客根据http://www.ibm.com/developerworks/cn/opensource/os-php-readfiles个人总结 获取文件全部内容 以下归类是按平时我们通常的使用方法总 ...

  5. 使用ownCloud搭建你的个人云服务(ubuntu 14.04 server)（ownCloud对文件不切片，Seafile对文件切片），owncloud没有存储的功能 只能同步 本地删除了服务器也会删除

    ownCloud是什么 ownCloud是一个自由且开源的个人云存储解决方案(类似百度网盘或者Dropbox),包括两个部分:服务器和客户端. ownCloud在客户端可通过网页界面,或者安装专用的客 ...

  6. QT中QProcess调用命令行的痛苦经历（调用Winrar，设置工作目录，获得输出，注意引号与括号，等等）

    QT中QProcess调用命令行的痛苦经历   阅读目录 创建压缩包的方法 在QT中调用命令行 在QT中调用C++创建的dll 在QT程序中需要将某些目录和文件压缩为一个rar的压缩包,于是想到了在Q ...

  7. Mysql 插入记录时检查记录是否已经存在，存在则更新，不存在则插入记录SQL

    我们在开发数据库相关的逻辑过程中, 经常检查表中是否已经存在这样的一条记录, 如果存在则更新或者不做操作, 如果没有存在记录,则需要插入一条新的记录. 这样的逻辑固然可以通过两条sql语句完成. SE ...

  8. Speech Module

    Speech Module 1 FIRST_TEN = ["one", "two", "three", "four", ...

  9. 【转】GCC4.6编译的warning -Werror

    原文网址:http://blog.sina.com.cn/s/blog_605f5b4f0101bct7.html New warnings for unused variables and para ...

  10. grep命令实例

    grep一般用于查找文件中含有某些字符串的行,其命名格式如下 grep [OPTIONS] PATTERN [FILE...] 下面例举grep在linux使用过程中其常用使用实例: 1.grep递归 ...