A095_Html5入门

1.内容介绍
2.知识回顾
- 2.1.学习过哪些前端的内容
- 2.2.问题分析
- 2.3.小结
3.HTML5
- 3.1.什么是HTML5
- 3.2.为什么要学习HTML5
- 3.3.新功能
- 3.4.兼容性
- 3.5.文档结构
- 3.6.语义标签
- 3.7.表单增强
- - 3.7.1.新的Input类型
  - 3.7.2.新的表单元素
  - 3.7.3.表单属性
- 3.8.Canvas
- - 3.8.1.Canvas元素
  - 3.8.2.获取绘制上下文对象
  - 3.8.3.直线
  - 3.8.4.矩形
  - 3.8.5.圆形
- 3.9.音频和视频
- - 3.9.1.视频播放
  - 3.9.2.音频播放
- 3.10.Web存储
- - 3.10.1.sessionStorage
  - 3.10.2.localStorage
- 3.11.小结
4.课程总结
- 4.1.重点
- 4.2.难点
- 4.3.如何掌握？
- 4.4.排错技巧（技巧）
5.课后练习
6.面试题
7.扩展知识或课外阅读推荐（可选）
- 7.1.扩展知识
- 7.2.课外阅读

1.内容介绍

1. Hbuilder入门;(掌握)
2. HTML5;（掌握）

2.知识回顾

2.1.学习过哪些前端的内容

传统:Html+css+js+ajax+jquery+js(高级)+bootstrap+jquery easyUI+html5
Vue技术栈: nodejs,npm,webpack,vue,vuecli,elmentui

2.2.问题分析

① 前端开发都用过什么软件？
记事本、Eclipse、EditPlus、Dreamweaver,Hbuilder、vscode,WebStorm
其中，前端开发利器Hbuilder应用面非常广。
② Hbuilder安装与入门
Hbuider是一个绿色工具包，解压缩就完成安装。

一直打不开，在任务管理器中，结束hbuider的进程，重新启动就ok。
打开软件后，可以创建项目、创建html，css，javascript，创建目录

常用快捷键
L Enter 导入css
S 2 Enter导入js
启动html
选择各种浏览器，如果要想在当前浏览器中运行，ctrl+r:

快速生成代码：如输入table 可以快速生成表格代码
快速导入css：如输入link可快速导入css
快速导入js:如输入secript可快速导入js

2.3.小结

把java项目导入Hbuider中，两个工具引用的是同一套代码，Hbuider中修改以后，eclipse中自然就修改了。

3.HTML5

3.1.什么是HTML5

HTML5是新一代的HTML，是HTML中的最新版本，目前是前端的前沿技术。

3.2.为什么要学习HTML5

1、强化了Web网页表现能力。除了可以绘制图形外，还可以直接在网页中播放视频和音频（HTML4中需要flash插件，才能播放视频和音频，关键是flash容易崩溃，而且漏洞很多）；
2、支持本地数据库等Web应用的能力；
3、HTML5容错性更很高（例如：标签未正常的关闭、属性的引号问题等），HTML5是向上兼容的，这保证使用HTML5也可以在低版本浏览器中正常显示。
4、HTML5是近十年来Web标准发展而生的产物。和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台。
5、HTML5对移动端兼容性非常好，所以手机网站开发必备。

3.3.新功能

新元素(新标签)
新属性
完全支持 CSS3
视频和音频
2D/3D 制图
本地存储
本地 SQL 数据
Web应用

3.4.兼容性

浏览器兼容HTML5评分网站：http://html5test.com/，分数越高，兼容越好，但是手机浏览器中对HTML5兼容良好，因为手机中没有IE浏览器。

注意点：
现代的主流浏览器都支持 HTML5，非主流不支持（IE6,7,8）。
此外，所有浏览器包括旧的和最新的，对无法识别的元素会作为行内元素自动处理。
HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

实例
header, section, footer, aside, nav, main, article, figure {
display: block; /* 块级元素 */
}

3.5.文档结构

浏览器兼容HTML5
HTML4文档结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">   <!-- 文档声明，复杂无法记忆 -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 文档编码 --><title>文档标题</title></head><body>内容。。。。</body>
</html>

HTML5 <!DOCTYPE> ：文档声明，告诉浏览器这个文档是一个HTML

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
<!DOCTYPE html>
HTML5文档结构：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文档标题</title></head><body>文档内容......</body>
</html>

3.6.语义标签

HTML中最核心的部分就是标签，在新一代HTML5中新增的很多新的标签，这些标签都附有语义。
语音标签代表了某种含义，但是没有具体的功能，一个语义元素能够清楚的描述其意义给浏览器和开发者。看到标签就知道它是干嘛的了。比如2020年9月15日是一个时间，那可以通过
<time>2020年9月15日</time>把他包起来代表这是一个时间，但是<time>标签没有实际的功能。

无语义元素实例: <div>和 <span>- 无需考虑内容.
语义元素实例: <form>, <table>, and <img>,<ul>- 清楚的定义了它的内容.

案例：HTML4使用div构造我们的网页:

<div class=”header”>头部
</div>
<div class=”content”>内容
</div>
<div class=”footer”>脚部
</div>

而HTML5中使用语义标签构造我们的网页：

<header>头部
</header>
<article>主体
</article>
<footer>尾部
</footer>

问：比较HTML4与HTML5两种写法？
答：结构上面来看都一样，html4中统一使用div来定义网页结构，而html5使用了语义标签来定义我们的网页结构，使我们的文档更加清晰，也就是说当浏览器或开发者看到<header>、<article>、<footer>标签的时候就知道这个标签里面装的是什么内容。

注意:语义是不是让我们编写的HTML文档更加清晰明了，但是然并卵，现在连w3c的官方网站都还没有使用。
1 流行起来需要一个过程
2 标签太多，导致开发者没法快速选择。

标签           描述
<article>     定义页面独立的内容区域。
<aside>           定义页面的侧边栏内容。
<bdi>         允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>     定义命令按钮，比如单选按钮、复选框或按钮
<details>     用于描述文档或文档某个部分的细节
<dialog>      定义对话框，比如提示框
<summary>     标签包含 details 元素的标题
<figure>      规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>  定义 <figure> 元素的标题
<footer>      定义 section 或 document 的页脚。
<header>      定义了文档的头部区域
<mark>            定义带有记号的文本。
<meter>           定义度量衡。仅用于已知最大和最小值的度量。
<nav>         定义运行中的进度（进程）。
<progress>        定义任何类型的任务的进度。
<ruby>            定义 ruby 注释（中文注音或字符）。
<rt>          定义字符（中文注音或字符）的解释或发音。
<rp>          在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>     定义文档中的节（section、区段）。
<time>            定义日期或时间。
<wbr>         规定在文本中的何处适合添加换行符。

3.7.表单增强

Form标签
Form的表单项

3.7.1.新的Input类型

HTML5 拥有多个新的表单输入类型<input type=“” />。这些新特性提供了更好的输入控制和验证。

Color            颜色选择器
Date            日期选择框
Datetime        日期时间选择框
datetime-local  日期和时间 (无时区)选择框
email           电子邮件
month           月份选择器
number          数值的输入域
range           区间选择器
search          搜索框
tel             电话号码
time            时间选择框
url             url地址
week            周和年选择框

例子：

<form>颜色：<input type="color" /><br />日期：<input type="date" /><br />日期时间：<input type="datetime" /><br />日期时间（本地格式）：<input type="datetime-local" /><br />email：<input type="email" /><br />月份：<input type="month" /><br /><!--max- 规定允许的最大值min - 规定允许的最小值step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）value - 规定默认值-->数值：<input type="number" max="100" min="1" /><br /><!--max - 规定允许的最大值min - 规定允许的最小值step - 规定合法的数字间隔value - 规定默认值-->区间值：<input type="range" min="0" max="100" step="1" /><br />搜索框：<input type="search" /><br />电话：<input type="tel"  /><br />时间：<input type="time"  /><br />url地址：<input type="url"  /><br />周和年：<input type="week"  /><br /><input type="submit" value="提交" />
</form>

注意点：
虽然html5为我们提供很多新的输入框类型，但是这些新的类型在不同浏览器下面表现形式也不同，并且有浏览器默认验证功能，但一般我们需要自定义验证规则，所以我不建议各位使用，了解即可。

3.7.2.新的表单元素

HTML5 有以下新的表单元素(了解):

<datalist>
<keygen>
<output>

<datalist>:元素规定输入域的选项列表。
<!--<input>元素的列表属性与元素绑定.–>

<input list="browsers" name=”浏览器”>
<datalist id="browsers"><option value="Internet Explorer">Internet Explorer</option><option value="Firefox">Firefox</option><option value="Chrome">Chrome</option><option value="Opera">Opera</option><option value="Safari">Safari</option>
</datalist>

<keygen>:元素的作用是提供一种验证用户的可靠方法。

<form action="xxx.action" method="get">
用户名: <input type="text" name="userName">
加密: <keygen name="security">
<input type="submit">
</form>

<output>:元素用于不同类型的输出，比如计算或脚本输出.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

3.7.3.表单属性

HTML5 的 <form>和 <input>标签添加了几个新属性.

<form> 新属性：
autocomplete    自动补全
novalidate      取消浏览器验证，默认验证开启<input>  新属性：
autocomplete    输入框的自动补全；
autofocus       页面加载完毕后自动获取焦点；
form            指定输入框属于那一个表单，输入框不在<form>内部也会进行提交；
placeholder     输入框提示，描述输入域所期待的值；
required        输入框是否是必填项；

常用属性：

<input autofocus=”autofocus”  />
<input placeholder=”请输入关键字” name=”search”  />

3.8.Canvas

Html5新增<canvas>标签来定义图形，比如图表和图像，您可以使用脚本来绘制图形。
<canvas>标签只是图形容器，您必须使用(JavaScript)脚本来绘制图形。
简单理解：canvas标签可以在网页创建一个块矩形区域，我们可以通过JS代码在这个区域（画布）中绘制图形。

3.8.1.Canvas元素

下面代码在网页中创建了一个canvas标签，画布宽高为600px,400px。注意canvas不能使用style属性设置宽高，style设置的只是canvas标签的大小，而非画布本身的大小。

<canvas id="myCanvas" width="600px" height="400px">你的浏览器不支持Canvas，请更新你的浏览器。
</canvas>

默认情况下这个画布里面什么东西都没有，我们可以给canvas设置一个边框，便于我们查看。

<canvas id="myCanvas" width="600px" height="400px" style="border:1px solid red">你的浏览器不支持Canvas，请更新你的浏览器。
</canvas>

3.8.2.获取绘制上下文对象

Canvas标签本身并不能绘制图形，绘制图片的工作需要使用 JavaScript来完成。

所以我们需要获取canvas对象，然后通过这个对象上面的方法完成绘制:

<script type="text/javascript">window.onload = function(){//获取canvas标签对象var myCanvas = document.getElementById("myCanvas");//获取绘制的上下文对象。var cx = myCanvas.getContext("2d");//...绘制代码}
</script>

3.8.3.直线

cx.strokeStyle="red";//画笔的颜色
cx.lineWidth=2;//线框
cx.moveTo(500,500);  //设置线条的起始位置
cx.lineTo(100, 100);   //给路径一个终点
cx.stroke();//开始绘制

3.8.4.矩形

cx.fillStyle = "blue"; //填充色为蓝色
cx.strokeStyle ="red";  //描边为红色
cx.lineWidth = 2;
cx.fillRect(10, 10, 400, 400);
cx.strokeRect(10, 10, 400, 400);

3.8.5.圆形

cx.fillStyle  = "blue"; //填充色为蓝色
cx.strokeStyle  = "red"; //描边为红色
cx.lineWidth  = 2;
cx.arc(200, 200, 150, 0, Math.PI*2, true);
cx.fill();  //填充颜色
cx.stroke();  //绘制

3.9.音频和视频

3.9.1.视频播放

<video>: 视频标签
注意：最新的 HTML5 标准只支持 MP4(H.264), WebM, 和 Ogg 视频格式，所以请保证你的视频格式是这些，否者HTML5将无法正常工作。

<video id="demoVideo" width="320" height="240" autoplay="autoplay" src="video/tokyo.ogg" controls>你的浏览器不支持视频播放。
</video>
<button value="播放" onclick="videoPlay()">播放</button>
<button value="播放" onclick="videoPause()">暂停</button>

function videoPlay(){var video = document.getElementById("demoVideo");video.play();
}function videoPause(){var video = document.getElementById("demoVideo");video.pause();
}

常用的标签属性：

属性名	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	url	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

常用的标签方法:

方法名	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

3.9.2.音频播放

<audio>: 音频标签
注意：HTML5 的最新标准支持 MP3, WAV, 和 Ogg 音频格式。

<audio style="display: none;" id="demoAudio" src="video/go.mp3"  controls autoplay="autoplay" muted >你的浏览器不支持音频播放。
</audio>

var demoAudio = document.getElementById("demoAudio");document.body.addEventListener('mousedown', function(){demoAudio.muted = false;demoAudio.play();
}, false);

常用的标签属性：

属性名	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	url	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

常用的标签方法:

方法名	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

无法自动播放问题：https://www.mzwu.com/article.asp?id=4411

3.10.Web存储

HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以键/值对存在, web网页的数据只允许该网页访问使用。

HTML5的Web存储提供两种方式：
1、sessionStorage 会话存储当前窗口有效
2、localStorage 本地存储不删除永远有效
怎么查看本地存储中的数据，可以使用Google浏览器工具

3.10.1.sessionStorage

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁(浏览器关闭)。会话是一个周期，会话开始的周期就是你打开网页的那一刻至到网页被关闭的时候；
sessionStorage方法：

方法名	参数名	描述
setItem(key,value)	key:存储数据的键 Value:存储数据的值	指定key和value保存数据
getItem（key）	key:获取数据的键	通过key获取数据
removeItem(key)	Key:删除数据的键	通过key删除数据
clear		清除所有数据

案例：
sessionStorage.setItem(“username”,”张三”);
sessionStorage.getItem(“username”);
sessionStorage.removeItem(“username”);
sessionStorage.clear();

3.10.2.localStorage

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
localStorage方法：
方法名参数名描述
setItem(key,value) key:存储数据的键
Value:存储数据的值指定key和value保存数据
getItem（key） key:获取数据的键通过key获取数据
removeItem(key) Key:删除数据的键通过key删除数据
clear 清除所有数据
案例：

localStorage.setItem(“username”,”张三”);
localStorage.getItem(“username”);
localStorage.removeItem(“username”);
localStorage.clear();

localStorage与sessionStorage 最大的区别在于，使用sessionStorage保存数据只对当前窗口有效，这个窗口一旦关闭，数据也会被销毁。localStorage只要删除永远存在，但是不能跨浏览器，更不用说跨电脑。如果要跨浏览器，就要保存数据库。

使用场景：
保存皮肤样式表
网址之家记录用户常访问网站
简单购物数据存储

3.11.小结

HTML5内容比较庞大，考虑到时间关系，本课程只是对HTML5做了简要的介绍，HTML5中除了以上内容之外，还有很多新功能，比如：地理定位、Web SQL 数据库、缓存、Web Workers等，如果想进一步学习，可以访问：http://www.runoob.com/html/html5-intro.html。

4.课程总结

4.1.重点

1.Html5的文档结构
2.表单增强
3.Web存储

4.2.难点

1.Canvas
2.动画

4.3.如何掌握？

1.勤加练习
2.菜鸟教程
3.W3c官方教程

4.4.排错技巧（技巧）

1.浏览器调试模式

5.课后练习

1.Html5：表单属性，canvas，音频和视频，web存储
2.Css3：盒子的边框和盒子阴影转换过渡加载动画

6.面试题

7.扩展知识或课外阅读推荐（可选）

7.1.扩展知识

Websocket结合java的示例编程（自行百度）

7.2.课外阅读

菜鸟网前端学习http://www.runoob.com/