【学习打卡】第7天 footer标签、section标签、aside标签

2022/8/13 3:22:55

编程Tag： HTML5 C++

本文主要是介绍【学习打卡】第7天 footer标签、section标签、aside标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

课程名称：初识HTML(5)+CSS(3)-升级版课程

课程章节： 结尾神转折 - <footer>标签定义底部区域和正文才是重点喔 - <section>定义区段和再加个侧边菜单吧 - <aside>定义侧边栏区域

主讲老师：五月的夏天

课程内容：

了解<footer>标签和<section>标签和<aside>标签

课程收获：

footer标签，用来定义底部区域。

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>footer</title>

</head>

<body>

    <header>我是头部标签</header>

    <footer>我是底部标签</footer> 

</body>

</html>

代码运行结果：

https://img1.sycdn.imooc.com/62f5a56a0001a8e902250090.jpg

section标签，定义一个区域。

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>section</title>

</head>

<body>

    <header>我是头部标签</header>

    <h6>  miao</h6>

    <section>我是一个区域</section>

    <h6>  miao</h6>

    <footer>我是底部标签</footer>

</body>

</html>

代码运行如下：

https://img1.sycdn.imooc.com/62f5a5760001375202480319.jpg

aside标签，定义一个侧边栏区域

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>aside</title>

</head>

<body>

    <aside>我是侧边栏</aside>

</body>

</html>

运行结果如下：

https://img1.sycdn.imooc.com/62f5a58600019ea001880063.jpg

aside标签和p标签或者header,footer等标签显示都无差别是因为标签名只是增加它的语义化，并不是这样命名它的展示效果就出来了，效果还是要通过css来设置。




这篇关于【学习打卡】第7天 footer标签、section标签、aside标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程