![零基础HTML+CSS+JavaScript学习笔记](https://wfqqreader-1252317822.image.myqcloud.com/cover/173/36710173/b_36710173.jpg)
4.3 <div>标签
<div>标签是用来为HTML文档内容提供结构和背景的元素。<div>起始标签和</div>结束标签之间的所有内容都是用来构成这个块的,其中包含的标签的特性由<div>标签中的属性来控制,或者通过使用样式表格式化这个块来进行控制。
4.3.1 <div>标签的介绍
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-073-01.jpg?sign=1738886844-VTIjv2MTyI5U8vqY3V5G3dIvgRUpuQEe-0-e35b16714b4ebe52db45138834bdeb24)
div全称为division,意为分隔。<div>标签被称为分隔标签,表示一块可以显示HTML的区域,用于设置字、图片、表格等的摆放位置。<div>标签是块级标签,需要使用结束标签</div>。
学习笔记
块级标签又名块级元素,与其对应的是内联元素,也叫行内标签,它们都是HTML规范中的概念。
<div>标签的语法格式如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-073-1.jpg?sign=1738886844-aupPFw26CO7O9LME97EniNFHuiNAt6oQ-0-1c8829d75d45fe465d9b99c496a23594)
下面通过一个实例,使用<div>标签,对内容进行分组,制作一首古诗。首先通过<p>段落标签,完成古诗内容的制作;然后将古诗标题和古诗内容分成两组,便于后期维护管理,使用<div>标签,将古诗标题放在古诗内容的最外层。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-073-2.jpg?sign=1738886844-qqn6hXzw32tTQWzlIljGEyrTRwn7SAMI-0-6f22d2590a121cff4e4365d4ae78df34)
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-074-1.jpg?sign=1738886844-iX6ElETp1xZh13P8wsRdb1uehuKxw8nP-0-943466f98027eabf9b2b9a78a4a3b170)
本实例的运行效果如图4.7所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-074-2.jpg?sign=1738886844-tzNI1LOizPKGKkYSDaFr2xWB1Zb2VKZk-0-872553befd1bef47c58a900569147cb3)
图4.7 活用文字装饰的网页效果
4.3.2 <div>标签的应用
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-074-02.jpg?sign=1738886844-h47B76rTiezMyDs3skVyXW4wptDFVGhB-0-736201be571bb3bb13174b275ec42c87)
在应用<div>标签之前,先来了解<div>标签的属性。当网页加入层时,会经常用到<div>标签的属性。
<div>标签的语法格式如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-074-3.jpg?sign=1738886844-Pe6i18qsLDRvmJVfItHIhsKu8P1Wzfvg-0-760484c18af2e7651f2ee648c4bdcf50)
其中各参数含义如下。
(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>标签将“个人信息”和“教育背景”进行分组,以便更好地对分组内容进行样式控制,具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-074-4.jpg?sign=1738886844-ApSW7aNF30VLTKjjntVNseFKjhBVgf6G-0-f2317068049b942893528746a5d7bf38)
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-075-1.jpg?sign=1738886844-25pw5tx0JVbMJk6cTuXkWhrpX5snaYaG-0-8cd651adc20f37c7c31952c3a5dd5968)
本实例的运行效果如图4.8所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-075-2.jpg?sign=1738886844-GXPv39RU4CfSZgfymdbC9tytdj9Kwdna-0-4ec5a6ff28f68a0e845bf02c9e8e6592)
图4.8 个人简历的界面效果