块级元素 :独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;
行内元素 :可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!
其中还有一种结合两种模式有点的显示模式:
行内块元素 :结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;
特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高以及顶和底边距,完全靠内容撑开宽高!
a 标签:主要用来链接一个其他的网页;
span 标签:主要用来对行内的文字进行一些样式以及其他的 *** 作;
em 标签:一般用来对文字进行强调,使用斜体体现出来;
strong 标签:一般用来对文字进行强调,使用加粗字体体现出来;
img 标签:图片引用标签,其中 src属性中写入图片的地址;
var 标签:JavaScript中命名变量的标签。
特点:独占一行,对高度、宽度、行高以及顶和底边距都可设置的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;
p 标签:段落标签,段落文字使用,默认格式:段尾进行换行;
div 标签:划分块的主要使用标签;
ul 标签:无序列表的主标签,后面的标号为圆点(黑色);
ol 标签:有序列表的主标签,后面一般跟有序的1,2,3,4,5...;
li 标签:列表中的主体使用标签
dl 标签:自定义标签的主标签;
dt 标签:自定义标签的表头;
dd 标签:自定义标签的表头的解释(描述)信息;
h1~h6 :6级标题标签、字体的大小依次变小。
特点:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;
+++++++++++++++++++++++++++++++++++++++++
各种标签之间的转换
1、块级标签转换为行内标签: display:inline
2、行内标签转换为块级标签: display:block
3、转换为行内块标签: display:inline-block
在这之前有说过 text-align这个属性是否生效,原因是块级标签如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽,那么在100%的宽度中居中生效;但是行内元素的宽完全是靠内容撑开,所以宽度就是内容撑开的宽
基本上就是这个属性之间的转换!
1、块状元素:
块级元素是指本身属性为display:block的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建。
布局上:独占一行,可以容纳内联元素和其他块元素
样式上:设置width、height有效,可以设置盒子模型的相关css属性,
在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下,块级元素的高度是它本身内容的高度
2、 行内元素:
内联元素是指本身属性为display:inline的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的应用。
布局上:和其他元素从左到右在一行排列,只能容纳文本或者其他内联元素(不要在内联元素中嵌套块级元素)
样式上:不能直接控制width、height,只能使用盒模型部分属性,如padding、line_height、margin-left、margin-right。
内联元素的宽高是由本身内容的大小决定(文字、图标等)
3、 行内块状元素:尽可能少的占用横向空间,和其他元素都在一行上;可以设置width、height、margin、padding等盒模型相关属性。
*常用:img、input、td。
display:block;(将元素变为块级元素)
display:inline; (将元素变为行级元素)
display:inline-block;(将元素变为行级块元素)
a. 块元素特立独行;内联元素随波逐流。
b.块元素通常用作网页的主要构建模块,而内联元素常用来标记小段内容(修饰文本)
c.设计一个页面时,一般从较大的块开始 ,然后完善页面的时候再加入内联元素。
d. 对标签能够清晰的分类,掌握标签的特性,在选择标签时避免犹豫不决,提高布局效率。
HTML5新结构标签
HTML5-新的属性语法
HTML5图形
HTML5音视频标签
对本地离线存储的更好的支持
新的表单控件,比如 calendar、date、time、email、url、search
移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u
对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签 : IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
引用下forfind的回答:楼主可以在DW里敲敲试下。
内联元素(行内元素)
内联元素(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 - 定义变量
块元素(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 - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)