HTML5结构标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div  style="color:#0000FF">
        
       <p>这是div的一个p标签</p>

        <p>这是div的一个另一p标签</p>
    
    </div>

    <br>
    <br>
    <br>
    <article>
        <h2>Java编程思想</h2>
        <p>这是一本讲Java非常好的书</p>

        <section>
            
            <h3>Java的基本介绍</h3>
            <p>打开了司法局了可接受的飞机离开了设计费龙口就龙口是妲己了克里斯肯德基龙口</p>
        </section>


<section>
            
            <h3>Java的设计模式</h3>
            <p>打开了司法局了可接受的飞机离开了设计费龙口就龙口是妲己了克里斯肯德基龙口</p>
        </section>
    </article>
    
</body>
</html>
06.PNG

div、section、articl语义逐渐增强

div

div标签在页面中非常常见,也常将其称为标签容器。我们可以将一组功能相关的标签放到同一个div中,也可以对该标签内的元素作统一处理,比如设置对齐方式,背景颜色。

section

定义:文档中的节,一般是具有标题性的。

使用场合:文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

提示:section不仅仅是一个普通的容器标签,这区别与div标签。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。

article

定义:独立的自包含内容。一般来说,article会有标题部分( 包含在header内 ),有时也会包含footer。

使用场合:一段内容脱离了所在的语境,仍是完整的、独立的,则应该用article标签。

提示:虽然section也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article本身就是独立的、完整的。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容