HTML5: aside元素

最新推荐文章于 2023-03-30 17:27:52 发布

勤奋的程哥

最新推荐文章于 2023-03-30 17:27:52 发布

阅读量396

点赞数 1

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/hsjajwbsbsjs/article/details/123414256

版权

大家好，我是阿闽。两天没见，甚是想念。主要还是因为最近考试的原因。话不多说，今天我们接着复习HTML元素。

aside元素

语义
类型
局部属性
子元素
标签用法
默认CSS样式
代码示例

语义

表示文档或article元素的联系信息。

类型

流元素

局部属性

无

子元素

流元素，除了h1~h6、section、header、footer、nav、article元素

标签用法

开始标签和结束标签

默认CSS样式

address {
	display: block;
	font-style: italic;
}

代码示例

真实网站代码示例：
aside示例
代码示例

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
        <title>aside示例</title>
        <style type="text/css">
            html{
                background: lightblue;
                text-align: left;
            }
            article {
                margin-top: 7em;
                background-color: gray;
                border-color:transparent;
                border-style: solid;
                border-radius: 30px;
            }
            article h1{
                text-align: center;
            }
            article p{
                text-indent: 2em;
            }
            aside{
                font-weight: bolder;
                margin-left: 100px;
                font-size: 40px;
            }
        </style>
</head>
<body>
        <div>
            <article>
                <h1 style="font-size: 50px;font-weight: bolder;">国王的新画师</h1>
                <p>很久很久以前，有一个王国，叫<b>无故事王国。</b></p>
                <p>这个王国里的每个人每天都过着无忧无虑的生活，因为每天都没有故事发生。今天像昨天，今年像去年，如此往复循环。</p>
                <p>这个王国有两个王子，分别是深水王子和冰沙王子。一名公主，她是露珠公主。深水王子因为不明原因离开了王国，住在了饕餮海的墓岛上后，就再也没有回来。冰沙王子心如毒蝎，国王不放心将王位传承于他，于是露珠公主被选定为他的继承人，无故事王国将拥有一名女王。
                <p>于是，无故事王国就有故事了</p>
                <p>...</p>
                <p>人们不知道他们去了哪些地方，但人们常想象着他们去往世界各地发生的事情，作为饭后茶余的谈资。</P>
                <p>他们一定永远幸福地生活在了一起......</p>
                <aside>
                    作者：刘慈欣
                </aside>
            </article>
        </div>
</body>
</html>