第六十四节,html文档布局元素

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>元素在其内部生成说明标签 解释:由于大多数主流浏览器尚未支持,暂略。

 

时间: 2024-08-27 15:57:34

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

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

第三百六十四节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)的mapping映射管理 1.映射(mapping)介绍 映射:创建索引的时候,可以预先定义字段的类型以及相关属性elasticsearch会根据json源数据的基础类型猜测你想要的字段映射,将输入的数据转换成可搜索的索引项,mapping就是我们自己定义的字段数据类型,同时告诉elasticsearch如何索引数据以及是否可以被搜索 作用:会让索引建立的更加细致和完善 类型:静态映射和动态

Egret入门学习日记 --- 第六十四篇(书中 19.4 节 内容)

第六十四篇(书中 19.4 节 内容) 昨天的问题,是 images 库自己本身的问题. 我单独使用都报错. 这是main.js文件代码: let images = require("images"); console.log(images); 这是cmd运行命令历史: Microsoft Windows [版本 10.0.16299.15] (c) 2017 Microsoft Corporation.保留所有权利. C:\Users\Administrator\Desktop\a&

centos LNMP第二部分nginx、php配置 第二十四节课

centos  LNMP第二部分nginx.php配置  第二十四节课 上半节课 下半节课 f

centos 监控cacti/nagios/zabbix 第三十四节课

centos   监控cacti/nagios/zabbix   第三十四节课 上半节课 下半节课 f

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

第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)的查询 elasticsearch(搜索引擎)的查询 elasticsearch是功能非常强大的搜索引擎,使用它的目的就是为了快速的查询到需要的数据 查询分类: 基本查询:使用elasticsearch内置的查询条件进行查询 组合查询:把多个查询条件组合在一起进行复合查询 过滤:查询同时,通过filter条件在不影响打分的情况下筛选数据

第三百二十四节,web爬虫,scrapy模块介绍与使用

第三百二十四节,web爬虫,scrapy模块介绍与使用 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以应用在获取API所返回的数据(例如 Amazon Associates Web Services ) 或者通用的网络爬虫.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. Scrapy 使用了 Twisted异步网络库来处理网络通讯.

centos mysql 优化 第二十四节课

centos mysql  优化  第二十四节课 f

第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息

第三百三十四节,web爬虫讲解2-Scrapy框架爬虫-Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻标题和rul地址 有多网站,当你浏览器访问时看到的信息,在html源文件里却找不到,由得信息还是滚动条滚动到对应的位置后才显示信息,那么这种一般都是 js 的 Ajax 动态请求生成的信息 我们以百度新闻为列: 1.分析网站 首先我们浏览器打开百度新闻,在网页中间部分找一条新闻信息 然后查看源码,看看在源码里是否有

第三百五十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—数据收集(Stats Collection)

第三百五十四节,Python分布式爬虫打造搜索引擎Scrapy精讲-数据收集(Stats Collection) Scrapy提供了方便的收集数据的机制.数据以key/value方式存储,值大多是计数值. 该机制叫做数据收集器(Stats Collector),可以通过 Crawler API 的属性 stats 来使用无论数据收集(stats collection)开启或者关闭,数据收集器永远都是可用的. 因此您可以import进自己的模块并使用其API(增加值或者设置新的状态键(stat k