首页 > 代码库 > 1-2、section元素

1-2、section元素

2024-10-15 17:13:39   214人阅读

示例一：  

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>section</title>
</head>
<body>
<section>
    <h1>哈密瓜</h1>
    <p><b>哈密瓜</b>,水果</p>
</section>
</body>
</html>

注意：section不能出现没有包含标题部分，可以使用 http://gsnedders.html5.org/outliner/   工具进行检查。

实例二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>section</title>
</head>
<body>
<article>
    <h1>华为</h1>
    <p><b>荣耀</b>，国产手机</p>
    <section>
        <h2>荣耀V9</h2>
        <p>荣耀9 全网通标配版 4GB+64GB（魅海蓝）</p>
    </section>
    <section>
        <h2>HUAWEI nova 2 Plus</h2>
        <p>HUAWEI nova 2 Plus 4GB+128GB 全网通版（玫瑰金）</p>
    </section>
</article>
</body>
</html>

示例三：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>section</title>
</head>
<body>
<section>
    <h1>小米</h1>
    <article>
        <h2>小米5c 64GB 移动版</h2>
        <p>【小米5c 直降200 限时特惠】搭载澎湃S1 八核高性能处理器 / “暗夜之眼”超感光相机 / 135g 轻薄金属机身 / 5.15"高亮护眼屏</p>
    </article>
    <article>
        <h2>小米Max 2</h2>
        <p>【64GB版本 现货在售】6.44‘‘大屏 / 5300mAh 充电宝级的大电量 / 大像素相机 / 轻薄全金属 / ?4GB 大内存 / 骁龙八核处理器</p>
    </article>
    <article>
        <h2>小米Note 2</h2>
        <p>【限时特惠 下单立减300，还享花呗6期分期免息】5.7" 双曲面柔性屏 / 3D曲面玻璃 / 骁龙 821 性能版 / 2256万超高像素相机 / 4070mAh 超长续航</p>
    </article>
</section>
</body>
</html>

看了1-1的article和现在1-2的section感觉两者一样是否能互换使用？那么他们两者有什么区别？

article元素是一种特殊种类section元素，他比section元素更强调独立性。

section元素强调分段或分块，而article强调独立性。

 

最后来说一下section的禁忌：

　　1、不要讲section元素用作设置样式的页面容器，因为那是div的工作。

　　2、如果article元素aside元素或nav元素更符合状况，不要使用section元素。

　　3、不要为没有标题的内容区块使用section元素。

 

1-2、section元素


联系
我们