随我的记

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。

posted @ 2017-05-14 13:13  张学亮  阅读(102)  评论(0编辑  收藏  举报