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. IIS 配置迁移

    使用管理员身份运行cmd 应用程序池: # 导出所有应用程序池 %windir%\system32\inetsrv\appcmd list apppool /config /xml > c:\a ...

  2. 转载--php函数使用--var_export

    var_export用于将数组转换成字符串 <?php $arr = [ 'key1'=>'val1', 'key2'=>'val2', 'key3'=>'val3', 'ke ...

  3. 前端学习 之 HTML

    一.HTML 介绍 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言,它不是一种编程语言. HTML使用标签来描述网页.不像p ...

  4. Redis数据库与python的交互

    1.安装redis模块:pip install redis 2.安装好以后主要使用redis模块中的StrictRedis对象,用于连接redis服务器 3.代码如下: from redis impo ...

  5. git——解决每次拉取、提交代码时都需要输入用户名和密码

    在开发中我们经常需要通过 git 对代码进行拉取和提交,频繁地输入用户名和密码会带来很大的麻烦,下面就介绍一下解决git每次拉取.提交代码时都需要输入用户名和密码的方法. 很简单,只要两步骤就能实现: ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：缩写

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <lin ...

  7. jQuery常用操作(待续)

    1. input清空内容 <1> $("#选择器id").val(""); <2> $("input[name='input框 ...

  8. 【原】python常用模块

    1.os模块 对操作系统中文件/目录等进行操作 2.sys模块 对python版本进行操作 3.正则re模块 4.datetime,date,time模块 5.hashlib,md5模块 hashli ...

  9. Linux内核5.4正式将华为EROFS超级文件系统合入主线

    导读 近期,Linux内核5.4系列宣布全面可用,添加了许多新功能,更强的安全性和更新的驱动程序,以提供更好的硬件支持.Linux内核5.4增加对微软exFAT文件系统的支持,另外还支持内核锁定功能, ...

  10. 设计模式课程 设计模式精讲 2-4 UML类图讲解 对比讲解 demo

    1 主要内容 1.1 关联和依赖的对比 1.2 组合和聚合的对比 1.3 继承和实现的对比 1.4 各种关系代码实现demo 1 主要内容 1.1 关联和依赖的对比 关联是a类中存在b类对象,企鹅类中 ...