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. [转载]关于shell脚本的基本语法

    关于shell脚本的基本语法 整理于:2014-03-31,何俭飞,mymladdr@sina.com 一.执行 1.shell脚本如果要被执行,一般地必须要有执行权限"x"(除了 ...

  2. ssm框架中css被拦截

    最近用springmvc spring mybatis框架写程序,请求成功并获得数据,唯独css样式不能加载,但路径正确,css文件编码也是utf-8,用火狐debug总是显示未请求到(都快怀疑自己写 ...

  3. CodeForces 749D Leaving Auction

    二分查找,$set$. 对于某一次询问,如果把人删光了,那么输出$0$ $0$. 如果只剩下$1$个人,那么输出那个人喊的最低价格. 如果剩下的人数有大于等于两个, 这时最底下出现的情景必然是红色部分 ...

  4. SHELL中，如何分割字符串

    done.csv中,形如 amoy9812@163.com的数据 #!/bin/shwhile read linedo ar=(${line//@/ }) echo ${ar[0]} #说明:分解出账 ...

  5. java基础：int和integer区别

    int是基础数据类型: integer是包装类,里面包含一些基础的方法,最常见的就是数据转换: 比如int转String: int a=0: String b=Integer.toString(a):

  6. Android之HandlerThread

    HandlerThread详解 1 HandlerThread基本原理 HandlerThread继承自Thread,它是一种可以使用Handler的Thread.它的实现很简单,就是在run方法中通 ...

  7. 使用vscode对c进行调试

    最近在学习C语言.知道vscode支持对c语言的代码的调试,就想试试.然后找了教程: https://code.visualstudio.com/docs/languages/cpp http://w ...

  8. VB调用WebService（SOA2.0接口）（直接Post方式）并解析返回的XML

    SOA 2.0接口 Function GetDepartmentCode(reqDeptCode) Dim soaRequestXML : soaRequestXML = "" D ...

  9. Process Explorer(增强任务管理器) V16.05 免费绿色版

    软件名称: Process Explorer(增强任务管理器)软件语言: 中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 1.2MB图片预 ...

  10. 学习Java第一篇——Java 安装及环境搭配

    内容提要: 1.下载JDK: 2.安装JDK: 3.配置JDK;   第一,下载JDK:  1.登陆网址:www.oracle.com 2.点击 Downloads 3.选择 Java SE 4.选择 ...