html5与css3学习实践--基础的内容划分标签
从位置上划分出网页的区域以后，就需要用到网页的内容标签了，比如<article>、<aside>、<nav>、<p>、<h1>等。网页中，这些内容标签和位置标签交错在一起，比如像下面这样：
- <body>
- <header>
- <h1>Body Title</h1>
- <nav>
- 导航栏
- </nav>
- </header>
- <section id="left">
- <header>
- 区域头
- </header>
- <article>
- <header>
- 文章头
- </header>
- <p>段落一</p>
- <p>段落二</p>
- <aside>
- 侧边栏
- </aside>
- <footer>
- 文章尾
- </footer>
- </article>
- <footer>
- 区域尾
- </footer>
- </section>
- <section id="right">
- <header>
- 区域头
- </header>
- <nav>
- 右侧导航栏
- </nav>
- </section>
- <footer>
- <p>Copy Right.</p>
- </footer>
- </body>
其中，
<article>：代表一篇独立的正文内容，一般还会按照位置标签划分出头、尾、区域等；
<aside>：指与段落内容、正文内容相关的侧边栏，一般在<article>中使用；
<nav>：指导航内容；
<p>：指独立的段落，一般在<article>中使用；
<h1>：指标题，一般在<header>中使用。
这些内容标签中，可以加入位置标签来进行区域划分。
还有很多其他的表示内容类型的标签，后面的学习实践中再描述。
html5与css3学习实践--基础的内容划分标签的更多相关文章
- html5和css3学习笔记
HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...
- 开辟html5和css3学习随笔（2015-3-2）
1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- html5和css3学习历程
1.video,audio视频和音频的应用 <!doctype html><html> <head></head> <body> < ...
- ReactiveCocoa基础知识内容
本文记录一些关于学习ReactiveCocoa基础知识内容,对于ReactiveCocoa相关的概念如果不了解可以网上搜索:RACSignal有很多方法可以来订阅不同的事件类型,ReactiveCoc ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
随机推荐
- JavaScript权威指南第02章 词法结构
词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...
- sqlite第三方类库：FMDB使用
转自:http://www.cnblogs.com/wuhenke/archive/2012/02/07/2341656.html 本文转自一位台湾ios开发者的blog,由于blog地址被墙掉,转发 ...
- Merge into 详细介绍
/*Merge into 详细介绍 MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句. 通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询, 连接条 ...
- HTML5学习笔记（六）：CSS基本样式
背景 需要注意:背景的所有属性都不会向下进行继承. 背景色 我们可以设定一个纯色为背景色. p {background-color: red;} a {background-color: #ff000 ...
- 菜鸟学JS（三）——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- non-deterministic-turing-machine
https://stackoverflow.com/questions/13524011/i-do-not-understand-the-concept-of-non-deterministic-tu ...
- MyBean - 单实例插件改进和VCL插件的改进
BeanFactory中添加VclOwners:TComponent属性, 在getBean创建VCL插件的时候,Tcomponent.Create(VclOwners) 这样在清理DLL时就会释 ...
- filezilla修改默认21端口
一.filezilla修改端口21 1.修改ftp端口号,例如我们想把21修改成888 2.修改数据端口号为N-1,即888-1=887 3.防火墙中开启端口888和887 完成一个FTP的传输过程不 ...
- spring 事务传播行为实例分析
Spring事务传播行为: spring特有的事务传播行为,spring支持7种事务传播行为,确定客户端和被调用端的事务边界(说得通俗一点就是多个具有事务控制的service的相互调用时所形成的复杂的 ...
- MFC中获取命令行参数的几种方法
在MFC程序中,可以用以下几种方法来获取命令行参数. 为方便说明,我们假设执行了命令:C:\test\app.exe -1 -2 方法一 ::GetCommandLine(); 将获取到 " ...