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. nginx对于Yii2的前后台的配置

    虽然是个基础问题,但也折腾了不少时间,记录下来,希望对新手有所帮助.例如我的前台地址yooao.cc,后台地址back.yooao.cc  back.yooao.cc是yooao.cc的一个子域名. ...

  2. PHP第二课笔记

    ★Php的基本概念 快速入门案例 test.php <html> <body> //<?php  ?>是运行在服务端 <?php   echo 'hello' ...

  3. MVC过滤器详解和示例

    原文  http://blog.csdn.net/ankeyuan/article/details/29624005 MVC过滤器一共分为四个:ActionFilter(方法过滤器),ResultFi ...

  4. NPAPI火狐插件VS2013开发示例

    NPAPI火狐插件VS2013开发示例 下面是我根据网上开发示例自己做的一个demo,并提供代码下载. 开发环境 Windows 8.1 x64 Visual studio 2013 准备工作 首先需 ...

  5. File类详解

    一.File类: File类时io包中唯一代表磁盘文件本身的对象.File类定义了一些与平台无关的方法来操作文件,可以通过调用File类中的方法,实现创建.删除.重命名文件等. File类的对象主要用 ...

  6. [POJ] 1511 Invitation Cards

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 18198   Accepted: 596 ...

  7. hdu 1429 胜利大逃亡(续)（bfs+状态压缩）

    Problem Description Ignatius再次被魔王抓走了(搞不懂他咋这么讨魔王喜欢)…… 这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带 ...

  8. ssh登录失败处理步骤

    如果登录失败而又找不到显示的原因,优先使用ssh -vT name@ip -p port 进行调试,查看所使用的key文件.ip.端口是否正确.然后再检查下面步骤:1.检查在对应用户名下是否有iden ...

  9. Hibernate框架增删改查

    package cn.happy.util; import org.hibernate.Session; import org.hibernate.SessionFactory; import org ...

  10. 玩程序 之 一 . 字符串处理工具（可通过C#脚本扩展）

    平常喜欢写点小东西玩玩,既可以娱乐自己满足自己的虚荣心,又可以方便工作和学习,今天且拿出一个来,与大家一起分享!  1. 软件介绍 言归正传,先看看需求,有这样一串字符串 abc,def,ghi,jk ...