html文档布局元素

学习要点：

    1.文档元素总汇

    2.文档元素解析

    本章主要探讨HTML5中文档元素，文档元素的主要作用是划分各个不同的内容，让整个布局清晰明快。让整个布局元素具有语义，进一步替代div。

一．文档元素总汇

    文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。

        元素名称                                 说明

         h1~h6      　　　　　　 表示标题

         header      　　　　　　表示首部

         footer      　　　　　　 表示尾部

           nav       　　　　　　  表示有意集中在一起的导航元素

        section      　　　　　　表示重要概念或主题

        article      　　　　　　 表示一段独立的内容

        address      　　　　　 表示文档或article的联系信息

         aside      　　　　　　 表示与周边内容少有牵涉的内容

         hgroup      　　　　　将一组标题组织在一起

        details      　　　　　  生成一个区域，用户将其展开可以获得更多细节

        summary      　　　　用在details元素中，表示该元素内容的标题或说明

二．文档布局元素解析

文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习CSS，配合使用才能起到布局和样式的效果。

1.<header>表示首部

<header>

    这里部分一般是页面头部，包括：LOGO、标题、导航等内容

</header>

解释：<header>元素主要设置页面的标头部分。

 

2.<footer>表示尾部

<footer>

    这里是页面的尾部，一般包括：版权声明、友情链接等内容

</footer>

解释：<footer>元素主要设置页面的尾部。

 

 3.<h1>~<h6>添加标题

<header>

    <h1>标题部分</h1>

    <h4>小标题部分</h4></header>

 解释：<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。

 

4.<hgroup>组合标题

<header>

    <hgroup>

        <h1>标题部分</h1>

        <h4>小标题部分</h4>

    </hgroup>

</header>

解释：<hgroup>元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组。

 

5.<section>文档主题

<section>

这里一般是存放文档主题内容。

</section>

 解释：<section>元素的作用是定义一个文档的主题内容。

 

6.<nav>添加导航

<header>

    <h1>标题部分</h1>

    <h4>小标题部分</h4>

    <nav>这里存放文档的导航</nav>

</header>

 解释：<nav>元素给文档页面添加一个导航。

7.<article>添加一个独立成篇的文档

<article> <!--添加一个独立成篇的文档-->

    <header> <!--添加一个独立成篇的文档头部-->

        <nav></nav> <!--添加一个独立成篇的文档导航-->

    </header>

<section>文档主题</section> <!--添加一个独立成篇的文档主题-->

<footer>尾部</footer> <!--添加一个独立成篇的文档尾部-->

</article>

解释：<article>元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。

 

8.<aside>生成注释栏

<aside>这是一个注释栏</aside>

解释：<aside>元素专门为某一段内容进行注释使用。也就是侧栏

 

9.<address>表示文档或article元素的联系信息。

 <address>联系信息</address>

 解释：如果是在<body>元素下时，表示整个文档的联系信息。如果是在<article>元素下时，表示其下的联系信息。

 

10.<details>元素生成详情区域、<su ary>元素在其内部生成说明标签 解释：由于大多数主流浏览器尚未支持，暂略。

 

第六十四节，html文档布局元素的更多相关文章

  1. 第三百六十四节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mapping映射管理

    第三百六十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mapping映射管理 1.映射(mapping)介绍 映射:创建索引的时候,可以预先定义字 ...

  2. THML文档布局元素

    学习要点:     1.文档元素总汇     2.文档元素解析 一．文档元素总汇     文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念.         元素名称     ...

  3. linux杂记（十四）CAJ文档阅读方法

    关于Linux下看CAJ文档的方法 前言:由于大四狗要写各种各样的综述,看各种论文,关于知网为何没有PDF下载,关于为何知网没有CAJ阅读器for linux的种种蛋疼问题,都不要问我. 说回正题,网 ...

  4. 第二百六十四节，Tornado框架-基于正则的动态路由映射分页数据获取计算

    Tornado框架-基于正则的动态路由映射分页数据获取计算 分页基本显示数据 第一步.设置正则路由映射配置,(r"/index/(?P<page>\d*)", inde ...

  5. 第一百六十四节，jQuery，常规选择器

    jQuery,常规选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名. ...

  6. Gradle 1.12用户指南翻译——第六十四章. 发布到Ivy（新）

    其他章节的翻译请参见:http://blog.csdn.net/column/details/gradle-translation.html翻译项目请关注Github上的地址:https://gith ...

  7. 第三百六十五节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询

    第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询 1.elasticsearch(搜索引擎)的查询 elasticsearch是功能 ...

  8. centos Linux系统日常管理1 cpuinfo cpu核数 命令 w, vmstat, uptime ,top ,kill ,ps ,free,netstat ,sar, ulimit ,lsof ,pidof 第十四节课

    centos Linux系统日常管理1  cpuinfo cpu核数   命令 w, vmstat, uptime ,top ,kill ,ps ,free,netstat ,sar, ulimit ...

  9. 孤荷凌寒自学python第六十四天学习mongoDB的基本操作并进行简单封装3

    孤荷凌寒自学python第六十四天学习mongoDB的基本操作并进行简单封装3 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十天. 今天继续学习mongoDB的简单操作, ...

随机推荐

  1. mysql 5.5 mysqldump备份原理

    开启general_log日志,获取mysqldump执行语句 show VARIABLES like 'general_log%' set GLOBAL general_log=on 执行备份命令 ...

  2. chrome ipc 网摘

    http://my.oschina.net/myspaceNUAA/blog/81632?p=1 http://lihuan623.blog.163.com/blog/static/138595845 ...

  3. 读取Oracle表结构数据

    <html lang="zh-cn"> <head> <meta name="generator" content="O ...

  4. C# CodeHelper

    using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using Syste ...

  5. wpf 界面线程 添加项

    foreach (var r in sec.Records) { listView.Dispatcher.Invoke((new Action(delegate() { listView.Items. ...

  6. openSuse快捷键

    1.printscreen全屏截图 2.ctrl+printscreen窗口截图 3.shift+printscreen选择截图 4.Ctrl+Alt+up arrow.Ctrl+Alt+down a ...

  7. 【优先队列】-HDU4546比赛难度

    比赛难度 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submis ...

  8. hibernate_@GeneratedValue

    JPA通用策略生成器  通过annotation来映射hibernate实体的,基于annotation的hibernate主键标识为@Id,  其生成规则由@GeneratedValue设定的.这里 ...

  9. JS 一些常用技巧

    记录 JS 常用的技巧 1. 生成随机数 2. 解决浮点数问题 3. 无路可走时,看看是不是 事件 冒泡了...

  10. db2 备份还原

    一.导入导出 ixf: db2 export to /tmp/xxx.csv of ixf lobs to . xml to . modified by codepage=1208 "sel ...