HTML - footer 标签

HTML <footer> 标签用于指定其最近的前置文档或部分的页脚。通常，页脚元素包含有关章节或文档的作者、版权数据或相关文档链接的信息

<footer> 元素不会分割内容，因此不会在大纲中引入新部分。

我们还可以在 <footer> 标签中使用 <img> 和 <video> 元素来指定页脚图像和视频。

语法


<footer>.....</footer>

属性

<footer> 标签支持 HTML 的全局属性和事件属性。

<footer> 标签示例

下面的示例将说明 <footer> 标签的用法。在哪里、何时以及如何使用 <footer> 标签来创建任何网站的页脚元素。

使用 <footer> 标签创建页脚部分

在以下示例中，展示了如何使用 HTML <footer> 标签来创建网站的页脚部分。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML footer tag</title>
</head>
<body>
	 <h1>Following are list of the frontend technologies.</h1>
	 <ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>Bootstarp</li>
			<li>Angular</li>
			<li>React</li>
	 </ul>
	 <footer>
			<small>Copyright © frontend technologies 2023.</small>
	 </footer>
</body>
</html>

设置 <footer> 标签的样式

考虑以下示例，我们将在其中使用 <footer> 标签并应用 CSS 属性。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML footer tag</title>
	 <style>
			footer {
				 width: 92%;
				 margin: auto;
				 background-color: rgb(7, 7, 114);
				 color: white;
				 text-align: center;
				 padding: 10px;
				 border-radius: 10px;
				 position: relative;
				 top: 100px;
			}

			ol li {
				 list-style: none;
				 display: inline;
				 width: 100px;
			}

			ol li a {
				 text-decoration: none;
				 background-color: aquamarine;
				 padding: 10px;
				 border-radius: 5px;
			}
	 </style>
</head>
<body>
	 <nav>
			<ol>
			<li>
				 <a href="">HOME</a>
			</li>
			<li>
				 <a href="">BLOG</a>
			</li>
			<li>
				 <a href="">ContactUs</a>
			</li>
			<li>
				 <a href="">About</a>
			</li>
			</ol>
	 </nav>
	 <footer> copyright © 2023. </footer>
</body>
</html>

在 <footer> 标签中实现图像

在此示例中，我们在 <footer> 标签中使用 <img> 标签来指定 HTML 文档或部分的页脚图像。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML footer tag</title>
	 <style>
			footer {
				 width: 90%;
				 margin: auto;
				 padding: 5px;
				 height: 50px;
				 border: 2px solid black;
				 text-align: center;
			}

			footer>img {
				 width: 200px;
				 position: relative;
				 top: 15px;
			}
	 </style>
</head>
<body>
	 <h2>'footer' tag with the img element example</h2>
	 </nav>
	 <footer> 
			Copyright <img src=
"https://www.qikepu.com/static/images/logo.png?v3" 
						alt="logo"> © 2023 
	 </footer>
</body>
</html>

在 <footer> 标签中实现 gif

让我们看一下另一个场景，我们将在 <footer> 标签中使用 <img> 标签来指定 HTML 文档或部分的页脚 GIF。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML footer tag</title>
	 <style>
			footer {
				 width: 90%;
				 margin: auto;
				 height: 50px;
				 border: 2px solid black;
				 text-align: center;
			}

			footer>img {
				 width: 10px;
				 height: 10px;
				 position: relative;
				 top: 5px;
				 border: 5px solid black;
			}
	 </style>
</head>
<body>
	 <h2>'footer' tag with the img(type GIF) element example</h2>
	 </nav>
	 <footer> 
		Copyright 
				<img src="/html/images/rotate.gif" alt="">
		© 2023 </footer>
</body>
</html>

支持的浏览器

浏览器
是否支持	5.0	9.0	4.0	5.0	11.1

打印本页