HTML学习第七天（二）

新增的非主体结构

  • header元素
  • footer元素
  • hgroup元素
  • address元素

header元素：通常用于存放整个页面或页面内的一个区域块的标题，但也可以存放类似于数据表格搜索表单或相关的logo图案，header一般会包含一个handing元素，也可以不放

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

            <!-- H5之前的写法 -->

    <!--<div class="header"></div>-->

    <!--<div class="content"></div>-->

    <!--<div class="footing"></div>-->

    <header>

        <h1>IT最新技术</h1>

    </header>

    <article>

        <header>

        <a href="index.html"></a>

            <nav>

                <ul>

                    <li><a href="#">学习</a> </li>

                    <li><a href="#">技术</a></li>

                    <li><a href="#">论坛</a></li>

                    <li></li>

                </ul>

            </nav>

        </header>

    </article>

    <footer>CIP</footer>

</body>

</html>

footer元素：作为上层父级元素内容区域块的脚注，一般包括作者，相关阅读链接，以及版权信息，备案号等

  <!-- H5之前的写法 -->

    <!--<div class="footer">-->

        <!--<ul>-->

            <!--<li><a href="#">备案号</a></li>-->

            <!--<li><a href="#">公安局备案</a></li>-->

            <!--<li><a href="#">版权归属</a></li>-->

        <!--</ul>-->

    <!--</div>-->

            <!-- 区块结尾 -->

    <article>

        <footer>

            文章的底部

        </footer>

    </article>

<!-- 全局的底部 -->

    <footer>

        <ul>

        <li><a href="#">备案号</a></li>

        <li><a href="#">公安局备案</a></li>

        <li><a href="#">版权归属</a></li>

        </ul>

    </footer>

hgroup元素:将标题及其子标题进行分组的元素。hgroup元素常会将h1到h6元素进行分组，例如一个内容区块的标题及其子元素算一组

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <article>

        <header>

            <hgroup>

                <!-- 降级 -->

                <h1>

                    这是文章标题

                </h1>

                <p><time datetime="2020-02-02">2020-02-02</time></p>

                <h2>这是一个子标题</h2>

            </hgroup>

        </header>

        <div>

            这是内容

        </div>

        <footer>这是底部</footer>

    </article>

</body>

</html>

address元素：文档中所有的联系信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <address>

        <a href="#">aaa</a>

        <a href="#">www</a>

        <a href="#">vvv</a>

    </address>

    <footer>

        <div>

            <address>

                <a href="#">who</a>

                My,world

            </address>

            <time datetime="2020-02-02">2020-02-02</time>

        </div>

    </footer>

</body>

</html>

HTML学习第七天（二）的更多相关文章

  1. salesforce零基础学习（七十二）项目中的零碎知识点小总结（一）

    项目终于告一段落,虽然比较苦逼,不过也学到了好多知识,总结一下,以后当作参考. 一.visualforce标签中使用html相关的属性使用 曾经看文档没有看得仔细,导致开发的时候走了一些弯路.还好得到 ...

  2. 我的MYSQL学习心得（十二） 触发器

    我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数 ...

  3. C语言学习 第七次作业总结

    C语言学习 第七次作业总结 数组可以分为数组和多下标数组(在传统的国内C语言书本中,将其称为二/多维数组). 数组名称 在之前的课程中,大家应该都有印象,对于int a这样的定义,会为变量 a 声明一 ...

  4. 八、Android学习第七天——XML文件解析方法（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 八.Android学习第七天——XML文件解析方法 XML文件:exten ...

  5. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  6. 我的MYSQL学习心得（十二）

    原文:我的MYSQL学习心得(十二) 我的MYSQL学习心得(十二) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYS ...

  7. Typescript 学习笔记七：泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. （转）Maven学习总结(七)——eclipse中使用Maven创建Web项目

    孤傲苍狼只为成功找方法,不为失败找借口! Maven学习总结(七)——eclipse中使用Maven创建Web项目 一.创建Web项目 1.1 选择建立Maven Project 选择File -&g ...

  9. WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

随机推荐

  1. 解决sublime不能安装packages的问题

    问题如下:该问题产生的原因是因为默认的配置中无法访问 "https://packagecontrol.io/channel_v3.json"该文件造成的 解决: 1.下载 chan ...

  2. [运维] 如何在云服务器上安装 MySQL 数据库, 并使用 Navicat 实现远程连接管理

    .•●•✿.｡.:*.•●•✿.｡.:*.•●•✿.｡.:*.•●•✿.｡.:*.•●•✿.｡.:*.•●•✿.｡.:*.•.•●•✿.｡.:*.•●•✿.｡.:*.•●•✿.｡.:*.•●•✿.｡. ...

  3. Jmeter-maven-plugin github 版本插件变更历史

    https://github.com/jmeter-maven-plugin/jmeter-maven-plugin/blob/master/CHANGELOG.md

  4. rails work

    4.2 Say "Hello", Rails problem weppack not install solve run the command rails webpacker:i ...

  5. keil Bulid Ouput窗口中PROGRAM SIZE项的具体含义

    在Keil中编译工程成功后,在下面的Bulid Ouput窗口中会输出下面这样一段信息:   Program Size: Code=6320  RO-data=4864  RW-data=44  ZI ...

  6. Linux centosVMware shell中的函数、shell中的数组、

    一.shell中的函数 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段代码时直接调用这个小单元的名字即可. 格式: function _name() { command ...

  7. zookeeper和eureka的区别在哪?

    zookeeper和eureka的区别在哪?传统的关系型数据库是ACID(原子性,一致性,独立性,持久性), nosql数据库是CAP(强一致性,可用性,分区容错性),分布式系统只能3进2,三个选两个 ...

  8. Py西游攻关之基础数据类型(一)-数字字符串字节布尔

    Py西游攻关之基础数据类型 - Yuan先生 https://www.cnblogs.com/yuanchenqi/articles/5782764.html 数据类型 计算机顾名思义就是可以做数学计 ...

  9. UGUI 特效怎样在UI上裁剪

    刚好碰到有人问怎样把粒子特效放到 UI 上并且能正确被 Mask 裁剪, 首先想到给粒子效果的 Shader 添加模板模仿一般 UI 的模板方式, 应该就能正确裁剪了吧, 不过没那么简单, 我们看到在 ...

  10. scrapy（创建scrapy工程）报错：“ ImportError：DLL load failed：找不到指定的模块”

    先要确定什么模块找不到 解决方法 windowa环境下加 ( --user) pip install -I cryptography --user