zoukankan      html  css  js  c++  java
  • HTML标签-----article、aside、figure、nav和section

       article

       <article> 标签定义独立的内容

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <div>article标签</div>
            <article>
                <h1>Internet Explorer 9</h1>
                <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
            </article>
        </body>
    
    </html>

       aside

       <aside> 标签定义 <article> 标签外的内容,aside 的内容应该与附近的内容相关

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <p>My family and I visited The Epcot center this summer.</p>
            <aside>
                <h4>Epcot Center</h4>
                <p>The Epcot Center is a theme park in Disney World, Florida.</p>
            </aside>
        </body>
    
    </html>

       figure

       <figure> 标签规定独立的流内容(图像、图表、照片、代码等等),figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <p>上海卢浦大桥是当今世界第一钢结构拱桥,是世界上跨度最大的拱形桥。</p>
            <figure>
                <p>黄浦江上的的卢浦大桥</p>
                <p>拍摄者:W3School 项目组,拍摄时间:2010 年 10 月</p>
                <img src="img/bridge.jpg" width="350" height="250" />
            </figure>
    
        </body>
    
    </html>

       nav

       <nav> 标签定义导航链接的部分

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <nav>
                <a href="#">Java</a>
                <a href="#">C#</a>
                <a href="#">JavaScript</a>
            </nav>
        </body>
    
    </html>

       section

    <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <section>
                <h1>Java</h1>
                <p>
                    Java是一门语言!
                </p>
            </section>
            <section>
                <h1>C#</h1>
                <p>
                    C#是一门语言!
                </p>
            </section>
            <p>
                C#是一门语言!
            </p>
        </body>
    
    </html>
  • 相关阅读:
    ftp 下载最近一小时的文件
    hdu4767 Bell——求第n项贝尔数
    Uva11762 Race to 1——有向无环图&&记忆化搜索
    P3232 [HNOI2013]游走——无向连通图&&高斯消元
    Random Walk——高斯消元法
    B君的历史——复数乘法&&爆搜
    复数快速幂【模板】
    UVa11542Squre——异或方程组&&高斯消元法
    UVa10828 Back to Kernighan-Ritchie——概率转移&&高斯消元法
    高斯消元法【模板】
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10221199.html
Copyright © 2011-2022 走看看