标签：
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; }
效果图：
HTML5中section、article、figure的区别及使用介绍
标签：
原文地址：http://www.cnblogs.com/xiaobijia/p/5405716.html
