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。

时间: 2024-10-10 02:31:07

5.12随笔的相关文章

2015.8.12随笔之视察滚动对比

今天看到了https://www.qhee.com/node/activity-subject/busmanuals/页面上用到的fullpage.js(https://github.com/alvarotrigo/fullPage.js)视察滚动插件,对比了一下自己之前用的onepage-scroll插件(https://github.com/peachananr/onepage-scroll). 就代码量而言,fullpage.js压缩前是2000度行,而onepage-scroll仅有40

2018.12.12 随笔

今天坐在台下倾听了几个老哥的分享,不得不说,我这里大多数人或多或少其实都是此刻以前的loser,各种各样的原因,有自身,有客观因素. 有在克拉玛依钻井的老哥过来学习python,有保险,初中毕业,等等各种各样的老哥. 在正常的社会价值观框架下,这些可以说是挣扎在底层的韭菜,正如我一样 此刻也是千万当中渺小的苦苦挣扎不动的一个.我觉得和他们相比我所欠缺的就是对生活的热爱,对美好目标的追求.在每次的目标开始之前,我总会评估自己的可能性,但是我往往忽略的就是这世界的不可变因素,我过分的忽略了奇迹的发生

iOS开发-线程安全-09-多线程

1 返回主页 2 GarveyCalvin 3 4 程序人生-改变未来 5 6 博客园 7 首页 8 新随笔 9 联系 10 订阅 11 管理 12 随笔- 29 文章- 29 评论- 43 13 iOS开发-多线程开发之线程安全篇 14 15 前言:一块资源可能会被多个线程共享,也就是多个线程可能会访问同一块资源,比如多个线程访问同一个对象.同一个变量.同一个文件和同一个方法等.因此当多个线程访问同一块资源时,很容易会发生数据错误及数据不安全等问题.因此要避免这些问题,我们需要使用“线程锁”来

vc编程中的20点小笔记

机器学习是一项经验技能,经验越多越好.在项目建立的过程中,实践是掌握机器学习的最佳手段.在实践过程中,通过实际操作加深对分类和回归问题的每一个步骤的理解,达到学习机器学习的目的. 预测模型项目模板不能只通过阅读来掌握机器学习的技能,需要进行大量的练习.本文将介绍一个通用的机器学习的项目模板,创建这个模板总共有六个步骤.通过本文将学到: 端到端地预测(分类与回归)模型的项目结构. 如何将前面学到的内容引入到项目中. 如何通过这个项目模板来得到一个高准确度的模板. 副诼匚盼胁臼匾膊讶赖期放判鼻懒合谖

CPrimer Plus第12章 存储类、链接和内存管理随笔

被static修饰的属于内部链接,不可被外部程序文件所使用一般而言,全局变量(文件作用域变量)具有静态存储期,局部变量(代码块作用域变量)具有自动存储期寄存器变量不能使用地址运算符因为被static修饰的变量不会中途被释放,所以不能用static修饰函数的形参变量的定义放在所有函数定义的外部即创建了一个外部变量,若外部变量在其他文件中定义,则需见extern修饰全局变量只能用常量表达式来赋值:int i;    int j = 2*i;不被允许 ptd = (double *)malloc(n

12.30 linux学习随笔

1 vim /etc/inittab linux配置文件 2 passwd 修改密码 3 system-config-lanuage 系统语言修改 4 vim /etc/sysconfig/il8n 5 system-config-packages 5.1 system-config-display 6 su - xxx 注销登录另外一个账户 6.1 sudo - 授权用户 6.2 /user/sbin/useradd xxx 增加一个账户 6.3 sudo /user/sbin/useradd

python随笔12(传递任意数量的实参)

有时候,你预先不知道函数需要接受多少个实参,好在python允许函数从调用语句中收集任意数量的实参. 例如,来看一个制作披萨的函数,它需要接受很多的配料,但你无法预先确定顾客要多少种配料.下面函数只有一个形参*toppings,但不管调用语句提供了多少实参,这个形参都将它们统统收入囊中. def make_pizza(*toppings): """打印顾客点的所有配料""" print(toppings) make_pizza('pepperon

陈芙瑶 linux随笔 2019.12.4

计算机操作系统简介 1) 掌握操作系统的定义:操作系统是一个用来协调.管理和控断计算机硬件和软件资源的系统程序,它位于硬件和应用程序之 2) 掌握操作系统的内核的定义:操作系统的内核是一个管理和控制程序,负责管理计算机的所有物理资源,其中包括.文件系 内存管理.设备管理和进程管理. 3) 了解两种操作系统用户界面:图形界面.命令行界面. 了解LINUX主要发行版:CENTOS.RHEL.UBUNTU.SUSE安装Linux操作系统的准备工作 了解为什么选择Red Hat Enterprise L

(12) PHP 随笔---Smarty模板引擎 单模板多缓存、局部不缓存 20--21

◇单模板多缓存:一个模板生成多个缓存文件. ◇同一个模板在使用时会生成不同的页面实现,如果开启缓存的话,则通过同一个模板生成的多个实例都需要被缓存,这样就会出现问题. ◇解决办法-->在调用display()方法时,通过第二个可选参数中提供一个只,这个值为每一个实例指定的一个唯一标识符,就几个不同的标示符就有几个缓存页面.例如: $smarty -> display('index.tpl',$_SERVER['REQUEST_URL']); ◇局部不缓存(3种方法):缓存页面可以把全部页面数据