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

如有错误或疏漏之处还请大家指正,谢谢!

关于HTML(含HTML5)的块级元素和行级(内联)元素总结的更多相关文章

  1. HTML元素被定义为块级元素或内联元素。那么什么是块级元素,什么是内联元素呢

    块级元素(block)特性: 块级元素在浏览器显示时,通常会以新行来开始(和结束). 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制;就像以前用到的 ...

  2. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  3. html的块级元素和内联元素

    常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...

  4. HTML中块级元素与内联元素有什么区别 ?

    块级元素:默认宽度是100%(继承自父元素),如果块对象没有采用“float:left”或“float:right;”的样式,相邻的两个块对象就会分排在不同的两行上.例如,div, p, h1, fo ...

  5. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  6. 块级元素 Vs 内联元素

    HTML的元素可以分为两种: 块级元素(block level element ) 内联元素(inline element ) 二者的区别如下: 1. 块级元素独占一行(除非显示修改元素的displa ...

  7. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  8. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  9. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  10. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

随机推荐

  1. java——变量、jvm内存划分

    基本数据变量类型:byte.short.int.long.float.double.boolean.char eg : int i = 1; 引用数据变量类型:数组.类.接口.枚举.注解 eg : S ...

  2. CentOS6.x之emacs安装配置编译

    刚开始学习linux,干学没什么意思,想在linux下写写程序,了解到linux下使用较多的是emacs和vim,在youtobe上分别看了看这两个工具进行开发的视频,个人感觉emacs比较酷一点,所 ...

  3. springboot相关的pom依赖文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  4. Windows下使用beego遇到的问题

    一.解决:cc1.exe: sorry, unimplemented: 64-bit mode not compiled in: 参考链接:http://blog.csdn.net/mecho/art ...

  5. 属性(property)与成员变量(ivar)

    类内使用成员变量{}, 类外使用属性@property /*********** --- Person.h */ @interface Person : NSObject { NSString *_n ...

  6. 解惑好文:移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  7. js或者jq判断一段文字中是否有自己想要的那几个字,如果有就把那几个字变成红色

    如何判断一段文字中是否有自己想要的那几个字,如果有就把那几个字变成红色(在html中)比如有body中有这么一串文字“驾驶的后视镜的华盛顿”,想要判断里面是否有“驾驶”这两个字,如果有就把这两个字变成 ...

  8. Centos内核调优参考

    net.ipv4.tcp_syn_retries = 1 net.ipv4.tcp_synack_retries = 1 net.ipv4.tcp_keepalive_time = 600 net.i ...

  9. U盘小偷——C++实现U盘插入检测和文件扫描拷贝

    前几天女朋友说老师上课的PPT不共享,没法复习,想着写个U盘小偷拷贝PPT来着,后来觉得这样的行为这是不对的,万一不小心复制了老师的专利啥的,或者一些不可描述的东西,就闹大了. 虽然没有采取实际行动, ...

  10. Java分代的思考

    我们都知道,java的gc是基于java的分代前提,不管是CMS还是G1,都是基于分代思想:老年代和新生代 思考一:为什么可以分代? 1.java中对象的生命周期是不一样的,在gc中对应年龄的概念. ...