HTML5新增3个块级语义元素（详解）

●aside

aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。

可用到的地方：
当前文章的其他引用、备注、侧边栏和广告等其他有别于主要内容的部分。

 <aside>
        <h2>窗内官方群</h2>
        <ul>
            <li>窗内官方群一: 8929782323</li>
            <li>窗内官方群二: 7835798357</li>
            <li>窗内官方群三: 8932857385</li>
            <li>窗内官方群四: 8375292209</li>
        </ul>
    </aside>

css部分

 <style>
        *{
            padding:0;
            margin: 0;
            list-style: none;
        }
        aside{
            width: 230px;
            position: absolute;
            bottom: 20px;
            right: 20px;
            border: 1px solid #ccc;
        }
        aside h2{
            height: 30px;
            font-size: 18px;
            padding-left: 20px;
            background-color: #ccc;
        }
        aside ul li{
            padding-left: 20px;
            line-height: 30px;
            font-size: 14px;
        }
    </style>

●figure

figure元素用于对元素进行组合，它表示一段独立的流内容(图像、图表、照片、代码等)，一般表示文档主体流的内容中的一个独立单元，将其从网页上移除后不会对网页上的其他内容产生任何影响。

figure元素代表一个块级图像，还可以包含说明。使用该元素不仅可以显示图片，还可以使用它给audio、video、iframe、object、
和embed元素添加说明。

figure添加标题时，与figcaption元素结合使用。figcaption元素从属于figure元素，必须写在figure元素内部。而且只能放一个
figcaption元素。

 <figure>
        <figcaption>常州纺织机械有限公司</figcaption>
        <ul>
            <li>传真：86-787879898</li>
            <li>手机：13456788990</li>
            <li>联系人：张先生</li>
            <li>网址：http://wwww.chfz.cn</li>
        </ul>
     </figure>

●dialog

dialog 元素表示几个人之间的对话，它通常与dt和dd元素结合使用，其中dt元素表示讲话者，而dd元素可表示讲话内容。

基本使用：
调用dialog元素的show()和close()方法实现对话框的打开和关闭。
给dialog元素增加open属性也可以使其显示 open=“true”;默认情况是不显示的。

现兼容性比较差。

    <dialog id="dialo">
        <dt>老师</dt>
        <dd>乐乐，5+3等于多少</dd>
        <dt>乐乐</dt>
        <dd>等于8</dd>
        <dt>老师</dt>
        <dd>答对了！乐乐棒极了</dd>
    </dialog>
    <button id="open">open</button>
    <button id="close">close</button>
    <script>
    var dialog = document.getElementById('dialo');
    var openBtn = document.getElementById('open');
    var closeBtn = document.getElementById('close');
    openBtn.addEventListener('click',function(){
        dialog.show();
    })
    closeBtn.addEventListener('click',function(){
        dialog.close();
    });
</script>