一起自学前端开发!

html常用标签:盒子标签 div标签---前端入门教程

来源:原创    更新时间:2017-07-27 19:58:43    编辑:前端编辑    浏览:1952

学习完了四种常用的标签后,我们再介绍一下HTML中的布局中常用的盒子标签。

盒子标签又叫做万能标签。

盒子标签有两个,一个是块级元素<div>,另一个是内联元素<span>

 

一、<div>标签

<div>标签并没有特殊的语义,只是一个包裹标签,是用于分组 HTML 元素的块级元素。

div中可以出现任何标签,并无限制。

为了结构上的优化,通常会用div包裹住一些元素。

具体用途在后期学习CSS的时候会介绍。

举例:不设置样式时对比p标签和div标签

代码如下:

<div>Hello world!</div>

<p>Hello world!</p>

 

效果: 

图片1.png

二、<span>标签

<div>标签类似,<span>标签页没有特殊的语义, <span> 用于对文档中的行内元素进行组合。 <span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

举例:不设置效果,查看<span>标签的应用

代码如下:

<p>学习<span>前端的知识</span>!</p>

 

效果:

图片2.png

评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜