html5

一、HTML5介绍

1-1. 什么是html5？

• 狭义： html的最新版本
• 广义： html5+css3+ES6的一种技术组合

1-2. 发展史

• html4.01 1999-12
• xhtml : 扩展的html
  2002~2010 阶段称为web2.0（div+css布局、ajax）
• html5: 2011提出草案，2014被w3c纳入标准

1-3. html5的新特性

• 近10年的技术升级，手机端网页必备
• 离线存储技术，可以把数据存储在用户的浏览器端
• canvas绘图能力，报表、游戏开发
• 多媒体（audio / video）
• 提供新的地理定位api，可以与地图接口整合开发移动端的地图应用

1-4. 测试html5兼容性的网址
http://html5test.com
分数越高兼容性越好

二、HTML5语义标签

2-1. 语义标签

• 标签的名称就代表一定的含义，比如：img 插入图片(image)

2-2. 语义标签

• html4: table,form,img,strong

• html5:
  <header> 页头
  <nav> 导航条
  <section> 区块（外层的父级div）
  <article> 文章内容
  <aside> 侧边栏
  <footer> 页脚

• html5新增语义标签还有
  address 地址
  dialog 对话框,
  progress 进度条
  time 日期或时间

html4 写法

 <div id="dialog">文字</div>  

html5 写法

 <dialog>文字</dialog>

三、HTML5表单增强（智能表单： 表单验证）

3-1. html4表单

<input type="text" id="" value="文本域" />
<input type="password" id="" value="密码域" />
<input type="radio" id="" value="单选" />
<input type="checkbox" id="" value="多选" />
<input type="file" id="" value="文件上传" />
<input type="hidden" id="" value="隐藏域" />
<select name="下拉列表">
    <option value="值1">选项1</option>
    <option value="值2">选项2</option>
</select>
<input type="submit" value="提交按钮"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>

3-2. html5新增的表单元素类型：

目前不是所有浏览器都支持，每个浏览器显示效果不同

Color 颜色选择器
Date 日期选择框
Datetime 日期时间选择框
datetime-local 日期和时间 (无时区)选择框
month 月份选择器
time 时间选择框
week 周和年选择框
email 电子邮件
number 数值的输入域
range 区间选择器，滑块

补充的属性：

• min 最小值
• max 最大值
• step步长： 每次增减的值

<input type="number" min="1" max="100" step="1"  value="1" />

search 搜索框
tel 电话号码
url url地址

3-3. datalist数据列表

<!-- 注意： list="mydata"    list="mydata" 对应关系-->
<input type=""  list="mydata" />
<datalist list="mydata">
      <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>

3-4. 表单新属性

autofocus 自动获取焦点
pattern 使用正则表达式对输入框的内容进行验证
placeholder 提示文本

四、HTML5新属性

4-1. aria-*

专门针对盲人设备准备的属性，最终可以通过屏幕阅读机发音。
比如：淘宝的搜索框

<input id="q" name="q" aria-label="请输入搜索文字">

4-2. data-*

用于缓存自定义的数据，在一定的情况下使用数据做交互效果。
比如：淘宝的手机二维码，目的是为了加快网页的下载速度

<img class="qrcode" src="//g.alicdn.com/s.gif" data-src="//img.alicdn.com/tfs/TB18W1cQFXXXXaWXXXXXXXXXXXX-160-160.png" aria-labelledby="mtb"/>

• http://img.alicdn.com/tfs... 完整
• //img.alicdn.com/tfs... 简写

4-3. 如何获取data-name数据的值

jQuery:

方法1： $("选择器").attr("data-name")
方法2： $("选择器").data("name") ------- 推荐

五、访问dom的6种方式

(1) id访问,返回唯一的dom元素

let domid=document.getElementById("no1");
console.log("id访问",domid);

(2) 标签访问,返回html集合

let tags=document.getElementsByTagName("li");
console.log("标签访问",tags);

(3) name属性方法,返回节点集合

let names=document.getElementsByName("t3");
console.log("name属性方法",names);

(4) 类样式的名称,返回html集合

let classs=document.getElementsByClassName("test");
console.log("类样式的名称",classs);

HTML5 选择器

(5) 返回匹配结果中的第一个,返回唯一的dom元素

let first=document.querySelector("li");
console.log("匹配结果中的第一个",first);

(6) 返回匹配结果的所有,返回的是集合

let lis=document.querySelectorAll("li");
console.log("返回匹配结果的所有",lis);

SVG矢量图形

6-1. SVG

Scalable Vector Graphics 可缩放的矢量图形，是一种图片格式，本质是一个存放矢量路径的xml文件。

6-2. 制作svg

AI（adobe illstrator）、inkscape软件进行制作
Adobe photoshop、Adobe Illutrator 、Adobe Indesing 、Adobe Acrobat（PDF）

• 从网络下载: http://sc.chinaz.com/tag_jiaoben/svg.html

6-3. 如何使用svg

背景图片 background: url()
插入图片 <img src="" />

6-4. 使用svg的好处

永远高清，越大越清晰，因为是矢量（记录的是文件的路径），还可以制作动画效果。

七、Web存储技术

7-1. h5新增2种本地存储技术

• localstorage 本地存储：永久存储，除非人工删除，否则一直存在
• sessionstorage 回话存储：临时存储，关闭浏览器自动销毁

7-2. 存储对象提供的方法

• 获取值 getItem(key) 根据键的名称获取值
• 存入值 setItem(key,value) 把键值value存储在键名key中
• 删除：
  • 删除指定的键 removeItem(key)
  • 删除所有 clear()

八、HTML5多媒体标签

1. 早期的多媒体技术
   windows media player 微软的技术
   adobe flash player flash视频流播放技术

2. html5新增的多媒体
   audio: 音频，支持格式: MP3, WAV, Ogg
   video: 视频，支持格式: MP4, webm，Ogv

3. video标签的使用
   <video></video>
   属性:

autoplay 自动播放（google做了屏蔽，不能自动播放）
controls 播放器的控制器
loop 视频的循环次数（设置该属性将循环播放）
poster 视频没有播放器的等待图像
src 视频的路径

4. 使用source标签： 提供多个视频来源，目的是兼容不同的浏览器核心
   语法：<source src="资源地址url" type="资源类型"></source>

<video controls autoplay loop  poster="./images/3400.gif">
   <source src="视频地址1" type="video/mp4"></source>
   <source src="视频地址2" type="video/webm"></source>
   <source src="视频地址3" type="video/ogg"></source>
</video>

推荐： windows : 格式工厂（万能音视频格式转换）
http://www.pcfreetime.com/formatfactory/CN/index.html

5. audio标签的使用和video几乎一样

6. 音视频标签的方法（可以自己开发播放器）

dom.play() 开始播放音频/视频
dom.pause() 暂停当前播放的音频/视频

使用方法：

自定义按钮.onclick=function(){
    dom元素.play()
    dom元素.pause()
}

案例： 开发一个最简单的播发器

九、地理位置

1. 常见的定位方式

• GPS: Global Positioning System（全球定位系统）的简称
• 北斗：北斗卫星导航系统是中国着眼于国家安全和经济社会发展需要,自主建设、独立运行的卫星导航系统
• IP地址: 110.184.229.26 四川省成都市武侯区 电信
• 蜂窝电话： 移动电话，基站中转信号
• wifi： 仅限很小的范围（5米）

2. H5新增的API定位方式:

navigator.geolocation.getCurrentPosition(successFn,errorFn,optionObj)

navigator 浏览器对象
geolocation html5新增的地理定位对象
getCurrentPosition(successFn,errorFn,optionObj) 获取当前经度和纬度的位置

参数的说明：
成功的回调函数

successFn(position){
    position.coords坐标.
                          latitude          纬度数值【掌握】
                          longitude         经度数值【掌握】
                          accuracy           精确度单位米
                          altitude           高度，单位米
                          altitudeAccuracy   高度的精确地，单位米
                          heading            运动的方向，相对于正北方向的角度。
                          speed              运动的速度（假设你在地 平线上运动），单位米/秒。
}

errorFn(error错误对象){
    error.PERMISSION_DENIED:用户拒绝对获取地理位置的请求。
    error.POSITION_UNAVAILABLE:位置信息是不可用的。
    error.TIMEOUT:请求用户地理位置超时。
    error.UNKNOWN_ERROR:未知错误。
}

optionObj={
    enableHighAccuracy: true, //开启高精度
    timeout: 3000, //超时时间，单位毫秒
    maximumage: 2000 //缓存时间，两次定位的时间差
}

小结： 由于google和firefox是使用的国外地图，所以定位都会失败，只能使用IE（IE9以上浏览器才可以），因为使用的是
https://cn.bing.com/maps?FORM=Z9LH4 或者 百度地图 或者 腾讯地图 或者 高德地图

获取不到经纬度的解决方法： http://api.map.baidu.com/lbsapi/getpoint/index.html 104.062267,30.59292

3. 地理定位api与百度地图开发者中心的api整合使用
   百度地图开发者中心 http://lbsyun.baidu.com/
   前端用户：Web端 JavaScript API http://api.map.baidu.com/api?v=2.0&ak=您的密钥 【必须有秘钥】

• 注册百度账号
• 登录账号
• 使用js API http://lbsyun.baidu.com/index.php?title=jspopular
• 申请秘钥 http://lbsyun.baidu.com/apiconsole/key?application=key
  AK秘钥 8NBAL5upM822wokcITZuSXr7Uj1L4KRL

4. 关于地图比例级别的说明，总共19级
   https://blog.csdn.net/tjj3027/article/details/81015138

十、css3的入门

1. css3的兼容性
   测试
   https://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/

2. CSS3新特性

• 选择器的扩展 nth-child nth-of-type
• 背景和边框 border-radius background-size border-image
• 盒子模型 box-sizing box-shandow 盒子阴影
• 布局： 多列布局（杂志和报纸排版），伸缩布局flex（淘汰float）
• 动画： 过渡动画、变形动画、关键帧自定义动画

3. 准备css3参考手册
   http://www.w3school.com.cn/css3/index.asp

选择器

1. 基本选择器

*,Element,#id,.class, selector1,selectorN 分组： 共享样式

• 优先级： #id > .class > Element > *

2. 层次选择器
   E F后代
   E>F 父子
   E+F邻居
   E~F兄弟

3. 动态伪类
   E:link
E:visited
E:hover
E:active
E:focus 输入框的焦点样式

4. 目标伪类
   E:target

5. 结构伪类选择器
   E:nth-child(n) 第几个儿子
   E:nth-of-type(n) 第几个兄弟

6. 否定伪类
   选择器:not(选择器)
   鼠标悬停的li除外

ul:hover li:not(:hover)

7. 伪元素（清除浮动，三角形图标）
   CSS2.1
   :before
:after
   CSS3
   ::before
::after

8. 属性选择器
   标签选择器[属性名称=属性值]

十一、盒子阴影

box-shadow: x偏移值 y偏移值 模糊值 外延值 颜色 默认外阴影/insert内阴影

十二、圆角边框

border-radius: 左上 右上 右下 左下;

案例：绘制柠檬

<style>
        #lemon{
            width: 200px;
            height: 200px;
            /* background-color: rgb(233, 217, 51); */
            background: radial-gradient(center, rgb(255, 232, 0),rgb(150, 140, 17));
            background: -moz-radial-gradient(center, rgb(255, 232, 0),rgb(150, 140, 17));
            background: -webkit-radial-gradient(center, rgb(255, 232, 0),rgb(150, 140, 17));

            margin: 100px 200px;

            transform: rotate(45deg); /* 旋转45度 */

            border-radius: 20px 147px;
        }
    </style>
</head>
<body>
    <div id="lemon"></div>