`

<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;/...

    HTML基础代码资源

    4. **块级元素与内联元素**：块级元素如`&lt;div&gt;`、`&lt;p&gt;`、`&lt;h1&gt;`等会占据一整行，而内联元素如`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`只占据自身内容所需的空间。通过CSS，可以调整它们的行为。 5. **超链接**：`&lt;a&gt;`标签用于创建...

    div和span的区别

    &lt;title&gt;div与span的区别&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;div标记不同行：&lt;/p&gt; &lt;div&gt;&lt;img src="www.csscss.org_CSS在线_logo.gif" border="0"&gt;&lt;/div&gt; &lt;div&gt;&lt;img src="www.csscss.org_CSS在线_logo.gif" border="0"&gt;&lt;/div&gt;...

    图书管理系统.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

    HTML5&CSS3网页制作：span标记.pptx

    * 内联元素：`&lt;span&gt;` 标记是一个内联元素，不像块状元素（如：`div` 标记、`p` 标记等）那样有换行的效果。 * 无显示效果：如果不对 `&lt;span&gt;` 元素应用样式，使用 `&lt;span&gt;` 标记没有任何的显示效果。 设置 id 或 ...

    span标签span标签的介绍及使用方法

    &lt;p&gt;这是一段文字，其中的&lt;span class="example"&gt;重要信息&lt;/span&gt;需要突出。&lt;/p&gt; ``` **注意事项** 1. 为了避免滥用和过度使用，应谨慎地在确实需要的地方使用`&lt;span&gt;`标签，尽量保持文档的语义清晰。 2. `span`...

    元旦倒计时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;您没有在此服务器上访问此页面的权限！...

    span设置独立样式作用.docx

    &lt;p&gt;测试内容 &lt;span class="exps"&gt;旋转字体大小测试内容II&lt;/span&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` 在这个例子中，`.exps`是一个CSS选择器，用来选中具有`class="exps"`的`&lt;span&gt;`元素，并将其字体大小设置为26像素。这样...

    蔚蓝网上书店首页代码

    &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;...

    CSS中如何把Span标签设置为固定宽度.docx

    1. 块级元素（如`&lt;div&gt;`、`&lt;p&gt;`、`&lt;h1&gt;`等）： - 占满整个容器的宽度。 - 默认情况下，每个块级元素都会另起一行。 - 可以设置宽度、高度、外边距和内边距。 2. 内联元素（如`&lt;span&gt;`、`&lt;a&gt;`、`&lt;em&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;距抽奖...

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