|
|
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 - 具体说明多媒体资源的类型
|
|
窥视卡
雷达卡
发表于 2018-11-29 15:45:30
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2018-11-29 17:27:02
