最新 H5 HTML CSS记录新手入门

最新推荐文章于 2024-08-14 02:19:53 发布

2401_84097678

最新推荐文章于 2024-08-14 02:19:53 发布

阅读量346

点赞数 3

分类专栏：程序员文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_84097678/article/details/138630254

版权

程序员专栏收录该内容

256 篇文章 1 订阅

订阅专栏

(2)text-align水平对齐:

left左(默认)、center中间、right右、justify两端对齐

(3)text-indent首行缩进：2em或2px 缩进两个字符

(4)text-height文本行高: 单位px或按倍数(行高是字体大小的倍数)

(5)text-decoration文本装饰：

none默认无、underline下划线、overline上划线、line-through删除线

(2)vertical-align垂直对齐：只能作用于

表格单元格的对象:

top顶、middle居中、bottom底

(4)text-shadow文本阴影：

语法"text-shadow:阴影颜色 x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);"

如text-shadow: blue 10px 10ox 2px;

(5)查询浏览器是否支持HTML5及CSS3属性的网址www.caniuse.com

33.CSS3设置超链接样式：

伪类:根据标签处于某种行为或状态来修饰超链接样式。其他标签如p可以使用hover

和active。

语法"标签名:伪类名{声明;}"

(1)a:link 未访问前的超链接

(2)a:visited 访问过后

(3)a:hover 鼠标移到链接上

(4)a:link 鼠标点击未释放

(5)设置伪类的顺序：a:link - a:visited - a:hover - a:active

(6)虽有四种样式,但实际开发中只设置标签选择器样式、鼠标悬浮链接样式

34.CSS3设置列表样式

(1)list-style-type：列表项标记类型

none无符号、decimal数字、disc实心圆(默认)、circle空心圆、square实心正方形

(2)list-style-image：用图像做列表项标记

(3)list-style-position：设置列表项标记的位置

(4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式)

顺序为 list-style-type + list-style-position + list-style-image

35.

标签：用于网页布局，把HTML文档分成独立不同的部分。

36.CSS3设置背景样式：

(1)background-color：背景色不能继承，其默认值是透明transparent

(2)background-image：url(图片路径)、none(不显示背景图像)

(3)background-repeat：背景图像重复平铺

repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、

repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、

(4)background-position：背景图的位置(X水平Y垂直方向的偏移量，如果只有一个方向关键字，则默认另一个关键字为center)

1.Xpos Ypos:如 0px 0px：默认无偏移,从左上角出现

30px 40px：正向偏移,图像向右和向下出现

-50px -60px：反向偏移,图像向左和向上出现

2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)

3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)

(5)background：一次设置背景的所有属性

(6)background-size背景图片尺寸：

auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、

百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)

37.gradient线性渐变：颜色沿着一条直线方向过渡

(1)常规语法：" linear-gradient(position, color1, color2,…)"

(2)浏览器兼容语法：" -兼容前缀-linear-gradient(position,color1,color2,…)"

(3)渐变的直线方向：

to left 从右向左、to top left 向左上方、to bottom left 向左下方、

to right 从左向右、to top right向右上方、to bottomo right向右下方、

to bottom从上向下、to top 从下向上、

38.CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。

———6 盒子模型———

39.盒子模型的组成：

content网页内容、border边框、padding内边距、margin外边距

(1)边框border：

border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置

border-width 边框粗细：如细thin、中等medium、粗的thick

border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框

border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;

(2)margin外边距：盒子边框以外和其他盒子间的距离

margin-top:上外边距、margin-bottom：下外边距

margin-left：左外边距、margin-right：右外边距

margin：简写"上右下左"

auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。

如果将元素的 margin设为负值，则元素会变大。

(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)

注意：很多标签都有自身默认的外边距，所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。

如清除body和h2自带的外边距 body,h2{margin:0px;}

(3)padding内边距：

padding-left、padding-right、padding-top、padding-bottom、

padding"上右下左"

40.盒子模型的尺寸：

增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。

(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度

(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin

41.box-sizing拯救布局

(语法)box-sizing:content-box、border-box、inherit

(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height

(2)border-box：盒子的宽或高度等于元素内容的宽或高度

(即该内容宽/高度=盒子宽/高度-border-padding )

(3)inherit：使元素继承父元素的盒子模型模式。

42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角

(语法)border-radius:length{1~4个数字};

(1)用border-radius制作特殊图形

圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%

半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。

扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 “一不同”

43.盒子阴影：和文本阴影相似

(语法)box-shadow:inset x-offset y-offset blur-radius color;

inset：内部阴影，可选。

x-offset：X轴水平位移，正值在右，负值在左。

y-offset：Y轴垂直位移，正值在下，负值在上。

blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。

——7 浮动——

44.标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。

45.display属性：用于指定标签的显示方式

block：块元素的默认值，该元素前后自带换行符

inline：行内元素的默认值，元素会显示为行内元素

inline-block：行内块元素，兼具行内元素和块元素的特性

none：元素不会显示

46.Float：指定网页元素向哪个方向浮动

left左、right右、none默认无(元素不浮动显示在其文本出现的位置)

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果是右浮动，后面的文本流将环绕在它左边：

47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。

48.clear属性：规定元素的哪一侧不允许其他浮动元素。

left(左侧不允许浮动元素)、right(右侧不允许)、

both(左右都不允许，常用于文本在图片下方显示)、

none(允许浮动元素出现在两侧)

49.解决父级边框塌陷

(1)浮动元素后加空的div，该div样式要设置clear:both;margin:0px;padding:0px;

(2)设置父元素固定高度把边框撑开。

(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。

(4)父级添加伪类after，推荐。

50.Overflow属性：溢出处理，也可用于扩展盒子高度。

visible 默认溢出内容可见，显示在盒子外面
hidden 多出来的内容被隐藏且没有滚动条
scroll 有垂直水平2条滚动条，可查看多余内容
auto 如果内容溢出，自动显示滚动条(只有垂直条)查看
inherit 继承父特性

————8 定位网页元素————

51.Position属性：指定盒子的位置，相对它父级的位置或它自身应该在的位置。

(1)static 默认无定位，元素按照标准文档布局。

(2)relative相对定位

a.特性:

1.以标准文档流排版为基础，相当于它在原来位置偏移指定的距离。

2.元素位置偏移后，仍会保留原位置。

3.层级提高，可以遮盖标准文档流元素和浮动元素。

b.使用场景：

相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。

c.语法 position:relative,指定偏移量时：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如

div{

position: relative;

top:-20px;

left:20px;

}

(3)absolute绝对定位

a.特性：

1.以已定位的祖先元素作基准定位，如果没有定位的祖先元素，则以浏览器窗口为基准定位。

2.元素位置偏移后，不保留原位置(其他元素可以用它原来的空位)

3.层级提高，可以遮盖标准文档流元素和浮动元素。

4.设置绝对定位的元素脱离文档流，对其他盒子的定位无影响

b.使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。

(4)fixed固定定位

a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。

b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。

52.z-index属性：设置定位元素的堆叠顺序。默认值0，值大的层位于值小层的上方。

(1)网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。

53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)

(1)opacity:x x值为0~1，值越小越透明

(2)filter:alpha(opacity=x) x值为0~100，值越小越透明

——9 CSS3做网页动画——

54.transform变形：

指效果的集合，如平移、旋转、缩放、倾斜效果。

语法 transform:[transform-function]*;

其中transform-function是变形函数，如要设置多个，则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。

常用2D变形函数如下：

(1)translate(tx,ty)：

平移函数，将元素从原位置(基于X,Y坐标)移动到指定位置上。

tx表示X轴(横坐标)上移动的向量长度，正值向右，负值向左。

ty表示Y轴(纵坐标)上移动的向量长度，正值向下，负值向上。

(2)scale(sx,sy)：

缩放函数，定义宽高度(元素尺寸)的缩放比例，默认值1。0~0.99缩小，大于1放大。

sx表示宽度即横坐标方向的缩放量。

sy表示高度即纵坐标方向的缩放量。

(3)rotate(a)；

旋转函数，只取一个值为度数值,单位deg表示角度°

正值顺时针转，负值逆时针转。

rotate函数只旋转，不改变元素形状。

(4)skew(ax,ay)：

倾斜函数，取值为度数值，单位deg

ax表示水平方向即X轴的倾斜角度。

ay表示垂直方向即Y轴的倾斜角度。

55.3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数

56.transition过渡：

指动画转换的过程，如渐现、渐弱、动画快慢等。

通过指定属性的初始状态、结束状态，在两个状态间通过平滑过渡的方式实现动画。

语法:[transition-property transition-duration

transition-timing-function transition-delay]*

(速记法)transition: 过渡属性过渡用时过渡的动画函数过渡的延迟时间

主要包括四个属性值：

(1)transition-property：

过渡属性，设置过渡或动态模拟的CSS属性

(2)transition-duration：

过渡用时，从旧属性到新属性的用时，单位为s

(3)transition-timing-function：

指定过渡函数、过渡速度,有以下方式：

ease 速度由快到慢，逐渐变慢(默认)

liner 匀速

ease-in 越来越快(渐显)

ease-out 越来越慢(渐隐)

ease-in-out 先加速再减速(渐显渐隐)

(4)transition-delay：设置过渡是否延迟时间执行。

注意：transition-duration指完成过渡需要的时间；transition-delay指过渡在什么时间之后触发。

57.总结如何用transition实现过渡动画：

(1)在默认样式中声明元素的初始状态。

(2)声明过渡元素之中状态样式，如悬浮状态

(3)在默认样式中通过添加过渡函数，添加不同的样式。

58.过渡的触发机制：

(1)伪类触发: :hover、 :active、 :focus、 :checked等

(2)媒体查询：通过@media属性判断设备的尺寸、方向等。

(3)JavaScript触发：用JavaScript脚本触发。

59.animation动画

animation制作动画的步骤:

(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画；

其中@keyframes称为关键帧，可以设置多段属性。语法

@keyframes 动画名称{

from{ //css样式代码 }

百分比1{ //css样式 }

百分比2{ //css样式 }

100%{ //css样式 }

}

(2)找到要设置动画的元素，调用关键帧已声明的动画。

如 animation: spread(动画名) 2s linear(匀速);

60.animation动画的语法和属性：

" animation: 动画名称播放时间播放方式开始播放的时间播放次数播放方向播放状态动画时间之外的状态 "

其中属性分别为：

animation-name 动画名称、

animation-duration 播放时间、

animation-timing-function 播放方式、

animation-delay 开始播放的时间、

animation-iteration-count 播放次数(无限次用infinite)、

animation-diriection 播放方向、

animation-play-state 播放状态、

animation-fill-mode 动画时间之外的状态、

——HTML部分——

utf-8 和 utf8的使用

只有MySQL可以用"utf8"，但其他地方一律使用大写"UTF-8"。

网页推荐使用长后缀名.html

有的浏览器中直接输出中文会出现中文乱码，可加声明

&nbsp //空格

&gt //大于号

&lt //小于号

&quot //双引号

&copy //版本符号

斜体

页面间链接

锚链接

功能性链接

————

创建表格：

1、

：整个表格以

标记开始、

标记结束，table在没有添加css样式之前，在浏览器中显示是没有表格线的。

2、：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。）

3、：表格的一行，所以有几对tr 表格就有几行。

4、：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。

5、：表格的一个单元格，一行中包含几对这行中就有几个单元格。

6、表格中列的个数，取决于一行中数据单元格的个数。

7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。

————

表格可以添加标题和摘要标签进行优化。

(1)摘要：

摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：

(2)标题：

描述表格内容，标题的显示位置：表格上方。

语法：

标题文本 …

————

框架frameset不能与body共有 cols横向分割窗口 rows纵向分割窗口

内联框架iframe src=“引用页面地址” name=“框架标识名” frameborder=“边框” scrolling=“是否出现滚动条” noresize="noresize"更改页面大小

配合标签的targer属性及标签的name属性，可实现窗口间的关联

//表单

个人头像：通过文件域，ps：需要在表单中写入enctype=“multipart/form=data” 属性

隐藏域：type="hidden"只读：readonly="readonly禁用：disabled="disabled"

//password 密码

//radio单选按钮

男

女

checkbox多选按钮

下拉列表

文本域textarea

复合选择器有： . 类选择器 # id选择器空格后代选择器（交集、并集）链接式导入外部链接

 标签作用：预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。



超链接语法：

链接显示的文本

title属性的作用：鼠标滑过链接文字时会显示这个属性的文本内容。这个属性能方便搜索引擎了解链接地址的内容(语义化更友好)。



标签可以链接Email地址，使用mailto能发送电子邮件。

如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

mailto写法：





当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：文本

1、标签是成对出现的，以开始，以结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在标签之间可以输入默认值。

下拉列表进行多选操作：在标签中设置multiple="multiple"属性，就可以实现多选功能，在windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

通用选择器作用是匹配html中所有标签，如 *{color:red}

为同一个元素设置了不同的CSS样式代码时，浏览器根据权值来判断使用权值最高的样式。

规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

!important有最高权值

!important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但 !important优先级例外，权值高于用户自设置的样式。

什么是“置换元素”？

置换元素会根据标签属性来显示的元素。反之就是非置换元素了。

如img根据src属性来显示，input根据value属性显示，因此可知img和input是置换元素，同理textarea、 select也是置换元素。

————

段落排版：

(1)letter-spacing：单个汉字间隔或单个字母间隔。

(2)word-spacing：按单词来设置间隔。

——

1、border-style 边框样式：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color 边框颜色

3、border-width 边框宽度：

thin | medium | thick。常用像素(px)。

4、当margin(或padding或border)的left和right的值相同，如：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

——

布局模型与盒模型一样都是 CSS概念。布局模型建立在盒模型基础上，不同于我们常说的 CSS 布局样式或 CSS 布局模板。CSS布局模板是外在的表现形式。

在网页中，元素有三种布局模型：

1、流动模型（Flow）

流动（Flow）是默认的网页布局模式。特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

流动模型下，内联元素会在所处的包含元素内从左到右水平分布显示。

2、浮动模型 (Float)

任何元素默认是不能浮动的，可用CSS定义为浮动。

3、层模型（Layer）

让html元素在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

(1)绝对定位(position: absolute)

将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块，则相对于body元素即相对于浏览器窗口。

(2)相对定位(position: relative)

元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。

(3)固定定位(position: fixed)

始终位于浏览器窗口内视图的设置位置，不受文档流动影响，

另外属性background-attachment:fixed;的作用也是设置背景图片固定。

relative与absolute组合：

1、参照定位的元素必须是相对定位元素的前辈元素。

2、参照定位的元素必须加入position:relative。

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

设置颜色的方法：

1、英文单词：p{color:red}

2、RGB颜色

由 R(red)、G(green)、B(blue)三种颜色比例来配色。

p{color:rgb(133,45,200)}

每一项的值可以是 0~255 的整数，也可以是0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%)}

3、十六进制颜色

其原理也是 RGB 设置，每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}

——

相对单位长度值：

1、px像素

像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。

2、em

(1)元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em = 14px；如果font-size 为18px，那么 1em = 18px。

如 p{font-size:12px; text-indent:2em;}意思首行缩进 24px(即两个字体大小的距离)

(2)当 font-size 设置为 em时，计算标准以它父元素的 font-size 为基础。

如：

以这个例子为例

p{font-size:14px} span{font-size:0.8em;}

这里 span 字体大小就为11.2px(14 * 0.8 = 11.2px)

3、%百分比

p{font-size:12px; line-height:130%}

设置行高(行间距)为字体的130%（12 * 1.3 = 15.6px）

块状元素没有设置宽度时怎么居中?

1.加入 table 标签

2.设置 display: inline方法：显示类型设为行内元素，进行不定宽元素的属性设置

3.设置 position: relative 和 left:50%。利用相对定位，将元素从左偏移50%实现居中。

——

隐性改变display类型：

position : absolute;
float:left 或 float:right;

不论什么元素(display:none除外)，设置以上属性之一，该元素的display显示类型就会自动变为以display:inline-block(行内块状元素)方式显示，此时可设置元素的 width 和 height，且默认宽度不占满父元素。

(如 a是行内元素，直接设置它的 width 无效，但设置 position:absolute 绝对定位后就可以设置宽度)

文本格式化标签：

文本加粗

文本加粗(加重语气)

斜体字

斜体(强调文字)

字体放大

字体缩小

_{定义下标字}

^{定义上标字}

插入字(字体下划线)

~~字体删除线~~

“计算机输出” 标签：

定义计算机代码

键盘输入

定义计算机代码样本

定义变量

	 预格式化文本(会保留文本的多个空格)



引文、引用、及标签定义：

		缩写

	地址联系信息

		文字方向(设置dir="rtl"为从右到左显示)


  
  
   
   	长文本引用(不会自带双引号，但会两边自动缩进)


   
   		短句引用语(自带双引号)

		定义引用、引证

		定义一个定义项目。



title=""属性规定关于元素的额外信息。标签中加上title属性可实现鼠标移过时出现提示文字，如
   
   

——

元素:

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:  

      

      



提示：在HTML中，标签没有结束标签。

——

HTML 颜色值RGB

由红(R)、绿(G)、蓝(B)组成。

每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。

十六进制值写法：#号后加3个或6个十六进制字符。

三位数表示法为：#RGB，转换为六位数表示为：#RRGGBB

——

常见的 URL Schemes

http		超文本传输协议	以http:// 开头的普通网页，不加密。

https		安全超文本传输协议	安全网页，加密所有信息交换。

ftp		文件传输协议		用于将文件下载或上传至网站。

file	 				您计算机上的文件。

——

HTML5 多媒体标签

	定义内嵌对象。HTML4不赞成，HTML5允许。

	定义内嵌对象。

	定义对象的参数。

	定义声音内容

	定义视频或者影片

	定义media元素的多媒体资源(、)

	规定media元素的字幕文件或其他包含文本的文件 (、)

——

audio音频设置

1.最好的解决方法：

下例使用两个不同的音频格式。HTML5  元素会尝试以 mp3 或 ogg来播放音频。如果失败，代码将回退尝试  元素。













2.雅虎播放器使用免费，提供一个小型的播放按钮。

（1）如需使用它，需要把这段 JavaScript 插入网页底部：

（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：

音乐1

音乐2

3.用超链接

以下代码指向 mp3 文件链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

音乐1

——

video视频播放设置

1.最好的解决方法

下例中使用了4种不同的视频格式。HTML 5 元素会尝试以 mp4、ogg、webm其中一种格式来播放视频。如果都失败，则回退到元素。

HTML5的source + object + embed。

2.优酷解决方案