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. NAS4Free 安装配置（六）配置transmission实现BT（PT）下载

    配置transmission transmission是一个跨平台的BT客户端 首先我们建立一个存放transmission配置文件的目录 可以通过SSH,也可以通过网页来完成 注意:最好是通过SSH ...

  2. js 对url字符转译全解

    1.js 对url进行字符解码设计到3个方法 escape , encodeURI , encodeURIComponent eg: var url='http://baidu.com';encode ...

  3. FPGA技术的一些基本概念（综合、BlackBox）（转）

    原文:http://blog.sina.com.cn/s/blog_6254a8ca0100i0wr.html 原文也是转的,哈哈,大家多转转,转转更健康.删除了一些Xilinx的东西 前言 综合是将 ...

  4. 这样就算会了PHP么？-11

    PHP中关于类的基本内容练习: <?php class SportObject{ public $name; public $height; public $avirdupois; public ...

  5. Jquery 概念性内容编辑器

      概念性jQuery内容编辑器,这是一款非常有特色的jQuery编辑器,该编辑器支持文字.列表.视频.引用等功能,是一款小巧简洁,富有个性化的jQuery内容编辑器插件. 代码: <!doct ...

  6. Paint House 解答

    Question There are a row of n houses, each house can be painted with one of the three colors: red, b ...

  7. pyqt menu子级方向例子学习

    代码和UI文件:http://yunpan.cn/QCkXbX8mnSNke(提取码:51e1) 图片如: 代码如下: from PyQt4 import QtCore,QtGui,Qt import ...

  8. Jenkins动态部署方案

    在之前一个项目开发中使用到了jenkins自动化测试,根据实际应用,简单整理了其部署方案. 1.部署 2.项目构建 3.重部署 1 部署 登录Jenkins应用管理界面 1)选中一个服务器上已在jen ...

  9. (转)Tomcat 7 访问 Manager 和 Host Manager

    配置好 Tomcat 7.0 后,在 tomcat-users.xml 中配置用户角色来访问 localhost:8080 的这样三个按钮总出现问题: Server Status Manager Ap ...

  10. 开源 免费 java CMS - FreeCMS2.0 会员我的评论

    项目地址:http://www.freeteam.cn/ 我的评论 从左側管理菜单点击我的评论进入. 在这里能够查看当前登录会员的全部评论记录. 删除评论 选择评论然后点击删除button能够完毕删除 ...