HTML学习笔记—实体转义与块级行级元素

转义字符

&lt;    <!-- 小于号(<) -->
&gt;    <!-- 大于号(>) -->
&amp;   <!-- 与号(&) -->
&nbsp;  <!-- 空格 -->
&copy;  <!-- 版权号(©) -->
&times; <!-- 乘号(×) -->
&divide; <!-- 除号(÷) -->

块级元素与行级元素

块级元素

特性:

  • 相当于执行display:block操作
  • 独占一行
  • 宽度和高度都是可控的,如果没设置其宽度,将默认铺满整行
  • 其内部可以包含块级元素和行级元素

如下:

<div></div>
<p></p>

行级元素

特性:

  • 相当于执行了display:inline
  • 不会独占一行,与相邻的行级元素占同一行,直到占满,会自动掉到下一行
  • 宽度和高度不可控
  • 其内部只能包含行级元素

如下:

<strong></strong>
<span></span>

区别

分别给 块级元素p标签行级元素span标签 设置如下属性

<p style="width:300px; height:50px; background:gray;">p</p>

<span style="width:300px; height:50px; background:gray;">span</span>

如图:


区别

我们可以明显看出 * 块级元素p标签 * 独占一行且可控宽度和高度(看颜色)
而 * 行级元素span标签* 并不独占一行,且不可控宽度和高度(看颜色)

行级、块级元素相互转换

二者可以相互转化,只需在其style中设置display的属性即可

例如:

<!-- 块级标签p转换成行级 -->
<p style="display:inline;"></p>

<!-- 行级标签span转换成块级 -->
<span style="display:block"></span>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。