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. python基础4

    内容概要: 一.递归 递归就是函数本身调用自己,直到满足指定条件之后一层层退出函数 递归特性: 必须有一个明确的结束条件 每次进入更深一层递归时,问题规模相比上次递归都应有所减少 递归效率不高,递归层 ...

  2. 第一百二十七节，JavaScript，JSON数据类型转换，数据转换成字符串，字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  3. C# FTPHelper（搬运）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  4. 走迷宫 （nyoj 306）

    学习自此博客题解 二分搜索+深搜.二分枚举最小差距值(路径上的最大值与最小值的差距),枚举的最小值为abs(a[1][1]-a[n][n]),最大值为题目给出的120.搜索时代入这个最小差距值,若存在 ...

  5. MIT线性代数课程 总结与理解-第一部分

    概述 个人认为线性代数从三个角度,或者说三个工具来阐述了线性关系,分别是: 向量 矩阵 空间 这三个工具有各自的一套方法,而彼此之间又存在这密切的联系,通过这些抽象出来的工具可以用来干一些实际的活,最 ...

  6. ArrayList构造函数

    //1.摘要: //初始化 System.Collections.ArrayList 类的新实例,该实例为空并且具有默认初始容量. // public ArrayList(); ArrayList a ...

  7. SXT分布式缓存技术公开课的观后感

    最近几天在研究Redis,Redis作为最近比较流行的缓存技术,其特点还是很明显的,Redis使用Key-Value的结构来存储数据,Redis也是内存型的数据库,数据一开始是保存在内存中的,通过某些 ...

  8. ps -ef |grep 输出的具体含义

    [root@localhost ~]# ps -ef | grep ApacheJetspeed root     18887 18828  0 08:09 pts/0    00:00:00 gre ...

  9. Python 智能处理方向的工具

    机器视觉类:OpenCV. 自然语言处理:NLTK, jieba(Python中文分词组件),HanLP, FudanNLP, NLPIR, http://tm.itc.ntnu.edu.tw/CNL ...

  10. oc 导航栏跳转指定界面

    [self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIn ...