夜光带你走进 前端工程师(十六)

夜光序言:

 

 

一年有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>

 

 

 

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

GeniusTeam-夜光

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值