目录
一、块元素
块级元素:块级大多为结构性标签
特点:
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时,默认为100%
4.块级元素中可以包含块级元素和行内元素
列举:
- h1~h6:标题标签
- <hr> 水平分割线
- <p>...</p> 段落
- <div>...</div> div盒子
- <ul>...</ul>无序列表
- <ol>...</ol>有序列表
- <dl>...</dl>自定义列表
- <form action="" method="">...</form> 表单
- <table border="" cellspacing="" cellpadding=""></table> 表格
- <pre>...</pre> 预格式化
- <address>...</adderss>
- <center>...</center> 地址文字
- <blockquote>...</blockquote> 段落缩进 前后5个字符
- <marquee>...</marquee> 滚动文本
二、行内元素
行内元素:行内大多为描述性标签
特点:
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度,不可以改变
4.行内元素只能嵌套行内元素,不能包含块级元素
列举:
- <span>...</span>
- <a>...</a> 链接
- <input>...</input> 文本框
- <textarea>...</textarea> 多行文本
- <select>...</select> 下拉列表
- <img > 图片
- <del>...</del> 删除线
- <u>...</u> 下划线
- <sup>...</sup> 上标
- <sub>...</sub> 下标
- <i>...</i> 斜体
- <em>...</em> 斜体(强调性)
- <br> 换行
- <b>...</b> 加粗
- <strong>...</strong> 加粗(强调性)
三、行内块元素
行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。
行内块状元素特征:
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素