文档章节

第三章 HTML 5的结构-《HTML5+CSS3权威指南》

产品哥
 产品哥
发布于 2011/12/06 15:59
字数 1701
阅读 735
收藏 2

这章还是蛮重要的,主要是讲解了结构元素和使用结构元素合理编排页面总体布局。

HTML5中新增加了主体结构函数和非主体结构函数。

主体结构函数

Article元素

Articel元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。这话太虚了,但是好像还只能这么说比较合理。用我的理解就是一个单独的页面(我理解单独的页面是只有一个主题,页面上不包括与这个主题不相关的内容)。书上用最典型的博客或报刊的文章页面为例子。那么article元素就包括文章或者说是博文的内容,作者,版权,发布时间,留言,回复等等,我们常见博客的内容。但是如果文章页面上还包括网站导航,那么这个就不因该在article元素里面。

<article>
  <header>
    <h1>什么是开源中国?</h1>
    <p>发布时间:<time pubdate="pubdate">2011/12/06</time></p>
  </header>
    <p>正文内容....OSCHINA是英文Open Source China的缩写...</p>
  <footer>
     <p><small>版权公开,请随便使用</small></p>
  </footer>
</article>

上面的例子是一篇介绍OSCHINA的文章,可以看出来,文章的所有信息都在article元素里面。

那比如我要实现博文留言或者回复有会出现<header>and<foooter>元素的内容,如果用一个article就会很乱呀?,是不是就不能使用article元素了?当然可以使用了,因为article是可以嵌套article的。事例1(回复留言演示article )

/*可以在文章同作用域里加article元素*/  
<article>
<header>
    <h1>什么是开源中国?</h1>
    <p>发布时间:<time pubdate="pubdate">2011/12/06</time></p>
  </header>
    <p>正文内容....OSCHINA是英文Open Source China的缩写...</p>
  <footer>
     <p><small>版权公开,请随便使用</small></p>
  </footer><section>
   <article>
     <header>
       <h3>发言人:andy.zhou</h3>
       <p><time pubdate date="2011/12/06T14:24-08:00">1小时前</time></p>
     </header>
      <p>I love you OSCHINA。在这里我最喜欢的是小编辑                       的笑话!</p>
   </article>
<article>
     <header>
       <h3>发言人:红薯</h3>
       <p><time pubdate date="2011/12/06T13:15-08:00">2小时前</time></p>
     </header>
      <p>开会拉!</p>
   </article><section>
</article>

section元素

在上面的代码里面是不是看到了在嵌套article元素的时候使用到了section元素了。那么section元素是干什么用的了?其实section元素是用于分块的。一个section里面一般是包括标题和内容的。千万别把section和div混淆了哦,section不是普通的容器元素,可以在section里面使用DIV,明白了吧!

<section>
  <article>
    <h2>中国</h2>
    <p>一个神奇的国度!</p>
  </article>
  <article>
    <h2>美国</h2>
    <p>一个疯癫的国度!</p>
  </article>
  <article>
    <h2>日本</h2>
    <p>一个严谨的国度!</p>
  </article>
</section>
/*这个可以实现列表的效果*/


<article>
  <h1>中国房价为什么居高不下?</h1><p>税高是主要原因。高风险的产业本来就应该有比较高的回报,但是这么的房地商......</p>
  <section>
    <h2>我不同意上述的观点</h2>
      <p>原因是.....</p>
   </section>
   <section>
    <h2>我同意上述的观点</h2>
      <p>原因是.....</p>
   </section>
</article>

可能在每弄清楚元素应该使用那些范围的时候会有些乱,没关系你在仔细梳理一下她们的作用,就会知道的啦!

Nav元素

这个元素从字面的意思也就不难想象是干什么的啦!当然是导航有关的啦,那于导航有什么关系了?记住她是页面或者是内容的导航连接组。既然页面和内容的导航连接组,就说明什么了?就是说在同一个页面可以有N个nav元素的并存。注意的是页面的页脚的连接不建议使用nav元素,因为footer比她更合适。

<body>
 <h1>HTML5+CSS3权威指南</h1>
 <nav>
   <ul><li>首页</li><li>HTML 5</li></ul>
 </nav>
  <article>
    <header>
       <h1>Html5和Css3历史</h1>
       <nav>
         <ul>
             <li><a href="#html5">HTML5</a></li>
             <li><a href="#css3">CSS3</a></li>
        </ul>
       </nav>
    </header>
    <section id ="html5">
      <h1>HTML 5历史</h1>
      <p>讲述HTML 5历史...</p>
    </section>
    <section id ="css3">
      <h1>CSS 3历史</h1>
      <p>讲述Css3历史....</p>
    </section>
  </article>
 <footer><p><a href="javascript:void(0)">联系站长</a><small>版权免费,欢迎使用</small></p></footer>
</body>

aside元素

aside元素表示当前页面或文章附属信息部分,可以包含当前页面或主体内容的引用、侧边栏、广告、导航等等。最常见是样子就是类似文言文的某个字或词的注释。用法

<body>
   <h1>页面验证表单验证</h1>
   <article>
      <h1>页面验证表单验证方法有哪些?</h1>
       <p>页面表单验证可以使用javascript控制也可以使用正则表达....</p>
     <h1>javascript解释</h1>
        <aside>
          <dl>
            <dt>javascript</dt>
            <dd>javascript是脚本语言...</dd>
          <dl>
        </aside>
     </article>
</body>

time元素与微格式

time元素是用来展示时间的元素。time允许带时差,可以自定义日期格式。

<time datetime="2011-12-06">2011年12月06日</time><!--标准-->
<time datetime="2011-12-06T12:00+09:00">2011年12月06日12点是我的生日</time><!--时差,本地编码就不需要了(日期和时间之间用T,T表示时间)-->

pubdate元素

还记不记得上面什么地方使用了pubdate元素了?pubdate元素表示发布时间,用于网页或者文章。上面有代码,所以就不贴代码了!

非主体结构函数

header元素

header元素眼熟吧!表示标题应该放置的地方。这个比较简单,就不多说了。

hgroup元素

h group,看清楚了吧,h 标题,group组。标题分组。

<article>
  <header>
     <hgroup>
        <h1>主标题</h1>
        <h2>子标题</h2>
     </hgroup>
  </header>
    <p>正文....<p>
</artilce>

footer元素

页脚,这个上面代码多次用到。注意一点的是,不要把footer的职责让给了section哦!

address元素

地址元素。里面因该包括文档的作者及其信息,如blogs地址,邮箱....

<footer>
  <div>
    <address>
       <a title="andy.zhou的OSChina博客" href="http://my.oschina.com/tow">Andy.zhou</a>
    </address>
  <div>
</footer>

好了,这章就到这了。这只是告诉你有什么标签,可以做什么用。但是这些标签用到恰到好处还需要很长一段路的磨练。

© 著作权归作者所有

产品哥
粉丝 80
博文 167
码字总数 191806
作品 1
杭州
CTO(技术副总裁)
私信 提问
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

产品哥
2011/12/02
0
1
那些年,我们学过的编程语言——Python篇

Hello World!不少人都与这句话邂逅在大家最初学习编程的时候。 2014年12月的编程语言排行榜中,Python位列在众多语言中的第8位,一直保持在前列。初学者看着简单清晰的语言极其容易上手。即...

生气的散人
2014/12/26
1K
4
HTML5与CSS3权威指南范例及代码共22章

最近在群里看到很多网友找关于HTML5+CSS3的资料,今天整理出来与大家分享,一共有22章,里面全部都是例子。 下载地址: http://www.jq-school.com/MD.aspx?id=381 图片预览:...

邓剑彬
2012/11/30
1K
0
JavaScript权威指南笔记

第二章 词法结构 JavaScript区分大小写;/html不区分大小写 JavaScript会忽略程序中标识(token)之间的空格; 直接量:程序中直接使用的数据值; 标识符:字母、下划线(_)、美元($) 保...

drei
2016/12/10
486
0
《HTML 5实战》书评赠书活动,正逢读书好时节

阳春三月,正是读书好时节! 华章公司&开源中国联合举办读样章赠图书活动,免费赠送《HTML 5实战》10册! 特别提示:本书的作者陶国荣先生曾做客Oschina,在“OSCHINA第9期高手问答 主题:H...

刘静
2012/03/05
4.4K
86

没有更多内容

加载失败,请刷新页面

加载更多

Oracle:本地表空间管理,字典表空间管理

本地管理表空间 一、概述 1、理解本地管理表空间的由来 2、理解什么是字典管理表空间及工作原理 3、理解本地管理表空间的优势(为什么要使用本地管理表空间) 4、理解本地管理表空间的内部结...

突突突酱
25分钟前
1
0
深度剖析Spring Boot源码,看完薪资敢要30K!

1 实例化SpringApplication SpringApplication.run(BootifulApplication.class, args); public static ConfigurableApplicationContext run(Class<?> primarySource, String... args) {ret......

Java架构资源分享
28分钟前
4
0
tornadofx控制台输出“三门问题”,蒙特卡洛算法

import tornadofx.*fun main() { val wins = intProperty() val lose = intProperty() val Msg = stringProperty()// 1000万次 val n = 10000000 (1..n......

oschina4cyy
34分钟前
1
0
你可能不知道的MySQL中的定点数类型

定点数类型 正因为用浮点数表示小数可能会有不精确的情况,在一些情况下我们必须保证小数是精确的,所以设计MySQL的大叔们提出一种称之为定点数的数据类型,它也是存储小数的一种方式: 其中...

爱编程的浪子
37分钟前
2
0
第十讲:Python爬取网页图片并保存到本地,包含次层页面

上一讲我们讲到了从昵图网的首页下载图片到本地,但是我们发现首页上面的大部分链接其实都可以进入到二级页面。 在二级页面里面,我们也可以同样进行图片的下载,通过层层循环我们可以把网址...

刘日辉
43分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部