HTML 块元素、内联元素

<h1>这是个标题</h1>
<b>粗体显示</b>
<a href="https://www.pangugle.com/">pangugle 教程</a>
<ul>
	<li>项目第一项</li>
	<li>项目第二项</li>
</ul>
<p>这是一个段落。</p>

以上实例在浏览器的显示中可以看到,除了 <b> 和 <a> 在同一行,其他都是在自占一行。

HTML 块元素

块级元素在浏览器显示时,通常会自占一行。没有设置宽度时,宽度默认是100%。 例子:<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始,而是其他元素都在一行上。 例子:<b>, <td>, <a>, <img>

设置宽度width 无效
设置高度height 无效,可以通过line-height来设置
设置margin 只有左右margin有效,上下无效
设置padding 只有左右padding有效,上下则无效

<div> 元素

<div> 元素是块级元素。<div> 元素没有特定的含义,用于组合其他 HTML 元素的容器。

注:推荐使用<div>来文档布局。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span> 元素

<span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义。

简单实例 :

<div>
	<h1>这是个标题</h1>
	<p>这是一个段落。</p>
</div>
<div>
	<span>pangugle 教程 帮你更好的学习</span>
	<a href="https://www.pangugle.com/">pangugle 教程</a>
	<ul>
		<li>项目第一项</li>
		<li>项目第二项</li>
	</ul>
</div>