HTML5
第一节:工具使用
1.1 概述
sublime是一个代码编辑器,可以编写HTML、php、js、css等文件
优点:
1、跨平台
2、扩展性强
3、体积小、运行速度快
4、支持编辑功能,可以在控制台查看输出
5、支持大量的插件
1.2 Markdown语法
1、标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
2、列表
无序列表:-+空格+文本
- 文本
有序列表:数字+.+空格+文本
1. 你好
2. 你好啊
3. as
3、图片和链接
![图片描述](图片链接地址)
![爱缪莎](D:\Java\CG\爱缪莎.jpg)
4、引用
>+空格
>
> 你好啊啊啊啊啊
>
5、粗体和斜体
**粗体**
*斜体*
6、代码引用
`这是一个代码段`
```代码名称:这是整段代码```
7、表格
|表头1|表头2|表头3|
|----|----|----|
|内容1|内容2|内容3|
|内容1|内容2|内容3|
第二节:浏览器介绍
2.1 认识网页
网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及flash等
2.2 常见浏览器介绍
浏览器是网页运行的平台,常见的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为5大浏览器
查看浏览器占有的市场份额:
网址:http://tongji.baidu.com/data/browser
2.3 浏览器内核
浏览器内核可分成两部分:渲染引擎(layout engineer或者 Rendering Engine)
和JS引擎
**渲染引擎:**它负责取得页面的内容(HTML、XML、图像等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。
**JS引擎:**解析Javascript
语言,执行javasscript
语言来实现网页的动态效果
分类:
1、Trident(IE内核)
国内很多的双核浏览器的其一核就是Trident,美其名曰“兼容模式”
2、Gecko(Firefox)
火狐浏览器采用该内核,Gecko特点是代码完全公开,因此,其开发程度很高,全世界的程序员都可以为其编写代码,增加功能。可惜这几年已经没落了,比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome
3、webkit(Safari)
Safari是苹果公司开发的浏览器,所用的浏览器内核名称是webkit
4、Chromium/Blink(Chrome)
谷歌浏览器以前用的是webkit内核,在2013年月3日,谷歌正式宣布放弃webkit内核
在Chromium项目中研发Blink渲染引擎(即浏览器核心),内置于Chrome浏览器之中。Blink其实是webkit的分支,大部分国产浏览器最新版都采用Brink内核
5、Presto(Opera)
Presto是挪威产浏览器Opera的“前任”内核,在最新的Opera浏览器早已将之抛弃投入谷歌的怀抱中了
移动端的浏览器内核主要说的是系统内置的内核
目前移动设备上常用的内核有webkit、blink、trident、gecko等,其中iphone和ipad等苹果os平台主要是webkit,Android4.4之前的Android系统浏览器内核是webkit,Anddroid4.4系统浏览器切换到了Chromium,内核是webkit的分支blink,Windows Phone8 系列浏览器内核是Trident
2.4 Web标准
web标准的好处
1、让web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度
web标准构成
web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括 **结构 (Structure)、表现(Presentation)和行为(Behavior)**三个方面
**结构标准:**结构用于对网页元素进行整理和分类,主要包括 XML和XHTML两个部分
- 结构:使内容更清晰,更具有逻辑性
**样式标准:**表现用于设置网页元素的板式、颜色、大小等外观样式,主要指的是CSS
- 表现:用于修饰内容的样式
**行为标准:**行为是指网页模型大的定义及交互的编写,主要包括DOM和ECMAScript(JS)两个部分
- 行为:内容的交互及操作效果
理想状态我们的源码:.html .css .js
第三节:HTML基本结构
3.1 HTML初识
HTML(Hyper Text Markup Language)中文译为:超文本标签语言。主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述
3.2 HTML骨架格式
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3.3 标签简介
- html标签:作用所有html中标签的一个根节点
- head标签:作用:用于存放title、meta、base、style、script、link,注意在head标签中我们必须要设置的标签是title
- title标签:作用:让页面拥有一个属于自己的标题
- body标签:作用:页面所在的主体部分,用于存放所有的html标签:p、h、a、b、u、i、s、em、del、ins、strong、img
第四节:HTML常用标签
4.1 HTML标签分类
在HTML页面中,常有’<>‘符号的元素被称为HTML标签,所谓的标签就是放在’<>'标签内表示某个功能的编码命令,也称为HTML标签或HTML元素
-
双标签
<标签名>内容</标签名>
该语法中"<标签名>“表示该标签的作用开始,一般称为"开始标签(start tag)”,"</标签名>“表示该标签的作用结束,一般称为"结束标签(end tag)”。
-
单标签
<标签名 />
单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。数量非常少
4.2 HTML标签关系
标签的相互关系分为两种:
- 嵌套关系(父子关系、包含关系)
- 并列关系(兄弟关系、姐妹关系)
4.3 文档类型<!DOCTYPE>
<!DOCTYPE html>
这句话就是告诉我们使用哪个html版本
<!DOCTYPE>
标签位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范,必须在开头处使用<!DOCTYPE>
标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析
注意:一些老网站可能用的还是老版本的文档类型比如XHTML之类的,但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5的文档类型就好了
4.4 字符集
<meta charset="UTF-8">
UTF-8:是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312
**GB2312:**简体中文,包括6763个汉字
**BIG5:**繁体中文,港澳台等用
**GBK:**包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8包含了全世界所有国家需要用到的字符,所以我们以后统统使用它,可以避免乱码情况
4.5 HTML标签
4.5.1 排版标签
排版标签主要和CSS搭配使用,显示网页结构的标签,是网页布局最常用的标签
标题标签(熟记)
单词缩写:head 头部、标题
为了使页面更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
标题标签语义:作为标题使用,并且依据重要性递减
其基本语法格式如下:
<hn> 标题文本 </hn>
注意:h1一般给logo使用
段落标签(熟记)
单词缩写:paragraph 段落
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
<p> 文本内容 </p>
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行
水平线标签(认识)
单词缩写:horizontal 横线
在网页中常常看到一些水平线将段落与段落之间分隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标记来完成。<hr />
就是创建横跨网页水平线的标记。其基本语法格式如下:
<hr />是单标记
在网页中显示默认样式的水平线
换行标签(熟记)
单词缩写:break 打断,换行
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br />
这时如果还像在word中直接敲回车键就不起作用了
div span标签(重点)
div span 是没有语义的,是我们网页布局主要的2个盒子
div:单词缩写:division 分隔,分区;其实有很多div来组合网页
span:跨度,跨距,范围
语法格式:
<div>这是头部</div>
<span>内容</span>
4.5.2 文本格式化标签(熟记)
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这是我们就需要用到HTML中的文本格式化标记,使文字以特殊的方式显示
标签 | 显示效果 |
---|---|
和 | 文字以粗体方式显示(XHTML推荐使用strong) |
和 | 文字以斜体方式显示(XHTML推荐使用em) |
文字以加删除线方式显示(XHTML推荐使用del) | |
和 | 文字以加下划线方式显示(XHTML不赞成使用u) |
标签属性
使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:
<标签名 属性1="属性值1" 属性2="属性值2" ...>内容</标签名>
在上面的语法中:
- 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
- 任何标签的属性都有默认值,省略该属性则取默认值
采取键值对的格式key="value"的格式
4.5.3 图像标签(重要)
HTML网页中任何元素的实现都需要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,其基本语法格式如下:
<img src="图像URL"/>
该语法中src属性用于指定图像文件的路径和文件名,它是img标签的必需属性
标记属性
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度(我们可以只修改宽度或者高度,其余的那个会等比例缩放) |
height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |
border | 数字 | 设置图像边框的宽度(不提倡使用) |
4.5.4 链接标签
在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可,其基本语法格式为:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
**href:**用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能
**target:**用于指定链接页面的打开方式,其值具有_self
和_blank
两种,其中_self
为默认值,_blank
为在新窗口中打开方式
注意:
- 外部链接 需要添加
http://
- 内部链接 直接链接内部页面名称即可
- 如果当时没有确定链接目标时,通常将链接标签的
href
属性值定义为"#(即href="#")",表示该链接暂时为一个空链接 - 不仅可以创建文本超链接,在页面中各种网页元素,如图像、表格、音频、8I4视频等都可以添加超链接
锚点定位(难点)
适用于较长的页面,我们可以点击某个关键词,从而迅速到达页面的指定 位置
通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两步:
- 使用
<a href="#id名">链接文本</a>
创建链接文本 - 使用对应的id名标注跳转目标的位置
base标签
base
可以设置整体链接的打开状态
在<head>
标签中加入<base .../>标签
例如:
<head>
<meta charset="utf-8">
<base target="_blank"/>
</head>
4.5.5 特殊字符标签(理解)
HTML为这些特殊字符准备了专门的替代代码
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 立方3(上标3) | ³ |
4.5.6 注释标签
在HTML中还有一种特殊的标签——注释标签。其基本格式如下:
<!-- 注释语句 -->
注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码就可以看到
注意:
- 多使用注释标签这是非常好的代码习惯
- 注释标签里面的内容是给程序员看的,浏览器是不执行的
- HTML注释的快捷键:
- 单行注释:ctrl+/
- 多行注释: ctrl+shift+/
路径
相对路径
- 图像文件和HTML文件位于同一文件夹,只需要输入图像文件的名称即可,如
<img src="logo.gif"/>
- 图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名,之间用"/"隔开,如
<img src="img/img01/logo.gif"/>
- 图像文件位于HTML文件的上一级文件夹,在文件名之前加入"…/",如果是上两级,则需要使用"…/…/",以此类推,如
<img src="../logo.gif"/>
绝对路径
"D:\web\img\logo.gif"
或完整的网络地址,例如:"http://www.itcase.cn/images/logo.gif"
4.5.7 列表标签
列表的最大特点就是:整齐、整洁、有序
无序列表ul(重点)
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意:
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的<li>
与</li>
之间相当于一个容器,可以容纳所有元素- 无序列表会带有自己样式属性,样式可以通过CSS更改
有序列表ol(了解)
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义。基本格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
自定义列表(理解)
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号,其基本语法为:
<dl>
<dt>定义标题</dt>
<dd>定义描述、解释</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
...
</dl>
4.5.8 表格table(会使用)
创建表格
在html网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含3对html标签,分别为<table></table>、<td></td>
,它们是创建表格的基本标签,缺一不可。
<table></table>
:用于定义一个表格<tr></tr>
:用于定义表格中的一行,必须嵌套在<table></table>
标签中,在<table></table>
中包含几对<tr></tr>
,就有几行表格<td></td>
:用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中,一对<tr></tr>
中包含几对<td></td>
,就表示该行中有多少列(或多少个单元格)
注意:
<tr></tr>
中只能嵌套<td></td>
<td></td>
标签,它就像一个容器,可以容纳所有的元素
表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框(默认border="0"无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
width | 设置表格的宽度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
表头标签
表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标记<th></th>
即可
表格结构(了解)
在使用表格进行布局时,可以将表格划分为头部、主页和页脚,具体如下所示:
<thead></thead>
:用于定义表格的头部,必须位于<table></table>
标签中,一般包含网页的logo和导航等头部信息
<tbody></tbody>
:用于定义表格的主体,位于<table></table>
标签中,一般包含网页中除头部和底部之外的其他内容
表格标题
表格的标题:caption
定义和用法:
caption元素定义表格标题
<table>
<caption>表格标题</caption>
</table>
caption标签必须紧随table标签之后,只能对每个表格定义一个标题,默认标题会被居中于表格之上
合并单元格
跨行合并:rowspan
跨列合并:colspan
4.5.9 表单标签(掌握)
在html中,一个完整的表单通常由表单控件(也称表单元素)、提示信息和表单域3个部分构成
**表单控件:**包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
**提示信息:**一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作
**表单域:**相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器
input控件(重点)
<input/>
标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type 属性之外,<input/>
标签还可以定义很多其他的属性标签,其常用属性如下表所示
属性 | 属性值 | 描述 |
---|---|---|
text | 单行文本输入框 | |
password | 密码输入框 | |
checkbox | 复选框 | |
radio | 单选按钮 | |
type | button | 普通按钮 |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域 | |
name | 由用户定义 | 空间的名称 |
value | 由用户定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
注意:
单选框如果是一组,我们通过相同的name值来实现
label标签(理解)
label标签为input元素定义标注(标签)
**作用:**用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点
for属性规定label与哪个表单元素绑定
-
用lable直接进行包裹input就可以了
<label><input type="radio" name="sex" id="male" value="male"/></label>
-
如果lable里面有多个表单,想要定位到某个表单,可以通过for id的格式来进行
<label for="male">Male <input type="radio" name="sex" id="male" value="male"/> <input type="radio" name="sex" id="female" value="female"/> </label>
textarea控件(文本域)
如果需要输入大量的信息,就需要用到<textarea></textarea>
标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式为:
<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
使用select控件定义下拉菜单的基本语法格式如下:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意:
<select></select>
中至少包含一对<option></option>
- 在option中定义selected="selected"时,当前项即为默认选中项
表单域
我们学了3个域:
- 文本域
textarea
留言的 - 文件域
input type="file"
上传文件的 - 表单域
form
收集表单控件信息,并且提交的
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中所有内容都会被提交给服务器。创建表单的基本语法格式如下:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
- action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址
- method用于设置表单数据的提交方式,其取值为get或post
- get 速度快,但会显示表单内的内容,不安全,不能做密码提交的
- post 速度较慢,但是不会显示表单内容
- name用于指定表单的名称,以区分同一个页面中的多个表单
**注意:**每个表单都应该有自己的表单域
第五节:HTML5新增标签和属性
文档类型设定
- document
- HTML:sublime 输入 html:4s
- XHTML:sublime 输入 html:xt
- HTML5:sublime 输入 html:5
<!DOCTYPE html>
字符设定
<meta http-equiv="charset" content="utf-8">
:HTML与XHTML建议这样去写<meta charset="utf-8">
:HTML5 的标签中建议这样去写
常用新标签
-
**header:**定义文档的页眉 头部
-
**nav:**定义导航链接的部分
-
**footer:**定义文档或节的页脚 底部
-
**article:**定义文章
-
**section:**定义文档中的节(section、区段)
-
**aside:**定义其所处内容之外的内容 侧边
-
**datalist:**标签定义选项列表。请与input元素配合使用该元素
<input type="text" value="输入名星" list="star"/><!-- input里面用list --> <datalist id="star"> <!-- datalist 里面用id来实现和input链接 --> <option>刘德华</option> <option>刘若英</option> <option>刘晓庆</option> <option>郭富城</option> <option>张学友</option> </datalist>
-
**fieldset:**元素可将表单内的相关元素分组,打包
-
与legend标签一起使用,legend标签内的内容作为顶格体
<fieldset> <legend> 用户登录 </legend> 用户名:<input type="text"><br/><br/> 密 码:<input type="password"> </fieldset>
-
新增的input type属性:
类型 | 使用示范 | 含义 |
---|---|---|
输入邮箱格式 | ||
tel | 输入手机号格式 | |
url | 输入url格式 | |
number | 输入数字格式 | |
search | 搜索框(体现语义化) | |
range | 自由拖动滑块 | |
time | 小时分钟 | |
date | 年月日 | |
datetime | 时间 | |
month | 月年 | |
week | 周 年 | |
color | 颜色 |
常用新属性
属性 | 用法 | 含义 |
---|---|---|
placeholder | 占位符,当用户输入的时候,里面的文字消失 | |
autofocus | 规定当前页面加载时input元素应该自动获得焦点 | |
multiple | 多文件上传 | |
autocomplete | 规定表单是否应该启用自动完成功能,有两个值,一个是on,一个是off;on代表记录已经输入的值(记录输入过的结果,并在下次输入时可供选择)注意:需要有提交按钮和name | |
required | 必填项,内容不能为空 | |
accesskey | 规定激活(使元素获得焦点)元素的快捷键,采用alt+字母的形式 |
多媒体标签
- **embed:**标签定义嵌入的内容
- **audio:**播放音频
- **video:**播放视频
多媒体 embed(会使用)
embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
插入网络视频:
<embed src="https://www.bilibili.com/video/BV1SE411w7pD" width="1000" height="1000" align="center">
多媒体 audio
HTML5通过标签来解决音频播放问题
<audio src="音频路径"></audio>
或者:
<audio>
<source src="音频路径"/>
</audio>
并且可以通过附加属性来更友好的控制音频播放:
**autoplay:**自动播放
**controls:**是否显示播放控件 没有此属性则不显示
**loop:**循环播放
当前,audio元素支持三种音频格式:
IE 9 | Firefox 3.5 | Oprea 10.5 | Chrome 3.0 | Safari 3.0 | |
---|---|---|---|---|---|
Ogg Vorbis | 支持 | 支持 | 支持 | ||
MP3 | 支持 | 支持 | 支持 | ||
Wav | 支持 | 支持 | 支持 |
为了浏览器兼容,我们需要做3种格式:
<audio controls autoplay>
<source src="music.mp3"/>
<source src="music.ogg"/>
<source src="music.wav"/>
您的浏览器不支持播放声音
</audio>
播放视频(video)
HTML5通过标签来解决视频播放的问题
<video src="视频地址"></video>
或者:
<video>
<source src="视频地址"/>
</video>
通过附加属性来更友好的控制视频播放:
**autoplay:**自动播放
**controls:**是否显示播放控件 没有此属性则不显示
**loop:**循环播放
**width:**设置播放窗口的宽度
**height:**设置播放窗口的高度
当前,video元素支持3种视频格式:
IE | Firefox | Oprea | Chrome | Safari | |
---|---|---|---|---|---|
Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
Wav | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
<vedio controls autoplay>
<source src="vedio.mp4"/>
<source src="vedio.ogg"/>
<source src="vedio.wav"/>
您的浏览器不支持播放视频
</vedio>