html中内联元素和块级元素的区别（超级详细）

        标题元素

---

        水平线

        给fieldset元素定义标题

        定义列表项目

<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为那些不支持框架的浏览器显示文本，放置于frameset标签内&lt;br&gt; &lt;noscript&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为那些不支持脚本的浏览器显示文本&lt;br&gt; &lt;ol&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有序列表&lt;br&gt; &lt;ul&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无序列表&lt;br&gt; &lt;p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义段落&lt;br&gt; &lt;pre&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义预格式化文本&lt;br&gt; &lt;table&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义表格&lt;br&gt; &lt;tbody&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义表格主体&lt;br&gt; &lt;td&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表格中的标准单元格&lt;br&gt; &lt;tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表格中的行&lt;br&gt; &lt;tfoot&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表格中的页脚&lt;br&gt; &lt;th&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义表头单元格&lt;br&gt; &lt;thead&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义表格的表头&lt;/p&gt; &lt;p&gt;3.内联元素有&lt;/p&gt; &lt;p&gt;&lt;a&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可定义锚以及超链接&lt;br&gt; &lt;abbr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表示一个缩写形式&lt;br&gt; &lt;acronym&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表示只取title中首字母的缩写形式&lt;br&gt; &lt;b&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字体加粗&lt;br&gt; &lt;bdo&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可覆盖默认的文本方向&lt;br&gt; &lt;big&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大号字体加粗&lt;br&gt; &lt;br&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;换行&lt;br&gt; &lt;cite&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;引用进行定义&lt;br&gt; &lt;code&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义计算机代码文本&lt;br&gt; &lt;dfn&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义一个定义项目&lt;br&gt; &lt;em&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义为强调的内容&lt;br&gt; &lt;i&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;斜体文本效果&lt;br&gt; &lt;img&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向网页中嵌入一张图像&lt;br&gt; &lt;input&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;输入框&lt;br&gt; &lt;kbd&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义键盘文本&lt;br&gt; &lt;label&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为input进行标记/标注&lt;br&gt; &lt;q&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义短的引用&lt;/p&gt; &lt;p&gt;&lt;s&gt; &nbsp; &nbsp;表示不准确不相关，却不应当给予删除的内容&lt;/p&gt; &lt;p&gt;&lt;em id=&#8221;__mceDel&#8221;&gt;&lt;samp&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义样本文本&lt;/em&gt;&lt;/p&gt; &lt;p&gt;&lt;em&gt;&lt;em&gt;&lt;select&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义单选或者多选菜单&lt;br&gt; &lt;small&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;呈现小号字体效果&lt;br&gt; &lt;span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;组合文档中的行内元素&lt;br&gt; &lt;strong&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;语气更强的强调内容&lt;br&gt; &lt;sub&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义下标文本&lt;br&gt; &lt;sup&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义上标文本&lt;br&gt; &lt;textarea&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多行文本输入控件&lt;br&gt; &lt;tt&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打字机或者等宽的文本效果&lt;br&gt; &lt;var&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义变量&lt;/em&gt;&lt;/em&gt;&lt;/p&gt; &lt;p&gt;&lt;input&gt;和&lt;img&gt;都是行内元素，但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素。&lt;/p&gt; &lt;p&gt;&lt;strong&gt;替换元素&lt;/strong&gt;就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。&lt;/p&gt; &lt;p&gt;&nbsp;例如浏览器会根据&lt;img&gt;标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；又例如根据&lt;input&gt;标签的type属性来决定是显示输入框，还是单选按钮等。&nbsp;html中的&lt;img&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;、&lt;object&gt;都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：&nbsp;&lt;img src=”cat.jpg” /&gt; &lt;input type=&#8221;submit&#8221; name=&#8221;submit&#8221; value=&#8221;提交&#8221; /&gt;&nbsp;浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。&nbsp;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;不可替换元素&lt;/strong&gt;&nbsp;html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。&lt;/p&gt; &lt;p&gt;例如：&nbsp;&lt;p&gt;段落的内容&lt;/p&gt;&nbsp;段落&lt;p&gt;是一个不可替换元素，文字“段落的内容”全被显示。&lt;/p&gt; &lt;p&gt;Demo&lt;/p&gt; &lt;pre class=&#8221;has&#8221;&gt;&lt;code class=&#8221;hljs language-html&#8221;&gt;&lt;html&gt; &lt;head&gt; &lt;style&gt; #div1{ background-color: red; border: 1px solid black; display: inline; margin: 100px;//内联元素只有左右外边距有效 width: 100px;//内联元素宽高是有内容决定的 height: 100px;//内联元素宽高是有内容决定的，line-height也可以设置高度 } #div2{ width: 100px; height: 100px; background-color: green; margin: 100px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#8221;div1&#8243;&gt;12345&lt;/div&gt; &lt;div id=&#8221;div2&#8243;&gt;122&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&nbsp;&lt;/p&gt;<br />