header

header元素是一种具有引导和导航作用的辅助元素。通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。

我们可以使用该元素来写整个页面的标题部分:

The most important heading on this page

同一个页面中,每一个内容区块都可以有自己的元素,例如:

The most important heading on this page

在HTML5中,我们可以不使用div,而用更加语义化的footer来写:

  • copyright
  • sitemap
  • contact
  • to top

在同一个页面中可以使用多个元素,即可以用作页面整体的页脚,也可以作为一个内容区块的结尾,例如,我们可以将直接写在或是中:

Section content appears here.

Footer information for section.

Article content appears here.

Footer information for article.

nav  -- 作用 -- 导航栏

nav

nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用元素是最恰当的,而不需要元素。

一直以来,我们都习惯用如下这种方式来定义导航条:

  • Home
  • About
  • Blog

下面是W3C给出的一个代码示例:

The Wiki Center Of Exampland

  • Home
  • Current Events

...more...

Demos in Exampland

Written by A. N. Other.

  • Public demonstrations
  • Demolitions

...more...

Public demonstrations

...more...

Demolitions

...more...

...more...

Edit | Delete | Rename

© copyright 1998 Exampland Emperor

关键自li,em,dl,ul,ol,footer,header,nav,aside,article

section 版块 用于划分页面上的不同区域,或者划分文章里不同的节 header 页面头部或者版块(section)头部 footer 页面底部或者(section)底部 nav 导航 (包含链接 ...

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

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

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

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

html5,html5教程

html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...

一步HTML5教程学会体系

HTML5是HTML最新的版本,万维网联盟. HTML5是下一代的HTML标准,HTML5是为了在移动设备上支持多媒体. 新特性: 绘画的canvas元素,用于媒介回放的video和audio元素,对 ...

IT兄弟连 HTML5教程 了解HTML5的主流应用1

在很多人眼里,HTML5与互联网营销密切相关,但其实从开发者的角度而言,它是一种网页标准,定义了浏览器语言的编写规范.伴随HTML5标准尘埃落定,浏览器对HTML5特性的逐步支持,再加上国内对HTML ...

【转帖】39个让你受益的HTML5教程

39个让你受益的HTML5教程                    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的4 ...

【特别推荐】Web 开发人员必备的经典 HTML5 教程

对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...

HTML5教程之本地存储SessionStorage

SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

随机推荐

【转】MySQL索引背后的数据结构及算法原理

摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...

IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS(转)

转自: http://www.cnblogs.com/yipu/p/3880518.html   1.购买SSL证书,参考:http://www.cnblogs.com/yipu/p/3722135. ...

OpenGL的glViewPort窗口设置函数实现分屏

之前实现过全景图片查看(OpenGL的几何变换3之内观察全景图),那么我们需要进行分屏该如何实现呢?如下图: 没错就是以前提过的glViewPort函数,废话不多说了,我直接上代码: //从这里开始进 ...

hdu 4764 Stone (巴什博弈,披着狼皮的羊,小样,以为换了身皮就不认识啦)

今天(2013/9/28)长春站,最后一场网络赛! 3~5分钟后有队伍率先发现伪装了的签到题(博弈) 思路: 与取石头的巴什博弈对比 题目要求第一个人取数字在[1,k]间的某数x,后手取x加[1,k] ...

android报表图形引擎(AChartEngine)demo解析与源码

AchartEngine支持多种图表样式,本文介绍两种:线状表和柱状表. AchartEngine有两种启动的方式:一种是通过ChartFactory.get***View()方式来直接获取到view ...

CSS长度单位及区别 em ex px pt in

1.         css相对长度单位 Ø         em          元素的字体高度 Ø         ex           字体x的高度 Ø         px        ...

es6的箭头函数

1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 (  )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...

pdfplumber库解析pdf格式

参考地址:https://github.com/jsvine/pdfplumber 简单的pdf转换文本: import pdfplumber with pdfplumber.open(path) a ...

KMP替代算法——字符串Hash

很久以前写的... 今天来谈谈一种用来替代KMP算法的奇葩算法--字符串Hash 例题:给你两个字符串p和s,求出p在s中出现的次数.(字符串长度小于等于1000000) 字符串的Hash 根据字面意 ...

SSM_CRUD新手练习(5)测试mapper

上一篇我们使用逆向工程生成了所需要的bean.dao和对应的mapper.xml文件,并且修改好了我们需要的数据库查询方法. 现在我们来测试一下DAO层,在test包下新建一个MapperTest.j ...

html5 footer header,html-5 --html5教程article、footer、header、nav、section使用相关推荐

  1. html footer写法,HTML5 footer标签元素 css3布局教程

    HTML5 标签元素 新增html5底部footer元素标签,对html 5新增footer标签根底认识到了解footer css组织教程做到真正掌控与认识 记得我们在畴前html5版本夙昔机关网页底 ...

  2. h5中的结构元素header、nav、article、aside、section、footer详解

    文章目录 header元素 nav元素 article元素 aside元素 section元素 footer元素 结构元素不具有任何样式,只是使页面元素的的语义更加明确 header元素 header ...

  3. html5中footer元素的作用,html5 footer标签怎么用?footer标签的用法实例

    本篇文章主要的为大家介绍了关于HTML5 footer标签的使用方法,有布局之类的知识,纯html编辑,不需要会css,好了,现在让我们来看看这篇关于html5 footer标签的文章吧 首先我们先看 ...

  4. footer.php在哪,HTML5的footer标签元素怎么使用

    H5里面增加了一个标签元素,那么我们要怎样使用呢?记得我们在html5版本以前布局网页底部版权时,都会习惯使用id="footer"或class="footer" ...

  5. Web开发:HTML5、CSS、JavaScript必备教程

    2019独角兽企业重金招聘Python工程师标准>>> Web开发:HTML5.CSS.JavaScript必备教程 想开启Web开发的智慧之门吗?想DIY炫酷的网页特效设计吗?想通 ...

  6. html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生

    原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生 十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...

  7. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  8. html5的canvas动画,Canvas HTML5简介 · Canvas动画教程

    Ch1 HTML5简介 前言 今后的一个月内会连载详细的Canvas教程,从零基础开始,到Canvas API,再到基本动画与高级动画的实现,还会介绍视音频的处理.移动应用,最后如果有时间会扩展说一说 ...

  9. html5入门 epub,分享《HTML5与CSS3基础教程(第7版) 》(图灵程序设计丛书) pdf epub azw3格式...

    <HTML5与CSS3基础教程(第7版)> pdf epub azw3格式 下载地址: https://pan.baidu.com/s/1J2LPQoV1GP90UwaFXvKPaw 内容 ...

最新文章

  1. 搬运机器人举杯贺所需的条件_机器人调试工程师的工作是怎样的
  2. 很炫的shell theme
  3. adb logcat 命令行用法
  4. .net 出现的异常
  5. 关于Tomcat端口8080占用问题(解决方法)
  6. linux动态库与静态库混合连接
  7. css3案例分析,CSS3动画/动画库以及案例分析(上)
  8. Leetcode算法题(C语言)6--只出现一次的数字
  9. Debian for ARM install python 3.5.x
  10. 3dMax导入unity 材质问题
  11. Yarn FairSheduler使用FairSharePolicy计算Fair Share的规则、原理和代码实现
  12. 解决echarts饼图label显示不全的问题
  13. MIT6_0002F16_ProblemSet4
  14. c语言编程等腰三角形,用c语言编辑一个等腰三角形的讲解过程 一个等腰三角形怎么平均分成三个面积相等的三角形?...
  15. 2021-07-17【普及组】模拟赛C组
  16. Hello GitLab
  17. 【漫漫转码路】Python Day 15
  18. 远程桌面进去服务器的办法,远程重启服务器后没法链接远程桌面解决办法
  19. 解决方案:Windows DNS服务器未响应
  20. 计算机一级考试个人小结作文,期中考试个人总结范文精选五篇

热门文章

  1. SQL server 更改计算机名后造成未找到或无法访问服务器解决方法
  2. 排序模型进阶-FMFTRL
  3. 最适合小白的matlab教程系列_进阶系列二之多项式
  4. 小程序源码:王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询-多玩法安装简单
  5. 社区堆肥,助力生态花园共建
  6. spark机器学习-聚类
  7. S27赛季即将来袭 教你用Java做游戏王者荣耀
  8. 20170307找女朋友之路思考总结
  9. 我是如何做到五年间电话不漏接的
  10. 网络爬虫-爬取十万张表情包