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. 解决centos7命令无法补全

    背景 偶然发现本地虚拟机centos 7.7配置firewalld-cmd命令行无法补全,手敲命令太多,着实麻烦 解决方案 安装linux命令行补全工具,还能够补全命令参数 yum install b ...

  2. 树莓派4B踩坑指南 - （10）安装坚果云（更新：暂不支持）

    191209更新: 根据坚果云用户支持(helpdesk@nutstore.net)的官方回复,客户端不支持arm,所以本篇后续内容可以不用看了.. 原文如下: "您好,客户端似乎不支持ar ...

  3. Codeforces1107E. Vasya and Binary String

    题目链接 本题也是区间dp,但是需要保存的信息很多,是1还是0,有多少个连续的,那我们可以预处理,将所有的连续缩合成1个字符,那么字符串就变成了一个01交替的串,我们任意的消除1个部分,一定能引起连锁 ...

  4. 【协作式原创】查漏补缺之Golang中mutex源码实现(预备知识)

    预备知识 CAS机制 1. 是什么 参考附录3 CAS 是项乐观锁技术,当多个线程尝试使用 CAS 同时更新同一个变量时,只有其中一个线程能更新变量的值,而其它线程都失败,失败的线程并不会被挂起,而是 ...

  5. 关于热部署Devtools出现同一个类型进行类型转换失败的问题

    背景: 最近在和学长们做一个小系统,在进行任务调度的设置的时候会出现类型转换失败的错误,原本是同一个类型的,不应该出现类型转换失败的问题,起初以为是序列化的问题,回来发现并不是这个原因, 报错截图: ...

  6. 夯实Java基础（二十一）——Java反射机制

    1.反射机制概述 Java反射机制是指程序在运行状态中,对于任何一个类,我们都能够知道这个类的所有属性和方法(包括private.protected等).对于任何一个对象,我们都能够对它的属性和方法进 ...

  7. Linux centos7iptables filter表案例、iptables nat表应用

    一.iptables filter表案例 vim /usr/local/sbin/iptables.sh 加入如下内容 #! /bin/bash ipt="/usr/sbin/iptable ...

  8. node.js绑定监听事件EventEmitter类

    Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件,如下: // 引入 events 模块 var events = r ...

  9. ch8 固定宽度、流式、弹性布局

    假设浏览器窗口设置为1250px:wrapper的宽度为960px:content的宽度为920px:确保了wrapper居中时两边有20px的间距:  secondary的宽度为230px:  pr ...

  10. yum软件仓库常用命令

    一.PRM简化安装软件的复杂度 安装软件的命令格式 prm -ivh filename.rpm 升级软件的命令格式 prm -Uvh filename.rpm 卸载软件的命令格式 prm -e fil ...