HTML5入门知识

今天要早睡
133 阅读7分钟

一、新增新标签

  • header：定义文档的页眉头部

  • nav：定义导航链接的部分

  • footer：定义文档或节的页脚 底部

  • article：定义文章。

  • section：定义文档中的节（section、区段）

  • aside：定义其所处内容之外的内容 侧边

  • datalist 标签定义选项列表

  • fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

    ​

二、新增表单控件属性值

  • email：输入邮箱格式

  • tel：输入手机号码格式

  • url：输入url格式

  • number：输入数字格式

  • search：搜索框（体现语义化）

  • range：自由拖动滑块

  • time：小时分钟

  • date：年月日

  • datetime：时间

  • month：月年

  • week：星期年

    ​

三、新增表单控件属性

  • placeholder：占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回

  • autofocus：规定当页面加载时 input 元素应该自动获得焦点

  • multiple：多文件上传

  • autocomplete：on（输入值时自动补全）off（不启用自动补全）

  • required：必填项内容不能为空

  • accesskey：超链接带有快捷键采用 alt + s的形式

    ​

四、新增API

1.拖拽API--实例拖拽图片

注意：链接和图片默认是可拖动的，可以不需要draggable属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>拖拽API</title>
    <style type="text/css" media="screen">
        .box{
            width: 200px;
            height: 60px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box" id="box" ondragover="allowDrop(event)"  ondrop="drop(event)"></div>
    <!-- 1.设置元素可拖动：draggable="true" -->
    <img id="pic" src="./banner.png" height="50" width="100" alt="拖拽图片" draggable="true" ondragstart="drag(event)">
    <script type="text/javascript">
    // 2.元素拖动时，设置该元素的数据类型和值：dataTransfer.setData("key",e.target.id) 
        function drag(event){
            var e = event||window.event;
            e.dataTransfer.setData("text",e.target.id);
        }
    // 3.设置允许放置，默认是无法将元素放置到其他元素中，需要阻止对元素的默认处理方式event.preventDefault()  
        function allowDrop(event)
        { 
            var e = event||window.event;
            e.preventDefault();
        }
    // 4.放置元素,获取系统自带的信息,再进行放置e.target.appendChild()
        function drop(event)
        {
            var e = event||window.event;
            e.preventDefault();
            var data=e.dataTransfer.getData("text");
            e.target.appendChild(document.getElementById(data));
        }
    </script>
</body>
</html>
//拖拽API的7个函数
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
(4)ondragenter：目标对象被源对象拖动着进入
(5)ondragover：目标对象被源对象拖动着悬停在上方
(6)ondragleave：源对象拖动着离开了目标对象
(7)ondrop：源对象拖动着在目标对象上方释放/松手

2.音频、视频API--实例音乐播放--视频播放

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>音频API</title>
</head>
<body>
    <audio controls="controls" loop="loop" autoplay="autoplay">
        <source src="./music.ogg" type="audio/ogg">
        <source src="./music.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <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>
</body>
</html>

3.画布API--使用javascript在网页上绘制图像

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>画布API</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <canvas id="myCanvas" width="200" height="100">Your browser does not support the canvas element.</canvas>
    <script type="text/javascript">
        // 通过id获取canvas元素
        var c=document.getElementById("myCanvas");
        // 创建context对象，是内建的html5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
        var cxt=c.getContext("2d");
        //fillStyle方法设置图像颜色，fillRect方法社会形状、位置和尺寸
        cxt.fillStyle="#FF0000";
        cxt.fillRect(0,0,150,75);
        //绘制线条
        cxt.moveTo(10,10);
        cxt.lineTo(150,50);
        cxt.lineTo(10,50);
        cxt.stroke();
        //放置图片
        var img=new Image()
        img.src="./banner.png"
        cxt.drawImage(img,0,0);
    </script>
</body>
</html>

4.本地离线存储

localStorage数据永久存在，除非自动删除
	if (typeof(Storage) !== "undefined") {
        // 设置值
        localStorage.setItem("lastname", "Gates");
        // 获取值
        var res = localStorage.getItem("lastname");
        console.log(res);
    } else {
        var error = "抱歉！您的浏览器不支持 Web Storage ...";
        console.log(error);
    }
sessionStorage数据在用户关闭浏览器窗口后，会被删除 
      if (typeof(Storage) !== "undefined"){
            sessionStorage.lastname="Smith";
            var res=sessionStorage.lastname;
            console.log(res)
         }
       else{
            var error = "抱歉！您的浏览器不支持 Web Storage ...";
            console.log(error);
       }
通过localStorage跨页面传输数据
    页面设置值：
    var name=$("#input").val(); localStorage.setItem("name",name);
    另一页面调用值：
    $(function(){ 
        window.addEventListener("storage", function(event){    
        console.log(event.key + "=" + event.newValue); 
        console.log(event)
        //event对象中有旧值、新值、路径.....
        })    
    }); 
//方法详解
(1)setItem(key, value) 设置存储内容
(2)getItem(key) 读取存储内容
(3)removeItem(key) 删除键值为key的存储内容
(4)clear() 清空所有存储内容

5.地理定位API

function getLocation(){
	//检测是否支持地理定位
      if (navigator.geolocation){
      //如果支持，则运行 getCurrentPosition(successCallback, errorCallback) 方法。如果不支持，则向用户显示一段消息。
      //如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
      //第一个参数用于获取位置，第二个参数用于处理错误
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }else{
            var error="Geolocation is not supported by this browser.";
            console.log(error)
        }
    }
    //showPosition() 函数获得并显示经度和纬度
    function showPosition(position){ 
      var Latitude= position.coords.latitude;//纬度
      var Longitude= position.coords.longitude;//经度
      var accuracy=position.coords.accuracy；//精度
	  var altitude=position.coords.altitude；//海拔高度
      console.log(Latitude);
      console.log(Longitude);
    }
    function showError(error){
        switch(error.code)
        {
            case error.PERMISSION_DENIED:  //用户不允许地理定位
              console.log("User denied the request for Geolocation.");
              break;
            case error.POSITION_UNAVAILABLE:  //无法获取当前位置
              console.log("Location information is unavailable.");
              break;
            case error.TIMEOUT:  //操作超时
              console.log("The request to get user location timed out.")
              break;
            case error.UNKNOWN_ERROR:
              console.log("An unknown error occurred.")
              break;
        }
    }
    getLocation();
    //百度地图demo：http://lbsyun.baidu.com/jsdemo.htm#a1_2

6.文件读取API

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文件读取API</title>
    <style type="text/css" media="screen">
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            width: 200px;
            margin:0 auto;
        }
        .iconBox{
            margin-top: 20px;
            width: 200px;
            height: 100px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div class='container'>
        <input type="file" multiple id="selectFile" />
        <div class='iconBox'></div>
    </div>
    <script type="text/javascript">
        if(window.FileReader) {  
            document.querySelector('input[type=file]').onchange = function (
            // 1 创建文件读取对象 实例化一个读取器
            var reader = new FileReader();&emsp;
            // console.log(this.files); 通过当前的file标签 获取选择的文件信息
            // 2 调用该对象的方法 读取文件，读取文件是一个耗时操作 不一定什么时候读取完毕
            reader.readAsDataURL(this.files[0]);
            // 3 添加事件 当文件过大，不能立即读完 通过事件监听进度
            reader.onload = function (){
            // 使用读取完毕的文件console.log(this);
            document.querySelector('.iconBox').style.background = 'url('+ this.result+')
            no-repeat center/cover';
                }
            }
            }else {
            alert("Not supported by your browser!");   
            }  
    </script>    
</body>
</html>
//FileReader事件
(1)onabort&emsp;&emsp;中断时触发
(2)onerror&emsp;&emsp;出错时触发
(3)onload&emsp;&emsp;文件读取成功完成时触发
(4)onloadend &emsp;&emsp;读取完成触发，无论成功或失败
(5)onloadstart&emsp;&emsp;读取开始时触发
(6)onprogress&emsp;&emsp;读取中
//FileReader事件方法
(1)readAsDataURL(参数file)  //将文件读取为 DataURL
，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
(2)readAsText(参数 file [encoding])  //将文件读取为文本
该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
(3)readAsBinaryString(参数 file)    //将文件读取为二进制码
该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
(4)abort(参数 none)     //中断读取

五、新增事件

1.网络状态

//用于检测用户当前的网络状况，返回布尔值
var status=window.navigator.onLine;//用户网络连接时被调用
console.log(status);
var status=window.navigator.offline;//用户网络断开时被调用
console.log(status);
avatar
文章
阅读
粉丝