<!--表单-->
<form action=""><!--表单元素--><input type="text"><input type="password"><input type="button"><input type="submit"><input type="file"><input type="checkbox"><input type="radio"><input type="reset"><!--新增--><input type="search"><input type="number"><input type="email"><input type="url"><input type="tel"><!--在移动端使用的时候才会看到区别--><!--体现：调用的虚拟键盘不一样--><input type="date"><input type="week"><input type="time"><input type="color"><input type="range">
</form>form 属性：action： 用来指定当前表单控件中的数据要交给哪个后台文件去处理method： 用来指定一种数据提交方式： get | post1. 输入框：<input type="text">属性：name: 设置当前控件的名称value：设置当前控件的默认值placeholder： 占位符【当前控件的一个提示信息】readonly： 设置当前控件为只读模式disabled： 设置当前控件不能输入 maxlength： 设置当前控件最多能输入多少个字符autofocus: 自动获取焦点2. 密码输入框：<input type="password">属性： 与文本输入框的属性一致。3.  单选控件：<input type="radio">注意：☞ 默认单选控件不能实现单选效果☞ 只要给单选空件设置相同的name值即可。<input type="radio" name="gender" checked>男<input type="radio" name="gender">女4. 多选控件：<input type="checkbox" checked> 5. 下拉列表框：<select multiple><option>河南</option><option selected>山西</option><option>北京</option></select>属性：selected: 设置下拉列表框中的默认选中项multiple：可以实现多选效果或者如下写法：<select><optgroup label="河北省"><option>张家口</option><option>石家庄</option><option>保定</option></optgroup></select>6. 多行文本框（域）：<textarea></textarea>  < resize: none> 禁止文本域拖拽7. 上传控件：<input type="file">8. 按钮系列：☞ <input type="submit">                 就是用来提交表单数据的☞ <input type="image"  src="按钮.jpg">  用来提交表单数据☞ <input type="button" value="按钮">    不能提交表单数据，和js配合使用☞ <input type="reset">                  将控件中的值恢复到默认值<fieldset><legend>个人信息采集</legend>    </fieldset>H5新属性：
☞ <input type="number" step="5" pattern="">： 该控件只能用来输入数字属性： step="值"；            设置当前控件累加的值或减少的值。pattern="正则表达式"   通过正则表达式可以实现灵活的控制输入框中能输入哪些数据类型☞ <input type="url">： 只能输入合法的网址☞ <input type="email">: 设置用户只能输入合法的邮箱地址☞ <input type="date">： 在网页中显示日期控件☞ <input type="week" name="">  显示一年中的第几周☞ <input type="time">          显示24小时内的时间☞ <input type="month" name="">  显示第几个月☞ <input type="range">  ： 通过用户拖动控件实现选中值的大小属性：min:  规定允许的最小值max:     规定允许的最大值value:  规定默认值step: 每多拽一次滑块，里面值要累加多少或者减少多少☞ <datalist></datalist>使用：-----搜索下拉列表<input type="text" name="" list="myList"><datalist id="myList"><option value="IT程序入门" label="大约有20个空位"></option><option value="挖掘机入门" label="大约有2台机器"></option><option value="美容美发入门" label="大约每有假头"></option></datalist>

☞ required：      实现让表单空键的值不能为空【必须填】例如：<input type="text" name="" placeholder="请输入用户名" required>☞ autocomplete： 将用户提交过的数据进行缓存注意：1. 该属性可以给form标签设置2. 浏览器中该属性的默认值： on | off<form action="1.php" autocomplete="on"></form>☞ novalidate： 取消验证注意：1. 该属性要给form标签设置
<form action="1.php" autocomplete="on" novalidate><input type="email" name="">  ---加上novalidate属性后，该邮箱地址不会进行是否合法验证</form>☞ placeholder： 占位符 【输入框的提示信息】☞ autofocus： 自动获取焦点

 ☞ <video></video>： 在网页中用来展示视频例如：<video src="ds.mp4" controls autoplay loop></video>controls： 显示控制栏autoplay： 多媒体自动播放loop      ： 设置循环播放1. 关于浏览器支持多种视频格式文件播放的兼容写法：<video controls><source src="ds.mp4"><source src="ds.ogg"><source src="ds.webm">浏览器不支持video标签</video>☞ <audio></audio>： 在网页中展示音频总结：    audio标签的属性与video标签的属性一样。  兼容写法：<audio><source src="a.mp3" type=""><source src="a.ogg" type=""><source src="a.wav" type="">浏览器不支持audio标签</audio>

  <script>console.log(navigator.geolocation);if (navigator.geolocation) {//获取地理位置需要等比较长的一段时间//尤其是在PC段，根据IP获取的
      navigator.geolocation.getCurrentPosition(successCB, errorCB);} else {console.log('你的浏览器不支持地理定位');}//获取地理位置成功function successCB(position) {console.info(position);console.log('位置精度:' + position.coords.accuracy);console.log('维度：' + position.coords.latitude);console.log('经度：' + position.coords.longitude);}//获取地理位置失败function errorCB(error) {console.error(error);var msg = '';switch (error.code) {case error.PERMISSION_DENIED:msg = "用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:msg = "位置信息是不可用的。"break;case error.TIMEOUT:msg = "请求用户地理位置超时。"break;case error.UNKNOWN_ERROR:msg = "未知错误。"break;}console.error(msg);}</script>

<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=    0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>var geolocation = new BMap.Geolocation;geolocation.getCurrentPosition(function(position){console.log(position);// 这些都是写死var map = new BMap.Map("container"); // container表示显示的容器// 把经度纬度传给百度/*40.1691162668,116.6348530780*/var point = new BMap.Point(position.point.lng,position.point.lat);//默认的比例
        map.centerAndZoom(point, 20);//添加鼠标滚动缩放
        map.enableScrollWheelZoom();// 只写上面三行就可出现地图了，并且会定位// 定义好了一个图片标记var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));// 创建标注var marker = new BMap.Marker(point, {icon: myIcon});map.addOverlay(marker);});</script>

<!DOCTYPE HTML>
<html>
<head><style type="text/css">#div1 {width: 1000px;height: 250px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {console.log(ev);ev.preventDefault();}function drag(ev) {console.log(ev);ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {console.log(ev);ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script>
</head><body><p>请把图片拖放到矩形中：</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><img id="drag1" src="./01.jpg" draggable="true" ondragstart="drag(event)" /></body>
</html>

<!-- 1. 首先，为了使元素可拖动，把 draggable 属性设置为 true ： -->
<img draggable="true" />
<!-- 2. 拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
-->
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
<!-- 在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。 --><!-- 3.放到何处 - ondragover -->
<!-- ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法： -->
event.preventDefault()<!-- 4.进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
-->
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}/*
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
*/

<!DOCTYPE HTML>
<html>
<head><style type="text/css">#div1,#div2 {float: left;width: 1000px;height: 250px;margin: 10px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script>
</head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="./01.jpg" draggable="true" ondragstart="drag(event)" id="drag1" /></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>