行内元素和块级元素
在html中元素主要分为行内元素和块级元素。
行内元素
- 不独占一行
- 书写完成后不会自动换行
- 没有宽和高
常见的行级标签：a， span, strong, u, em
如：
<p>This <span style="background-color:red;">span</span> is an inline element; </p>
块级元素
- 独占一行
- 书写完会自动换行
- 宽和高可以修改
常见的块级标签：div, p, h1-h6, ul, li, dl, dt, dd
如：
<p style="background-color:red;">This paragraph is a block-level element.</p>
行内块级元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。特点如下：
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
常见的行内块标签：img, input, textarea
常见的元素
常见的行内元素
| 元素 | 描述 |
|---|---|
| <a> | 标签可定义锚 |
| <abbr> | 表示一个缩写形式 |
| <acronym> | 定义只取首字母缩写 |
| <b> | 字体加粗 |
| <bdo> | 可覆盖默认的文本方向 |
| <big> | 大号字体加粗 |
| <br> | 换行 |
| <cite> | 引用进行定义 |
| <code> | 定义计算机代码文本 |
| <dfn> | 定义一个定义项目 |
| <em> | 定义为强调的内容 |
| <i> | 斜体文本效果 |
| <img> | 向网页中嵌入一幅图像 |
| <input> | 输入框 |
| <kbd> | 定义键盘文本 |
| <label> | 标签为 input 元素定义标注（标记） |
| <q> | 定义短的引用 |
| <samp> | 定义样本文本 |
| <select> | 创建单选或多选菜单 |
| <small> | 呈现小号字体效果 |
| <span> | 组合文档中的行内元素 |
| <strong> | 语气更强的强调的内容 |
| <sub> | 定义下标文本 |
| <sup> | 定义上标文本 |
| <textarea> | 多行的文本输入控件 |
| <tt> | 打字机或者等宽的文本效果 |
| <var> | 定义变量 |
常见的块级元素
| 元素 | 描述 |
|---|---|
| <address> | 定义地址 |
| <caption> | 定义表格标题 |
| <dd> | 定义列表中定义条目 |
| <div> | 定义文档中的分区或节 |
| <dl> | 定义列表 |
| <dt> | 定义列表中的项目 |
| <fieldset> | 定义一个框架集 |
| <form> | 创建 HTML 表单 |
| <h1> | 定义最大的标题 |
| <h2> | 定义副标题 |
| <h3> | 定义标题 |
| <h4> | 定义标题 |
| <h5> | 定义标题 |
| <h6> | 定义最小的标题 |
| <hr> | 创建一条水平线 |
| <legend> | 元素为 fieldset 元素定义标题 |
| <li> | 标签定义列表项目 |
| <noframes> | 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 |
| <noscript> | 定义在脚本未被执行时的替代内容 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <p> | 标签定义段落 |
| <pre> | 定义预格式化的文本 |
| <table> | 标签定义 HTML 表格 |
| <tbody> | 标签表格主体（正文） |
| <td> | 表格中的标准单元格 |
| <tfoot> | 定义表格的页脚（脚注或表注） |
| <th> | 定义表头单元格 |
| <thead> | 标签定义表格的表头 |
| <tr> | 定义表格中的行 |
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素
| 元素 | 描述 |
|---|---|
| <button> | 按钮 |
| <del> | 定义文档中已被删除的文本 |
| <iframe> | 创建包含另外一个文档的内联框架（即行内框架） |
| <ins> | 标签定义已经被插入文档中的文本 |
| <map> | 客户端图像映射（即热区） |
| <object> | object对象 |
| <script> | 客户端脚本 |
行内块级元素
| 元素 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
转换方法
这三者是可以互相转换的，使用display属性能够将三者任意转换：
display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素
参考链接
HTML行内元素、块状元素、行内块状元素的区别
行内元素和块级元素的具体区别是什么？inline-block是什么？（面试题目）
说说行内元素和块级元素
探究行内元素和块级元素