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>