《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就足够了。

相关文章
|
2月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
184 19
|
5月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
355 74
|
6月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
167 19
|
6月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
180 2
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中

热门文章

最新文章

下一篇
oss云网关配置