HTML5学习笔记

合集下载

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。

canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。

浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。

⼆、基本⽅法绘图环境：语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。

当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。

【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。

绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制：⽅法⼀：<script src="canvas.js"></script> ⽅法⼆：<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤：通过id来捕获canvas元素创建 context 对象指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。

HTML5学习笔记

1.HTML5简介什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。

自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。

然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是W3C 与WHATWG 合作的结果。

为 HTML5 建立的一些规则：•新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

•减少对外部插件的需求（比如 Flash）•更优秀的错误处理•更多取代脚本的标记•HTML5 应该独立于设备•开发进程应对公众透明新特性HTML5 中的一些有趣的新特性：•用于绘画的 canvas 元素•用于媒介回放的 video 和 audio 元素•对本地离线存储的更好的支持•新的特殊内容元素，比如 article、footer、header、nav、section •新的表单控件，比如 calendar、date、time、email、url、search 2.HTML5视频视频格式当前，video 元素支持三种视频格式：实例<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>3.HTML5音频音频格式当前，audio 元素支持三种音频格式：实例<audio controls="controls"><source src="song.ogg" type="audio/ogg"><source src="song.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>4.HTML画布（Canvas）HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

《html5从入门到精通》读书笔记（三）

《html5从⼊门到精通》读书笔记（三）标签　描述45 <form>定义表单。

4　5 <h1> to <h6>定义标题1到标题6。

45 <head>定义关于⽂档的信息，45 <header>定义section或page的页眉。

5 <hgroup>定义有关⽂档中的section的信息。

5 <hr>定义⽔平线。

45 <html>定义html⽂档。

45 <i>定义斜体⽂本。

45 <iframe>定义⾏内的⼦窗⼝（框架）。

45 <img>定义图像、45 <input>定义输⼊域。

45 <ins>定义插⼊⽂本。

45 <keygen>定义⽣成密钥。

5 <kbd>定义键盘⽂本。

45 <label>定义表单空间的标注。

45 <legend>定义fieldset中的标题。

45 <li>定义列表的项⽬。

45 <link>定义资源引⽤。

45 <map>定义图像映射。

45 <mark>定义有记号的⽂本。

5 <menu>定义菜单列表。

45 <meta>定义元信息。

45 <meter>定义预定义范围内的度量。

5 <nav>定义导航链接。

5 <object>定义嵌⼊对象。

45 <ol>定义有序列表。

45 <optgroup>定义选项组。

45 <option>定义下拉列表中的选项。

45 <output>定义输出的⼀些类型。

5 <p>定义段落。

45 <param>定义对象参数，应⽤在<object>⾥⾯、45 <pre>定义预格式化⽂本。

HTML5培训应该学习的知识

HTML5培训应该学习的知识近年来HTML5培训开发非常的火爆，相比较其他编程语言，HTML5开发还是比较简单且受欢迎的，本篇文章小编就带大家看一下HTML5培训应该学习的知识有哪些。

1.HTMLHTML是网页最基本的元素，主要控制网页的结构、字体等，最初发明网页时只有HTML语言，并没有CSS语言，HTML常用的标签包括HTML结构、HTML表格、列表等。

2.CSS随着时代的发展，万恶的IE6终于退市了，市场份额占比渐渐少了，目前还有极少量的公司要求兼容IE6浏览器，但，渐渐的这些兼容需求会逐渐消失……对于IE6，小编的建议是，不要太纠结于每个bug，主要原因在于，IE6的问题通常源于两种原因，其一在于浏览器自身的问题，其二则在于容错性相对较差。

对于第一方面原因引发的问题，个人觉得没有什么太大的必要去研究了，而对于第二类问题，使IE6能够成为辅助我们检查自己代码质量的工具。

3.HTML5HTML5新标签包括header、nav、article、section、aside、footer，还是比较容易掌握的，但与CSS3结合起来使用，才能体现其强大。

4.CSS3CSS3在CSS基础上增加了不少属性，除了常用的属性(如圆角边框，阴影，过渡，变形，动画)之外，还有图像边框，多色彩边框，倒影，蒙版，跑马灯，渐变，分栏，弹性布局，滤镜等等。

但由于CSS3还比较新，因此，各个浏览器的兼容性也需要花费很大精力研究一番。

5.JS其实，JS中的知识是最多的，最基础的是原生js，还需要学习著名的node.js 与angular js等，js的框架比较多，从层出不穷的各种标题就可以发现，什么二十种优秀的图表制图框架，十种绚丽的大图滚动插件，八个值得你拥有的表单验证插件等。

但掌握框架后，确实可以给你的工作带来很多便利，善用框架，让开发变得更容易。

在HTML5培训中，基础知识大概涵盖这几类。

除了以上基本知识点以外，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理以及存在的各种Bug。

HTML5学习笔记--------》HTML5概要与新增标签！

HTML5学习笔记--------》HTML5概要与新增标签！⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要，特别是移动互联⽹。

为了增强浏览器功能Flash被⼴泛使⽤，但安全与稳定堪忧，不适合在移动端使⽤（耗电、触摸、不开放）。

HTML5增强了浏览器的原⽣功能，符合HTML5规范的浏览器功能将更加强⼤，减少了Web应⽤对插件的依赖，让⽤户体验更好，让开发更加⽅便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很⼩，这并不符合⼀个好产品的演进规则。

1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。

它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强⽹络应⽤的标准集。

HTML5是HTML最新版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。

⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联⽹应⽤迅速发展的时候，使⽹络标准达到匹配当代的⽹络需求。

1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5，但是各个浏览器⽀持的⽅式以及语法有所差异性。

⽀持Html5的浏览器包括Firefox（⽕狐浏览器），IE9 及其更⾼版本，Chrome（⾕歌浏览器），Safari，Opera等现代浏览器。

⽀持得分：如果想了解更多请看本⽂的兼容性那⼀节的内容。

PC端（总分555分）：平板（总分555分）：移动（总分555分）：1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现（CSS3）1.4.1. 语义特性（Class：Semantic）HTML5赋予⽹页更好的意义和结构。

HTML5自学笔记

HTML/HTML5自学笔记Html 概述1、动态网页：PHP、ASP、JSP等，存放于服务器，执行数据操作生成HTML页面后发至浏览器执行。

2、静态网页：HTML标签及页面包含的JS代码，运行于客户端浏览器。

3、HTML标签对大小写不敏感4、从HTML4.0.1到XHTML到HTML5并非革命性的升级，而是规范向习惯的妥协。

主要有以下优势：a)解决跨浏览器问题，各浏览器厂商的支持b)部分替代了原来的JavaScript，通过增加一些属性即可完成原来JS的功能。

如：HTML5以前：document.getElementById(“price”).focus();HTML5以后：<input type=”text” name=”price” autofocus/>c)更明确的语义支持，加入了新的nav、article、section、aside、footer、time、marker等标记d)增强了web应用程序的功能，比如可以上传多个文件。

e)兼容性：在老版本的浏览器上也可以正常运行f)实用性：内部没有复杂的功能，仅封装了常用的简单功能5、HTML5的基本结构和语法变化a)页面最开始：<!DOCTYPE html>b)指定页面字符集：<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>c)不能在其间插入内容的标签序列：<html><head>和</head><body>和</body></html>；这几个标签可以完全省略不写。

d)允许省略属性值的属性：例如：checked checked=”checked”。

如果没有该属性则表明该值为false。

checked/readonly/disabled/selected/multiple/defer/ismap/nohref/noshade/nowrap/noresize。

HTML5-学习笔记

HTML5在HTML5中不区分关键字大小写，引号也不区分是单引号还是双引号。

第一章1.一旦你了解了HTML5,你就会改变审视web的方式虽然现在普遍使用的是HTML4和CSS2，但还可以做得更好！可以重组我们代码结构并能让我们的页面代码更富有语义化特性，还可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。

如今，HTML5和CSS3的技术和应用环境已经日趋成熟，它们将书写Web前端领域的新历史HTML5将成为新一代的Web技术标准，必定会改变整个Web应用领域的游戏规则，它在给新的Web应用带来无限可能性的同时，还能带来更快、更好、更炫的用户体验。

HTML5和CSS3已经成为全球各大互联网巨头必争之地2.在移动平台上，因为支持的很好，HTML5先行了一步，已经成为了iOS、Windows Phone 和Android移动互联网的唯一选择。

放眼望去，仿佛互联网充满着HTML5千秋万代一统江湖的高呼3.HTML4+CSS2与HTML5+CSS3区别互联网发展越来越快，有些东西总会要被取代，HTML4+CSS2将渐渐退出舞台，而HTML5+CSS3将取而代之HTML5规范是2004年新成立的WHATWG工作组创立的；2006年W3C加入HTML，并于2008年发布了HTML5工作草案，2009年，XHTML2工作组停运；2010年HTML5开始解决实际问题，渐渐的各大浏览器厂家开始升自己的产品以支持HTML5+CSS3，HTML5得到了持续的完善，2012年HTML5完成规范编写工作。

HTML5以HTML4为基础，对HTML4进行了大量的修改。

学习HTML5则需要掌握HTML5与HTML4在基本语法上有什么区别；了解在HTML5中新增了哪些元素和属性，删除了哪些HTML4中的元素和属性，为什么要删除这些元素，用什么元素或方法来取代这些被删除的元素和属性；还需要掌握什么是全局属性；4.第二章HTML5语法的改变HTML5的一个很大的目标就是提高浏览器之间的兼容性，需要有一个统一的标准，因些HTML5重新定义了一套在现有HTML4基础上修改而来的语法，使它运行在知名浏览器中都能够符合这个通用标准。

HTML5笔记

HTML笔记一、HTML常用元素与属性1.HTML保留的常用元素1.1基本元素：HTML注释<html>：HTML5文档根元素<head>：HTML5文档页面头部分，可省略<title>：HTML5文档页面标题<body>：HTML5文档页面主体部分<style>：引入样式定义，参考CSS章节介绍<h1>到<h6>：标题一到标题六<p>：定义段落<br>：换行，该标签可指定id、class、style等核心属性<hr>：定义水平线<div>：定义文档中的节，能包含<p>、<span>等大量内容，所以会被大量使用<span>：与<div>相似，但节不会换行注：<body>、<p>、<hr>、<div>、<span>该标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.2文本格式化元素<b>：粗体文本<i>：斜体文本<em>：强调文本，效果与斜体类似<strong>：粗体文本，与<b>相似<small>：小号字体文本<sup>：上标文本<sub>：下标文本<bdo>：文本显示方向，可指定dir属性，属性值只能是ltr，rtl注：以上标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.3语义相关元素<abbr>：用于表示一个缩写，可指定title属性：表示缩写的全称<address>：用于表示一个地址，以斜体字显示<blockquote>：用于定义一段长的引用文本，浏览器会以缩进的方式显示这段文本，可指定cite属性：指定该引用文本所引用的网址URL<q>：用于定义一段短的引用文本<cite>：用于表示作品的标题，以斜体字显示<code>：表示一段计算机代码<dfn>：用于定义一个专业术语，以斜体字显示<del>：定义文档中被删除文本，以中画线显示文本<ins>：定义文档中插入的文本，以下画线显示文本<pre>：表示该元素所包含的文本已经进行了“预格式化”，也就是所包含的空格、回车和其他格式都会被保留下来，但浏览器会处理大部分HTML元素<samp>：用于定义示范文本内容<kbd>：用于定义键盘文本<var>：用于表示一个变量，以斜体字显示1.4超链接和锚点<a…/>：定义超链接，可指定属性href：超链接所关联的另一资源，target：指定哪个框架来装载这个内容，属性值有_self、_blank、_top、_parent，media：指定目标URL所引用的媒体类型，默认all1.5列表相关元素<ul>：定义无序列表，该元素只能包含<li…/>子元素<ol>：定义有序列表，该元素只能包含<li…/>子元素<li>：定义列表项目，该元素可包含与<div>类似的内容<dl>：用于定义列表，该元素只能包含<dt…/>、<dd…/>子元素<dt>：定义标题列表项<dd>：定义普通列表项，该元素可包含与<div>类似的内容1.6 图像相关元素<img …/>：定义图像，可指定属性src ：图片路径，alt ：指定一段文本作为图片的提示信息，usemap ：让图片使用图片映射，属性值为#mapname<map>：定义图片映射，可包含多个<area …/>，不同区域链接不同URL<area>：定义图片映射内部区域，可指定属性shape ：区域形状，属性值有rect 、circle 、ploy ，coords ：多个坐标确定区域位置，href ：区域所链接资源，target ：指定哪个框架来装载这个内容，media ：指定目标URL 所引用的媒体类型1.7 表格相关元素<table>：定义表格 <caption>：表格标题<tr>：表格行，只包含<td>、<th><td>：单元格，属性colspan ：跨多少列，rowspan ：跨多少行 <th>：表格页眉单元格，与<td>用法一样 <tbody>：表格主体，只包含<tr>元素 <thead>：表格头，与<tbody>相似 <tfoot>：表格脚，与<tbody>相似2. HTML5新增通用属性2.1 contentEditable 属性可把<table>、<div>等元素变成可编辑状态，如果一个HTML 元素的父元素是可编辑的，那么默认也是可编辑的，除非显示指定contentEditable=“false ”2.2 designMode属性当designMode=’on ’时，页面上所有可支持designMode 属性的元素都变成可编辑状态2.3 hidden 属性为所有元素都提供一个hidden 属性，一旦元素的hidden 属性设为true ，则隐藏该元素，且浏览器不保留所占用的空间。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML5标签含义说明：蓝色——html标签黑色——解释橙色——特殊效果的实现绿色——例子粉色——属性Structure<html><body><h2><h3><h4><p> 段<b> black黑体<i> italics斜体<sup> 上角标<sub> 下角标<br /> 换行<hr /> 中间隔条横线Text<strong>强调重要影响（黑体）<em>强调语义发生了微妙的变化（斜体）<blockquote>整段引用<q>较短的引用<abbr>缩略词，鼠标经过时有全文提示<cite> 例证<dfn> definition解释新术语Safari and Chrome do not change its appearance. <address>蓝体带下划线，提供一个地址链接<ins>底下带下划线，说明该部分是后加上去的<del>在该部分中央划横，说明该部分被去掉了<s> 在该部分中央划横，说明这部分不再准确了（无关了）Lists<ol> ordered list 创建一个有序列表（每项前边是12345）<ul> unordered list 无序列表（每项前面是黑点，第二级是空心点）<li>列表中的内容（一行）<dl> definition list 定义列表<dt> term being defined 说明这个词是被定义的<dd>the definition 定义的内容Links<a> 链接标签mailto: <a href="mailto:jon@">Email Jon</a> 邮件链接target: <a href="" target="_blank">在新一页面打开同一页面内跳转：id与#后面的对应Images<img><img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is similar in size to the domestic cat." />这个标签不需要闭合src source,告诉浏览器到哪里找这张图片alt 如果你看不到这张图片，网页显示一X后跟文字说明title类似abbr，鼠标悬停时有文字提示height 、width 图片的高和宽，以像素为单位align<p><img src="images/bird.gif" alt="Bird" width="100" height="100"align="left" />对齐方式，left左right右top上middle中button下<p>和<img>的顺序不同，显示的结果也不同align效果：<figure> 将图片和说明联系在一起<figcaption>html5新加，为了使网页作者能为图片添加说明Tables<table>用于创建一个网格<tr> 一行<td> 一个单元格<th>和<td>类似，黑粗体较醒目colspan<td colspan="2">Geography</td>横向跨过几列rowspan <td rowspan="2">Movie</td>纵向跨过几行<thead>表头<tbody>表体<tfoot>表尾如果有个列表的长度大于屏幕，那么只有中间内容滚动，表头和表尾不动width 表格宽度cellpadding cellpadding attribute to add space inside each cell of the table cellspacing 单元格间距border 边框宽度bgcolor background color 背景色Forms<form>控件要包含在<form>中，必须带动作属性、method、idaction该属性值是服务器上处理动作的URLmethod Forms can be sent using one of two methods: get or post. get相当于只读，post 相当于读写，当较短且不更改数据库是用get，当涉及密码等敏感信息或较长或更改数据库时用postid The value is used to identify the form distinctly from other elements on the page<input> 用来创建几种不同的控件，type属性决定到底是什么类型的控件创建一个单行的输入控件type="text"name 让服务器知道该怎样处理该数据size不怎么用了maxlength 输入的最大长度创建一个密码输入控件type="password"namesizemaxlength创建一个ratio button单选按钮type="radio"namevaluechacked 用的时候checked="checked"创建一个chackbox复选按钮type="checkbox"namevaluechacked创建一个文件选择器type="file"创建一个提交按钮type="submit"namevalue创建带图片的提交按钮type="image"创建一个电子邮件输入框，自动检查是否符合格式type="email"创建一个URL输入框，自动检查是否为有效链接type="url"创建一个搜索框type="search"placeholder 占位符创建一个时间选框type="date"创建一个不可见项，例如用来获取用户在哪一页type="hidden"<select> 创建下拉选单name<textarea> 创建一个多行输入控件<label> 标签for<fieldset> 创建一组<legend>一个框，对组的说明Extra Markup 评论<div>成组<span> 内联元素，可以用CSS编辑样式<iframe> 页面内的一个框，像谷歌地图src 链接地址height 高width 宽scrolling 是否有scrollbarframeborder 是否有边框（html5不支持）seamless html5新增<meta>放在<head>中标记一些属性，也许你认为这些代码可有可无。

其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。

description 对页面内容的描述keywords 关键词robots 搜索引擎能否将本页作为搜索结果author 作者pragma 防止浏览器缓存expires 何时禁用（有效期）Flash，Video&Audio<video> 添加一个视频src 视频的路径poster 在加载视频播放之前显示的图片width、height 宽、高controls 启用浏览器自身的播放设置autoplay自动播放loop循环播放preload预加载none在用户点击播放之前不下载视频auto在页面载入过程中就开始加载视频metadata 元数据（Metadata）是定义数据的数据，类似平常使用的度量单位The browser should just collect information such as the size, first frame, tracklist, and duration.<source> 在<video>标签内部用<source>src 资源地址type 资源的类型codecs The codec that was used to encode the video is supplied within the type attribute.<audio> 添加一个音频src 参考之前的controlsautoplaypreloadloop<source>srctype参考书目：《HTML&CSS Design and Build Websites》。