HTML5基本标签使用header、nav和footer

HTML5的header、nav和footer标签详解及示例
最新推荐文章于 2025-09-17 09:08:16 发布
最新推荐文章于 2025-09-17 09:08:16 发布
阅读量605 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html5 前端 html H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PmtxPhp/article/details/133403850
H5 专栏收录该内容
103 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了HTML5中header、nav和footer三个标签的使用，它们分别用于定义网页的页眉、导航和页脚。通过示例展示了如何使用这三个标签来组织网页结构，强调了它们在提升网页语义化、可访问性和SEO方面的重要性。

在HTML5中，header、nav和footer是常用的标签，用于定义网页的结构和布局。它们分别用于表示网页的页眉、导航和页脚部分。下面将详细介绍这些标签的使用方法，并提供相应的源代码示例。

  1. header标签：
    header标签用于定义网页的页眉部分，通常包含网页的标题、Logo、导航菜单等内容。在语义上，header标签表示网页的引导部分，用于引导用户进入网页的主要内容。

以下是header标签的基本用法示例：

<!DOCTYPE html>
<html>
<head>
了解本专栏 订阅专栏 解锁全文
HTML5/CSS3系列教程：HTML5基本标签使用header，nav和footer
GBin1.com
01-17 1906
日期：2013-1-15  来源：GBin1.com 大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{
【HTML】一张图 带你了解 网页布局标签 ＜header＞ 、＜nav＞ 、＜article＞、＜section＞ 、＜aside＞、＜footer＞
xudahai513的博客
01-08 824
一张图让你清晰认识布局标签
htmlheaderfooter
03-14
概述 在此项目中，我使用HTML 5和CSS创建了页眉和页脚。 我已经使用了Font的图标。 我不使用boostrap而是仅使用纯CSS创建了页眉和页脚。 在标题中，我还使用了子菜单来显示不同的类别。 我创建了这个单独的页眉和页脚，以便可以在页面的其他部分中用作组件。 代码概述 我用过了 和 标签，以设计标题菜单以及子菜单，并向其中添加CSS。 对于页脚，我也使用了相同的内容。 您可以在代码文件夹中查看。 屏幕截图 下图显示了标题屏幕： 下图显示了页脚屏幕： 进一步改善 我必须针对不同设备的响应性更新css。
html页面的header,HTML5教程 | HTML5 header和footer元素
weixin_39634132的博客
06-04 1726
headerHTML5 header元素是一个页面的头部的语义标记，或者它也可以是article元素的一部分。例如下面的图中，header元素是作为一个页面的头部来使用。使用header元素的HTML代码应该类似下面的样子：头部内容...header元素是一个语义元素，但是它本身并没有任何的样式，你可以通过CSS来为它添加你需要的样式。你不必一定要为页面添加一个header语义元素。使用heade...
HTML5 `＜footer＞` 标签深度解析
最新发布
2501_93104808的博客
09-17 1070
HTML5 <footer> 标签语义化解析 <footer> 是 HTML5 引入的语义化标签，用于表示文档或节的页脚内容。其核心特点包括： 语义价值：替代传统的 <div> 方式，明确标识页脚区域 应用场景：既可作为全局页脚（直接子元素），也可作为局部页脚（嵌套在 <article>/<section> 中） 内容规范：适合包含版权信息、作者信息、联系方式和辅助导航链接 结构特性：不创建新节，仅作为现有节的页脚补充 注意事项：禁止嵌套在 &lt
六大H5常用结构元素
zy1992As的博客
10-11 1136
例如，新闻的详情页有一篇文章，该文章有自己的标题和内容，因此可以使用article标签标注，如果该新闻内容太长，分好多段落，每段都有自己的小标题，这时候就可以使用section标签把段落标注起来。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签，如header标签、nav标签、article标签等，具体介绍如下。需要注意的，在上面的示例代码中还缺少主体内容。nav标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。
HTML5 ＜header＞ 标签、HTML5 ＜html＞ 标签
thgj0006的博客
04-11 652
header> 标签定义文档或者文档的一部分区域的页眉。 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个 元素。 标签不能被放在 、 或者另一个 元素内部。HTML5 标签是所有其他 HTML 元素（除了DOCTYPE>标签）的容器。 标签告知浏览器这是一个 HTML 文档。html 元素是 HTML 文档中最外层的元素。
HTML5页面布局
Ucooling
05-29 1540
原文来自：http://www.silverlightchina.net/html/HTML_5/study/2012/0307/14309.html 在这里做个备份，方便以后自己查阅复习！！！ HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。 　　本次学习HTML5的新标签元素有：
html新增标签header nav main article aside section footer（带图解）和ie9以下浏览器的兼容问题（两种方法）
lyclyc_的博客
07-07 1205
html5兼容问题：最新版本的Safari Chrome Firefox 以及Opera支持部分HTML5特性，ie9支持某部分ＨＴＭＬ５特性，ｉｅ９以下浏览器都不支持新增ｈｔｍｌ５标签。 html5新增标签放置位置图解： 代码如下（此处有ie9以下浏览器兼容的第一种解决办法）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view
【高频考点精讲】HTML语义化标签到底怎么用？10分钟彻底搞懂header、footer、article等标签的正确用法
全栈老李的博客
05-19 1072
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们来聊聊前端开发中一个看似简单但很多人用不对的东西——HTML语义化标签。每次Code Review看到同事用<div>包一切的时候，我都想冲上去说："兄弟，咱能不能用点有意义的标签？
主页面引入header.html与footer.html
Cinyyyy的博客
03-23 2077
<script> $(function(){ /** * 公共部分 * 页面只写结点，不用写完整的页面 * js与css不能放在公共页面里 */ $(".headerPage").load("header.html"); $(".footerPage").load("footer.html"); }); </script> load里的路径需要修改适合自己的 例子如下 ...
H5 header footer
tcmmx1993的博客
03-12 252
非主体结构元素 通常防止整个页面或页面内的一个内容区块的标签，但是也可以包含其他内容，如，数据表格、搜索表单、或相关的logo图片 footer 页面结尾信息，相关链接 address 地址标签 ...
h5 headers
huanghong6956的博客
04-29 431
headers_list=['Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1','Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like M...
HTML5语义化标签 header 的详解
韩旭的博客
10-24 1852
✨ 每天创作一点点✨ 开心快乐一整天✨ 美好一天又一天。
html中引用公共header footer等
small_animation的博客
06-28 3242
<!--新建一个放公共header.html和footer.html两个文件--> <!--新建的文件里面"只写入"公共的代码部分 不要其他的代码片段或标签 比如:body html标签等--> <!-- header.html--> <div class="header"> <div class="logo"> <a...
HTML5 中的Header元素详解
热门推荐
lidiya007的博客
12-22 1万+
什么是header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。 注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。   header元素的用法 下面根据一幅图来具体看看he
HTML5基本标签使用header，nav和footer
张晨光老师的播客
05-06 6533
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{ padding: 10px ... } 定义完之后呢，...
HTML5新增的几个布局结构元素
Ryan的博客
04-29 4015
HTML5新增的几个布局结构元素 1.header元素：一般用于网页的头部，定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。 <header> <h1>中国最大的搜索引擎</h1> <a href="http://www.baidu.com">百度</a> <nav> &...
html5的header元素作用,html5header标签怎么用？html5header标签的作用介绍-
weixin_29775951的博客
06-10 2270
本篇文章主要的介绍了关于html5 header标签的解释和html5 header标签作用的介绍，最后还做了header标签的总结。下面让我们一起来看这篇文章吧首先我们要先清楚html5 header标签怎么用？标签定义文档或者文档的一部分区域的页眉。元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个元素。注释标签不能被放在、或者另一个元素内部。header标签元素基本用法介...
HTML，使用header，nav，footer标签编写一段代码
10-11
HTML（HyperText Markup Language）是一种标记语言，用于创建网页的标准结构。`header`、`nav`和`footer`是HTML5中常用的结构性标签，分别对应页面的头部、导航栏和页脚。 下面是一个简单的例子，展示了如何使用这三个标签构建基础的网页布局： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>基本HTML结构示例</title> <style> /* 你可以添加一些基本样式 */ header { background-color: #f8f9fa; padding: 20px; text-align: center; } nav { background-color: #e9ecef; display: flex; justify-content: space-around; padding: 10px; } footer { background-color: #343a40; color: white; text-align: center; padding: 10px; } </style> </head> <body> <header> <h1>网站标题</h1> </header> <nav> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </nav> <main> <!-- 主体内容 --> </main> <footer> © 2023 网站版权信息 </footer> </body> </html> ``` 在这个例子中，`<header>`用于放置网站的标题，`<nav>`包含导航菜单，而`<footer>`通常用于显示页脚信息，如版权声明。`<main>`标签用于包裹主要内容区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值