《HTML5开发手册》——1.3 初学者“菜谱”:使用header元素建立网站标头-阿里云开发者社区

开发者社区> 异步社区> 正文

《HTML5开发手册》——1.3 初学者“菜谱”:使用header元素建立网站标头

简介:
+关注继续查看

本节书摘来自异步社区《HTML5开发手册》一书中的第1章,第1.3节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 初学者“菜谱”:使用header元素建立网站标头

我们首先从一个典型的Web页面的顶端开始。

header元素经常出现在Web页面的最上面,它通常包含了logo、网站名称、网站导航等信息。它可以在一个页面中多次使用,后面将会讲到,它可以用于页面中特定分段区域(section)的导航,而不仅仅是页面到页面的导航。诸如搜索栏或者目录等也可以包含在header元素中。下面是一个简单的例子:


<a href=https://yqfile.alicdn.com/eff17761baa6b26909b7d06952879225db903d65.png" >

HTML5规范提到,header元素可以包含导航,所以图1.2中的元素可以使用一个包含logo、主导航链、搜索栏的header元素进行标记。视站点设计的不同,你也可以将nav放在header元素的外面。

下面列出了可以包含在header元素中的内容,如图1.2所示。

  • logo
    -网站名/标题
  • 网站副标题
  • 搜索栏
  • 主导航栏


44330fb8729a031d62c29e16a9cf90a6383049c8

每个网页并没有限制只能使用一个header元素,也没有要求它必须在页面最顶部。我们在后面会详细讲解,如果某个页面有多个标题,可以将它们都放在一个header元素中。一个页面也可以使用多个h1标记,如代码1.2所示(本章后面会讲解article元素)。

代码1.2 在一个页面中使用多个header


<a href=https://yqfile.alicdn.com/050cba2376c532b44255dbca7802590c84f72faa.png" >

代码1.2的运行结果如图1.3所示。


859d6eb2957693ad43cd90ed8165a3e32ce6cc29

也可以在 header 元素中加入作者和日期信息。只不过 HTML5 规范建议将作者信息放在footer元素中。

如果在header元素中仅有一个标题(h1-6),那么就没有必要使用header了,直接使用h1~h6就足够了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
推荐一大波让你直呼哇塞的Canvas库【值得收藏】
推荐一大波让你直呼哇塞的Canvas库【值得收藏】
19 0
Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架【值得收藏】
Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架【值得收藏】
3 0
基于 H5 Canvas "指纹识别" 技术 【浏览器指纹 VS Canvas指纹】
基于 H5 Canvas "指纹识别" 技术 【浏览器指纹 VS Canvas指纹】
23 0
动手实战-初识上云基础,动手实操ECS云服务器新手上路
云服务器(Elastic Compute Service, 简称ECS),是一种简单高效,处理能力可以弹性伸缩的计算服务
15 0
无影云桌面,企业与个人的应用神器
阿里云无影云桌面( Elastic Desktop Service)的原产品名为弹性云桌面,融合了无影产品技术后更名升级。它可以为您提供易用、安全、高效的云上桌面服务,帮助您快速构建、高效管理桌面办公环境,提供安全、灵活的办公体系。
19 0
同一浏览器打开两个同源页面引发的bug【@码云 提个小优化】
同一浏览器打开两个同源页面引发的bug【@码云 提个小优化】
15 0
【Elastic Engineering】Elasticsearch:使用 Runtime fields 对索引字段进行覆盖处理以修复错误 - 7.11 发布
Elasticsearch:使用 Runtime fields 对索引字段进行覆盖处理以修复错误 - 7.11 发布
5 0
使用APICloud AVM框架开发预约应用
前段时间跟朋友一起搞了一个预约的项目,前端用的APICloud的AVM框架做的,后端用的php开发的,用的tp5框架,没几天就搞出来了。简单跟大家分享一下开发中的一些功能点的实现吧。也欢迎大家一起探讨。
7 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载