header元素

　　一般用来放置整个页面的标题，比如说一个新闻页面，header一般放新闻的标题，如果是一个官方网址，一般header用来放logo和网站导航。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>header元素</title>

</head>

<body>

    <header>

        <h1>IT最新技术</h1>

        <a href="http:///www.baidu.com">百度</a>

        <nav>

            <ul>

                <li><a href="#">学习</a></li>

            </ul>

        </nav>

    </header>

</body>

</html>

footer元素

　  一般用来放置脚注，主要包含：作者信息、copyright。

address元素

　　一般用来呈现联系信息，主要包括：网站的联系方式，电子邮箱，地址

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>address元素</title>

</head>

<body>

    <address>

        <a href="#">iwen</a>

        <a href="#">ime</a>

    </address>

    <footer>

        <div>

            <address>

                <a href="#">ioj</a>

                地址：***

            </address>

            <time datetime="2019-03-11">2019-03-11</time>

        </div>

    </footer>

</body>

</html>

网页编排

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>网页编排</title>

</head>

<body>

    <header>

        <h1>网页标题</h1>

        <nav>

            <ul>

                <li><a href="#">首页</a></li>

            </ul>

        </nav>

    </header>

    <article>

        <h1>文章主标题</h1>

        <p>文章正文</p>

        <section>

            <div>

                <article>

                    <h1>评论标题</h1>

                    <p>评论正文</p>

                </article>

            </div>

        </section>

    </article>

    <footer>

        <small>版权所有：....</small>

    </footer>

</body>

</html>

九、非主体机构元素——header元素、footer元素、address元素、网页编排的更多相关文章

  1. html5-新布局元素header，footer

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. html5 文档元素 header footer h1h2h4

    文档元素: 用于在页面的大布局, 区分各个主体和概念. 让整体清晰, 元素有语义, 进一步代替div 具体划分图示: (参考) <hgroup> <section> <n ...

  3. html5新特性-header,nav,footer,aside,article,section等各元素的详解

    Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性.级块性元素.行内语义性元素和交互性元素四大类. 下面是对各标签的详解,section.he ...

  4. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  5. HTML（二）HTML元素（整体结构，块级元素，内联元素，结构元素，交互元素，元素嵌套规则）

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

  6. easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

    jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile:那么jquery mobile到底包括些什么呢 简介工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条:Jqu ...

  7. Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  8. html5-hgroup和address元素

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. Html中行内元素有哪些？块级元素有哪些？

    1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

随机推荐

  1. day35-python 操作memcache二

    Memcache常用命令 存储命令: set/add/replace/append/prepend/cas 获取命令: get/gets 其他命令: delete/stats.. add方法 添加一条 ...

  2. Charles设置HTTPS抓包

    1. 配置 Charles 根证书 点击 Help -> SSL Proxying -> Install Charles Root Certificate 之后会弹出钥匙串,如果不弹出,请 ...

  3. 通过进程link路径（快捷方式路径）得到进程完整路径

    程序中遇到的问题及解决方法: #error WINDOWS.H already included. MFC apps must not #include <windows.h>解决方法:把 ...

  4. Qthread的使用方法

    1:重载 run()函数 2:将对象移到Qthread对象中 Movetothread 该方法必须通过信号 -槽来激发.

  5. 【持续更新】 | OpenCV 学习笔记

    本文地址:http://www.cnblogs.com/QingHuan/p/7365732.html,转载请注明出处 ######################################## ...

  6. Xcode 和 VisualC++输出流的差别的理解

    将这样一段程序分别运行与Visual Studio 和 Xcode上边的结果: #include <iostream> using namespace std; int main() { ...

  7. top命令详解---待完善

    Top可以看到的cpu信息有: Tasks: 29 total, 1 running, 28 sleeping, 0 stopped, 0 zombie Cpu(s): 0.3% us, 1.0% s ...

  8. SQL-记录查询篇-009

    在学习记录查询之前,学习一些关键字的使用: 1.逻辑运算符:and . or . not  .is null select * from   table_name where  id>2 and ...

  9. centos下配置maven编译环境

    版本centos6jdk1.7findbugs-3.0.1maven-3.0.5protobuf-2.6.0安装yum install lzo-devel zlib-devel gcc gcc-c++ ...

  10. Ubuntu16.04交叉工具链安装

    前言: 开发环境是64位的ubuntu16.04,交叉工具链是通过sudo apt-get install ....安装的,移植uboot2014.10,但是很奇怪,按照网上的介绍在start.s里面 ...