html5--2.5新的布局元素(4)-aside/nav
html5--2.5新的布局元素(4)-aside/nav
学习要点
- 了解aside/nav元素的语义和用法
- 通过实例理解aside/nav元素的用法
- aside元素(附属信息)
- aside元素通常用来设置侧边栏。
- 用于定义article元素之外的内容(比如作者简介,版权声明),前提是这些内容与article元素内的内容相关。
- 同时也可嵌套在article元素内部使用,作为主要内容的附属信息,比如与主内容有关的参考资料,名词解释等。
- nav元素(导航)
- 用来定义目录、导航栏、超链接
- 并非所有的超链接都放在nav元素中,通常只把一个文档中的主导航栏放在nav中
- 在文章页面中,nav还可以用来给一个文字做一个目录的超链接
实例
一、aside做侧边栏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>新元素布局</title>
<style type="text/css">
header{width: 100%;height: 10%;background: green}
footer{width: 100%;height: 10%;background: blue;float: left;}
section{height: 80%;background: DarkGray}
aside{width: 20%;height: 80%;background: Aquamarine;float: left;}
section{width: 80%;height: 80%;background: DarkGray;float: left;}
</style>
</head>
<body style="margin: 0;height: 708px">
<header>header</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>footer</footer>
</body>
</html>
二、aside添加附加信息
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>2.4课堂演示</title>
</head>
<body>
<aside>
作者简介:..... <br>
版权归属........
</aside>
<article>
<header>
<h3>文章标题</h3>
<h5>作者:***</h5>
</header>
<p>我是正文********************<br>********************<br>********************<br>********************<br></p>
<section>
<article>
<header><h4>网友A的评论</h4></header>
<p>评论内容......................</p>
<footer>发布时间:2015/10/20</footer>
</article>
<article>
<header><h4>网友b的评论</h4></header>
<p>评论内容......................</p>
<footer>发布时间:2015/10/20</footer>
</article>
</section> <footer>
<p>尾部:阅读:300 评论:80</p>
</footer>
<aside>
<p>名词解释:-------</p>
<p>本文参考了《****》:-------</p>
</aside>
</article>
</body>
</html>
三、在article里面做附属信息
html5--2.5新的布局元素(4)-aside/nav的更多相关文章
- html5--2.6新的布局元素(5)-nav
html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...
- html5--2.9新的布局元素(6)-figure/figcaption
html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...
- html5--2.9新的布局元素(5)-hgroup/address
html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...
- html5--2.7新的布局元素(4)-time
html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...
- html5--2.1新的布局元素概述
html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...
- html5--2.4新的布局元素(3)-section
html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...
- html5--2.3新的布局元素(2)-article
html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...
- html5--2.1新的布局元素(1)-header/footer
html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- websocket聊天时,图片压缩处理(url或者input-file)
业务背景:私信聊天,需要发送图片,但是图片过大需要压缩处理.此时只有图片url,可以使用以下方法:canvasDataURL(url, 目标图片宽度,图片要显示区域的父元素) 注:该文件包含了inpu ...
- Java千百问_05面向对象(006)_is-a,has-a,like-a是什么
点击进入_很多其它_Java千百问 1.is-a,has-a,like-a是什么 在面向对象设计的领域里,有若干种设计思路,主要有例如以下三种: is-a.has-a.like-a java中在类.接 ...
- vs 已经加入了引用,编译还是提示没有加入引用
已经加入了引用,可是.编译还是通只是. 原因:项目总体框架是.Net FramWork4.5,nep中的框架也是4.5.而编译只是的project是4.0. 解决的方法:将编译只是的项目框架改为4.5
- 数组方式使用jQuery对象
一. 使用jQuery选择器获取结果是一个jQuery对象.然而,jQuery类库会让你感觉你正在使用一个定义了索引和长度的数组.在性能方面,建议使用简单的for或者while循环来处理,而不是$.e ...
- asp.net母版-页脚制作
1.母版创建流程略过 2.创建母版页css:Site.css body{ } .linkButton{ text-decoration:none; color:whitesmoke; } 3.母版页添 ...
- 【原创】基于.NET的轻量级高性能 ORM - TZM.XFramework
[前言] 接上一篇<[原创]打造基于Dapper的数据访问层>,Dapper在应付多表自由关联.分组查询.匿名查询等应用场景时不免显得吃力,经常要手写SQL语句(或者用工具生成SQL配置文 ...
- iReport+jasperreport创建子表的几种方式(1)
在制作报表的过程中,子表是不可缺少的.今天就研究了一下制作子表的几种方式 一.连接数据库创建子表 以MySQL为例: 我的数据源数据库中的表 watermark/2/text/aHR0cDovL2Js ...
- Netty(五):Netty中如何序列化数据
JDK提供了ObjectOutputStream和ObjectInputStream,用于通过网络对POJO的基本数据类型和图进行序列化和反序列化.该API并不复杂,而且可以被应用于任何实现了java ...
- PHP网站常见安全漏洞 及相应防范措施总结
一.常见PHP网站安全漏洞 对于PHP的漏洞,目前常见的漏洞有五种.分别是Session文件漏洞.SQL注入漏洞.脚本命令执行漏洞.全局变量漏洞和文件漏洞.这里分别对这些漏洞进行简要的介绍. 1.se ...
- 基于UML的需求分析和系统设计个人体会
阅读了http://www.uml.org.cn/oobject/201405123.asp文章之后,对使用UML进行系统的需求分析和设计有了一个基础的理解.在此做一下整理. 1.项目开始阶段 项 ...