span div及p的区别
HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。
它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符。
span和div的不同之处在于span是内联的,用在一小块的内联HTML中,前后不断行。
div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。
p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行。
<div id="scissors"> <p>This is <span class="paper">crazy</span></p> </div>
在实践中,div,特别是span不应该滥用,尽管有其他相左的意见。比如,你要强调单词“crazy”和加粗类“paper”,可能会用这样的代码:
<div id="scissors"> <p>This is <strong class="paper">crazy</strong></p> </div>
这是做法比再加一个span比较好。
你所需要记住的是,span和div 是“无意义”的标签。
分享到:
相关推荐
HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...
对css里的元素如:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, ...
HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...
如: 测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span> 提示:如果不对DIV元素定义任何CSS属性,其显示效果将行将于P元素。 因为DIV与SPAN...
HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...
<div class="edit" style="display: none"> <div class="edit-bg"></div> ... <p><span>图书编号:</span><input type="text" name="id"></p> <p><span>图书名称:</span><input type="text
<div id="level"><span>Level:</span><span class="level">1</span></div> <div id="score"><span>Score:</span><span class="score">0</span></div> 暂停 <p>控制:</p> <p>← 向左移动</p> <p>→ 向右移动</p...
<p>元旦倒计时:</p> <div class="time"> <span class="day">0</span> <span>天</span> <span class="hour">1</span> <span>小时</span> <span class="minute">2</span> <span>分</span> <span class=...
<div class="imgBot"><a ><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div> <div class="imgTop"><img /></div> ...
<p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span> </p> <p class="cell_list"><span>入职:<span class=...
代码片段: <div id="gameinfo" translateZ(360px);"> <p> ... 最高连击:<span id='maxDoubleHit'>0</span> ... </p> ... <p id="gamemsg" <span Game Over </span> 重新开始 </p> </div>
<dd><a ><div class="mouse_s"><img /><p>1瑞马公司</p></div><div class="hover_s"><img /><p>1瑞马公司</p></div></a></dd> <dd><a ><div class="mouse_s"><img /><p>展览项目</p></div><div class="hover...
代码片段: <div class="wrapper"> <div class="search"> ... <p> ... <span sex="m">男</span> ... <span sex="a" class="active">All</span> </p> </div> <div class="user-list"> </div> </div>
非常漂亮的TAB效果 <div class="container"> <div class="menu"> ... <div class="info"><p></p></div> <div class="info"><p></p></div> <div class="info"><p></p></div> </div> </div>
JavaWeb新版教程-html&CSS-L和CSS-其他标签div、span、p.avi
<span class="name">姓名</span> <span class="phone">电话</span> <div class="start" id="countDown"> <div id="countDown"> <div class="count_down pr"> <p>距抽奖开始还有:</p> <span class=...
直接看例子 代码如下: for(var p=1;... } } <div class=”banner” id=”properties1″> <span>【${property1 }】</span> <div id=”property1″ class=”bannerchild”></div> </div> <div cla
<p>{{seller.bulletin}}</p> </div> </div> </div> <div class="detail-close" @click="showDetail(false)"> <span class="icon-close"></span> </div> </div> </div> [removed] export default{ props...
<p>或将照片拖到这里,单次最多可选9张</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>...