HTML5中section、article、figure的区别及使用介绍

最新推荐文章于 2021-07-04 11:47:01 发布

weixin_30955617

最新推荐文章于 2021-07-04 11:47:01 发布

阅读量325

点赞数

原文链接：http://www.cnblogs.com/xiaobijia/p/5405716.html

版权

<figure> 标签是 HTML 5 中的新标签，用作文档中插图的图像，标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<article> 标签是 HTML 5 中的新标签，标签规定独立的自包含内容，一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源：

论坛帖子
报纸文章
博客条目
用户评论

<section> 标签是 HTML 5 中的新标签，标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>河南焦作景点介绍</title>
    <link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>
<section>
    <h5>景点介绍</h5>
    <article>
        <figure>
            <img src="http://h.bytravel.cn/www/2/heads/2337.gif" width="220" height="140"/>
            <figcaption>
                云台山
            </figcaption>
        </figure>
        <p>
            云台山位于河南省焦作市修武县境内，拥有十一大景点，2004年2月13日，中国十大影视城——焦作影视城位于中国优秀旅游城市之一的河南省西北部的焦作市，是中原地区唯一著名的影视基地，为焦作市十大景点之首。距市区仅1公里。北依太行，南临黄河，地理位置优越，新焦铁路、焦枝铁路、焦太铁路及焦郑、焦晋高速公路交汇于此，交通便利，四通八达。
            焦作影视城是1995年由焦作市人民政府投资2.3亿元兴建而成，2011年被联合国教科文组织评选为全球首批世界地质公园。同时，还是国家级风景名胜区、全国文明风景旅游区、首批国家AAAA-旅游景区、国家自然遗产、国家森林公园、国家级猕猴自然保护区、国家水利风景区、国家文化产业示范基地，荣获了世界杰出旅游服务品牌等多项荣誉。2010年3月，“云台山”被国家工商总局认定为中国驰名商标。2010年7月，被河南省人民政府授予2010年度（首届）河南省省长质量奖。2011年9月，被国家质量监督检验检疫管……
        </p>
    </article>
    <article>
        <figure>
            <img src="http://h.bytravel.cn/www/11/heads/10809.gif" width="220" height="140"/>
            <figcaption>
                神农山
            </figcaption>
        </figure>
        <p>
            圆融无碍禅寺位于河南省焦作市修武县西村乡当阳峪村，始建于东晋永和七年（公元351年），为“民间东传佛教第一僧”的西晋、
            后赵僧人佛图澄国师（二三一～三五一）所创建的八百九十三座寺庙之一，为十一进计十九殿、两塔院、七堂、二院落、一馆及十七处泉，在建“圆融国际禅修中心”及“五百罗汉洞”，为韩国圆融宗祖庭。现为国家AAAA级旅游景区、焦作市佛教协会驻地。是“圆融寺文化旅游园区”核心部分。故观前的黄河堤坝，至今仍称御坝。观内现存殿宇100余间，皆采用清代宫式建筑形制规模雄巨，结构谨严。观前山门正中嵌石，上刻敕建嘉应观。门周石雕五条奔龙和海水、云气等，技巧颇精。门左右有掖门，山门内两侧为重檐歇山式钟鼓楼。轴线建筑有御碑亭、天王殿、大王殿和禹王殿。天王殿和大王殿两圆融无碍禅寺（以下简称圆融寺）是中国唯一一处以佛教圆融思想而命名的千年古刹；韩国圆融宗祖庭；国家AAAA级旅游景区。坐……
        </p>
    </article>
    <article>
        <figure>
            <img src="http://h.bytravel.cn/www/11/heads/10821.gif" width="220" height="140"/>
            <figcaption>
                群英湖
            </figcaption>
        </figure>
        <p>焦作黄河文化影视城位于焦作市北郊凤凰山上，是中央电视台 与焦作市政府合作修建的大型影视剧拍摄制作基地，距焦作市 区1公里，占地面积2平方公里，建筑面积15万平方米，居全国
            四大影视城之首。它气势恢弘，设施完善，内容丰富，环境优 美集中体现了华夏文化在春秋战国时期历史风貌，再现了东周 夯土筑台之风。　　整个影视分为四个区，即城门区，周王宫区、
            楚王宫区和市井区。城门座北面南，宽阔宏大，风景名胜区，因炎帝神农在此播五谷、尝百草而得名，由紫金顶、云阳河、仙神河、黑龙潭、白松岭、临川寺、悬谷山、尧舜路八大景区组成。　　神农坛风景区集旷、奥、幽、美于一体，既有北方的粗犷雄健，又有南方的秀丽阴柔，汇集了太行山的精粹，峰峦叠嶂，洞幽林翠，草药繁多，气象万千，猕猴戏峰间，仙境胜蓬莱。城门中央的上
            方为铜铸方鼎，两恻为表现西周东迁个大秦统一……

        </p>
    </article>
</section>
</body>
</html>

css.css文件

*{font-size: 10px}
    /*设置页面背景颜色*/
body { background-color:#ddfcca;}
/*设置section区块的属性*/
section{
    width:760px;
    margin: 0px;
    padding: 0px 20px;
    border:1px #50ad44 solid;
}
/*标题设置*/
h5{
    margin: 10px 20px;
    height: 23px;
    border-bottom: 3px #50ad44 solid;
    text-indent: 2em;
}
/*为照片设置属性*/
figure{
    padding-right: 22px;
    display: block;
    float: left;
    width: 220px;
}
/*文章*/
article{
    border-bottom: 1px solid #50ad44;
    line-height: 20px;
    margin-bottom: 10px;
}
/*段落*/
p{
    margin: 10px 13px;
    text-indent: 2em;
}
figcaption{
    text-align: center;
    color: #003300;
    text-decoration: underline;
}
img{
    margin-left: 10px;
}