html5块级转为行级,关于HTML（含HTML5）的块级元素和行级（内联）元素总结

1.首先我们要知道什么是块级元素和行级(内联)元素?

块级(block)元素的特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度；

④它可以容纳内联元素和其他块元素。

内联(inline)元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变；

④内联元素只能容纳文本或者其他内联元素。

2.好的，我们来看看块级元素：

div:文档节

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:组合表注内容(td)

tr:表格行

th:表头单元格

td:表格单元

col:表格列属性;(空标签)

colgroup:表格格式化列组;

iframe:内联框架

figure:媒介内容分组

figcaption:figure标题

map:图像映射

area:图像区域

canvas:图形容器(脚本来绘制图形)

video:视频

source:媒介源

track:文本轨道

audio:声音内容

br:换行(空标签)

hr:水平分割线(空标签)

pre:格式文本

blockquote:块引用

address:文档联系信息

center:居中文本(不赞成使用)

spacer:在水平和垂直方向插入空间(空元素)

3.接下来，我们来看看行级(内联)元素：

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:下拉列表