首页 > 代码库 > 5.12随笔
5.12随笔
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。
5.12随笔