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. #P2010 回文日期 的题解

    题目描述 在日常生活中,通过年.月.日这三个要素可以表示出一个唯一确定的日期. 牛牛习惯用88位数字表示一个日期,其中,前44位代表年份,接下来22位代表月 份,最后22位代表日期.显然:一个日期只有 ...

  2. python列表操作方法详解

      列表 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表是一个数据的集合,集合内可以放任何数据类型,可对集合方便的增删改查操作.Python已经内置确定序列的长度以及确 ...

  3. Android Studio中 安卓模拟器 联网

    方案一:之前做测试的时候发现虚拟机无法联网(浏览器打开 www.baidu.com, 显示 403 forbidden): 解决方案:关闭已经打开的虚拟机,进入到 SDK 安装目录下,按住 shift ...

  4. Python开发个人专属表情包网站

    “表情包”是一种利用图片来表示感情的一种方式.表情包是在社交软件活跃之后,形成的一种流行文化,表情包流行于互联网上面,基本人人都会发表情. 曾经你是否也有过找不到表情包去应对别人的时候. 今天小编分享 ...

  5. ImageMagick PDF到JPG有时会导致黑色背景

    convert -verbose -density 300 -quality 50 -background white -alpha remove 0.pdf 0.jpg magick convert ...

  6. js前台给echarts赋值

    //资金变化趋势function initChart22(theme) { // var data = JSON.parse('{data:'+chartInfo[0].zjbhqs+'}') // ...

  7. 【PAT甲级】1030 Travel Plan (30 分)（SPFA,DFS）

    题意: 输入N,M,S,D(N,M<=500,0<S,D<N),接下来M行输入一条边的起点,终点,通过时间和通过花费.求花费最小的最短路,输入这条路径包含起点终点,通过时间和通过花费 ...

  8. HTML5模板引擎 Thymeleaf 教程（转）

    原文:http://www.open-open.com/lib/view/open1383622135586.html Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非 ...

  9. java 获取web登录者的ip地址

    /** * 获取访问用户的客户端IP(适用于公网与局域网). */ public static final String getIpAddr(final HttpServletRequest requ ...

  10. SessionAttributes注解

    SessionAttributes注解: a.该注解只能应用在类上: b.该注解用于将Map.ModelMap.Model或ModelAndView中的数据暂存到HttpSession中以使其可以在多 ...