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. ffmpeg编译时freetype2 not found错误

    自己安装的libfreetype2在/usr/local/lib目录下export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:$PKG_CONFIG_PATH

  2. Django-Rest-Framework 教程: 快速入门

    本篇中, 我们会创建一个简单的API, 用来查看和编辑django默认的user和group数据. 1. 设置 我们创建django项目tutorial, 和app quickstart: # 创建新 ...

  3. mysql 套事物实例

    public static DataSet GetPPriceList(string aircompany, string departPort, string arrivePort, string ...

  4. Xcode中C、C++、Object-C3种语言的混编

    转自: http://hi.baidu.com/onejw/item/f34390c997cdc226a1b50ae http://www.cocoachina.com/ask/questions/s ...

  5. 【转】ARM Linux 3.x的设备树（Device Tree）

    原文网址:http://blog.csdn.net/21cnbao/article/details/8457546 1.    ARM Device Tree起源 Linus Torvalds在201 ...

  6. Google的Protocol Buffer格式分析

    [转]转自:序列化笔记之一:Google的Protocol Buffer格式分析 从公开介绍来看,ProtocolBuffer(PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.作 ...

  7. hdu4536-XCOM Enemy Unknown(爆搜)

    XCOM-Enemy Unknown是一款很好玩很经典的策略游戏. 在游戏中,由于未知的敌人--外星人入侵,你团结了世界各大国家进行抵抗.随着游戏进展,会有很多的外星人进攻事件.每次进攻外星人会选择3 ...

  8. IO-APIC

    MP-BIOS bug :8254 timer not connected to IO-APIC解决办法 云计算中在基于一个template image instance vmServer时出现上述的 ...

  9. add BOM to fix UTF-8 in Excel

    fputs($fp, $bom =( chr(0xEF) . chr(0xBB) . chr(0xBF) ));

  10. qt model/view 架构自定义模型之QFileSystemModel

    # -*- coding: utf-8 -*- # python:2.x #QFileSystemModel """ Qt  内置了两种模型:QStandardItemM ...