从位置上划分出网页的区域以后，就需要用到网页的内容标签了，比如<article>、<aside>、<nav>、<p>、<h1>等。网页中，这些内容标签和位置标签交错在一起，比如像下面这样：

  1. <body>
  2. <header>
  3. <h1>Body Title</h1>
  4. <nav>
  5. 导航栏
  6. </nav>
  7. </header>
  8. <section id="left">
  9. <header>
  10. 区域头
  11. </header>
  12. <article>
  13. <header>
  14. 文章头
  15. </header>
  16. <p>段落一</p>
  17. <p>段落二</p>
  18. <aside>
  19. 侧边栏
  20. </aside>
  21. <footer>
  22. 文章尾
  23. </footer>
  24. </article>
  25. <footer>
  26. 区域尾
  27. </footer>
  28. </section>
  29. <section id="right">
  30. <header>
  31. 区域头
  32. </header>
  33. <nav>
  34. 右侧导航栏
  35. </nav>
  36. </section>
  37. <footer>
  38. <p>Copy Right.</p>
  39. </footer>
  40. </body>

其中，

<article>：代表一篇独立的正文内容，一般还会按照位置标签划分出头、尾、区域等；

<aside>：指与段落内容、正文内容相关的侧边栏，一般在<article>中使用；

<nav>：指导航内容；

<p>：指独立的段落，一般在<article>中使用；

<h1>：指标题，一般在<header>中使用。

这些内容标签中，可以加入位置标签来进行区域划分。

还有很多其他的表示内容类型的标签，后面的学习实践中再描述。

html5与css3学习实践--基础的内容划分标签的更多相关文章

  1. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  2. 开辟html5和css3学习随笔（2015-3-2）

    1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  3. html5和css3学习历程

    1.video,audio视频和音频的应用 <!doctype html><html> <head></head> <body>  < ...

  4. ReactiveCocoa基础知识内容

    本文记录一些关于学习ReactiveCocoa基础知识内容,对于ReactiveCocoa相关的概念如果不了解可以网上搜索:RACSignal有很多方法可以来订阅不同的事件类型,ReactiveCoc ...

  5. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  6. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  7. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  8. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  9. HTML5与CSS3基础教程(第7版) 高清PDF扫描版​

    HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...

随机推荐

  1. android sqlite3:数据库操作

    1. 修改表名: alter table notification rename to notification_test 2. 修改数据库名称: 3. 复制一个表的数据到另外一个表中(表的字段一致) ...

  2. 深入理解Linux内核－进程地址空间

    给内核分配内存和给用户态进程分配内存是有区别的:1.内核的优先级最高,如果某个内核函数请求动态内存,不会被延时2.内核信任自己,不必保护措施3.用户态进程对动态内存的请求被认为不是紧迫的,总是被尽量推 ...

  3. C#中自定义属性的例子

    自定义属性的作用 有时候我们需要给一个类或者类中的成员加上一些属性或者附加信息,让类或者变量的功能更明确可控制的细粒度更高,打个简单的比方:数据库里面的一张表,表中的每一个字段都有很多属性,如是否主键 ...

  4. dom4j: 生成XML时文本中回车换行无效

    属性文本中回车换行在输出时被dom4j自动去掉了. 解决办法: 将format.setTrimText(false); 即可.因为 createPrettyPrint()方法中有 format.set ...

  5. lua 创建listview

    只要是新的聊天对象就创建一个新的listview local name = tolua.cast(UIHelper:seekWidgetByName(self.nameItem, "name ...

  6. Angular的重和利

    1.第一重:TypeScript,TypeScript语言的特性还是比较丰富的,而且一直在发展,再就是跨语言集成问题,要想Nice对第三方lib做集成,需要自己写d.ts,针对有些第三方库,这件事情有 ...

  7. （原创）C++11改进我们的程序之move和完美转发

    本次要讲的是右值引用相关的几个函数:std::move, std::forward和成员的emplace_back,通过这些函数我们可以避免不必要的拷贝,提高程序性能.move是将对象的状态或者所有权 ...

  8. [mBean]-Delphi框架，回归简单，自然。

    [mBean]的萌芽 最近公司要求把我们公司的任务可以外包,问我有没有好的方案. 如果要其他程序员的人来做我们内部的框架会导致了,内部的框架需要公布很多单元和逻辑,思路.其次要把我们的思路和规则强加给 ...

  9. [翻译] Dremel made simple with Parquet

    首先自己的 blog 好久没有写技术相关的东西了,今天又动笔了,好高兴!然后转载请注明出处.最后开始正题: 原文:Dremel made simple with Parquet | Twitter E ...

  10. spark on alluxio和MR on alluxio测试(改进版)【转】

    转自:http://kaimingwan.com/post/alluxio/spark-on-alluxiohe-mr-on-alluxioce-shi-gai-jin-ban 1. 介绍 2. 准备 ...