行内元素 、块级元素 、行内块元素

区别

行内元素

1. 无论内容多少,总是独占一行
2. 设置宽高无效
3. 对margin仅设置左右方向有效，上下无效;padding设置上下左右都有效
4. 不会自动进行换行
5. 行内元素只能容纳文本或者其他行内元素

块级元素

1. 能够识别宽高
2. margin和padding的上下左右均对其有效
3. 可以自动换行
4. 多个块状元素标签写在一起，默认排列方式为从上至下

行内块元素

1. 不自动换行
2. 能够识别宽高
3. 默认排列方式为从左到右

相互之间转化

• display:inline : 转换为行内元素
• display:block : 转换为块状元素
• display:inline-block : 转换为行内块状元素

行内元素

<a>标签可以是超链接或锚

<b>标签规定粗体文本

<br>以下代码标记一个换行

<big>让文本比常规的字体大一号

<i>标签显示斜体文本效果

<small>标签呈现小号字体效果

<strong>和 <em> 标签一样,用于强调文本,但它强调的程度更强一些

<span>标签被用来组合文档中的行内元素

<label>标签为 input 元素定义标注

--------------------------------------

<abbr>它所包含的文本是一个更长的单词或短语的缩写形式

<acronym>标签定义首字母缩写

<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题

<code>对文档中的文本进行格式化

<dfn> 标签可标记那些对特殊术语或短语的定义

<em>实例 对文档中的文本进行格式化

<kbd>标签定义键盘文本

<samp>表示一段用户应该对其没有什么其他解释的文本字符

<var>标签表示变量的名称,或者由用户提供的值

<bdo>可覆盖默认的文本方向

<map>定义客户端图像映射

<object>元素用于在网页中包含对象，比如：图像、音频、视频、Java applet、ActiveX、PDF、Flash 等

<q>标签用于简短的行内引用

<tt>标签呈现类似打字机或者等宽的文本效果

<script>在 HTML 页面中插入一段 JavaScript

<sub>下标文本

<sup> 上标文本

块级元素

<audio> HTML5音频播放

<canvas> HTML5绘制图形

<div>文档分区

<footer> HTML5区段尾或页尾

<form>表单

<h1>, <h2>,<h3>, <h4>, <h5>, <h6>标题级别 1-6

<header> HTML5区段头或页头

<hr>水平分割线

<ol>有序列表

<p>定义段落

<table>表格

<ul>无序列表

<video> HTML5视频

---------------------------------------

<address>联系方式信息

<article> HTML5文章内容

<aside> HTML5伴随内容

<blockquote>块引用

<dd>定义列表中定义条目描述

<dl>定义列表

<fieldset>表单元素分组

<figcaption> HTML5图文信息组标题

<figure> HTML5图文信息组 (参照 <figcaption>)

<hgroup> HTML5标题组

<noscript>不支持脚本或禁用脚本时显示的内容

<output> HTML5表单输出

<pre>预格式化文本

<section> HTML5一个页面区段

<tfoot>表脚注

行内块状元素

<button>按钮

<input>一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮

<img>标签创建的是被引用图像的占位空间

<select>select 元素是一种表单控件，可用于在表单中接受用户输入

<textarea>标签定义多行的文本输入控件,文本区中可容纳无限数量的文本