![剑指JavaWeb:技术详解与应用实践](https://wfqqreader-1252317822.image.myqcloud.com/cover/457/51089457/b_51089457.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.3.8 其他标签
还有一种标签,它们不是为了显示内容,只是实现某种功能,如换行、分割线,以及布局标签。
● <br>标签:可以在文本中生成一个换行。该标签是一个单标签,不需要包含其他的文本内容。
● <hr>标签:可以在文本中生成一条分割线。和<br>标签一样,该标签是一个单标签,不需要包含其他的文本内容。
● <span> 标签:没有具体的展示效果,只是用来页面局部布局。<span>标签可以和<span>标签共享一行,做水平布局。
● <div>标签:没有具体的展示效果,只是用来做页面局部布局。<div>标签独占一行,不会和其他标签共享一行,做垂直布局。
<span>标签用来表示无特殊语义的一些文本内容,其语法格式如下。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_35_1.jpg?sign=1738861508-LFndqFrjM2H4NM4WoiJZ1tFahuJD5gj1-0-89f2d1be92762fa12ca04f643590dd45)
<div>标签语法格式如下。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_35_2.jpg?sign=1738861508-dI46xyX9azgKLVdnNb2QvxTUGCEkUbgJ-0-ce896278a0abd8a62cb60f3cf06fc4a5)
通常情况下,<span>标签和<div>标签标记的内容需要使用 CSS 样式来进行修饰。下面创建test_div_span.html文件对这两个标签进行案例演示,示例代码如下。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_35_3.jpg?sign=1738861508-c5Dff7pilE2CGq3r8CSoqU43kC6thwoK-0-a61d5445d0e747412e88973b4d9b115f)
运行代码查看效果,测试<div>标签的页面效果如图2-37所示。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_35_4.jpg?sign=1738861508-XpfztLn9WV6UmvFaUST0KF8xMo4WuzRv-0-f2f1e0ebcc60e410ff7c8c0a60fa4eed)
图2-37 测试<div>标签的页面效果
结果表明,每个<div>标签独占一行,而所有<span>标签则默认共享一行。