HTML+HTML5

HTML

1.HTML 超文本标记语言。它是一种标识性的语言，非编程语言，不能使用逻辑运算。

2.HTML 具有简易性，可扩展性，平台无关性和通用性等特点。

超文本：是一种组织信息的方式，通过超级链接将多种媒介（文字图片声音视频）关联起来。

标记：标签。用尖括号<>包裹的具有一定含义的内容

网页分为：静态网页动态网页（数据会随之改变）

3.<标签>开始 </标签>结束

4.多使用几个浏览器解决兼容性问题五大主流浏览器（IE(Edge) 火狐(FireFox) 谷歌(Chrome) 欧朋(Opera) 苹果(Safairi）

5.浏览器内核由渲染引擎和JS引擎两部分组成。（渲染解析）

内核：Trident(IE) Gecko(FireFox) Webkit(safari/chrome) Blink(Chrome/Opera)

国内大多数浏览器采用的双核驱动(Trident&Webkit或Trident&Blink)

移动端：iphone/ipad采用的是webkit，android4.4以下版本采用的是webkit内核，而4.4以上版本采用的是blink内核。

6.一个网页页面基本组成：

html

<html>
		<head></head>
		<body></body>
</html>

1.基本标签

标签分为块级和行级（内联）两种。

块级独占一行，识别宽高，如果不设置，宽度为整行宽度，高度为内容实际的高度；

行级不独占一行，不能设置宽高，宽高分别为内容实际的宽高。

块级标签可以通过设置样式：display：inline；转换为行级标签，行级标签可以通过设置样式：display：block；转换为块级标签。

块级标签：div p h1-h6 pre table address ul li等

行级标签：span a b strong i em sup sub

img 属于行级块标签。相当于执行了display：inline-block；操作识别宽高但不独占一行。

1.link:favicon 设置网站小图标

2.div用来布局层占一行

3.hx x：1-6 1-6级标题

4.p 表示段落相当于一个回车对文本分段

5.br 换行

6.hr 生成一条水平线

7.a 实现链接跳转

8.img 用来加载外部图片图像 title：鼠标悬停到图片时显示内容

9.span 作用页面布局与div不同不单独占一行

10.ul/ol 列表前者是无序表后者是有序表列表内容用< li>标签

11.插入字ins 会在插入的字下加横线

12.删除字del 会在删除的字中间加横线（如设置现价和原价）

字体标签<font color size>
加引号 q
address 包裹联系信息或地址信息会有斜体效果
./ 查看当前文件夹下的内容 ../返回上层文件夹

2.文本格式化标签

b,strong 加粗 strong有强调作用（用于SEO 搜索引擎优化）
i ,em 倾斜 em 有强调作用
pre 保留文本格式
small big 让文字缩小或放大一号
sub sup 设置文本的下标和上标

3.实体转义符

W3C规范标准由结构（HTML），表现（CSS）和行为（JavaScript)三部分组成

4.W3C中的嵌套规则：

1.块级元素/标签内可以包含块级元素和行级元素，行级元素只能包含行级元素。

2.块级元素不能放在< P>里面

3.hx p dt 这几个块级元素只能包含行级元素，不能包含块级元素

4.块级元素与块级元素并列，行级元素与行级元素并列

在开发过程中，尽量使用语义化标签

5.文件命名规范

1.项目开发时，项目中文件或目录名不能出现汉字和空格之类的其他符号，文件和目录名一般以字母或下划线开头。可以出现字母数字下划线

目录名：taobaopro images/img/pic video music file web

文件名：index.thml(首页) product.html(产品页) order.html(订单页)等

6.标签通用属性

1.标签由标签名，标签属性和文本内容三部分组成（单标签没有文本内容）

2.标签属性是对标签的一种描述方式。

3.标签属性分通用属性，自有属性和自定义属性。

4.通用属性：所有标签都具有的属性。

通用属性有：id ：用来给标签取一个唯一的名称。

class：用来给标签取一个类名。

style：用来设置该标签的行内样式。

title：当鼠标移到该标签上所显示的提示内容。

5.标签自定义属性：通常用来传值或用于图片的懒加载等。

格式：data-*

7.table 表格

1.table主要用于呈现格式化数据。表格是由行和列组成的。

格式：

html

		<table>
		    <tr>行
                <th></th>表头
                <th></th>
                <th></th>
             <tr>
                <td></td>列
                .....
            </tr>
            ......
		</table>

2.table属性 border:表格边框，默认单位是像素

width:表格宽度，默认单位是像素

align:表格水平对齐 right center left默认是left

valign:垂直对齐 top/middle/bottom

cellpadding:单元格文本与边框的距离

cellspacing:单元格边框线的间距

bordercolor:边框颜色

3.跨行/跨列属性主要用来绘制复杂表格

rowspan：跨行

colspan：跨列

4.完整表格组成：caption(标题), thead(表头),tbody(表体),和tfoot(表尾)四部分组成。

8.form表单

form表单是所有标签最核心标签之一。它是用来实现前后端交互的一个重要标签。

常用属性：

name：表单名称

action：表单数据提交的地方(通常是一个后台文件名.jsp/.php.py等，或网址）如果是#，表示提交到当前文件下。

medthod：前端提交数据到后端的方法，主要有：get 和post，默认是get。 get会在网页地址栏显示用户提交的信息，post会隐藏提交信息

9.form表单元素/组件

（1）input类：主要用来完成输入，选择或发出指令。

type:text/password/radio/checkbox/file/button/image/submint/reset

text：单行文本输入框 type="text"可以不写默认为text 属性：placeholder(提示文本) /name(命名)/minlength和maxlength(最少/最多输入的字符个数)/disabled(失效) /readonly(只读) value(设置默认值，或修改按钮的名称)/pattern（正则匹配）

password：密码框属性与text一样输入内容会被隐藏

radio：单选钮，通常是两项以上。常用属性：name(必须有用来区别不同组按钮)/value/cheched(默认选中)/disabled(失效) /readonly(只读)

checkbox：复选框，可以选择0项，1项，多项。常用属性：name(必须有)/value/cheched(默认选中)/disabled(失效) /readonly(只读)

file：文件上传按钮

button：普通按钮，通常用它去调用脚本代码。常用属性：value（按钮的标题）/disabled(失效)

image：图片按钮，用法与button一样。有一个特殊属性：src（用来加载提示图片，用它替换了value）

它有提交功能，与submit功能一样。

**submit：**提交按钮，用来将表单数据提交到后台。常用属性：value（按钮的标题）/disabled(失效)

reset：重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。常用属性：value（按钮的标题）/disabled(失效)

（2）textarea类：

文本域（也可以叫多行文本框），主要用来输入大批量的内容。

常用属性：name /id /cols(列数)/rows(行数)/placeholder(提示文本)/minlength/maxlength/required(必须输入)/value(获取文本内容)

固定文本域大小：style="resize: none;" 不允许用户对文本域进行改变大小。

（3）select类：

下拉列表框，默认用于单项选择。用option呈现每一个选项。

selected:默认被选中。

multiple属性：表示可以多选，（按着ctrl/shift进行多选）这时的下拉列表框变成列表框。size最多显示的行数。

（4）button类：

普通按钮，具有提交功能。可以单独使用，不写在form元素中；如果写在from中有提交功能。

10.iframe:框架标签

作用：是用来将多个网页文件组合成一个文件。

常用属性：

name:框架名

src：引入的外部html文件

scrolling：滚动条（yes/no/auto）

width：宽度（%/px）

height：高度（%/px）

frameborder：是否有边框（1/0）

marginheight：框架离顶部和底端的距离（%/px）

marginwidth：框架离左右的距离（%/px）

**注意：**在实际开发中，尽量减少使用iframe，因为它破坏了前进和后退功能，且不利于SEO（搜索引擎优化）

11Emmit语法

属性用：[]

内容用：{}

父子级关系：>

兄弟关系：+

返回上一层：^

类名：. 类名

id：#id

tr*3[height=20px]>td{内容$}*4

(caption{学生信息表})+(thead>tr>th4)+(tbody>tr3>td*4)+(tfoot>tr>td[colspan=4])

.box1>img^.box2

html

<div class="box1"><img src="" alt=""></div>
    <div class="box2"></div>

12.label在form表单中的作用

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label的使用

第一种：用label标签将input标签包裹起来（lable不能使用for属性）

单击lable内的文字内容会将焦点转到和标签相关的表单控件上

第二种：在from标签中定义id，在用 label 标签中的for属性将其关联

html

 <label for="sex">性别:</label> 
   &lt;select name="" id="sex"&gt;
     <option value="male">男</option>
     <option value="female">女</option>
   </select>

HTML5

1.由来

html5由W3C和WHAT组织结构共同研发出，于2014年正式发布。

2.HTML5成为了新一代网页开发标准。

3.HTML5新特性

1)增加了audio和video音频播放，抛弃了Flash

2）新增了canvas画布（绘画，制作动画（如小游戏开发等））

3）地理定位

4）增加了离线缓存

5）硬件加速

6）Web Socket(全双公通信)

7）增加了本地存储

8）新增了一些语义化标签

4.网页布局标签

header：页首

nav ：导航栏

aside ：侧边栏

main ：主体

section：区块

article ：文本

footer ：页尾

5.语义化标签

1）mark：高亮显示（行级）

2）details（描述）与summary（摘要）：一般用于名词解释或用于封装一个区块等（可将summary下的内容折叠起来）

3）meter：定义度量衡

属性：value（当前值）/min（最小值）/max（最大值）

meter标签改变颜色规则

meter 标签的max、min属性定义在最两边，low和high定义在中间。这样分割开了3个区：[min,low)、 [low,high]，(high,max]。

最佳值 optimum 和 value 的不同决定了显示的颜色的不同。最佳值默认是1/2(min+max)。

最佳值 optimum所在区间是[min,low)，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；
最佳值 optimum所在区间是[low,high]，那么区间[low,high]绿色，(min,low]黄色，(high, max]黄色；
最佳值 optimum所在区间是(high,max]，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；

4）progress：显示一个进度条

属性：value（当前值）/min（最小值）/max（最大值）

5）dialog：定义对话框或窗口

属性：open（打开）

cursor: pointer;给鼠标设置手形

6）figure：标签用于对元素进行组合（一般用来组合一张图的标题，图片和图片描述等）

6.HTML5多媒体

1) audio

播放音乐或视频。IE9以下的版本不支持。

a）支持的格式

.mp3/.ogg/.wav

b)属性

src:文件路径

autoplay:自动播放

loop:循环

controls:控制条

muted:静音

preload:预加载（当使用autoplay时，preload自动失效）

2）video

加载视频。IE9以下的版本不支持。

a）支持的格式

.mp4/.ogg/.webm

b）属性

src:文件路径

autoplay:自动播放

controls:控制条属性

muted:静音

preload:预加载（当使用autoplay时，自动失效）

width:宽度

height:高度

poster:海报

starttime:开始时间

3）embed

嵌入内容或加载插件。

属性：

src：文件路径

width:宽度

height:高度

type:类型

audio/video不支持 flash 可以使用embed引入flash插件

4）canvas

画布，是一个容器元素。

注意：

a.单独使用canvas没有什么意义，它必须结合Javascript使用。它的具体功能体现是通过Javascript来实现的。

b.canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。

7.HTML5常用属性

1）contenteditable

将标签转换为可编辑状态。可用于所有标签。它的值有true/ false(默认)

2）hidden

对元素进行隐藏，一般用来传值或当某个条件成立，执行内容显示。默认值为hidden

3）data-*

用于存储页面或应用程序的私有自定义数据。一般用于传值。

4）multiple

规定输入域中可选择多个内容（多选）。用于表单组件中，如file/select。

5）required

约束表单元素在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。

6）pattern 正则匹配

用于验证输入字段的模式。用于表单组件中，需要结合提交按钮使用。

8.表单组件

input

1）color：颜色可以选择颜色

2）email：邮箱（有格式验证提示）

3）tel：电话号码（无格式验证提示）

4）url：网址（有格式验证提示）

5）number：数字（有step步长 min max value当前值属性）

6）range：范围会出现一个滑动条（有min max value当前值属性）

7）search：搜索（搜索框内有清除全部功能）

8）date：日期

9）datetime：日期时间（手动输入无格式验证）

10）datetime-local：本地日期+时间

11）year：年份

12）month：年月

13）time：时间

14）week：周

9.表单属性

1）formaction：修改action数据提交的地方（加在提交按钮上）

2）formectype：修改表单请求的类型（加在提交按钮上）

3）formmethod：修改数据提交的方法（加在提交按钮上）

常用的提交方式有：get（默认）和post两种。他们的区别：

a）get是以字节为单位提交只接受ASCII，而post是以字符为单位提交

b）get是以明文方式，提交的数据会显示在地址栏中，一般不用来传输一些敏感的数据，因为传输的数据暴露在外边了，而post是暗文方式提交不会显示在地址栏中

c）get在浏览器中回退是无害的，而post会再次提交请求

d）get会被浏览器主动缓存，而post不会，除非手动设置

e）get和post在传输字节数上一般没有限制，个别浏览器会有，可以理解为get一般不超过2K，而post一般不超过2M

4）form：设置表单元素属于哪个表单，数据将提交到该表单下（设置在任意表单元素上）

5）novalidate：不验证（设置在form表单上）

10.input属性

1）autocomplete：自动完成

用来帮助用户输入，每一次输入的内容浏览器是否保存输入的值，以备将来使用。值有on/off，默认为on。

前提：input中必须有name属性值

html

<input type="text" name="username" autocomplete="on" />

为了保护敏感数据（如用户账号，密码等）避免本地浏览器对他们不安全存储，一般需要关闭

2）autofocus：自动获焦

3）step：步长

4）mutiple：多选

5）pattern：正则匹配

6）placeholder：输入提示

7）required：必须输入

input标签要加上name属性区别不同的input标签

11.fieldset

fieldset：对表单进行分组，一个表单可以有多个fieldset。

legend：说明每组的内容描述。

html

<form>
      <fieldset>
        <legend>用户名与密码:</legend>
        <label for="username">用户名:</label>
        <input type="text" id="username" value="www.dreamdu.com" />
        <label for="pass">密码:</label>
        <input type="password" id="pass" />
      </fieldset>
      <fieldset>
        <legend>性别:</legend>
        <label for="sex1">男</label>
        <input type="radio" name="sex" value="1" id="sex1" />
        <label for="sex2">女</label>
        <input type="radio" name="sex" value="2" id="sex2" />
      </fieldset>
      <fieldset>
        <legend>我最喜爱的:</legend>
        <label for="computer">计算机</label>
        <input type="checkbox" value="1" id="fav" />
        <label for="trval">旅游</label>
        <input type="checkbox" value="2" id="fav" />
        <label for="buy">购物</label>
        <input type="checkbox" value="3" id="fav" />
      </fieldset>
    </form>

效果：

详细参考：https://blog.csdn.net/Don_GW/article/details/109066982?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169649422816800182130777%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169649422816800182130777&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-109066982-null-null.142^v94^insert_down1&utm_term=fieldset&spm=1018.2226.3001.4187

HTML5 API

1.媒体操作

1）audio（音频）（IE9以下版本不支持）

支持的音频格式：

.mp3 .ogg .webm

标签常用属性：（掌握）

属性名	属性值	描述
autoplay	autoplay	自动播放（IE可以自动播放，谷歌有些版本不支持自动播放）
controls	controls	控制条
loop	n/loop	循环
preload	metadata/auto/none	预加载（设置autoplay时，preload失效）
scr	url	音频文件路径及文件名
muted	muted	静音

tips：属性名=属性值可以只写属性名/值 eg：muted = “muted” 直接写 muted

JS常用属性：

属性	描述
audio.buffered.end(0)	获取已缓冲的秒数
audio.buffered.length	获取缓冲范围
audio.buffered.start(index)	获取某个已缓冲返回的开始位置
audio.buffered.end(index)	获取某个已缓冲范围的结束位置
audio.currentSrc	返回当前音频的URL
audio.currentTime	返回当前音频的现在时间
audio.ended	音频是否结束
audio.duration	返回音频总时长，以秒计
audio.networkState	返回音频的网络状态 [0:尚未初始化；1:已经选取资源，但未使用网络；2:正在下载数据；3:未找到资源]
audio.paused	是否处于暂停状态

常用方法：

方法名	描述
canPlayType（type）	检测浏览器是否支持音频播放类型返回["probable"：浏览器最可能支持该类型；”maybe“：可能支持]
load（）	重新加载
paly（）	播放（掌握）
pause（）	暂停（掌握）

注意：播放器使用play()和pause()方法时必须用JS原生获取DOM，不能用jQ获取

2）video（视频）

支持视频格式：

.mp4 .mpeg .ogg

标签常用属性：

属性名	属性值	描述
autoplay	autoplay	自动播放
controls	controls	进度条
height	px/i/e/l	设置播放器的高度
width	px/i/e/l	设置播放器的宽度
loop	n/loop	设置循环循环次数
scr	url	视频播放路径
preload	metadata/auto/none	预加载视频。如果使用”autoplay“则忽略该属性
muted	muted	静音
poste	poster="imgs/1.jpg"	海报
starttime	starttime="00:05"	开始时间

JS常用属性：

属性	描述
Media.currentTime=value;（掌握）	当前播放的位置，负值可以改变位置（以秒为单位）
Media.startTime；（掌握）	开始播放时间，一般为0
Media.duration（掌握）	视频长度
Media.paused;（掌握）	是否暂停
Media.defaultPlaybackRate=value;	默认的回放速度，可设置，默认为1.0
Media.playbackRate=value;（掌握）	设置倍速，当前播放速度，设置后马上改变，默认为1.0
Media.played;	返回已经播放的区域返回一个对象TimeRanges
Media.seekable;	返回可以seek的区域
Media.ended;	是否结束
Media.autoplay;	是否自动播放
Media.loop;	是否循环播放
Media.controls;	是否有默认进度条
Media.volume；（掌握）	设置音量0.1-1.0
Media.muted；（掌握）	设置静音，true/false

JS常用方法：

方法名	描述
Media.play（）	播放
Media.pause（）	暂停

2.手势事件（移动端）

移动端事件在使用前，必须先在< head>中添加移动优先的设置

html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

1）click事件

click事件在移动端会有200-300ms的延时（主要在苹果浏览器上）。之所以会存在这300ms的延时是以为如果用户缩放页面之后想要回到原来的页面比例就需要点击两次页面，因此，移动端为了判断点击事件是否是缩回事件就会等在用户点击一次之后再去检测用户会不会点击第二次，所以会有一个300ms的延时。

解决方案：

引入fastclick插件。

html

  <script src="" data-missing="fastclick.js"></script>

参考网址：https://www.jianshu.com/p/150c305f6930 下载faskclick的网址：https://github.com/ftlabs/fastclick

不需要使用fastclick的情况： ①fastclick是不会对PC浏览器添加监听事件 ②Android版Chrome 32+浏览器，如果设置viewport meta的值为width=device-width，这种情况下浏览器会马上出发点击事件，不会延迟300毫秒。

2）tap事件（移动端）

因为click事件在移动端可能会有300ms左右的延时可以使用tap替代click事件。

①tap事件包括：

tap：轻击事件

singleTap：单击事件

doubleTap：双击事件

longTap：长按事件

②用法：

原生中没有tap事件，需要引入zepto.js库实现。（zepto.js的用法与JQuery一致）

zepto.js官网：https://zeptojs.com/ zepto.js移动端的js库

注意：

Ⅰ）如果要使用zepto.js时有些API单独放在其他js模块中，使用时需要引入这些模块，然后才能调用对应的方法

Ⅱ）如果要使用zepto.js中的tap事件，需要引入touch.js插件。

Ⅲ）到bootcdn里搜索zepto在GitHub仓库里面下载zepto.js及相关插件。

Ⅳ）如果要使用常规事件，如click事件等，需要引入event.js插件。

Ⅴ）Tap事件在PC端使用是无效的，只能在移动端使用。

引入zepto.js及插件:

html

  <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
  <script src="" data-missing="event.js"></script>
  <script src="" data-missing="touch.js"></script>

注意: zepto.js必须先于其他插件的引入。

3）swipe事件（移动端）

滑屏事件（只能用于移动端）

分为：

事件名	描述
swipe	滑屏（上下左右四个方向都可以触发）
swipeLeft	左滑屏
swipeRight	右滑屏
swipeUp	上滑屏
swipeDown	下滑屏

swipe事件非原生事件（不识别原生写法），需要引入zepto.js库

html

<script>
    // 滑屏
    $(".box").swipe(function () {
      $(this).css({
        fontSize: "30px",
      });
    });

    //  右滑屏打开另一个文件
    $(document).swipeRight(function () {
      // location.assign("./03视频常用的属性和方法.html") 或
      location.href = "./03视频常用的属性和方法.html";
    });

    // 左滑屏
    $(document).swipeLeft(function () {
      // $(".box").css("background","aqua") 或
      $(".box").css({
        background: "aqua",
        fontSize: 20,
      });
    });

    // 上滑屏
    $(document).swipeUp(function () {
      $(".box").html("<span>上滑屏</span>");
    });

    // 下滑屏
    $(document).swipeDown(function () {
      $(".box").css("color", "pink");
      $(".box").html("<span>下滑屏</span>");
    });
  </script>

4）touch事件（移动端）

分类：

事件名	描述
touchstart	当手指触摸到屏幕会触发
touchmove	当手指在屏幕上移动时，会出触发
touchend	当手指离开屏幕时，会触发
touchcancel	可由系统进行触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

采用原生写法不需要引入zepto.js：

JavaScript

    document.body.addEventListener( //事件监听写法
      "touchmove",
      function () {
        alert();
        console.log("touchmove");
      },
      false
    );

    document.body.ontouchend = function () { //事件绑定写法，要在事件前加on
      console.log("touchend");
    };

3.拖放事件

必须要在被拖放的元素上添加属性：draggable = “true”

事件名	描述	作用对象
ondragstart	当拖拽元素开始被拖拽的时候触发的事件	被拖拽元素上
ondragenter	当拖拽元素进入目标元素的时候触发的事件	目标元素上
ondragover	拖拽元素在目标元素上移动的时候触发的事件	目标元素上
ondrop	被拖拽的元素在目标元素上同时鼠标放开触发的事件	目标元素上
ondragend	当拖拽完成后触发的事件	被拖拽元素上

注意：

①事件对象中包含DataTransfer对象，它是拖拽对象用来传递的媒介，一般使用Event.dataTransfer.setData 和 Event.dataTransfer.getData进行获取和设置。

②Event.effectAllowed属性：就是拖拽的效果。

③Event.preventDefault（）方法：阻止默认事件的执行，在ondragover中一定要先执行preventDefault（），否则ondrop事件不会被触发。

④被拖拽对象一定要加一个属性: draggable = "true"

⑤获取被拖拽对象一般通过其id值

html

	//实现将一张图片通过拖拽移动到两个不同的盒子中
<script>
    var box1 = document.querySelector(".box1");
    var box2 = document.querySelector(".box2");
    var img = document.querySelector("#img");

    // 阻止默认行为
    box1.ondragover = function (e) {
      e.preventDefault();
    };

    box2.ondragover = function (e) {
      e.preventDefault();
    };
    
    // 将拖拽的目标对象存入dataTransfer中（一定要先给目标对象id值）
    img.ondragstart = function (e) {
      e.dataTransfer.setData("imgTarget", e.target.id);
    };

    // 将目标对象存入box2中
    // （要想让ondrop发挥作用，必须在ondragover事件中进行默认行为的阻止）
    box2.ondrop = function (e) {
      this.appendChild(
        document.getElementById(e.dataTransfer.getData("imgTarget"))
      );
    };

    // 将目标对象存入box1中（先从box1拖拽到box2再从box2拖拽到box1）
    box1.ondrop = function (e) {
      this.appendChild(
        document.getElementById(e.dataTransfer.getData("imgTarget"))
      );
    };
  </script>

4.定位

H5新增用 navigator.geolocation API实现定位。

1）浏览器支持：

IE9以上，Firefox，chrome，safari，opera支持地理定位。谷歌可以定位但不能获取地理位置值

2）判断浏览器是否支持定位：

判断（navigator.geolocation 是否有返回值，如果有则支持，如果没有则不支持）

javascript

if (navigator.geolocation) {
    } else {
      console.log("您的浏览器不支持定位");
    }

3）定位方法一般有：

服务器端/PC：IP地址

移动客户端：GPS（精准）

4）方法：

①getCurrentPosition（success，error，option）：获取当前位置

参数	说明	是否必须
successFn（position）	定位成功回调函数，会返回一个位置数据对象	是
errorFn（msg）	定位失败回调函数，返回一个msg对象包含错误信息和代码	否
option	定位参数设置	否

html

 <script>
    var options = {
      timeout: 5000,
      enableHeightAccuracy: true,
    };

    // 判断当前浏览器是否支持定位
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error, options);
    } else {
      console.log("您的浏览器不支持定位");
    }

    function success(info) {
      console.log(info); //谷歌定位很慢
      console.log(info.coords);
      console.log(info.coords.latitude); //维度
      console.log(info.coords.longitude); //经度
    }

    function error(err) {
      console.log(err);
    }
  </script>

定位成功返回：

coords: GeolocationCoordinates {

latitude: 34.7449, 维度

longitude: 113.619, 经度

altitude: null, 海拔

accuracy: 15355, 位置的精准度

timestamp: 1694934345522，时间戳

altitudeAccuracy: null, 海拔精准度

…}

option 参数

timeout：timer 请求超时时间，毫秒计

enableHeightAccuracy：true/false 是否获取更精准的位置

②watchPosition（）：跟踪用户的位置

用法与getCurrentPosition方法一样

③clearWatch（）：停止跟踪用户的位置

语法：

var watcher = navigator.geolocation.watchPosition(success, error, options);

navigator.geolocation.clearWatch(watcher)

5）百度地图API获取当前位置

①进入网站

https://lbsyun.baidu.com/

②注册并登陆

③进入控制台 -> 我的应用 ->创建应用，用于获取AK（密钥）值

注意：百度地图1.4以下的版本不需要AK，1.4以上的版本必须要AK

④开发

a.引入百度地图API

html

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GFMVM687MNXyqAHjhXhwsLRtKppFNilf"></script>

b.js代码

创建地图：https://lbsyun.baidu.com/jsdemo.htm#aCreateMap

html

<script>
    // 创建一个百度地图对象
    var geolocation = new BMapGL.Geolocation();

    // 用百度地图获取位置
        geolocation.getCurrentPosition(function(ps){
            // 请求成功
            if(this.getStatus()== BMAP_STATUS_SUCCESS){
                console.log(ps);
                
         	var map = new BMapGL.Map("map"); // 创建Map实例 (必须用id)
       		map.centerAndZoom(new BMapGL.Point(ps.point.lng, ps.point.lat), 12); // 初始化地图,设置中心点坐标和地图缩放级别
        	map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            }else{
                console.log("定位失败");
            }
        },function(err){})
</script>

c.运行（必须在服务器端运行）

Ⅰ）安装node.js

下载地址：https://nodejs.cn/

查看node版本：node -v

Ⅱ）在VSCode打开终端，安装http-server（用来启动服务）

npm i http-server -g

Ⅲ）用http-server启动服务

http-server

或：http-server -p 80/81/8080 （指定端口）

Ⅳ）在浏览器地址栏输入网址：http://127.0.0.1:5500

6）实训音乐播放器

具体代码见实训

HTML5 Canvas

1.认识canvas

canvas是H5新增的一个标签，它的作用是在浏览器上创建一个画布，用来绘画。

2.使用场景

1）简单游戏的开发；

2）简单图像；

3）验证码；

4）绘制图表；

5）绘制地图;

6）制作马赛克效果；

7）模拟帧动画；

3.基本用法

1）添加画布

html

<body>
    <canvas id="canvas" width="400px" height="300px"></canvas>
</body>

注意：开发时使用行间样式设置width和height而不使用CSS 设置宽高

2）渲染上下文

html

  <script>
    //获取canvas
    var cv = document.querySelector("#canvas");
    //创建canvas对象
    var cts = cv.getContext("2d");
    //2d表示绘制的是2d图形，webgl表示绘制的是3d图形
  </script>

2d表示绘制的是2d图形，webgl表示绘制的是3d图形

4.兼容处理

IE8及更早的版本不支持canvas标签

html

<canvas id="cv" width="300px" height="300px">您的浏览器不支持canvas</canvas>

支持不显示文字，不支持时显示文字

html

  <script>
    var cv = document.getElementById("cv");
    if (cv.getContext("2d")) {
       //绘图代码处
    } else {
      console.log("您的浏览器不支持canvas");
    }
  </script>

5.canvas与svg的区别（了解）

Canvas 1）依赖分辨率 2）不支持事件处理器 3）弱的文本渲染能力 4）能够以 .png 或 .jpg 格式保存结果图像 5）最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG 1）不依赖分辨率 2）支持事件处理器 3）最适合带有大型渲染区域的应用程序（比如谷歌地图） 4）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 5）不适合游戏应用

6.canvas常用方法

1）绘制路径

绘制路径方法：

1）首先，你需要创建路径起始点。 2）然后你使用画图命令去画出路径。 3）之后你把路径封闭。 4）一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

常用方法/属性

方法	描述
beginPath（）	开启一条路径，或重置当前路径
closePath（）	创建从当前点回到起始点的路径（闭合最后一根线）
moveTo（x,y）	移动笔触（x,y表示画笔起始位置）
stroke（）	描边
fill（）	填充

属性	描述
lineWidth = 4	设置描边线宽
font = “30px 楷体”	设置字体，字号
strokeStyle = “color”	设置描边/边框颜色
fillStyle = “color”	设置填充颜色
textAlign = "left/center/right"	设置文字对齐方式
textBaseline = “bottom top”	设置文字基线

javascript

      // 创建canvas对象
      var ctx = cv.getContext("2d");
      ctx.beginPath(); //开始笔触(表示可以开始绘画了)
      ctx.arc(200, 200, 200, 0, 2 * Math.PI, true); //绘制圆

      ctx.moveTo(150, 100); //移动笔触
      ctx.arc(100, 100, 50, 0, 2 * Math.PI, true); //绘制圆弧
	  //arc（x，y，r，start angle，end angle，true/lase）(圆起始x坐标，圆起始y坐标，半径，圆起始角（弧度），圆终止角（弧度），true（逆时针）/flase（顺时针）)
	  ctx.lineWidth = 5;//设置线宽
      ctx.strokeStyle = "pink";//设置描边颜色
	  ctx.stroke(); //描边
	  ctx.fillStyle = "red";//设置填充色
      ctx.fill();//填充

注意：样式设置要放在绘制之前

2）绘制直线

lineTo（x，y）; 绘制一条从moveTo（x0，y0）指定的起点坐标（x0，y0）到点（x，y）的直线。

注意：上一次绘制的终点就是下一次绘制的起点。

3）绘制圆弧

arc（x，y，r，start angle，end angle，true/lase）；（圆起始x坐标，圆起始y坐标，半径，圆起始角（弧度），圆终止角（弧度），true（逆时针）/flase（顺时针））

4）贝塞尔曲线（了解）

①绘制二次贝塞尔曲线：

quadraticCurveTo（cp1x，cp1y，x，y）（cp1x，cp1y为一个控制点，x，y为结束点）

二次贝塞尔曲线需要三个点：第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点，第三个点是曲线的开始点即当前路径中最后一个点。如果路径还未开始绘制，则使用 beginPath() 和 moveTo() 方法来定义开始点。

二次贝塞尔曲线

红色：控制点黄色：开始点绿色：结束点

②绘制三次贝塞尔曲线：

bezierCurveTo（cp1x，cp1y，cp2x，cp2y，x，y）（cp1x，cp1y为控制点一，cp2x，cp2y为控制点二，x，y为结束点）

三次贝塞尔曲线需要四个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点，第四个点为曲线的开始点是当前路径中最后一个点。如果路径还未开始绘制，则使用 beginPath() 和 moveTo() 方法来定义开始点。

三次贝塞尔曲线

黄色：开始点 moveTo(20,20) 红色：控制点1 bezierCurveTo(20,100,200,100,200,20) 红色：控制点2 bezierCurveTo(20,100,200,100,200,20) 绿色：结束点 bezierCurveTo(20,100,200,100,200,20)

5）绘制矩形

fillRect（x，y，width，height） //绘制一个填充矩形

strokeRect（x，y，width，height） //绘制一个矩形的边框

clearRect（x，y，width，height） //清除指定矩形区域，让清除部分完全透明，通常与fillRect结合使用可以绘制镂空效果或执行删除效果。

JavaScript

 	  ctx.fillRect(100, 100, 200, 200);
      ctx.strokeRect(10, 10, 100, 100);
      ctx.clearRect(150, 150, 100, 100);

注意：绘制一个完整图形不同于绘制路径，不需要 cts.beginPath(); 开启一个新路径

6）绘制文本

fillText（文本内容，x坐标，y坐标，[，最大宽度]）；绘制填充文本

strokeText（文本内容，x坐标，y坐标，[，最大宽度]）；绘制空心文本

JavaScript

	  ctx.font = "40px 楷体";//设置字体大小和样式，必须给两个参数
	  ctx.strokeStyle = "pink"; //注意：样式设置要放在绘制之前
      ctx.fillStyle = "red";
      ctx.textAlign = "left";//设置对齐方式
      ctx.textBaseline = "bottom";//设置基线
      ctx.fillText("好好学习，天天向上!", 10, 100);
      ctx.strokeText("好好学习，天天向上！",10,200)

注意：样式设置要放在绘制之前

7）绘制图像

支持.png，.jpg，.gif以及canvas源。

JavaScript

//第一步：
var img = new Image();		//创建一个img标签
//第二步
img.src = "图片源";			//设置图片源地址
//第三步
img.onload = function(){
   ctx.drawImage(img,100,100) //绘制图像
  }

①基本绘制

ctx.drawImage(img，x，y)；// img表示要绘制的图像，x，y表示图像绘制的起始坐标。

②绘制时同时进行缩放（设定绘制图片的宽高）

ctx.drawImage(img，x，y，width，height)；// img表示要绘制的图像，x，y表示图像绘制的起始坐标，width表示缩放后的宽度，height为高度。

③生成切片

ctx.drawImage(img，sx，sy，swidth，sheight，dx，dy，dwidth，dheight）；

sx，sy，swidth，sheight：用于对源图形成切片，多余部分会被裁切掉。

dx，dy，dwidth，dheight：表示切片在canvas画布绘制的位置及大小。

8）其他

方法	描述
save（）	保存当前环境的状态和属性/设置一个还原点
restore（）	恢复到上一个保存的状态点的状态和属性/恢复到还原点

对canvas中特定元素的操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。

JavaScript

	  ctx.fillStyle = "pink";
      ctx.fillRect(50, 50, 150, 150);
      ctx.save(); //设置还原点1
      ctx.fillStyle = "purple";
      ctx.fillRect(100, 100, 150, 150);
      ctx.save(); //设置还原点2
      ctx.fillStyle = "yellow";
      ctx.fillRect(150, 150, 150, 150);
      ctx.restore(); //恢复到还原点2
      ctx.fillRect(200, 200, 150, 150);
      ctx.restore(); //恢复到还原点1
      ctx.fillRect(250, 250, 150, 150);

9）绘制一个验证码

见实训第二题

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container{
        width: 100px;
        height: 50px;
        margin: 50px auto;
      }
      #cs {
        background-color: black;
        /* border: 1px solid black; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <canvas id="cs" width="100px" height="50px"
        >您的浏览器不支持canvas</canvas
      >
    </div>
  </body>
  <script>
    var cs = document.getElementById("cs");
    if (cs.getContext("2d")) {
      var ctx = cs.getContext("2d");
      // 初始绘制干扰线 绘制随机字符
      randomCode();
      randomLine();
      // 鼠标单击更新验证码
      cs.onclick = function () {
        // 先清空画布
        ctx.clearRect(0, 0, 100, 50);
        // 绘制随机字符
        randomCode();
        // 绘制干扰线
        randomLine();
      };

      // 封装随机生成数字和字母函数
      function randomCode() {
        // 随机生成数字和字母（4位）
        var code = "";
        for (var i = 0; i < 4; i++) {
          var flag = Math.ceil(Math.random() * 10);
          if (flag % 2 == 0) {
            //当随机生成一个(0-10)的数是偶数时验证码下一个字符为数字
            code += Math.floor(Math.random() * 10);
          } else {
            //当随机生成一个(0-10)的数是奇数时验证码下一个字符为字母
            code += String.fromCharCode(Math.ceil(Math.random() * 26) + 97); //a~z (97~122)
          }
        }
        console.log(code);
        // 将随机数绘制到验证码区域
        ctx.beginPath();
        ctx.font = "40px 楷体";
        textAlign = "center";
        ctx.fillStyle = "red";
        ctx.fillText(code, 10, 40);
      }

      // 封装随机生成干扰线函数
      function randomLine() {
        ctx.beginPath();
        ctx.moveTo(0, 0); //画笔移动到起始位置
        for (var i = 0; i < 20; i++) {
          // 随机生成x,y坐标
          var x = Math.ceil(Math.random() * 100);
          var y = Math.ceil(Math.random() * 50);
          ctx.lineTo(x, y);
          ctx.strokeStyle = "white";
          ctx.stroke();
        }
      }
    }
  </script>
</html>

HTML+HTML5 ​

HTML ​

1.基本标签 ​

2.文本格式化标签 ​

3.实体转义符 ​

4.W3C中的嵌套规则： ​

5.文件命名规范 ​

6.标签通用属性 ​

7.table 表格 ​

8.form表单 ​

9.form表单元素/组件 ​

（1）input类：主要用来完成输入，选择或发出指令。 ​

（2）textarea类： ​

（3）select类： ​

（4）button类： ​

10.iframe:框架标签 ​

11Emmit语法 ​

12.label在form表单中的作用 ​

HTML5 ​

1.由来 ​

2.HTML5成为了新一代网页开发标准。 ​

3.HTML5新特性 ​

4.网页布局标签 ​

5.语义化标签 ​

6.HTML5多媒体 ​

1) audio ​

2）video ​

3）embed ​

4）canvas ​

7.HTML5常用属性 ​

1）contenteditable ​

2）hidden ​

3）data-* ​

4）multiple ​

5）required ​

6）pattern 正则匹配 ​

8.表单组件 ​

input ​

9.表单属性 ​

10.input属性 ​

11.fieldset ​

HTML5 API ​

1.媒体操作 ​

1）audio（音频）（IE9以下版本不支持） ​

2）video（视频） ​

2.手势事件（移动端） ​

1）click事件 ​

2）tap事件（移动端） ​

3）swipe事件（移动端） ​

4）touch事件（移动端） ​

3.拖放事件 ​

4.定位 ​

1）浏览器支持： ​

2）判断浏览器是否支持定位： ​

3）定位方法一般有： ​

4）方法： ​

5）百度地图API获取当前位置 ​

6）实训 音乐播放器 ​

HTML5 Canvas ​

1.认识canvas ​

2.使用场景 ​

3.基本用法 ​

1）添加画布 ​

2）渲染上下文 ​

4.兼容处理 ​

5.canvas与svg的区别（了解） ​

6.canvas常用方法 ​

1）绘制路径 ​

2）绘制直线 ​

3）绘制圆弧 ​

4）贝塞尔曲线（了解） ​

5）绘制矩形 ​

6）绘制文本 ​

7）绘制图像 ​

8）其他 ​

9）绘制一个验证码 ​

HTML+HTML5

HTML

1.基本标签

2.文本格式化标签

3.实体转义符

4.W3C中的嵌套规则：

5.文件命名规范

6.标签通用属性

7.table 表格

8.form表单

9.form表单元素/组件

（1）input类：主要用来完成输入，选择或发出指令。

（2）textarea类：

（3）select类：

（4）button类：

10.iframe:框架标签

11Emmit语法

12.label在form表单中的作用

HTML5

1.由来

2.HTML5成为了新一代网页开发标准。

3.HTML5新特性

4.网页布局标签

5.语义化标签

6.HTML5多媒体

1) audio

2）video

3）embed

4）canvas

7.HTML5常用属性

1）contenteditable

2）hidden

3）data-*

4）multiple

5）required

6）pattern 正则匹配

8.表单组件

input

9.表单属性

10.input属性

11.fieldset

HTML5 API

1.媒体操作

1）audio（音频）（IE9以下版本不支持）

2）video（视频）

2.手势事件（移动端）

1）click事件

2）tap事件（移动端）

3）swipe事件（移动端）

4）touch事件（移动端）

3.拖放事件

4.定位

1）浏览器支持：

2）判断浏览器是否支持定位：

3）定位方法一般有：

4）方法：

5）百度地图API获取当前位置

6）实训音乐播放器

HTML5 Canvas

1.认识canvas

2.使用场景

3.基本用法

1）添加画布

2）渲染上下文

4.兼容处理

5.canvas与svg的区别（了解）

6.canvas常用方法

1）绘制路径

2）绘制直线

3）绘制圆弧

4）贝塞尔曲线（了解）

5）绘制矩形

6）绘制文本

7）绘制图像

8）其他

9）绘制一个验证码