4.6 div标签
来源:网络作者:站长
<div>标签可定义文档中的分区或节(division/section)。<div> 标签可以把文档分割为独立的、不同的部分。你可以把div想象成一个容器,这个容器可以帮我们把整个杂乱无序的文档归类整理。
举例:这是一个没有<div>标签的文档
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >4.6 div标签</ title > </ head > < body > <!--纳兰性德介绍--> < h1 >纳兰性德</ h1 > < p >一笔写不尽纳兰情,半生书不完痴心梦。作为满族第一位大诗人,的词是十七世纪下半页,中国艺苑上放出的绝美之花...</ p > <!--纳兰性德词--> < h2 >《木兰花·拟古决绝词》</ h2 > < p >人生若只如初见,何事秋风悲画扇。</ p > < p >等闲变却故人心,却道故人心易变。</ p > < p >骊山语罢清宵半,泪雨零铃终不怨。</ p > < p >何如薄幸锦衣郎,比翼连枝当日愿。</ p > </ body > </ html > |
加上<div>标签后
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >4.6 div标签</ title > </ head > < body > <!--纳兰性德介绍--> < div > < h1 >纳兰性德</ h1 > < p >一笔写不尽纳兰情,半生书不完痴心梦。作为满族第一位大诗人,的词是十七世纪下半页,中国艺苑上放出的绝美之花...</ p > </ div > <!--纳兰性德词--> < div > < h2 >《木兰花·拟古决绝词》</ h2 > < p >人生若只如初见,何事秋风悲画扇。</ p > < p >等闲变却故人心,却道故人心易变。</ p > < p >骊山语罢清宵半,泪雨零铃终不怨。</ p > < p >何如薄幸锦衣郎,比翼连枝当日愿。</ p > </ div > </ body > </ html > |
以上代码运行后,浏览器显示如下图
上面的代码很清晰的展示了body内容里面的两大内容块。第一个<div>容器放的是作者的姓名以及介绍。第二个<div>容器放的是作者的作品。通过前后两次代码的对比,我们不难发现,加上<div>标签后,结构看起来很清晰。
附加说明:html中代码布局使用最多标签为div。有效的利用div布局,可以让文档结构清晰明了。
你觉得文章内容怎么样