HTML 块级元素与内联元素的区别，div与span

1. 块级元素与内联元素

 HTML标签可分为两类，块级元素与内联元素。

 块级（block）元素的特点：
- 标签内的内容在新行上开始显示。
- 块的上下边距以及外边距和内边距都可通过属性或者CSS样式进行控制(盒模型)。
- 块宽度缺省是它的容器的100%，除非设定一个宽度。
- 块可以容纳内联元素和其他块元素，例如<p>标签内可插入<code>标签等。

 块级标签有：

• section:文档节
• nav:导航
• header:页眉
• article:文章
• aside:文章侧栏
• footer:页脚
• details:元素的细节
• summary:details元素可见的标题
• dialog:对话框窗口
• h1,h2,h3,h4,h5,h6:标题
• p:段落
• ul:无序列表
• ol:有序列表
• dir:目录列表
• li:项目
• dl:列表
• dt:列表项目
• dd:项目描述
• menu:命令的菜单,列表
• menuitem:菜单项目
• command:命令按钮
• form:表单
• fieldset:围绕元素的边框(可用于表单内元素分组)
• legend:在边框上的标题
• select:选择列表(内联元素)
• optgroup:组合选择列表选项
• option:选择列表选项(也可做datalist选项)
• datalist:下拉列表(id要与input中list属性值绑定)
• table:表格
• caption:表格标题
• thead:组合表头内容(th)
• tbody:组合主体内容(td)
• tfoot:组合表注内容(tf)
• tr:表格行
• th:表头单元格
• td:表格单元
• col:表格列属性;(空标签)
• colgroup:表格格式化列组;
• iframe:内联框架
• figure:媒介内容分组
• figcaption:figure标题
• map:图像映射
• area:图像区域
• canvas:图形容器(脚本来绘制图形)
• video:视频
• source:媒介源
• track:文本轨道
• audio:声音内容
• br:换行(空标签)
• hr:水平分割线(空标签)
• pre:格式文本
• blockquote:块引用
• address:文档联系信息
• center:居中文本(不赞成使用)
• spacer:在水平和垂直方向插入空间(空元素)

 内联（inline）元素的特点：

• 标签内的内容不换行显示。
• 高，行高及外边距和内边距不可改变。
• 宽度就是它的文字或图片的宽度，不可改变。
• 内联元素只能容纳文本或者其他内联元素。

 内联标签有：

• span:内联容器
• abbr:缩写
• em:强调
• strong:粗体强调
• mark:突出显示的文本
• b:粗体
• i:斜体
• bdi:文本方向
• bdo:文字方向
• big:大字体
• small:小字体
• sup:上标
• sub:下标
• del:被删除的文本
• strike:删除线
• s:删除线
• ins:被插入的文本
• u:下划线
• nobr:禁止换行
• wbr:单词换行时机(空标签)
• tt:打字机文本
• kbd:键盘文本
• time:日期/时间
• cite:引用
• q:短引用(“”)
• font:字体设定(不常用)
• acronym:缩写(html5不支持)
• dfn:字段(不常用)
• a:锚点
• img:图片
• embed:内嵌(空标签)
• label:input标记(点击文本触发控件)
• input:输入框
• button:按钮
• keygen:生成秘钥(空标签)
• textarea:多行文本输入框
• output:输出结果
• ruby:中文注音
• rt:注音
• rp:浏览器不支持ruby元素显示的内容
• progress:进度条
• meter:度量
• var:定义变量
• code:计算机代码文本
• samp:计算机代码样本
• select:下拉列表

2. <div>标签

 <div> 是一个块级元素，它包含的内容在新行进行显示。实际上，换行是<div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用CSS样式，这也是CSS样式巨大部分应用场景(选择器)。

 <div>一般用于作为组合其他 HTML 元素的容器。

 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

3. <span>元素

 HTML<span> 元素是内联元素，可用作文本的容器。<span>元素也没有特定的含义。它唯一的作用是与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。