前端小白自学前端有一段时间了，终于把基础部分看完了，感觉前端确实很琐碎，需要记忆的东西比较多，为了方便自己以后温习查找，把一些重要的知识点详细记录下来，细节部分还是查手册吧。。。
目录
&&最前面&&
1、HTML：页面结构，页面内容的载体，内容是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2、CSS：页面表现：就像网页的外衣，例如元素大小、颜色、位置、隐藏或显示、部分动画效果。所有这些用来改变内容外观的东西称之为表现。
3、JavaScript：页面行为：实现网页上的特效效果，部分动画效果、页面与用户的交互、页面功能，如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变，幻灯片制作，实时插入网页内容等
一、HTML基础知识点
1、html基本结构
1.1基本机构
一个html的基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>第一行是文档声明；
第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用；
“<head>”标签和“<body>”标签是它的第一层子元素；
“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏；
“<body>”内编写网页上显示的内容；
head标签里面的内容可以很多，CSS和JS文件的顺序都有讲究，比如想用自己编写的CSS文件覆盖框架自带的文件，必须写在后面，后面会覆盖前面的。
其中meta 标签也很关键，可以设置视口、媒体查询相关等内容，详见XXX
此版本文档用sublime text创建方法： meta:vp + tab键
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">1.2 html文档类型
目前常用的两种文档类型是xhtml 1.0和html5
-
xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>-
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 </title>
</head>
<body>
</body>
</html>-
两种文档的区别
1、文档声明和编码声明不同
2、html5新增了标签元素以及元素属性（详见XXXX）
1.3 html文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来("")
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
1.4 注释
<!-- 这是一段注释-->2、html常用标签
2.1 标题-----h标签
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>2.2 段落----p标签
<p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
</p>2.3 换行----br标签
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行，代码如下：
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>2.4 html字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体；
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体；常用的字符实体包括：
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| © | 版权（copyright） | © | © |
2.5 html块、含样式的标签
- html块
1、div标签 块元素，表示一块内容，没有具体的语义。
2、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
- 含样式和语义的标签
1、em标签 行内元素，表示语气中的强调词
2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
4、strong标签 行内元素，表示非常重要的内容
- 语义化的标签
语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
2.6 图像
<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
<!--图像标签的基本语法-->
<img src=“图片地址”alt=“图像无法显示时的替代文字”title=“鼠标悬停文字”width=“图片宽度”height=“图片高度”/>2.7 html链接 ---a标签
<a>标签可以在网页上定义一个链接地址，通过href属性定义跳转的地址(网页或者URL，可带参数)，通过title属性定义鼠标悬停时弹出的提示文字框。
1、基本用法
<a href=“链接的地址”target=“从哪个窗口打开”>链接的文字或图像说明</a>
2、图像链接
<a href=“链接的地址”target=“从哪个窗口打开”><img src=“路径”alt=“图片无法显示时替代的文字”</a>
3、文本链接 <a href=“链接的地址”target=“从哪个窗口打开”>文字说明</a>
4、页面间链接（链接到同一个页面的不同位置）
锚链接
<a name=“锚点”>目标</a>
<a href=“#锚点”>链接内容</a>
5、功能性链接 （手机号码，电子邮件，qq MSN）
6、空链接
当不知道链接地址值，一般调整到页面顶部，前面两种都是，第三种是javascrip不做任何操作
<a href="#" >标题1</a>
<a href="" >标题2</a>
<a href="javascrip:;>缺省值</a>
返回顶部可以使用空链接，详见xxxxx
功能性链接举例，一般用在移动端比较多
<a href="tel:13812345678">打电话</a>
如果是发送短信：
<a href="sms:13812345678">发短信</a>
还有一种是发送邮件：
<a href="Mailto:＊＊@＊＊＊.com" target="_blank">＊＊@＊＊＊.com</a>
锚链接例子：
<html>
<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
<a href="#C5">查看 Chapter 5。</a>
<a href="#C6">查看 Chapter 6。</a>
<a href="#C7">查看 Chapter 7。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<!--<a> 定义锚。-->
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C5">Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<!-- 这种貌似不行 -->
<h2 name="C6">Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C7">Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
| 标签 | 描述 |
|---|---|
| <a> | 定义锚。 |
2.8 a标签的 target 属性扩展
上面已经讲到<a> 标签中target 属性是指"从哪个页面打开？"，target的值框架名称或者保留字段。
参见http://www.w3school.com.cn/tags/att_a_target.asp。
打开新窗口
<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html" target="view_window">Preface</a></li>
<li><a href="chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="chap3.html" target="view_window">Chapter 3</a></li>
</ul>当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 "view_window"，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 "view_window" 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。
在框架中打开窗口
不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：
<frameset cols="100,*">
<frame src="toc.html">
<frame src="pref.html" name="view_frame">
</frameset> 当浏览器最初显示这两个框架的时候，左边这个框架包含目录，右边这个框架包含前言。
这是 "toc.html" 的源代码：
<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html" target="view_frame">Preface</a></li>
<li><a href="chap1.html" target="view_frame">Chapter 1</a></li>
<li><a href="chap2.html" target="view_frame">Chapter 2</a></li>
<li><a href="chap3.html" target="view_frame">Chapter 3</a></li>
</ul>请注意，在文档 "toc.html" 中，每个链接的目标都是 "view_frame"，也就是右边的框架。
当用户从左边框架中的目录中选择一个链接时，浏览器会将这个关联的文档载入并显示在右边这个 "view_frame" 框架中。当其他链接被选中时，右边这个框架中的内容也会发生变化，而左边这个框架始终保持不变。
关于frameset参见http://www.w3school.com.cn/tags/tag_frameset.asp，h5已经不支持了，特别注意<frameset>与<body>属于平级，<frameset>的框架里面不能出现<body>。比较老的布局使用这种方式。
特殊的目标
有 4 个保留的目标名称用作特殊的文档重定向操作：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
语法
<a target="value">属性值
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
2.9 列表
- 有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
- 无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表,包括菜单栏、导航栏、图片列表等。
- 定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>这种列表实际开发也用的少。
2.10 表格与传统布局
table常用标签
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
<table border="1" width="600" height="300" cellspacing="0" cellpadding="0">
<tr valign="bottom">
<th>序号</th>
<th>名称</th>
<th>价格</th>
</tr>
<tr align="center">
<td align="left">1</td>
<td>苹果</td>
<td>￥8.00</td>
</tr>
<tr>
<td>2</td>
<td>荔枝</td>
<td>￥5.00</td>
</tr>
<tr>
<td>3</td>
<td>桔子</td>
<td>￥4.00</td>
</tr>
</table>
<table border=1 width="800" height=300 cellspacing="0" cellpadding="0">
<tr>
<th colspan="5" align="left">基本情况</th>
</tr>
<tr>
<td width="18%" align="center">姓名</td>
<td width="18%"></td>
<td width="18%"></td>
<td width="18%"></td>
<td width="28%" rowspan="3" align="center"><img src="images/person.png" alt="人物"></td>
</tr>
<tr>
<td align="center">生日</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">籍贯</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
1、快速制作用于演示的html页面
2、商业推广EDM制作(广告邮件)
现在用传统布局已经很少，了解下就行了，但是table应用还是挺多的，必须掌握。
2.11 表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入，具体实现及注释可参照以下代码：
<!-- form定义一个表单区域,action属性定义表单数据提交的地址，method属性定义提交的方式。post和get
get通过url传输数据，post通过http报文传输数据，较为安全 -->
<form action="http://www.baidu.com" method="get">
<!-- label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框 ；
同时还有激活文字的功能，表现为点击文字可以选择或者输入，一般用在多选里面，旨在提高用户体验 -->
<div>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" autofocus placeholder="请输入用户名">
</div>
<br />
<!-- lable for没有指定下面的ID时，就没有激活文字选择的功能 -->
<label for="">手机号：</label>
<input type="text" name="" id="phone" value="1380000000">
<!-- value就是该输入框的值，实际开发中由后台传入 -->
<br>
<br>
<!-- input类型为password定义了一个密码输入框 -->
<div>
<label for="pwd">密 码：</label>
<input type="password" name="pwd" id="pwd">
</div>
<br />
<!-- input类型为radio定义了单选框 -->
<div>
<label>性别：</label>
<!-- 这里的value 一般是通过name传到后台的 -->
<input type="radio" name="gender" id="male" value="0" checked="checked"> <label for="male">男</label>
<!-- checked="checked" 该选项被默认选中 -->
<input type="radio" name="gender" id="female" value="1"> <label for="female">女</label>
</div>
<br />
<!-- input类型为checkbox定义了多选框 -->
<div>
<!-- 这里的value 一般是通过name传到后台的 -->
<label>爱好：</label>
<input type="checkbox" name="like" value="sing">唱歌
<!-- checked="checked" 该选项被默认选中 -->
<input type="checkbox" name="like" value="dance" checked="checked">跳舞
<input type="checkbox" name="like" value="swiming" checked="checked">游泳
</div>
<br />
<!-- input类型为file定义上传照片或文件等资源 -->
<div>
<label>照片：</label>
<input type="file" name="persion_pic">
</div>
<br />
<!-- textarea定义多行文本输入 -->
<div>
<label>个人说明：</label>
<textarea name="about"></textarea>
</div>
<br />
<!-- select定义下拉列表单选 -->
<div>
<label>籍贯:</label>
<select name="site" >
<!-- selected="selected"默认被选中 -->
<option value="0" >北京</option>
<option value="1" selected="selected">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</div>
<br />
<!-- select定义下拉列表多选 -->
<div>
<label>国家:</label>
<!-- 在<select>标签中设置multiple="multiple"属性，
就可以实现多选功能，进行多选时按下Ctrl键同时进行单击，可以选择多个选项 -->
<select name="contuny" multiple="multiple">
<option value="0" >中国</option>
<option value="1" selected="selected">美国</option>
<option value="2" selected="selected">日本</option>
<option value="3">俄罗斯</option>
</select>
</div>
<br />
<div>
<!-- input类型为hidden定义隐藏数据，页面不显示但可以通过http协议传输数据 -->
<input type="hidden" name="hid" value="20000">
<!-- input类型为submit定义提交按钮 -->
<input type="submit" name="" value="提交">
<!-- input类型为image 定义按钮,图片控件代替submit按钮提交，一般会导致提交两次，不建议使用 -->
<input type="image" name="" src="images/icon.jpg">
<!-- input类型为reset定义重置按钮 -->
<input type="reset" name="" value="重置">
<!-- input类型为button 定义按钮 -->
<input type="button" name="" value="按钮">
</form>以上内容基本包括了常用的表单，特别注意以下几点：
1、label 中 for="id"激活文字选择；
2、input类型为hidden在实际开发中用来传输一些ID值之类的，不想让用户看到；
3、input类型为submit的提交一般会导致两次提交，不建议使用，可以用图片类型代替，或者用button按钮做提交；
4、id唯一，可以结合CSS作为ID选择器使用，也可以作为后台传输数据的键。所以必须唯一；
5、id名称一般与name名称一样；
6、form中action表示提交到哪里， method表示表单提交的方法，包括get和post,而且有很多不同，详见XXXX；
7、最明显的区别是get通过url传输数据，post通过http报文传输数据，较为安全
这是get提交后的URL，提交到百度后，表单中的值以?name=value&name=value的形式提交
https://www.baidu.com/?username=21321&pwd=123&persion_pic=&about=123&site=0&hid=20000&x=7&y=6改成post方法试试，打开调试工具 network--headers,提交之后看到报文里面有数据。
8、表单数据如何保留上一次填写的值？详见XXXX
9、表单如何验证？详见XXXX
2.12、HTML5 新增表单控件
新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<input type=“number”name=“”min=“最小值”max=“最大值”step=“数字间隔”/><br><br>
<input type=“range”name=“”min=“最小值”max=“最大值”step=“数字间隔”/><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词 设置是否有联想下拉，一般设置为“off”，将它关掉(做搜索时候用到)
2.13 内嵌结构--iframe
<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>内嵌框架与a标签配合使用
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：
<a href="http://www.baidu.com" target="myframe">百度网</a>
<a href="07列表.html" target="myframe">页面二</a>
<a href="03.html" target="myframe">页面三</a>
<br>
<!-- <iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条.
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中,关键点是iframe中定义name,a标签中target属性等于name.相当于多个iframe 共有一块区域 -->
<iframe src="http://www.baidu.com" frameborder="0" scrolling="no" width="1200" height="600" name="myframe"></iframe>实际开发中一般用来嵌入外部网站的内容。
2.14 HTML5新结构标签
h5新增的主要语义化标签如下：
1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚
2.15 HTML5 音频和视频
html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法。
audio标签
支持格式：ogg、wav、mp3
对应属性：
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音
举例：
<audio src="source/audio.mp3" autoplay controls loop preload></audio>
<!-- 或者用如下方式： -->
<audio autoplay controls loop preload width="600" height="400">
<source src="source/audio.mp3" type="">
<source src="source/audio02.wav" type="">
</audio>
source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。
video标签
支持格式：ogg、mp4、webM
属性：
1、width
2、height
3、Poster //封面
可选第三方播放器：
1、cyberplayer
2、tencentPlayer
3、youkuplayer
暂时就总结到这里吧，接下来总结CSS部分内容。
4052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
