HTML|页面结构分析

HTML|页面结构分析


1.元素
  • header:标题头部区域的内容(用于页面或页面中的一块区域)
  • footer:标记脚部区域的内容(用于整个页面或页面的一块区域)
  • section:Web页面中的一块独立区域
  • article:独立的文章内容
  • aside:相关内容或应用(常用于侧边栏)
  • nav:导航类辅助内容
2.举例

假如我们要写一个淘废品的网站:

  1. 在网页的头部写上淘废网和官方网址。
  2. 网页的主体部分写上废品列表
  3. 网页的脚部写上联系方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<!--
网页主题部分:header
我们这里假如写一个淘废网
-->
<header>
  <h1>淘废网 www.taofei.com</h1>
  <hr/>
</header>

<!--
主体部分:section
我们假如主体就是废品的列表
-->
<section>
  <h4>废品</h4>
  <ul>
    <li>烂冰箱</li>
    <li>烂电视</li>
    <li>烂洗衣机</li>
  </ul>
  <hr/>
</section>

<!--
网页脚部:footer
假如脚部我们写一下收废品的联系方式的列表
-->
<footer>
  <h4>联系方式:</h4>
  <ul>
    <li>电话号码:9999</li>
    <li>邮箱:123654@qq.com</li>
  </ul>
</footer>

</body>
</html>

在这里插入图片描述


人生没有白走的路,每一步都算数!

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alan_Lowe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值