随笔 - 54,  文章 - 0,  评论 - 0,  阅读 - 13105

HTML5中所有的元素都具有结构性,且这些元素的作用于块级元素非常相似。

 

header元素

是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容。

header元素通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图像、搜索表单或者其他相关内容。

<header>
<h1>网页主题</h1>
...
</header>

下面通过一个案例对header元素的用法进行演示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素的使用</title>
</head>
<body>
<header>
<h1>秋天的味道</h1>
<h3>你想不想知道秋天的味道?他是甜、是苦、是涩....</h3>
</header>
</body>
</html>

效果如图所示:

 

 

 注意:header元素并非head元素一个网页中可以使用多个,也可以为每一个内容块添加

nav元素

nav元素用于定义导航链接,是HTML5新增元素。

可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确

<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>

在上面这段代码中,通过在nav元素内部嵌套无序列表ul来搭建导航结构。

一个页面可以包含多个该元素,作为页面整体或不同部分的导航。

具体来说,nav元素可以用于一下几种场合:

  • 传统导航条:目前主流网站上都有不同层级的导航条,其作用是跳转到网站的其他页面
  • 侧边栏导航条:目前主流博客网站及电商网站都有侧边栏导航,目的是从当前文章或当前商品页面跳转到其他文章或其他商品页面
  • 页内导航:它的作用是在本页面内几个主要的组成部分之间进行跳转
  • 翻页操作:翻页操作切换的是网页的内容部分,可以通过单击“上一页”或“下一页”切换,也可以通过单击实际的页数跳转到某一页

除了以上几点以外,nav元素也可以用于其他重要的、基本的导航链接组。

只需要将主要的和基本的链接放进nav元素即可。

 

article元素

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分,该元素经常被用于定义一篇日志、一条新闻或用户评论等。

article元素通常使用多个section元素进行划分,一个页面文件可以多次出现。

下面通过一个案例对article元素用法进行演示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>article元素的使用</title>
</head>
<body>
<article>
<header>
<h2>第一章</h2>
</header>
<section>
<header>
<h2>第1节</h2>
</header>
</section>
<section>
<header>
<h2>第2节</h2>
</header>
</section>
</article>
<article>
<header>
<h2>第二章</h2>
</header>
</article>
</body>
</html>

运行结果如图所示:

 

 

 aside元素

aside元素用来定义当前页面或者文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。

aside元素的用法主要分为以下2种:

  • 被包含在aside元素内作为主要内容的附属信息
  • 在aside元素之外使用,作为页面或站点全局的附属信息部分。最常用的使用形式是侧边栏,其中的内容可以是友情链接、广告单元等

下面通过一个aside元素的用法进行演示:

 

 

运行结果如图所示:

 section元素

section元素用于对网站或应用程序中页面上的内容进行分块。该元素通常由标题和内容组成,在使用时需要注意以下3点:

  • 不要将section元素用作设置样式的页面容器,那是div的特性。section元素并非一个普通的容器元素,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。
  • 如果article元素、aside元素或nav元素更符合使用条件,那么不要使用section。
  • 没有标题的内容区块不要使用section元素定义。

下面通过一个section元素的用法进行演示:

 

 运行结果如图所示:

 

header元素用来定义文章的标题,section元素用来存放对小张的评论内容,其中,<h>标记用来存放评论的标题;article元素用来划分section元素所定义的内容,将其分为2部分。

在HTML5中,article元素可以看作是一种特殊的section元素,它比section元素更具有独立性,即section元素强调分段或分块,而article元素强调独立性,如果一块内容相对来说比较独立完整时,应该使用article元素;但是如果想要将一块内容分成多段时,应该使用section元素。

footer元素

footer元素用于定义一个页面或者区域的底部,它可以包含所有通常放在页面底部的内容。

一个页面文件中可以包含多个footer元素。同时,也可以在article元素或者section元素中添加footer元素。示例代码如下:

 

在上述代码中,使用了2对footer元素,其中第1对footer元素用于为article元素添加区域底部,第2对footer元素用于为页面定义底部。 

 

posted on   心有所信方能行远  阅读(94)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快?
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
点击右上角即可分享
微信分享提示