一.块级元素、行内元素、内联元素的特点,常见的元素的特点属性(href、src的区别,alt和title的区别)
块级元素:div,ul,ol,dl,li,p,h1~h6,table,form,pre,address
“form"这个块元素比较特殊,它只能用来容纳其他块元素
块状元素:一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。
功能:主要用来搭建网站架构、页面布局、承载内容
行内元素:span,strong,em,br,img,input,label(表格标签),select,textarea(多行文本输入框),cite(引用)
内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。
功能:用于加强内容显示,控制细节,例如:加粗、斜体等等
另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
width和height 可以看成物理属性,对内联元素没有影响。 能够影响它宽高的为其本身的内容。
margin-top:10px;margin-bottom: 10px;无效果
margin-left和margin-right;起作用。
padding属性就比较特别了。
padding-left;padding-right同样有效果,与块元素效果相同。
padding-top和padding-bottom不会影响它的高度,但是会影响他的背景高度。
---块元素:内外边距可以设置,即设置margin,padding有效果.2.块元素,能容纳其他块元素或者内联元素;内联元素,只能容纳文本或其他内联元素;
3.块元素中高度,行高以及顶和底边距都可以控制;内联元素中高,行高及顶和底边距不可改变。
疑问:内联元素和块元素的line-height,直接内联元素和设置display:inline有什么不一样
a. ul是无序列表,也就是说没有排列限制可以随意加li;
<ul><li>可以随意放置</li>
<li>可以随意放置</li>
<li>可以随意放置</li></ul>
b. dl是定义列表,会默认前后层级关系;
<dl><dt>我是头1</dt>
<dd>我是内容1</dd>
<dt>我是头2</dt>
<dd>我是内容2</dd></dl>
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- dipslay:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
- 内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的,所以可以通过这4个属性来控制内联元素的宽度。
- 内联元素的内部也可以放块级元素标签,而且内部的块级元素标签会撑大外部的内联标签,所以可以通过放块元素来控制内联元素的高度(网上介绍的是内联元素只能放文本及其他内联元素)
src 的内容,是页面必不可少的一部分,是引入。(比如页面引入图片)
href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。(比如引入common.css,进行css预处理)
alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值,而title是在图片正常加载鼠标划上去显示的值,虽然alt也有后者的功能,但是只是在低版本的ie浏览器才支持,高版本及标准浏览器不支持这个 功能了。
- 块元素(block element)
- * address - 地址
- * blockquote - 块引用
- * center - 举中对齐块
- * dir - 目录列表
- * div - 常用块级容易,也是css layout的主要标签
- * dl - 定义列表
- * fieldset - form控制组
- * form - 交互表单
- * h1 - 大标题
- * h2 - 副标题
- * h3 - 3级标题
- * h4 - 4级标题
- * h5 - 5级标题
- * h6 - 6级标题
- * hr - 水平分隔线
- * isindex - input prompt
- * menu - 菜单列表
- * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
- * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
- * ol - 排序表单
- * p - 段落
- * pre - 格式化文本
- * table - 表格
- * ul - 非排序列表
- 内联元素(inline element)
- * a - 锚点
- * abbr - 缩写
- * acronym - 首字
- * b - 粗体(不推荐)
- * bdo - bidi override
- * big - 大字体
- * br - 换行
- * cite - 引用
- * code - 计算机代码(在引用源码的时候需要)
- * dfn - 定义字段
- * em - 强调
- * font - 字体设定(不推荐)
- * i - 斜体
- * img - 图片
- * input - 输入框
- * kbd - 定义键盘文本
- * label - 表格标签
- * q - 短引用
- * s - 中划线(不推荐)
- * samp - 定义范例计算机代码
- * select - 项目选择
- * small - 小字体文本
- * span - 常用内联容器,定义文本内区块
- * strike - 中划线
- * strong - 粗体强调
- * sub - 下标
- * sup - 上标
- * textarea - 多行文本输入框
- * tt - 电传文本
- * u - 下划线
- * var - 定义变量
- 可变元素
- 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
- * applet - java applet
- * button - 按钮
- * del - 删除文本
- * iframe - inline frame
- * ins - 插入的文本
- * map - 图片区块(map)
- * object - object对象
- * script - 客户端脚本