web快速入门之基础篇-html：3、基本标签之分组标签（div、span）、特殊字符

被开发耽误的大厨

已于 2022-06-12 22:30:52 修改

阅读量1.5k

点赞数

分类专栏： web前端（H5）文章标签： html 前端 xhtml

于 2020-01-14 22:44:35 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/103981046

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

一、前言

上一篇文章我整理以前上学的笔记是：1、h1到h6 标题标签 2、p 段落标签 3、br 换行标签【单标记】，详细可参考博文 web快速入门之基础篇-html：2、html基本标签之标题标签、段落标签、换行标签，这篇文章我将整理笔记：html基本标签之之分组标签（div、span）、特殊字符

二、实例举例

实例代码

我们先来看看一个例子，如下代码：02_分组span和div、特殊字符.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>这是title标题</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>

<!--1、普通文本和特殊字符串 --> 
		&lt如果这都不算爱空格折叠：           ,我有什么好悲哀&gt
		&lt如果这都不算爱特殊字符：&nbsp&nbsp&nbsp&nbsp&nbsp,我有什么好悲哀&gt    
<!--2、分组标签：div 和 span -->
		<p>文字<div style="color:#00FF00">测试div(不会跟文字在同一行)</div></p>
		<p>文字<span style = "color:red;">测试span(会跟文字在同一行)</span></p>
		
	</body>
</html>

运行效果

用谷歌浏览器打开运行，效果如下：

三、要点说明

1、普通文本和特殊字符

（1）空格折叠：多个空格以及换行，它会折叠显示为1个

（2）特殊字符: 转义字符

< <

> >

空格  

2、分组

(1) div 标签

<div> 标签可以把文档分割为独立的、不同的部分

注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符

提示：请使用 <div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

class 用于元素组（类似的元素，或者可以理解为某一类元素），

而 id 用于标识单独的唯一的元素。

详细可参见：

http://www.w3school.com.cn/tags/tag_div.asp

(2) span 标签

<span> 标签被用来组合文档中的行内元素。

提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

(3) div 和 span 的差别

2个都是用来划分区间但是没有实际语义的标签。

div是块级元素，不会其他元素在同一行;

span是行内元素，可以与其他元素位于同一行

(4) 块级元素分组和行内元素分组

<div></div>:适用于对于块级元素分组

<span></span>:适用于对于行内元素分组

**块级元素(block):独占一行,h1,p,div，table，ul，ol，li

**行内元素(inline):可以和其他元素位于同一行,span,a

被开发耽误的大厨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
web快速入门之基础篇-html：3、基本标签之分组标签（div、span）、特殊字符

目录一、前言二、实例举例实例代码运行效果三、要点说明1、普通文本和特殊字符2、分组(1) div 标签(2) span 标签(3) div 和 span 的差别(4) 块级元素分组和行内元素分组一、前言上一篇文章我整理以前上学的笔记是：1、h1到h6标题标签 2、p段落标签 3、br换行标签【单标记】，详细可参考博文 web快速......
复制链接

扫一扫