HTML5 中article，header和footer标签的使用

最新推荐文章于 2024-04-25 14:11:03 发布

XieXie922

最新推荐文章于 2024-04-25 14:11:03 发布

阅读量8.1k

点赞数 7

文章标签： html

本文链接：https://blog.csdn.net/m0_46388312/article/details/106953582

版权

article标签

article标签是一个特殊的section标记，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如论坛帖子、博客文章、新闻故事、评论等。

一般来说，article会有标题部分，通常包含在header内，有时也会包含footer。

下面例子中就用了article+header

<!-- edu_13_2_3.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5结构元素artical和header标记的应用</title>
</head>
<body>
	<article>
		<header>
			<hgroup>
				<h1>HTML 5结构元素的简介</h1>
				<h2>HTML 5的诞生</h2>
			</hgroup>
			<time datetime="2017-04-28">2017-04-28</time>
		</header>
		<p>HTML5 引入了许多新元素，包括几个用于更好地描述文本结构的元素。在本文中，我们将了解这些 HTML5 引入的新的结构化元素以及如何使用它们将一个文档划分成几个内容块。</p>
	</article>
</body>
</html>

网页运行如下
在这里插入图片描述

header 标签

header 标签定义文档和区域的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常

标记至少包含（但不局限于）一个标题标记（h1～h6），也可以包括hgroup（标题组合）标记、表格标识、搜索表单、导航等。

<!-- edu_13_2_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML5结构元素header和hgroup标记的应用</title>
	</head>
	<body>
		<header>
			<hgroup>
				<h1 >HTML5 是下一代的 HTML。</h1>
				<h3 >什么是 HTML5？</h3>
				<h5>HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</h5>
			</hgroup>
		</header>
	</body>
</html>

网页运行如下
在这里插入图片描述

footer 标签

footer 标签定义section 或文档的页脚，包含了与页面、文章或部分内容有关的信息，例如文章的作者或者日期作为页面的页脚时，一般包含了版权、相关文件和链接。它与页眉header 标记用法相同，在一个页面中可以多次使用，若在一个区段的最后使用footer标记，那么它就相当于该区段的页脚。

<!-- edu_13_2_6.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5结构元素footer和section标记的应用</title>
</head>
	<body> 
	  <footer>
		<div style="text-align:center;">
			<section>
				<a href="http://www.caict.ac.cn/" target="_blank">CAICT中国信通院</a>
				<a href="//www.w3.org/" target="_blank">W3C</a>
				<a href="//www.dcloud.io/" target="_blank">DCloud</a>
			</section>
			<span style="padding:2px 5px;">京ICP备12046007号-5</span>
			<span style="padding:2px 5px;">HTML5中国产业联盟版权所有</span>
		</div>
		</footer>
	</body> 
</html>

网页运行如下
在这里插入图片描述

下面结合使用article标签，header标签和footer标签

要做的效果如下
在这里插入图片描述

首先我们先分析结构
在这里插入图片描述
整个代码如下

<!DOCTYPE html>
<html>
    <body >
        <article style="margin: 50px 280px; background:#BC6DEE" > 
            <header>
               <h1 style="text-align:center"><strong>中国互联网大会</strong></h1>
               <h3 style="text-align:center">寻找中国互联网产业新动能”活动启动</h3>
               <p style="text-indent:2em;margin-left: 10px;margin-right: 10px;" >2020(第十九届)中国互联网大会将于7月23日-25日在云端召开,
                本届大会由线上论坛、线上展览和特色活动组成。作为特色活动之一,“寻找中国互联网产业的新动能”活动现已正式启动。</p>
               <p style="text-align: center;"><img src="internet.png" width="500dp"><figcaption style="text-align: center;">新基建,新机遇</figcaption></p>
               <form style="text-align: center;">
                   <fieldset style="margin-left: 150px;margin-right: 150px;">
                       <legend style="text-align: center;">会议注册页面</legend>
                       注册姓名:<input type="text" name="" required> 报告题目:<input type="text" name="" required><br>
                       工作单位:<input type="text" name="" required> 手机号码:<input type="tel" ><br>                                 
                    电子邮件:<input type="email" name="" > 报告时间:<input type="date" ><br><br>
                       <input type="submit" value="注册"> <input type="reset" value="重置">                                
                   </fieldset>
               </form>
               <footer style="text-indent:2em;margin-left: 20px;margin-right: 10px;margin-top: 20px;">本次寻找活动的主题是“新基建,
                新机遇 — 寻找中国互联网产业的新动能”。聚焦在线教育、企业应用、智慧交通、医疗新基建和网络安全等领域,将动员社会各界力量、广泛征集案例、聆听多方观点,
                组织专家点评,最终寻找出在时代背景下对互联网产业产生积极、深刻影响的案例(产品、服务、解决方案),激发更多的企业找到与“新基建”有机结合的发展新机遇,
                释放出推动自身发展、促进产业升级的新动能。</footer>
            </header>
        </article>
    </body>
</html>

XieXie922

关注

7
点赞
踩
44

收藏

觉得还不错? 一键收藏
1
评论
HTML5 中article，header和footer标签的使用

article标签 article标签是一个特殊的section标记，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如论坛帖子、博客文章、新闻故事、评论等。一般来说，article会有标题部分，通常包含在header内，有时也会包含footer。下面例子中就用了article+header<!doctype html><html lang..
复制链接

扫一扫