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. iOS 10.3 以上系统实现应用内评分及开发者回复评论

    在 iOS 10.3 之前,如果你要给一个应用评分,那么你需要打开 App Store,搜索应用,找到评论,点击撰写评论,然后评分.整个评分流程非常繁琐,还要忍受漫长的页面加载,导致很少有用户愿意主动 ...

  2. 使用git commit命令时会提示"Please tell me who you are"

    在命令行中输入 git config --global user.email "邮箱地址" git config --global user.name "用户名" ...

  3. 笔记-capped collection

    笔记-capped collection 1.      collection 1.1.    简介 集合分为固定与非固定collection,capped collection 1.1.1.   c ...

  4. P1017进制转化

    P1017进制转化 也不知道为啥,这么简单的题困扰了我这么长时间 #include<cstdio> using namespace std; int m; //被除数= 除数*商 + 余数 ...

  5. MFC加载图片

    目录 1. 自适应方法 2. 加载原图方法 1. 自适应方法 /* 自适应方法 */ CRect rect; CRect rect1; CImage image; //创建图片类 image.Load ...

  6. 【剑指Offer面试编程题】题目1355：扑克牌顺子--九度OJ

    题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他 ...

  7. Java记录4--string

    1.toString所有的类都默认自动继承了Objiect类 2.Object类中的toString方法返回的时类的名字和该哈希表码组成的一个字符串, System.out.println(类对象名) ...

  8. 时间和日期实例-<Calender计算出生日期相差几天>

    String day1="1994:10:04"; String day2="1994:10:03"; SimpleDateFormat format= new ...

  9. for循环语句及批量创建用户！

    1.for 语句结构for 变量名 in 取值列表do命令序列done ================================================================ ...

  10. 38 java 使用标签跳出多层嵌套循环

    public class Interview { public static void main(String[] args) { //使用带标签的break跳出多层嵌套循环 Boolean flag ...