1.内联元素和块元素
内联元素:p、 div、 h1~h6
块元素:span、a
区别:内联元素占空间全部宽度,自动换行;
块元素必须首先设置其相应的宽度,不会自动换行。
2.两者的相互转换
a.diaplay:inline;
内联元素转化为块元素,即将p元素设置占同一行,中间不显示换行。
代码如下:
<style>
p {display:inline;}
</style>
<body>
<p> display属性的值为 "inline"的结果</p>
<p>两个元素之间没有距离.</p>
</body>
b.display:block;
块元素转化为内联元素,即将span元素设置为自动换行。
代码如下:
<style>
span {display:block;}
</style>
<body>
<span> display属性的值为 "block"的结果</span> <span>两个元素之间有换行符距离.</span>
</body>
在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行; ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; ④它可以容纳内联元素和其他块元素。 行内元素的特点: ①和其他元素都在一行上; ②高,行高及外边距和内边距部分可改变; ③宽度只与内容有关; ④行内元素只能容纳文本或者其他行内元素。 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用
HTML网页中插入视频各种方法
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。
Video标签的使用
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性, 以及一个内部使用的标签。Video标签内除了可以包含标签外,还可以包含当指定的视频都不能 播放时,返回的内容。
(1) src属性和poster属性
你能想象src属性是用来干啥的。跟标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。
<videowidth="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay">video>
(2) preload属性
这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。