HTML5前端开发入门之div和span

最新推荐文章于 2024-05-30 16:25:36 发布
最新推荐文章于 2024-05-30 16:25:36 发布
阅读量810 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 从零玩转Html5前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41886761/article/details/85225912
本文深入解析了div和span这两个HTML标签的作用与区别。div作为容器级标签，常用于网页布局，而span作为文本级标签，用于修改局部信息。文章详细阐述了两者特性，包括它们如何嵌套其他标签，以及在实际开发中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Div和span

1.什么是div？

作用：一般用于配合css完成网页的基本布局

 

2.什么是span？

作用：以后版用于配合css修改网页中的一些局部信息

 

3.div和span有什么区别？

1.div会单独的占领一行，而span不会单独占领一行

2.div是一个容器级别的标签，而span是一个文本级的标签

 

4.容器级的标签和文本级的标签的区别？

容器级的标签中可以嵌套其它的所有的标签

文本级的标签中只能嵌套文字/图片/超链接

 

容器级的标签

div h ul dl li ...

 

文本级的标签

span p buis stong em ins del ...

 

注意点：

哪些标签是文本级的哪些标签是容器级的，我们不用刻意去记忆

在企业开发中一般情况下要嵌套都是嵌套在div中，或者按照组标签来嵌套

行内块元素有哪些标签_行内元素和块级元素的区别有哪些？
weixin_39907922的博客
12-09 9839
1、常见行内元素和块级元素1、行内元素<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>2、块级元素<add...
HTML5+CSS3网页设计从基础到入门——div标签和span标签
m0_65563303的博客
05-13 360
<div></div>标签，独占一行 <span></span>标签，并列一行 怎么形容呢？一张图就看的出来 可以在这些标签里存放你想要的文字，图片，音乐等等
行内元素、块元素都有哪些
09-22
行内元素只占内容的宽度，块元素不管内容多少都要占全行，下面为大家介绍下常见的行内元素及块元素有哪些，感兴趣的朋友可以参考下，希望对大家有所帮助
行内块元素有哪些标签_html的行内元素与块级元素总结
weixin_39950010的博客
12-15 589
希望大家补充一下常见的块级元素与行内元素~如有错误，请大家在评论区指出，一起进步！一、区别二、常见的块级元素：p：段落标签div：把DIV看作是一容器,容器专门用来包含内容h1、h2… …：标题form：表单ul：无序列表，与li绑定ol：有序列表，与li绑定hr：分隔三、常见行内元素：a：锚点b：加粗i ：斜体img：图片input：输入框label：表格标签select：下拉列表span：用来...
好程序员分享CSS标签的分类、及显示模式
weixin_30555515的博客
07-01 188
好程序员分享CSS标签的分类、及显示模式，标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。 一、块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、&l...
行内块元素有哪些？
zybijiso666的博客
03-14 474
1：行内元素有： a( 锚点) b(粗体) span(常用内联容器，定义文本内区块) select(项目选择) strong(粗体强调) label(表格标签) cite (引用) code(计算机代码) 2：块级元素有： div ul(无序列表) ol(有序列表) dl(定义列表) table(表格) form(表单) h1 (一级标题) p(段落) hr pre(预格式) 3：行内块元素常见的有： img input textarea
web前端入门到实战：HTML-div和span标签
软件开发-前端开发-IT
10-05 606
一、div标签 1.作用：一般用于配合CSS完成网页的基本布局 2.例子： <style> .head{ width: 980px; height: 100px; background: red; margin: auto; } .content{ width: 980px; height: 300px; background: green; margin: ...
HTML语义：div和span不是够用了吗？
qq_37756660的博客
05-30 720
介绍完自然语言的语义场景后，我想介绍的另一个语义重要使用场景，就是文章的结构。中国古代小说就形成了“章 - 回”的概念，西方的戏剧也有幕的区分，所以人类的自然语言作品也是如出一辙。HTML 也应该支持这样的需求。HTML 语义标签中，有不少是用于支持这样的结构的标签。语义化的 HTML 能够支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法，即使我们并不打算深入实践语义，也应该尽量在大的层面上保证这些元素的语义化使用。
Web前端开发基础入门,书上示例
最新发布
09-09
3. 布局标签：为了更好地控制页面布局，前端开发者常用到如<div>、<span>、、、、等布局标签。这些标签不仅有助于内容的结构化，也是CSS布局技术的基础。 4. 表单元素：表单是收集用户输入数据的重要方式，HTML提供...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
- <div>和<span>是常用的布局标签，其中<div>是块级元素，而<span>是内联元素。 - 和用于区分内容区域，表示独立内容，而用于划分内容节。 6. 超链接与字符实体 - 超链接元素用于创建指向其他资源的链接，支持...
块级、行内以及行内块标签
weixin_52142992的博客
08-16 5347
块级标签、行内标签以及行内块标签之间的区别以及转换方法。
CSS标签分类（块元素 行内元素 行内块元素）
makelucky的博客
05-21 1万+
块标签：divph1-h6hr ulol lidl dd dt form ①支持宽高，自上而下排列 ②不受空格影响 ③一般用于其他标签的容器 ④默认宽度为100%（独占一行）。 行内标签：spani ab strong em sub sup u label br font ...
行内块元素有哪些标签_块级元素和行内元素-前端CSS基础
weixin_39631017的博客
11-30 587
是最典型的块级元素是最典型的行内元素块级元素和行内元素区别块级元素的特点：(1)总是从新行开始(2)高度，行高、外边距以及内边距都可以控制。(3)宽度默认是容器的100%(4)可以容纳内联元素和其他块元素。行内元素的特点：(1)和相邻行内元素在一行上。(2)高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。(3)默认宽度就是它本身内容的宽度。(4)行内元素只能容纳文本或...
CSS的复合选择器
weixin_45976564的博客
09-08 180
CSS的复合选择器 在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。 复合选择器可以更准确，更高效的选择目标元素（标签） 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。 1.后代选择器 后代选择器又称为包含选择器，可以选择父元素里面子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签
前端基础——行内块级元素、常用标签（注释、a、base、特殊、列表
qq_52301431的博客
03-20 2168
前端基础——行内块级元素、常用标签（注释、a、base、特殊、列表、表格）
CSS中的块级元素、行内元素和行内块元素
热门推荐
葉無聞
12-10 1万+
元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与span的显示方式不一样，因为 div是块级元素，会占据一行，而span为行内元素，可多个span放置一行。接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。 块级元素 block 块级元素，顾...
常见html标签：块级元素、行内块级元素、行内元素
sleepy_girl的博客
07-10 779
常见html标签 块级元素：占满整行，元素宽高边距等可设置；（如：div、p 、h1~h6、ul、li、ol、form、table、br） 行内块级元素：不占满整行，元素宽高边距等可设置；（如：img，input，select，button，textarea） 行内元素：不占满整行，宽高、上下边距等不可直接设置；（如：span，i，b，a，strong，s，del） 行内元素可以直接设置...
行内块元素有哪些标签_html常见的块元素与内联（行内）元素用法说明
weixin_39636608的博客
11-28 1166
html平时常见的块元素有：div, p, h1, h2, h3等，内联元素有：span, a, img等。块元素的属性：无论内容是什么，都会独占一整行。主要用于页面布局。内联元素的属性：只占自身大小的元素，不会占用一行。主要用于选中文本设置样式。div块元素仅仅只用于进行页面布局，它自身不带任何默认样式。span内联元素可以用来选中文本设置文本的样式，其自身不会带默认样式。一般情况下，只使用块元...
行内元素有哪些？块级元素有哪些？ 行内块元素有那些？他们有什么区别？
qingdouxiaohua的博客
09-10 1065
独占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。块级元素有：div、 ul、ol、li、h1...h6、p、td、th、form。默认宽度就是内容的宽度；高度、宽度、内外边距都可以自定义；和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙；与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度。行内元素有： a、 b、span、br、 i、 s。行内块元素有：img、input、textarea。
前端开发入门：HTML/CSS/JS代码实战指南
在HTML中，学习者可以了解如何使用各种标签创建页面结构，例如使用`<div>`、`<span>`、`<p>`、`<h1>`到`<h6>`等。CSS的学习涵盖了选择器、盒模型、布局方式（如弹性盒子Flexbox和网格布局Grid）、响应式设计等概念。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值