HTML5学习笔记一:新增主体结构元素
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>
最新文章
- nginx生产配置
- ActiveX控件(ATL篇)
- OutputDebugString()
- 【python自动化第一篇:python介绍与入门】
- android-个性化进度条
- Node.js how to respond to an upgrade request?
- 仿苹果短信(微信 ,qq)左划弹出菜单
- 蓝桥杯-加法变乘法-java
- Git/Github 教程
- java.lang.Object学习总结
- Socket网络编程知识点
- 配置TortoiseGit与Github
- springBoot 项目war包部署及改为war包后资源路径错误问题
- win命令大全
- C# 多线程示例
- getpwnam,getgrnam,getpwent,crypt等函数
- (改进)Python语言实现词频统计
- ibatis中$和#的区别
- [NOIp2015]运输计划 (二分 $+$ 树上差分)
- 20145118 《Java程序设计》 实验报告一