HTML块级元素、行内元素和空元素总结

Amy

HTML块级元素、行内元素和空元素总结



【零基础学习web前端】教程目录导航   http://www.sufeinet.com/thread-24027-1-1.html




注：标签又叫元素，这里说的块级元素、行内元素又叫块级标签、行内标签，是一个意思。


HTML元素根据表现形式，可以两大基本类型

• 块元素（block）
• 行内元素（又叫内联元素）（inline）
  

任何HTML元素都属于这两类中的其中一类。


一、块级元素

• display属性为block
• 总独占一整行，在新行上开始
• 默认情况下，宽度是其父级的100%，与内容无关
• 可以设置宽（width）、高（height）属性，但仍然独占一行
• 一般块元素可以包含行内元素和其他块级元素。
  

注：块级元素的垂直相邻外边距margin 会合并

二、行内元素

• display属性为inline
• 和其他元素在一行上
• 宽度取决于元素内的文字或者图片的宽度
• 不能设置weight、height。宽度随着内容增加，高度随字体大小改变。（可以用css将元素变为块级元素再设置宽高 display：block）
• 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但在竖直方向padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果，即边距只对水平方向有效，竖直方向无效。
• 行内元素只能容纳文本或者其他行内元素。
  

三、空元素

没有内容的HTML内容被称为空元素。空元素是在开始标签中关闭的。
<br/>就是没有关闭标签的空元素（<br/>标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。


附：
常见的块级元素

• address – 地址
• article -文章内容
• blockquote – 块引用
• center – 举中对齐块
• dir – 目录列表
• div – 常用块级容易，也是css layout的主要标签
• dl – 定义列表
• fieldset – form控制组
• form – 交互表单
• footer - 区段尾或页尾
• h1 – 大标题
• h2 – 副标题
• h3 – 3级标题
• h4 – 4级标题
• h5 – 5级标题
• h6 – 6级标题
• hr – 水平分隔线
• header - 区段头或页头
• menu – 菜单列表
• noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容）
• noscript – ）可选脚本内容（对于不支持script的浏览器显示此内容）
• ol – 排序表单
• p – 段落
• pre – 格式化文本
• table – 表格
• ul – 非排序列表
  

常见的行内元素

• a – 锚点
• abbr – 缩写
• acronym – 首字
• b – 粗体(不推荐)
• big – 大字体
• br – 换行
• em – 强调
• font – 字体设定(不推荐)
• i – 斜体
• img – 图片
• input – 输入框
• label – 表格标签
• select – 项目选择
• small – 小字体文本
• span – 常用内联容器，定义文本内区块
• strike – 中划线
• strong – 粗体强调
• sub – 下标
• sup – 上标
• textarea – 多行文本输入框
• tt – 电传文本
• u – 下划线
• var – 定义变量
  

常见的空元素

• br - 换行
• meta
• hr - 分隔线
• img   - 图片
• input - 文本框等
• link   - 指定了外部资源与当前文档的关系. 常用语引入css文件
• meta  - 表示那些不能由其它HTML元相关元素表示的任何元数据信息.
• source    - 具体说明多媒体资源的类型
  

站长苏飞

我只是路过打酱油的。

竹林风

真是难得给力的帖子啊。

惜

楼主加油，我们都看好你哦。

范范

我只是路过打酱油的。