`

<span> 与 <p>的区别

csshtml
阅读更多

span标签是在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。


P标签就是分段"逻辑含义相同的放在一起"用一句话来说"把意思相同的话捆绑在一起"。

 

eg:

<P>华仔，我爱你</p>

<P>华仔，我爱死你</p>

这样就在网页中是上下2段

华仔，我爱你

华仔，我爱死你

如果去掉P标签，那么就是一句话连在一起

华仔，我爱你 华仔，我爱死你

说明p标签是段落标签！

而span标签一般在CSS样式里，用来划分几个区域，从而实现某种特定效果！

比如

h2 {

font-family:黑体;

}

h2.span{

color:red;

}

<h2>华仔，我爱你</h2>

<h2>华仔，<span>我爱你</span></h2>

看看效果吧！

分享到：
| java Socket通信(一)[转]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5气球大战小游戏代码.zip

    最高连击：&lt;span id='maxDoubleHit'&gt;0&lt;/span&gt; &lt;/p&gt; &lt;p&gt; 本次游戏：&lt;span id='currentDoubleHit'&gt;0&lt;/span&gt; &lt;/p&gt; &lt;p id="gamemsg" &lt;span Game Over &lt;/span&gt; &lt;button 重新开始 &lt;/button&gt; &lt;/p&gt; &lt;/...

    图书管理系统.rar

    &lt;div class="edit" style="display: none"&gt; &lt;div class="edit-bg"&gt;&lt;/div&gt; ... &lt;p&gt;&lt;span&gt;图书编号:&lt;/span&gt;&lt;input type="text" name="id"&gt;&lt;/p&gt; &lt;p&gt;&lt;span&gt;图书名称:&lt;/span&gt;&lt;input type="text

    元旦倒计时JavaScript代码

    &lt;p&gt;元旦倒计时：&lt;/p&gt; &lt;div class="time"&gt; &lt;span class="day"&gt;0&lt;/span&gt; &lt;span&gt;天&lt;/span&gt; &lt;span class="hour"&gt;1&lt;/span&gt; &lt;span&gt;小时&lt;/span&gt; &lt;span class="minute"&gt;2&lt;/span&gt; &lt;span&gt;分&lt;/span&gt; &lt;span class=...

    一个华丽的跳转页面(开源)

    &lt;p&gt;&gt; &lt;span&gt;ERROR &lt;/span&gt;: "&lt;i&gt;服务器地址已改变&lt;/i&gt;"&lt;/p&gt;&lt;p&gt;&gt; &lt;span&gt;ERROR CODE&lt;/span&gt;: "&lt;i&gt;HTTP 403 Forbidden&lt;/i&gt;"&lt;/p&gt; &lt;p&gt;&gt; &lt;span&gt;ERROR DESCRIPTION&lt;/span&gt;: "&lt;i&gt;您没有在此服务器上访问此页面的权限！...

    蔚蓝网上书店首页代码

    &lt;li&gt;・袁伟民与体坛风云：实话实...&lt;/li&gt; &lt;li&gt;・我们台湾这些年：轰动两岸...&lt;/li&gt; &lt;li&gt;・畅销教辅推荐：精品套书50...&lt;/li&gt; &lt;li&gt;・2010版法律硕士联考大纲75...&lt;/li&gt; &lt;li&gt;・计算机新书畅销书75折抢购&lt;/li&gt; ...

    FAKAV7.0.zip

    &lt;img src=...&lt;/p&gt; &lt;p&gt; &lt;span /&gt; &lt;br /&gt; &lt;span /&gt; &lt;span &lt;/p&gt; &lt;p&gt; &lt;span &lt;/p&gt; &lt;p&gt; &lt;span &lt;/p&gt; &lt;p&gt; &lt;span&gt;&lt;span href="https://www.lanzous.com/i6qhnvi" target="_blank"&gt;&lt;span &lt;/p&gt; &lt;p&gt;

    jQuery网页版俄罗斯方块游戏代码.zip

    &lt;div id="level"&gt;&lt;span&gt;Level:&lt;/span&gt;&lt;span class="level"&gt;1&lt;/span&gt;&lt;/div&gt; &lt;div id="score"&gt;&lt;span&gt;Score:&lt;/span&gt;&lt;span class="score"&gt;0&lt;/span&gt;&lt;/div&gt; &lt;button id="pause"&gt;暂停&lt;/button&gt; &lt;p&gt;控制：&lt;/p&gt; &lt;p&gt;← 向...

    jQuery的图片手风琴滑动展开特效.zip

     &lt;div class="imgBot"&gt;&lt;a &gt;&lt;p class="bt_1"&gt;服饰&lt;/p&gt;&lt;p class="bt_2"&gt;&lt;span&gt;封面明星故事&lt;/span&gt;&lt;span&gt;2015春夏趋势&lt;/span&gt;&lt;span&gt;我爱海淘&lt;/span&gt;&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;  &lt;/li&gt;  &lt;li&gt;   &lt;div class="imgTop"&gt;&lt;img /&gt;...

    jQuery的滑动门选项卡上下滚动切换特效.zip

    &lt;li class="cur"&gt;&lt;b class="zhanl"&gt;&lt;p&gt;&lt;img /&gt;展览展示&lt;/p&gt;&lt;/b&gt;&lt;span class="zhanl"&gt;&lt;p&gt;&lt;img /&gt;展览展示&lt;/p&gt;&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;b class="huod"&gt;&lt;p&gt;&lt;img /&gt;&lt;/p&gt;活动策划&lt;/b&gt;&lt;span class="huod"&gt;&lt;p&gt;&lt;img /&gt;活动策划&lt;/...

    非常漂亮的TAB效果

    &lt;li class="current"&gt;&lt;span&gt;one&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;two&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;three&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;ul&gt; &lt;li&gt; &lt;img src="images/Angus Deluxe.png" /&gt; &lt;div ...

    jQuery-3D叠加切换效果代码.zip

    &lt;p class="cell_list"&gt;&lt;span class="lf"&gt;姓名：&lt;span class="darks"&gt;小明&lt;/span&gt;&lt;/span&gt; &lt;span class="rt"&gt;薪资 ：&lt;span class="darks"&gt;15k&lt;/span&gt;&lt;/span&gt; &lt;/p&gt; &lt;p class="cell_list"&gt;&lt;span&gt;入职：&lt;span class=...

    java实用程序设计100例原代码和素材下载

    &lt;p&gt;&lt;span class="javascript" style="FONT-SIZE: 12px"&gt;&lt;font face="Verdana"&gt;1 图形用户界面&lt;br /&gt;2 applet编辑&lt;br /&gt;3 多媒体处理&lt;br /&gt;4 java输入输出系统&lt;br /&gt;5 java网络编程&lt;br /&gt;6 java数据库编程&lt;br /&gt;7 ...

    jQuery H5倒计时自动随机抽奖代码.zip

    &lt;p&gt;&lt;b&gt;抽奖活动&lt;/b&gt;&lt;/p&gt; &lt;span class="name"&gt;姓名&lt;/span&gt;&lt;br /&gt; &lt;span class="phone"&gt;电话&lt;/span&gt;&lt;br /&gt; &lt;div class="start" id="countDown"&gt; &lt;div id="countDown"&gt; &lt;div class="count_down pr"&gt; &lt;p&gt;距抽奖...

    【JavaScript源代码】vue实现倒计时功能.docx

    通过父组件传入的结束时间减去当前日期得到剩余时间　&lt;div class="itemend"&gt;　&lt;p class="itemss"&gt;倒计时&lt;span&gt;{{day}}&lt;/span&gt;天&lt;span&gt;{{hour}}&lt;/span&gt;时&lt;span&gt;{{minute}}&lt;/span&gt;分&lt;span&gt;{{second}}&lt;/span&gt;秒&lt;/p&gt;　...

    jQuery-筛选框文字查询代码.zip

    代码片段： &lt;div class="wrapper"&gt; &lt;div class="search"&gt; ... &lt;p&gt; ... &lt;span sex="a" class="active"&gt;All&lt;/span&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="user-list"&gt; &lt;ul&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;

    daisyui：一款极为流行的 Tailwind CSS 组件库 作为当下最流行的 Tailwind CSS 组件库，具有高颜值

    daisyui：一款极为流行的 Tailwind CSS 组件库。... &lt;span&gt;Menu Title&lt;/span&gt; &lt;/li&gt; &lt;li&gt;&lt;a&gt;First Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Second Menu Item&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Third Menu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;

    前端面试题

    一、单选题（每题2分，共10分） ...A &lt;!DOCTYPE html&gt; B &lt;!DOCTYPE HTML PUBLIC&gt; C &lt;!DOCTYPE xhtml&gt; D &lt;!DOCTYPE html5&gt; 2、以下全部属于块级标签的是 ...C &lt;span&gt;&lt;h1&gt;&lt;p&gt;&lt;img&gt;&lt;dl&gt; D &lt;div&gt;&lt;p&gt;&lt;form&gt;&lt;ul&gt;&lt;h1&gt;

    jquery 24小时计时器,精确到秒!

    &lt;td&gt;&lt;span id="hour"&gt;00&lt;/span&gt;&lt;sub&gt;小时&lt;/sub&gt;&lt;/td&gt; &lt;td&gt;&lt;span id="mi"&gt;00&lt;/span&gt;&lt;sub&gt;分&lt;/sub&gt;&lt;/td&gt; &lt;td&gt;&lt;span id="s"&gt;00&lt;/span&gt;&lt;sub&gt;秒&lt;/sub&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input type="button" value="开始(s)...

    购物车商品累加结算效果.zip

    &lt;span class="servicenum"&gt;已选择&lt;span class="goodsNum"&gt;{{goodsNum}}&lt;/span&gt;件商品&lt;span class="goodsNum"&gt;{{serviceNum}}&lt;/span&gt;项服务&lt;/span&gt; &lt;span class="totalclassPoin"&gt;总价：&lt;span class=...

Magicbox
Global site tag (gtag.js) - Google Analytics