- 零基础HTML+CSS+JavaScript学习笔记
- 明日科技编著
- 696字
- 2025-02-26 15:27:46
4.3 <div>标签
<div>标签是用来为HTML文档内容提供结构和背景的元素。<div>起始标签和</div>结束标签之间的所有内容都是用来构成这个块的,其中包含的标签的特性由<div>标签中的属性来控制,或者通过使用样式表格式化这个块来进行控制。
4.3.1 <div>标签的介绍

div全称为division,意为分隔。<div>标签被称为分隔标签,表示一块可以显示HTML的区域,用于设置字、图片、表格等的摆放位置。<div>标签是块级标签,需要使用结束标签</div>。
学习笔记
块级标签又名块级元素,与其对应的是内联元素,也叫行内标签,它们都是HTML规范中的概念。
<div>标签的语法格式如下:

下面通过一个实例,使用<div>标签,对内容进行分组,制作一首古诗。首先通过<p>段落标签,完成古诗内容的制作;然后将古诗标题和古诗内容分成两组,便于后期维护管理,使用<div>标签,将古诗标题放在古诗内容的最外层。具体代码如下:


本实例的运行效果如图4.7所示。

图4.7 活用文字装饰的网页效果
4.3.2 <div>标签的应用

在应用<div>标签之前,先来了解<div>标签的属性。当网页加入层时,会经常用到<div>标签的属性。
<div>标签的语法格式如下:

其中各参数含义如下。
(1)id:<div>标签的id,也可以说是<div>标签的名字,常与CSS样式相结合,实现对网页中元素的控制。
(2)align:用于控制<div>标签中元素的对齐方式,其值可以是left、center和right,分别用于设置元素的居左、居中和居右对齐。
(3)class:用于设置<div>标签中元素的样式,其值为CSS样式中的class选择符。
(4)style:用于设置<div>标签中元素的样式,其值为CSS属性值,各属性值应用分号分隔。
下面通过一个实例,使用<div>标签,完成一份个人简历。首先不使用<div>标签,通过<h1>标签和<h5>标签显示个人简历,然后使用<div>标签将“个人信息”和“教育背景”进行分组,以便更好地对分组内容进行样式控制,具体代码如下:


本实例的运行效果如图4.8所示。

图4.8 个人简历的界面效果