博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
随我的记
阅读量:4619 次
发布时间:2019-06-09

本文共 1456 字,大约阅读时间需要 4 分钟。

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。

转载于:https://www.cnblogs.com/zxlasd/p/6852257.html

你可能感兴趣的文章
mysql服务性能优化—my.cnf配置说明详解
查看>>
洛谷P1908 逆序对
查看>>
noip模拟赛 排列
查看>>
List 中添加多个List集合以及add() 与addAll()的区别
查看>>
如何处理测试人员的流动问题?
查看>>
1.border-image
查看>>
PagerIndicator主题样式修改
查看>>
java中HashMap类用法
查看>>
完整部署CentOS7.2+OpenStack+kvm 云平台环境(2)--云硬盘等后续配置
查看>>
分布式监控系统Zabbix-完整安装记录 -添加端口监控
查看>>
Python之反向迭代
查看>>
STM32F4 输入输出(GPIO)模式理解
查看>>
转义符
查看>>
poj 1019
查看>>
asp.net mvc上传文件
查看>>
bitmq集群高可用测试
查看>>
subline text3利用正则搜索
查看>>
项目管理思考——职责
查看>>
主成分分析(PCA)原理详解
查看>>
短信验证接口网址
查看>>