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>
  • 相关阅读:
    机器学习(深度学习)
    机器学习(六)
    机器学习一-三
    Leetcode 90. 子集 II dfs
    Leetcode 83. 删除排序链表中的重复元素 链表操作
    《算法竞赛进阶指南》 第二章 Acwing 139. 回文子串的最大长度
    LeetCode 80. 删除有序数组中的重复项 II 双指针
    LeetCode 86 分割链表
    《算法竞赛进阶指南》 第二章 Acwing 138. 兔子与兔子 哈希
    《算法竞赛进阶指南》 第二章 Acwing 137. 雪花雪花雪花 哈希
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10221199.html
Copyright © 2011-2022 走看看