zoukankan      html  css  js  c++  java
  • HTML 页眉、页脚标签的学习(样式/节)

    header标签

    <header> 标签定义文档或者文档的一部分区域的页眉。

    <header> 元素应该作为介绍内容或者导航链接栏的容器。

    在一个文档中,您可以定义多个 <header> 元素。

    注释:<header> 标签不能被放在 <footer><address> 或者另一个 <header> 元素内部。

    举例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页眉标签</title>
    </head>
    <body>
    
    <!-- <article> 标签定义一个文章区域 -->
    <article>
        <!-- <header> 标签定义文档或者文档的一部分区域的页眉。 -->
        <header>
            <h1>Google Chrome</h1>
            <p><time pubdate datetime="2020-02-22"></time></p>
        </header>
    
        <p>Google Chrome是由Google开发的免费网页浏览器。Chrome是化学元素“铬”的英文名称,过去也用Chrome称呼浏览器的外框。
            Chrome相应的开放源代码计划名为Chromium,而Google Chrome本身是非自由软件,未开放全部源代码。</p>
    </article>
    
    
    </body>
    </html>

    Google浏览器打开:

    footer标签

    <footer> 标签定义文档或者文档的一部分区域的页脚。

    <footer> 元素应该包含它所包含的元素的信息。

    在典型情况下,该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

    在一个文档中,您可以定义多个 <footer> 元素。

    提示:假如您使用 <footer> 元素来插入联系信息,应该在 <footer> 元素内使用 <address> 标签。

    举例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页脚标签</title>
    </head>
    <body>
    
    <!-- <footer> 标签定义文档或者文档的一部分区域的页脚。 -->
    <footer>
        <p>摘自: 百度百科</p>
        <p><time 发布日期时间="2020-02-22"></time></p>
    </footer>
    
    </body>
    </html>

    Google浏览器打开:

    案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页眉页脚</title>
    </head>
    <body>
    
    <!-- <article> 标签定义一个文章区域 -->
    <article>
        <!-- <header> 标签定义文档或者文档的一部分区域的页眉。 -->
        <header>
            <h1>Google Chrome</h1>
            <p><time pubdate datetime="2020-02-22"></time></p>
        </header>
    
        <p>Google Chrome是由Google开发的免费网页浏览器。Chrome是化学元素“铬”的英文名称,过去也用Chrome称呼浏览器的外框。
            Chrome相应的开放源代码计划名为Chromium,而Google Chrome本身是非自由软件,未开放全部源代码。</p>
    </article>
    
    <!-- <footer> 标签定义文档或者文档的一部分区域的页脚。 -->
    <footer>
        <p>摘自: 百度百科</p>
        <p><time 发布日期时间="2020-02-22"></time></p>
    </footer>
    
    
    </body>
    </html>

    Google浏览器打开:

              

  • 相关阅读:
    颜色代码 #000~#FFF & DML案例设计
    SQLScript DML 创建 & 查询 & 序列(条件查询 日起查询 关联查询 子查询 分组查询 查询内容拼接 模糊查询)
    Java JDBC 连接数据库 Demo
    document的JavaScript一些用法
    dxSpreadSheet的报表demo-关于设计报表模板问题
    dxSpreadSheet的报表demo-关于设计报表模板的Datagroup问题
    TJSON的烦人的泄漏
    dxSpreadSheet的报表
    TDXSpreadSheet中自定义公式函数三大步骤
    SVN项目监视器的配置文件
  • 原文地址:https://www.cnblogs.com/liyihua/p/12345614.html
Copyright © 2011-2022 走看看