夜光带你走进前端工程师（十六）

最新推荐文章于 2024-08-08 08:12:56 发布

GeniusTeam-夜光

最新推荐文章于 2024-08-08 08:12:56 发布

阅读量238

点赞数

分类专栏： My thoughts 前端工程师

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90676112

版权

My thoughts 同时被 2 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

夜光序言：

一年有365天我只爱你4天

春天夏天秋天冬天

一个月里我只爱你3天

昨天今天明天

一个礼拜我只爱你2天

白天黑夜

而我只爱你一次这一次是

一辈子

正文：创客学院CEO 夜光

hgroup元素合成

一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组

通常情况下：文章只有一个主标题时，是不需要hgroup元素的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
    </header>
</article>
</body>
</html>

footer元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="footer">
    <p>
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
    </p>
    <p>创客学院版权信息</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="footer">
    <p>
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
    </p>
    <p>夜光的创客学院版权信息</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0
        }
        body{
            font-family: 微软雅黑;
            text-align: center;
        }
        #footer,#footer a{
            color: #555;
        }
    </style>
</head>
<body>
<div id="footer">
    <p>
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
        <a href="/">版本信息</a>|
    </p>
    <p>创客学院版权信息</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<article>
    <p>文章的内容</p>
    <footer>
        文章的脚步注释
    </footer>
</article>
<section>
    <p>文章的内容</p>
    <footer>
        文章的脚步注释
    </footer>
</section>
</body>
</html>

address元素

用来在页面中呈现联系信息，或者相关联系人的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <h1>html5+css+div</h1>
</header>
<p>
    这里是文章正文部分
</p>
<footer>
    <address>
        <a href="/" title="光灵">光灵</a>
        <a href="/" title="创客学院">创客学院</a>
    </address>
    时间：<time datetime="2018-4-8">2018年4月8日</time>
</footer>
</body>
</html>