zoukankan      html  css  js  c++  java
  • 八(第一篇)、主体结构元素——article元素、section元素

    article元素

      article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

    他可以是一篇博客或者报刊中的文章,一篇轮胎帖子、一段用户评论或独立的插件,或其他任何独立的插件,或其他任何独立的内容。

      article元素是可以嵌套使用的。

      article元素可以用来表示插件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>article元素</title>
    </head>
    <body>
        <article>
            <header>
                <h1>peace</h1>
                <p>hello,hello</p>
            </header>
    
            <p>hi,guy!</p>
    
            <article>
                <header>作者</header>
                <p>评论</p>
                <footer>time</footer>
            </article>
    
            <footer>
                <p>这是底部</p>
    
            </footer>
        </article>
    
        <article>
            <h1>这是一个内嵌页面</h1>
            <object>
                <embed src="#" width="600" height="400">
            </object>
        </article>
    </body>
    </html>

     section元素

      section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。

     但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。

      段落,章节,特点是强调分段分块

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>section元素</title>
    </head>
    <body>
        <section>
            <h1>苹果</h1>
            <p>这是一个水果,可以吃。很好吃</p>
        </section>
    
        <article>
            <h1>水果</h1>
            <section>
                <h2>红富士</h2>
                <p>这是一个很红的苹果,很棒。</p>
            </section>
            <section>
                <h2>香蕉</h2>
                <p>这是一个香蕉。</p>
            </section>
        </article>
    
        <section>
            <h1>水果</h1>
            <article>
                <h2>红富士</h2>
                <p>内容</p>
            </article>
    
            <article>
                <h2>香蕉</h2>
                <p>内容</p>
            </article>
    
        </section>
    
    </body>
    </html>
  • 相关阅读:
    Unity贴图压缩优化处理
    Unity游戏开发图片纹理压缩方案
    devexpress panelcontrol 里面控件自适应宽度
    devexpress winform spinedit 右边上下箭头去掉
    devexpress layoutcontrolitem 里面控件tabindex不起作用
    jar包生成本地maven ,以供pom引用
    C# 计算代码执行效率
    C# 使用队列
    C#遍历获取所有文件
    C#多线程等待所有子线程结束
  • 原文地址:https://www.cnblogs.com/gyqqqqq/p/10507453.html
Copyright © 2011-2022 走看看