一，行内元素标签(inline）
- 设置宽高无效
- 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
- 不会自动进行换行
- 代表标签：span,strong,em,a,del
- 凡是具有inline属性的标签，都具有文字属性，
- 超链接<a></a>
- 倾斜<em></em>;<i></i>
- 加粗</strong></strong>;<b></b>
- 缩写<abbr></abbr>
- 跨越多个字符<span></span>
- 获取用户输入<input>
- 创建下拉列表<select>
- 创建多行文本框<textarea>
- 定义控件标注<lable>
二，块级元素标签 (block)
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 可以自动换行
- 多个块状元素标签写在一起，默认排列方式为从上至下
- 代表标签：div,p,ul,li,ol,form,address
- 标签包含：
- 标题<h></h>
- 有序列表<ol><li></li></ol>
- 无序列表<ul><li></li></ul>
- 定义列表<dl></dl>
- 段落标签<p></p>
- 预格式文本<pre></pre>
- 大段引用<blockquote></blockquote>
- 小段引用<q></q>
- 划分区块<div></div>
- 定义<figure></figure>
- 音频<audio></audio>
- 视频<video></video>
- 表格<table></table>
- 表单<form></form>
- 添加一条直线 <hr>
- 装载独立文章<article>
- 定义文档章节<section>
- 定义非正文内容<aside>
- 页眉<header>
- 页脚<footer>
- 导航链接部分<nav>
- 为文档或 section 定义联系信息<address>
- 制作更小字号的文本<small>
- 下标文本<sub>
- 上标文本<sup>
三，行级块元素标签 (inline-block)，也叫可变元素标签
- 根据上下文语境决定该元素为块元素或者内联元素
- 综合了行内元素和块状元素的特性
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
- 代表标签：src标签
- 包括
- 图片<img />
- 内联框架<iframe></iframe>
- button - 按钮
- del - 删除文本
- iframe - inline frame
- ins - 插入的文本
- map - 图片区块(map)
- object - object对象
- script - 客户端脚本
四，三种类型标签的转化
display属性能够将三者任意转换：
- (1)display:inline;转换为行内元素
- (2)display:block;转换为块状元素
- (3)display:inline-block;转换为行内块状元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试案例</title> <style type="text/css"> span { display: block; width: 120px; height: 30px; background: red; } div { display: inline; width: 120px; height: 200px; background: green; } i { display: inline-block; width: 120px; height: 30px; background: lightblue; } </style> </head> <body> <span>行内转块状</span> <div>块状转行内 </div> <i>行内转行内块状</i> </body> </html>
五，容器级标签和文本级标签
- 容器级的标签中可以嵌套其它所有的标签，div h ul ol dl li dt dd ...
- 文本级的标签中只能嵌套文字/图片/超链接，span p buis strong em ins del ...
- div标签，一般用于配合css完成网页的基本布局
- span标签，一般用于配合css修改网页中的一些局部信息