HTML5 新特性

丁雪
70 阅读2分钟

近期想重温一遍基础知识，先html5经常会使用的新属性。

1、加入语义化标签，如：header、footer、section、article等

2、音视频处理，audio和video

3、绘图，canvas webGL，开发中经常会看到canvas（不多做解释），WebGl 定义了一套API, 能够允许在网页中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的3d图形API。这些API是通过HTML 5的canvas标签来使用的。

4、拖拽释放(Drag and drop)API

<!DOCTYPE HTML>
<html>

<head>
    <title>拖放示例-文本</title>
</head>
<style>
.src {
    display: flex;
}

.dropabled {
    flex: 1;
}

.txt {
    color: green;
}

.img {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}

.target {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid gray;
    color: red;
}
</style>

<body>
    <div class="src">
        <div class="dragabled">
            <div class="txt" id="txt">
                <p draggable="true">此段文字设置了属性draggable="true"</p>  
            </div>
        </div>
        <div id='target' class="dropabled target">Drop Here</div>
    </div>
    <script>
        var dragSrc = document.getElementById('txt')
        var target = document.getElementById('target')

        dragSrc.ondragstart = handle_start
        dragSrc.ondrag = handle_drag
        dragSrc.ondragend = handle_end

        function handle_start(e) {
          console.log('dragstart-在元素开始被拖动时候触发')
        }

      function handle_drag() {
            console.log('drag-在元素被拖动时候反复触发')
        }

      function handle_end() {
            console.log('dragend-在拖动操作完成时触发')
        }

        target.ondragenter = handle_enter
        target.ondragover = handle_over
        target.ondragleave = handle_leave

        target.ondrop = handle_drop

        function handle_enter(e) {
            console.log('handle_enter-当元素进入目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        }

        function handle_over(e) {
            console.log('handle_over-当元素在目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        }

        function handle_leave(e) {
            console.log('handle_leave-当元素离开目的地时触发')
            // 阻止浏览器默认行为
            // e.preventDefault()
        }

        function handle_drop(e) {
            console.log('handle_drop-当元素在目的地放下时触发')
            var t = Date.now()
            target.innerHTML = ''
            target.append(t + '-拖放触发的事件。')
            e.preventDefault()
        }
    </script>
</body>

</html>

5、history API

常用API：1.history.length：返回当前页面所产生的历史记录个数，即在同一个浏览器tab下产生的历史记录；2.history.pushState(state,title,URL)：向浏览器新增一条历史记录，但是不会刷新当前页面（不会重载），其中state为对象，可以用作携带信息用，title：目前来看没啥用一般为空或null，URL：即要更改页面的URL，且必须同源，不能跨域；3.history.replaceState(state,title,URL):更改当前浏览器的历史记录，即把当前执行此代码页面的记录给替换掉，参数与第二条相同；4.history.back()、history.forward()、history.go()：分别为前进一个历史，后退一个，history.go(Number)，其中Number可正可负，即向前或向后若干个记录5.history.state：返回当前页面状态参数，此参数一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附带的state值，例子如下：

6、requestAnimationFrame  我的日常项目大多是管理平台开发，没使用过该属性，有机会可研究下

7、地理位置(Geolocation)API

navigator.geolocation支持地理位置API的浏览器会定义 navigator.geolocation属性，用于获取用户的位置信息。此属性拥有以下方法：navigator.geolocation.getCurrentPosition() 获取用户当前的位置。该方法需要接受一个回调函数作为参数，如果这个方法成功则返回的地理数据对象，该对象包含了用户地理位置的信息，信息内容大概为：coords.latitude  用户地理位置的十进制纬度coords.longitude  用户地理位置的十进制经度coords.accuracy 用户地理位置的 位置精度  以米为单位coords.altitudeAccuracy 用户地理位置的 位置海拔精度  以米为单位coords.heading 用户设备当前移动的角度方向，以正北方向顺时针计算。coords.speed 用户当前的 移动速度 以米为单位timestamp 响应的时间/日期navigator.geolocation.watchPosition() 该方法用于获取当前位置，同时不断地监视当前位置，一旦用户的地理位置发生变化，就会调用指定的回调函数。navigator.geolocation.clearWatch() 该方法用于停止监视用户的位置。传递给此方法的参数 应当是调用watchPosition()方法的返回值。

8、 webSocket web存储 localStorage、sessionStorage ，使用频繁

// setItem、getitem、removeItem、clear
sessionStorage.setItem('x')
sessionStorage.getItem('x')
localStorage.setItem('x')
localStorage.getItem('x')
...

9、 表单控件，calendar(日历)、date、time、email、url、search

经常在项目中使用，还有其他新增属性或功能可官网查询。

avatar
文章
阅读
粉丝