HTML宝典(第 1 版)
2.2.1 div元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

div元素

div元素可以把文档分割为独立的、不同的区域,每个区域就相当于一个块级容器,其中可以放置段落、标题、表格、图片、乃至任何HTML元素。

事实上,div元素本身并没有任何特定的语义,它的真正目的是把页面进行分块,然后通过CSS对它们进行格式化,来实现页面布局,也就是传说中的 DIV + CSS 布局。因此,可以说 div元素是一个通用容器,一个没有任何语义的容器。

如,使用 div元素把页面划分为 .header、.main、.aside、.footer 四个部分:

<body>
<div class="header">header</div>
<div class="main">main</div><div class="aside">aside</div>
<div class="footer">footer</div>
</body>

由于 div元素自身没有任何默认样式,因此,通过CSS控制各部分的样式,可以轻松实现任何想要的布局,包括经典的页面布局。如图 2‑5 所示:

经典页面布局
图2-5 经典页面布局

CSS是Cascading Style Sheet的简称,中文含义为“层叠样式表”,简称“样式表”,是W3C推出的格式化网页内容的标准技术,是网页设计者必须掌握的核心技术之一。

DIV + CSS是Web设计标准,它是一种网页的布局方法,能够真正做到网页表现与内容相分离。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验