我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或类标记页面的一部分,但我感兴趣的是,是否有时会优先使用其中一种而不是另一种。
当前回答
记住,基本上,它们的自我也不执行任何函数。 它们不仅仅通过标记来确定功能。
它们只能在CSS的帮助下进行定制。
现在回到你的问题:
SPAN标签加上一些样式将是有用的,在一行中,比如在一个段落中,在html中。 这是HTML中的行级或语句级。
例子:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
DIV标签的功能就像上面说的那样,只能在样式的支持下可见,可以容纳大量的HTML代码。
DIV是块级
例子:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
根据您的需求,这两种方法都有使用的时间和情况。
希望我的答案很清楚。 谢谢你!
其他回答
真正重要的区别已经在克里斯的回答中提到了。然而,这并不是对每个人都有明显的影响。
作为一个内联元素,<span>只能包含其他内联元素。因此下面的代码是错误的:
<span><p>This is a paragraph</p></span>
上面的代码无效。要包装块级元素,必须使用另一个块级元素(例如<div>)。另一方面,<div>只能在块级元素合法的地方使用。
此外,这些规则在(X)HTML中是固定的,它们不会因CSS规则的存在而改变!所以下面的代码也是错的!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
这里已经有了很好的、详细的答案,但没有可视化的例子,所以这里有一个简单的例子:
<div>这是一个div <div>这是一个div <div>这是一个div <span>这是一个span <span>这是一个span <span>这是一个span
<div>是块标记,而<span>是行内标记。
<div>是块级元素,<span>是行内元素。
如果你想对一些内联文本做一些事情,<span>是正确的选择,因为它不会像<div>那样引入换行符。
正如其他人所注意到的,这些都隐含着一些语义,最重要的事实是,<div>暗示了文档中的逻辑划分,类似于文档的一个部分或其他内容,例如:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
这很简单。
span的使用不会影响布局,因为它是内联的(在行中(不应该混淆,因为东西可以被换行)) 使用div会影响布局,里面的内容会出现在新行(block element)中,当你想添加的元素没有特殊的语义,而你想让它出现在新行中时,使用<div>。
Div是一个块元素,span是一个内联元素,它的宽度取决于它自己的内容,而Div不是
推荐文章
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- Angular 2模板中的标签是什么意思?
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?