精华内容
下载资源
问答
  • 哪个不是html5的新特性
    千次阅读
    2018-06-28 19:43:37
    1.H5有哪些新的特性?
    HTML5现在已经不是SGML(标准通用置标语言)的子集,主要是关于图像,位置,存储,多任务等功能的增加。
    绘画canvas
    用于媒介回放的videoaudio元素
    本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失
    sessionStorage的数据在浏览器关闭后自动删除

    语义化更好的内容元素,比如articlefooterheadernavsection
    表单控件:calendardatetimeemailurlsearch

    新技术:webworkerwebsocketGeolocation

    2.移除的元素
    纯表现的元素:basefontbigcenterfontsstrikettu

    对可用性产生负面影响的元素:frameframesetnoframes

    3.如何区分HTML和HTML5?
    区分HTML5:DOCTYPE声明,新增的结构元素,功能元素等
    更多相关内容
  • 这一次,彻底搞懂HTML5新特性

    千次阅读 2022-02-27 08:44:50
    HTML5已经被提出多年,关于HTML5到底带来了哪些新特性?和之前的HTML版本有什么区别?这经常是面试官考到的题目,下面让我们来深刻的总结这个问题吧~ HTML新特性 1:语义化标签 通过语义化标签,可以让页面有更加...

    前言

    HTML5已经被提出多年,关于HTML5到底带来了哪些新特性?和之前的HTML版本有什么区别?这经常是面试官考到的题目,下面让我们来深刻的总结这个问题吧~

    HTML新特性

    1:语义化标签

    通过语义化标签,可以让页面有更加完善的结构,让页面的元素有含义,同时利于被搜索引擎解析,有利于SEO,主要标签包括下面的标签:

    标签描述
    header表示文档的头部区域
    footer表示文档的尾部区域
    nav表示文档导航部分
    section表示文档的某一节
    article表示文章
    main表示文档主要的内容区域

    2:增强型表单

    例如可以通过input的type属性指定类型是number还是date或者url,同时还添加了placeholder和required等表单属性。

    3. 媒体元素

    新增了audio和video两个媒体相关的标签,可以让开发人员不必以来任何插件就能在网页中嵌入浏览器的音频和视频内容。

    4. canvas绘图

    canvas绘图指的是在页面中设定一个区域,然后通过JS动态的在这个区域绘制图形。

    5. svg绘图

    这一部分不详细展开,想要了解的小伙伴可以参考其他文章~

    6. 地理定位

    使用getCurrentPosition()方法来获取用户的位置,从而实现队地理位置的定位。

    7. 拖放API

    通过给标签元素设置属性draggable值为true,能够实现对目标元素的拖动。

    8. Web Worker

    Web Worker通过加载一个脚本文件,进而创建一个独立工作的线程,在主线程之外运行,worker线程运行结束之后会把结果返回给主线程,worker线程可以处理一些计算密集型的任务,这样主线程就会变得相对轻松,这并不是说JS具备了多线程的能力,而实浏览器作为宿主环境提供了一个JS多线程运行的环境。

    9. Web Storage

    关于Web Storage部分,大家需要重点掌握的是cookie、Localstorage和SessionStorage三者之间的区别:

    image.png

    10. Websocket

    关于websocket协议,大家主要需要记住的就是websocket和HTTP的区别。

    • 相同点

    HTTP和Websocket都是基于TCP的应用层协议。

    • 不同点

    websocket是双向通信协议,模拟socket协议,可以双向发送和接受消息,HTTP是单向的,意思是说通信只能由客户端发起。
    websocket是需要浏览器和服务器通过握手建立连接,但是HTTP是浏览器向服务器发送连接,服务器预先不知道这个连接。

    • 联系

    websocket建立握手时需要基于HTTP进行传输,建立连接之后呢便不再需要HTTP协议了。

    总结

    关于HTML5的新特性,希望大家能从以上十个点来进行系统性的回答。

    展开全文
  • 前端HTML5十大新特性详细总结

    千次阅读 多人点赞 2021-04-04 21:22:03
    前端HTML5十大新特性总结 一 必须知道 写前端的都知道,在代码最前面都有这一行代码,大家都知道一定要把这东西写上去。 <!DOCTYPE html> 但是!这是什么玩意儿?为什么要写上去?不写上去会怎么样?很少人去...

    前端HTML5十大新特性总结

    一 必须知道

    写前端的都知道,在代码最前面都有这一行代码,大家都知道一定要把这东西写上去。

    <!DOCTYPE html>
    

    但是!这是什么玩意儿?为什么要写上去?不写上去会怎么样?很少人去注意到,反正就照写就可以了。

    所以,这是个啥玩意儿?
    这是声明!这是HTML5声明的新特性!

    既然有HTML5,那肯定有HTML4是吧,那HTML4是怎么声明的呢?

    HTML4有三种声明方式
    Strict(严格模式
    Transitional(过渡模式)
    Frameset(框架模式)
    具体是什么样的声明格式,有兴趣百度谷歌。(因为现在很少用了,所以我也懒得去记住了TT)

    HTML5很简单只需要统一声明
    声明有什么作用呢?
    它就是用来告诉浏览器文档使用哪一种HTML或者XHYML规范的。

    <!DOCTYPE html>
    

    那为什么可以这么用呢?

    百度给的解释:因为HTML5不是SGML的子集,从最开始的声明方式就不一样了。

    那么问题又来了,什么是SGML呢?一看就是某些英文单词的首字母拼凑在一起的是吧。

    那是什么呢?SGML是Standard Generalized Markup Language,标准通用标记语言。是一种很复杂的标记语言,从HTML,XML,衍生而来的。

    HTML5的新特性之声明就写到这吧。也理解了这一行必须写的代码是个啥玩意儿!

    二 HTML5十大新特性

    在这里插入图片描述

    2.1 语义标签

    什么是语义标签,我自己的理解就是看到标签我就能明白这是什么意思。以前制作网页布局基本使用div来做。div就是一个普通的块级标签,对搜索引擎来说没有任何的语义。
    btw面试前端的时候面试官可能会问你语义标签有哪一些?这平时都是记不住的,都是用到再去查的,所以面试的时候再去复习吧。
    HTML5新增的语义标签有以下这个几个,这几个很好记住,在理解的基础上记住。我是在纸上画出页面的大概布局,然后划分区域,填入该区域的标签,根据意思去填。比如头部,就是header对吧,很简单。

    Q:对整个HTML结构进行语义化的规范操作有什么好处?
    A:1 有利于SEO(Search Engine Optimization 搜索引擎优化),和搜索引擎建立良好的沟通,有助于爬虫爬取更多有效的信息。因为爬虫依赖于标签来确定上下文和各个关键字的权重。
    2 方便其他设备的解析(屏幕阅读器,移动设备),以有意义的方式来渲染网页。
    3 方便团队开发和维护,增加代码可读性,遵循标准,减少差异化。

    <!--header:网页的头部,作为一个网页内容快的标题-->
    <header></header>
    <!--nav:导航栏部分,定于整个页面的主要导航部分-->
    <nav></nav>
    <!--section:网页的一个内容区块-->
    <section></section>
    <!--aside:侧边栏,可以是相关链接或者资料-->
    <aside></aside>
    <!--artical:区块内的一个独立区域,定义自成一体独立的内容-->
    <artical></artical>
    <!--footer:网页的尾部,可以是作者,版权信息,附录等等-->
    <footer></footer>
    

    attention
    语义化标签主要是针对搜索引擎
    新标签可复用
    浏览器兼容问题,在IE9中(2021最新版),需要 转化为块级元素。

    header,nav,main{
        diaplay:block;
    }
    
    • 结构代码可以这么写
    /*结构代码*/
    <header>
    	<nav>导航栏</nav>
    </header>
    <section>
    	<aside>侧边栏</aside>
    	<article>独立内容块</article>
    </section>
    <footer>尾部</footer>
    
    /*还有一个<main>主题标签了解一下就可以了*/
    

    页面布局构图是这样的!
    网页布局清晰有条理,用户体验感也提升了不少。我们在浏览网页的时候都希望有一个清晰的逻辑和浏览顺序,容易catch到我们需要获取的信息。
    在这里插入图片描述

    2.2 增强型表单

    • 新的表单类型

    (1)邮箱验证

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>邮箱验证</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="email">
            <input type="submit">
        </form>
    </body>
    </html>
    

    效果展示

    在这里插入图片描述

    这个是新增的输入框类型,user在输入框填写后提交信息,自动验证email域的值是否合法有效

    (2)数值输入

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>数值输入</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="number" min="9" max="12">
            <!--限制输入的数值范围在9-12之间,包括9和12-->
            <input type="submit">
        </form>
    </body>
    </html>
    

    效果展示

    在这里插入图片描述

    这是新增的数值类型。输入的值不在区间范围内,会自动提示。

    (3)文件导入

    attention:上传本地文件,需js代码配合。如果需要上传多个文件,给表单添加mulitiple属性。如果上传图片,给表单添加enctype属性。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文件导入</title>
        <style>
    
        </style>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <input type="file" id="myFile" multiple>
            <input type="submit">
        </form>
        <img src="" id="myPhoto" alt="photo">
    </body>
    <!--js代码展示-->
    <script>
    	const myFile = document.getElementById('myFile')
    	const myPhoto = document.getElementById('myPhoto')
    	myFile.onchange = ()=>{
    		console.log(myFile.files)
    		const file = myFile.files[0]
    		const read = new FileReader()
    		//转译文件地址
    		read.readAsDataURL(file)
    		//文件加载完成就显示出来
    		read.onload = ()=>{
    			myPhoto.src = read.result
    		}
    	}
    </script>
    </html>
    

    (4)图片按钮

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图片按钮</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="image" src="C:\Users\Gabrielle\Desktop\myPhoto.jpg" width=750 alt="myGimdong">
            <!--src里面填写的是我电脑的本地图片绝对路径,请添加你自己的本地图片的绝对路径或者相对路径-->
        </form>
    </body>
    </html>
    

    效果展示
    在这里插入图片描述

    (6)颜色选择

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>颜色选择</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="color">
            <input type="submit">
        </form>
          
    </body>
    </html>
    

    效果展示

    在这里插入图片描述

    选择调色板pick颜色,或者手动输入RGB的值,都可以选择颜色。

    (7)日期表示

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>日期表示</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="date">
            <!--日期选择出来date,还有datatime,datatime-local-->
            <input type="submit">
        </form>
          
    </body>
    </html>
    

    效果展示

    在这里插入图片描述

    (8)搜索框

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>搜索框</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="search" placeholder="我是输入字段为空时的提示信息">
            <input type="submit">
        </form>
          
    </body>
    </html>
    

    效果展示
    在这里插入图片描述

    (9)手机号码输入框(pc端没有特别明显的效果,主要用于手机移动端)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>手机输入框</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="tel">
            <input type="submit">
        </form>   
    </body>
    </html>
    

    效果展示

    在这里插入图片描述

    (10)网址输入框

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>网址入框</title>
        <style>
    
        </style>
    </head>
    <body>
        <form>
            <input type="url">
            <input type="submit">
        </form>   
    </body>
    </html>
    

    效果展示

    在这里插入图片描述

    这个表单可以验证网址是否合法有效,必须为http格式。

    • 新的表单的新属性

    (1)placeholder

    这个属性是文本的占位符,相当于一种提示信息,显示在输入域,描述期待user输入的值。

    <input type="text" placeholder="请输入文字">
    

    (2)required

    这个属性的值为Bool,默认为true,意思是在输入域不能为空

    <input type="text" required>
    

    (3)autofocus

    auto是自动的意思,focus是聚焦的意思,这个属性描述的就是自动聚焦到需要填写的textarea。

    <input type="text" autofocus>
    

    (4)autocomplete

    这个属性有两个值,一个是on,另一个是off。默认是on,与email相反,email默认是off。功能是提示写过的信息。

    attention:这个属性一定要和name一起使用,不然是不合法不生效的。

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

    (5)minlength和maxlength

    这个属性限定输入的最少字数和最多字数,以字符个数计数。

    <input type="text" min="9" max="15">
    

    2.3视频和音频

    很多的视频都是通过插件(比如flash)来实现的,但并不是所有的浏览器都拥有相同的插件,为了能让视频和音频在网页内播放成功,HTML5规定了一种通过video,audio来包含视频播放的标准。

    • video----支持格式有ogg,MP3,webm
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>video标签</title>
        <style>
    
        </style>
    </head>
    <body>
       <video src="xxx.ogg"></video>
       <video src="xxx.mp4"></video>
       <!--可以嵌套多个video标签,用于表现同一个播放源的多种播放方式,第一个视频格式不支持的时候会轮到下一个标签,直到成功-->
       Sorry, your browser doesn't support video. Try another browser.
    </body>
    </html>
    

    video的方法,属性,事件可以使用js来控制。

    方法:play(),pause(),load(),分别是播放,停止,加载方法。

    属性:width,height,controls。width和height属性值为像素或者百分比,功能是设置播放窗口的宽度和高度。controls属性值为boolean,功能是控制播放条。

    控制:使用DOM

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>video</title>
        <style>
    
        </style>
    </head>
    <body>
        <div style="text-align: center;">
          <button onclick="playPause">play/pause</button>
          <button onclick="makeBigger">bigger</button>
          <button onclick="makeSmaller">smaller</button>
          <button onclick="makeNormal">normal</button>
        </div>
      <video id="myVideo" width="420">
          <source src="xxx.ogg">
          <source src="xxx.mp4">
        Sorry, your browser doesn't support video. Try another browser.
      </video>
    </body>
    <script>
        var myVideo = document.getElementById("myVideo");
    
        function playPause(){
            if(myVideo.paused)
            myVideo.play();
        }
    
        function makeBigger(){
            myVideo.width = 560;
        }
    
        function makeSmaller(){
            myVideo.width = 320;
        }
    
        function makeNormal(){
            myVideo.width = 420;
        }
    </script>
    </html>
    
    • audio----支持格式有ogg,Wav,mp3

    audio可以实现与flash相同的功能,比如回放,跳转缓冲等等。与video用法相似。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>audio标签</title>
        <style>
    
        </style>
    </head>
    <body>
       <audio controls>
           <source src="xxx.mp3">
           <source src="xxx.Wav">
       </audio>
       Sorry, your browser doesn't support audio. Try another browser.
    </body>
    </html>
    

    属性:autoplay:自动播放,值的类型为bool,默认为true。

    ​ controls:进度条控制,值的类型为bool。

    ​ loop:循环播放,值的类型为bool。

    ​ muted:静音播放,值的类型为bool。

    ​ poster:预加载图片在播放视频之前,值为图片路径URL。就是我们通常理解的视频封面。

    2.4 canvas绘图

    canvas的 html代码很简单,主要重点是js代码的编写。

    绘图步骤

    1 在html5页面中添加canvas元素,定义id方便js调用。

    <canvas id="myCanvas" width = 500 height = 200></canvas>
    

    2 在js代码中通过id获取

    var c = document.getElementById(myCanvas);
    

    3 通过getContext()的方法来获取上下文Context,创建context对象,获取2d绘制环境

    var context = c.getContext("2d");
    

    4 通过js脚本绘制,你喜欢画什么就画什么。

    2.5 SVG绘图

    这是使用xml描述2d图形的语言。

    那什么是xml呢?xml功能是传输和存储数据。

    那传输了存储了数据,我怎么看见它呢?是的,这就是html的功能了,用来显示数据,可视化给user。

    SVG绘图和canvas绘图都是用来画图,那有什么区别呢?

    SVG比canvas绘图好用,SVG不容易失帧,就是更稳定的意思。SVG对前端程序员更友好一点,它比较容易编辑,只需要从描述中移除元素就可以了。

    • circle画圆(举个栗子)
    <svg version="相关版本号,比如1.1">
          <circle cx = "100" cy = "50"stroke="red" stroke-width="5" fill="black"/>
          <!--
    			cx:圆心的(x轴)横坐标
    			cy:圆心的(y轴)纵坐标
    			r:圆心的半径
    			stroke:外边线条的颜色
    			stroke-width:外边线条的宽度
    			fill:圆填充的颜色
    	  -->
    </svg>
    

    2.6 地理位置

    地理位置能够识别你的定位,并且与别人共享地理信息。那么怎么获取地理位置信息呢?

    获取地理位置的方法?

    1 通过ip地址

    2 电脑上的位置信息定位

    • 利用基站获取网络位置,只能获取大致位置,不够精确。
    • 通过卫星定位获取经纬度信息的GPS设备,误差很小,位置精准。但GPS开启定位有延迟。

    attention:浏览器必须在用户允许情况下才可以发送用户的位置信息给服务器。

    地理位置API

    Q:什么是API?

    A:API是Application Programming Interface,即应用程序接口,是预先定义的接口(函数,http接口)

    (1)调用位置函数

    function get_location() {
      navigator.geolocation.getCurrentPosition(show_map, handle_error, PositionOptions);
    }//这段js代码功能是触发浏览器弹出信息条,询问user是否分享地理位置。
    //show_map是获取位置信息成功的回调函数
    //handle_error是获取位置信息失败的回调函数
    //PositionOptions是获取地理位置的设置对象
    

    (2)show_map获取地理位置

    function show_map(position) {
      var latitude = position.coords.latitude;//获取纬度
      var longitude = position.coords.longitude;//获取经度
    }//回调函数要传入position对象
    //position 对象的属性:
    //coords.latitude 纬度,度
    //coords.longtitude 经度,度
    //coords.altitude 海拔,米
    //coords.accuracy 精确度,米
    //coords.altitudeAccuracy 海拔精确度,米
    // coords.heading 方向,度,顺时针,以正北为基准
    //coords.speed 速度,米/秒
    //timestamp 时间戳,类似 Date() 对象
    //这些属性会因为用户的设备和后台定位的服务器不同而出现属性值为null
    

    (3)handle_error容错处理

    function handle_error(e) {
      switch(e.code)  {//code错误类型
        case e.PERMISSION_DENIED:
          //用户拒绝对获取地理位置的请求。
              //user点击不共享或者拒绝位置共享
          break;
        case e.POSITION_UNAVAILABLE:
          //位置信息是不可用的。
              //网络不可用或者无法连接到获取位置信息的卫星
          break;
        case e.TIMEOUT:
          //请求用户地理位置超时。
              //网络可用但是计算超时间
          break;
        case e.UNKNOWN_ERROR:
          //未知错误。
          break;
      }
    }
    

    (4)PositionOptions 对象设置

    navigator.geolocation.getCurrentPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 170000, maximumAge: 87000})
    //enableHighAccuracy 开启高精度定位,默认 false
    //timeout字面意思,网络请求超时
    //maximumAge允许user将一定时间内缓存的位置信息快速返回给Web应用,默认值0ms
    

    (5)watchPosition() 持续获取

    定位检测用户位置的更改,设备自己会找寻一个最佳的时间间隔,定时更改位置信息。

    var watch = navigator.geolocation.watchPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 170000, maximumAge: 87000})
    clearWatch(watch);//这个方法用于停止监测user位置信息的更改。
    

    2.7 拖放API

    1 设置元素为可拖放

    一般情况下,一个元素的默认拖拽属性为false。想要在页面拖拽元素,就要把属性这是为true

    <img draggable = "true">
    

    2 拖放什么? 用setData()或者ondragstart。

    现在允许拖放了,那么拖拽什么?拖拽的时候会发生什么,触发什么事件?

    function drag (event){
            event.dataTransfer.setData("Text",event.target.id);
    }//dataTransfer.setData() 方法设置被拖数据的数据类型和值:
    

    3 放置元素

    现在拖放出来了,你要把元素安置到哪里去呢?这是一个问题。一般默认不能把元素放置其他元素中,如果需要,必须要对元素的默认方式进行处理。那要怎么办呢?

    event.preventDefault()
    //通过调用 ondragover 事件的event.preventDefault()方法:
    

    4 进行放置

    现在放置到哪里我们处理了,但是缺乏一个动作事件。当放置被拖数据时,会发生 drop 事件。ondrop 属性调用了一个函数,drop(event)。

    function drop(event)        
    {        
    event.preventDefault();        
    var data=event.dataTransfer.getData("Text");        
    event.target.appendChild(document.getElementById(data));        
    }
    //preventDefault()避免浏览器对数据的默认处理,drop事件的默认行为是以连接的形式打开
    //dataTransfer.getData("Text")获取拖拽的数据,该方法将返回在setData()方法中设置为相同类型的任何数据
    

    attention:拖拽是一个重点,需要熟练。

    data Transfer。getData()只在ondrop中可以用

    // 元素放置目标区域,进入目标区域触发 ondragenter 事件
    ondragenter()
    
    // 进入目标区域后触发 ondragover 事件,会一直响应over事件不会触发ondrag
    ondragover = function(event) {
        event.preventDefault();
    }
    
    // 元素放置目标区域,离开目标区域触发 ondragleave 事件
    ondragleave()
    
    // 元素放置目标区域,鼠标弹起触发 ondrop 事件
    ondrop = function(event) {
        // 从开始触发时 dataTransfer.setData() 获取储存的数据
        // 获取dataTransfer.getData() 其他回调事件无法获取 getData()
        this.append(document.getElementById(event.dataTransfer.getData('xxx')));
    }
    

    拖拽目标对象的方法

    1. setData(format,data)
    2. getData(format)
    3. clearData([format])
    4. addElement(element)
    5. setDragImage(element,x,y)
    • setData(format,data)

    将指定格式的数据赋值给dataTransfer对象,参数format定义数据的格式也就是数据的类型,data为待赋值的数据

    • getData(format)

    从dataTransfer对象中获取指定格式的数据,format代表数据格式,data为数据。

    • clearData([format])

    从dataTransfer对象中删除指定格式的数据,参数可选,若不给出,则为删除对象中所有的数据

    • addElement(element)

    添加自定义图标

    • setDragImage(element,x,y)

    设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。

    拖拽属性值

    none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
    move:把拖动的元素移动到放置目标。
    copy:把拖动的元素复制到放置目标。
    link:放置目标会打开拖动的元素(但拖动的元素必须是个链接URL地址)。

    拖拽的node
    定义三个变量
    1 当前拖拽的node
    2 拖拽时经过的node
    3 最终放置的node

    敲黑板,后面这个三个新特性是重点!!!!!

    2.8 Web Worker

    web worker 是运行在后台的 JavaScript。
    Q1:JS是怎么执行的?
    A1:JS是单线程执行模式。

    Q2:什么是单线程模式?
    A2:所有任务只能在一个线程上执行,一次只做一件事情。前面的没有执行完,后面的只能等待。

    Q3:有什么不好的地方吗?
    A3:1 现在的CPU大多数是多核的,计算能力牛逼到不行。单线程无法发挥出CPU计算的价值。
    2 页面上JS在执行的时候会阻塞浏览器的响应,影响用户体验。毕竟页面是为用户服务的。

    Q4:Web Worker解决了什么问题?
    A4:为js创建多线程环境。js在主线程执行,new一个子线程在后台执行。worker完成计算的任务返回给主线程,UI交互流畅,不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞,而子线程代码执行不会。主线程和子线程两者互补干扰,独立执行。

    attention:操作web worker之前最重要的是检测浏览器是否支持。现在主流的浏览器对Web Worker兼容性并不高,比如Safari,更不用说IE浏览器了。但是这并不代表它没用。

     if(typeof(Worker)!=="undefined")
       {
       // yes
       }
     else
       {
       // no
       } 
    

    创建web worker文件

     var i=0;
     function timedCount()
     {
         i=i+1;
         postMessage(i);
         setTimeout("timedCount()",600);
     } 
     timedCount(); 
     //计数器
    

    创建web worker对象

    上一步已经创建了一个web worker文件,现在需要在html页面调用它。

    1 先检测文件是否存在

     if(typeof(w)=="undefined")
       {
       w=new Worker("myworkers.js");
       }
    

    2 然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器。

     w.onmessage=function(event){
     document.getElementById("result").innerHTML=event.data;
     }; 
    

    3 终止web worker

    当我们创建 web worker 对象后,它会持续监听消息(即使在外部脚本完成之后)直到其被终止为止。如需终止 web worker,并释放浏览器/计算机资源,可以用terminate() 方法。

     worker.terminate(); 
    

    Web Worker有五个限制
    (1)同源限制:分配给Worker线程运行的脚本文件,必须与主线程的脚本文件同源。
    (2)DOM限制:worker只能读取navigator对象和location对象,无法使用window,document,parent对象。因为woker线程所在的全局对象与主线程的不一样,所以也无法读取主线程所在页面的DOM对象。
    (3)通信联系:主线程和子线程无法直接通信,因为它们不在同一个上下环境。
    (4)脚本限制:woker线程不能执行alert()方法和confirm()方法,但可以使用XMLHttpRequst对象发出AJAX请求。
    Q1:什么是XMLHttpRequst对象?
    A1:用户在后台和服务器交换数据的对象。

    Q2:功能是什么?
    A2:不重新加载页面的情况下更新页面;在页面加载后从服务器请求数据和接收数据;在后台向服务器发送数据。

    (5)文件限制:worker线程不能读取本地文件(file://),加载的脚本必须来源于网络。

    2.9 Web Storage

    看到stoage就可以猜测到这个是存储,那是什么东西的存储呢。当然是数据的存储。这些数据可以是临时的也可以是永久的。

    Q1:它什么要出现,相比HTML4它优势是什么?
    A1:HTML4中用cookie,在用户端保存用户数据。但是存在弊端。内存大小不够大只有4kb;浪费带宽,因为数据发送的时候是连HTTP事务一起发送,造成资源浪费;操作cookie复杂麻烦困难。所以HTML5用Web Storage在客户端本地保存用户数据。

    Q2:cookie和Web Storage有什么区别?
    A2:Web Storage存储的空间大小更大,一般有5MB;用户数据存储在本地(浏览器)不与服务器发生通信;Web Storage本身自带方法setletm(),getletm(),removeletm(),clean()等,不需要cookie复杂的封装setCookie,getCookie。操作简单。

    web Storage分类
    1 localStorage
    2 sessionStorage

    Q1:什么是sessiionStorge?
    A1:user进入页面浏览至关闭浏览器的时间。页面在,数据在,页面无,数据无。重新加载页面的时候,数据仍然存在。

    Q2:localStorage和sessionStorage有什么区别?
    A2:相同点
    (1)数据都保存在浏览器客户端
    (2)同源,即同域名,同端口,同协议。
    (3)操作方法相同。
    不同点
    (1)生命周期不同。localStorage是永久保存,除非用户手动清除数据。sessionStorage是临时保存。
    (2)作用域不同。浏览器有很多种,所以无法共享用户数据,也就是不同源的页面无法共享数据。localStorage信息可以在相同浏览器中同源的不同页面,不同标签,不同窗口中共用。sessionStorage不可以在不同页面,不同标签,不同窗口中共用,即使是同源。

    • 特点

    值可以是任意的数据类型,只要是key/value形式可以保存的。 数据将永不过期,除非用户明确调用了delete()方法,或者浏览器限制了空间大小,或者其他原因(比如用户清空历史数据)数据项在整个domain(域名)内都可见。

    • 方法

    setItem(key,value): 添加一个键值对,存储
    sessionStorage(会话存储)对象
    getItem(key): 根据key获取值
    clear(): 清空sessionStorage(会话存储)的所有键/值对
    removeItem(key): 从sessionStorage 移除某个项(键值对)
    key(n): 获取第n个key。

    • key/value

    有两种方式可以把值存储到sessionStoage

    // 第一种方式,标准方法
    sessionStorage.setItem('email','xxx@qq.com');
    // 第二种方式,直接当成普通对象属性赋值。
    sessionStorage.blog = 'http://xxxxxx';
    
    • 两种获取值的方法
    // 1. 标准方法
    var email = sessionStorage.getItem('email');
    // 2. 直接取属性值
    var blog = sessionStorage.blog;
    
    • 移除key/value
    // 移除之后,再获取值,将会得到 undefined
    // 根据key,移除键值对
    sessionStorage.removeItem('email');
    
    • 清空sessionStorage
    // 全部清除
    sessionStorage.clear();
    

    2.10 Web Socket

    要理解这个新特性,需要有一些网络基础的知识。w3cschool对其总结很到位,所以我直接照搬过来了。WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

    API 用于创建 WebSocket 对象。

    var Socket = new WebSocket(url, [protocal] );
    //第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。
    
    • WebSocket属性

    Socket.readyState

    0:表示连接尚未建立

    1:表示连接已经建立,可以进行通信

    2:表示连接正在进行关闭

    3:表示连接已经关闭或者连接不能打开

    • WebSocket事件

    open:连接建立时触发

    message:客户端接收服务端数据时触发

    error:通信发生错误时触发

    close:连接关闭时触发

    • WebSocket方法

    Socket.send():使用连接发送数据

    Socket.close():关闭连接

    代码展示示例

    <!DOCTYPE HTML>
    <html>
       <head>
       <meta charset="utf-8">
       <title>webscoket</title>
    	
          <script type="text/javascript">
             function WebSocketTest()
             {
                if ("WebSocket" in window)
                {
                   alert("您的浏览器支持 WebSocket!");
                   
                   // 打开一个 web socket
                   var ws = new WebSocket("ws://localhost:xxxx/echo");
    				
                   ws.onopen = function()
                   {
                      // Web Socket 已连接上,使用 send() 方法发送数据
                      ws.send("发送数据");
                      alert("数据发送中...");
                   };
    				
                   ws.onmessage = function (evt) 
                   { 
                      var received_msg = evt.data;
                      alert("数据已接收...");
                   };
    				
                   ws.onclose = function()
                   { 
                      // 关闭 websocket
                      alert("连接已关闭..."); 
                   };
                }
                
                else
                {
                   // 浏览器不支持 WebSocket
                   alert("您的浏览器不支持 WebSocket!");
                }
             }
          </script>
    		
       </head>
       <body>
       
          <div id="sse">
             <a href="javascript:WebSocketTest()">运行 WebSocket</a>
          </div>
          
       </body>
    </html>
    
    三 总结

    HTML5的十大新特性是需要掌握的,在前端面试中很频繁的被问到,重点要理解Web Worker,Web Storage,Web Socket。重要的不是背诵,而是去理解。一个新事物取代一个旧事物肯定是为了更好,所以是更好的什么呢?一般来讲,人都是很懒的生物,更好的用户体验,更好的操作简单,更好的代码可读性等等,从这几个方面去思考为什么HTML5需要出现,它的出现解决了什么问题?相比HTML4有什么优势?改进了什么?优化了什么功能?与HTML4有什么区别?想清楚这些问题,基本也就可以在理解的基础上去掌握这些知识点。

    展开全文
  • HTML5新特性总结大全

    万次阅读 多人点赞 2018-12-20 14:55:13
    (1)HTML5 将成为 HTML、XHTML 以及 HTML DOM 的标准; (2)HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。 2.HTML5的起步: (1)HTML5 是 W3C(World Wide Web Consortium,万维网...

    一.HTML5概念:

    1.什么是HTML5:

    (1)HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准;

    (2)HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

    2.HTML5的起步:

    (1)HTML5 是 W3C(World Wide Web Consortium,万维网联盟) 与 WHATWG 合作的结果

    (2)为 HTML5 建立的一些规则:

    a.新特性应该基于 HTML、CSS、DOM 以及 JavaScript

    b.减少对外部插件的需求(比如 Flash)

    c.更优秀的错误处理

    d.更多取代脚本的标记

    e.HTML5 应该独立于设备

    f.开发进程应对公众透明

    3.新特性:

    (1)用于绘画的 canvas 元素

    (2)用于媒介回放的 video 和 audio 元素

    (3)对本地离线存储的更好的支持

    (4)新的特殊内容元素,比如 article、footer、header、nav、section

    (5)新的表单控件,比如 calendar、date、time、email、url、search

    二.HTML5视频:

    1.Web 上的视频:

    (1)大多数视频是通过插件(比如 Flash)来显示的,然而,并非所有浏览器都拥有同样的插件

    (2)HTML5 规定了一种通过 video 元素来包含视频的标准方法

    2.视频格式:

    (1)Ogg格式:

    带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

    (2)MPEG4格式:

    带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

    (3)WebM格式:

    带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

    3.如何工作:

    (1)示例代码:

    		<video src="movie.ogg" controls="controls">...</video>
    

    (2)controls 属性供添加播放、暂停和音量控件,可加入宽度和高度, 与 之间插入的内容是供不支持 video 元素的浏览器显示的

    (3)video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

    		<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>
    

    4.各浏览器对不同格式的支持情况:

    	格式		IE		Firefox		Opera	Chrome	Safari
    	Ogg		No		3.5+		10.5+	5.0+	No
    	MPEG 4	9.0+	No			No		5.0+	3.0+
    	WebM	No		4.0+		10.6+	6.0+	No
    

    5. 标签的属性:

    	属性			值			描述
    
    	autoplay	autoplay	如果出现该属性,则视频在就绪后马上播放
    
    	controls	controls	如果出现该属性,则向用户显示控件,比如播放按钮
    
    	height		pixels		设置视频播放器的高度
    
    	loop		loop		如果出现该属性,则当媒介文件完成播放后再次开始播放
    
    	preload		preload		如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
    
    	src			url			要播放的视频的 URL
    
    	width		pixels		设置视频播放器的宽度
    

    三.HTML 5 Video + DOM:

    1.使用 DOM 进行控制:

    (1)HTML5 元素同样拥有方法、属性和事件;

    (2)方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说, 元素开始播放、已暂停,已停止,等等

    2.方法、属性以及事件:

    	方法			属性			事件
    
    	play()		currentSrc	play
    
    	pause()		currentTime	pause
    
    	load()		videoWidth	progress
    
    	canPlayType	videoHeight	error
    
    				duration	timeupdate
    
    				ended		ended
    
    				error		abort
    
    				paused		empty
    
    				muted		emptied
    
    				seeking		waiting
    
    				volume		loadedmetadata
    
    				height	 
    
    				width	
    

    在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用

    四.HTML5 音频:

    1.Web 上的音频:

    (1)大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件

    (2)HTML5 规定了一种通过 audio 元素来包含音频的标准方法

    (3)audio 元素能够播放声音文件或者音频流

    2.audio 元素支持的三种音频格式:

    	 				IE 9		Firefox 3.5		Opera 10.5		Chrome 3.0		Safari 3.0
    
    	Ogg Vorbis	 					√				√				√	 
    
    	MP3				√	 	 										√				√
    
    	Wav	 							√				√	 							√	
    

    3.如何工作:

    (1)示例代码:

    		<audio src="song.ogg" controls="controls"></audio>
    

    (2)control 属性供添加播放、暂停和音量控件, 与 之间插入的内容是供不支持 audio 元素的浏览器显示的

    (3)audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

    		<audio controls="controls">
    			 <source src="song.ogg" type="audio/ogg">
    			<source src="song.mp3" type="audio/mpeg">
    		Your browser does not support the audio tag.
    		</audio>
    

    (4) 标签的属性:

    		属性			值			描述
    
    		autoplay	autoplay	如果出现该属性,则音频在就绪后马上播放
    
    		controls	controls	如果出现该属性,则向用户显示控件,比如播放按钮
    
    		loop		loop		如果出现该属性,则每当音频结束时重新开始播放
    
    		preload		preload		如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
    
    		src			url			要播放的音频的 URL
    

    五.HTML5 拖放:

    1.拖放(Drag 和 drop)是 HTML5 标准的组成部分:

    (1)拖放是一种常见的特性,即抓取对象以后拖到另一个位置

    (2)在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放

    2.拖动相关设置:

    (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));
    			}
    

    (5)注意点:

    a.调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

    b.通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据

    c.被拖数据是被拖元素的 id (“drag1”)

    d.把被拖元素追加到放置元素(目标元素)中

    3.拖动示例代码:

    	<!DOCTYPE HTML>
    	<html>
    	<head>
    	<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)"></div>
    	<img id="drag1" src="img_logo.gif" draggable="true"
    	ondragstart="drag(event)" width="336" height="69" />
    
    	</body>
    	</html>
    

    六.Canvas:

    1.什么是Canvas:

    (1)HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像

    (2)画布是一个矩形区域,您可以控制其每一像素

    (3)canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

    2.创建canvas元素:

    示例代码:

    		<canvas id="myCanvas" width="200" height="100"></canvas>
    

    3. 通过 JavaScript 来绘制:

    (1)canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

    		<script type="text/javascript">
    		var c=document.getElementById("myCanvas");
    		var cxt=c.getContext("2d");
    		cxt.fillStyle="#FF0000";
    		cxt.fillRect(0,0,150,75);
    		</script>
    
    		//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
    

    (2)使用 id 来寻找 canvas 元素,然后,创建 context 对象,然后进行绘制

    (3)fillRect 方法拥有参数 (0,0,150,75):

    在画布上绘制 150x75 的矩形,从左上角开始 (0,0)

    (4)可以通过canvas绘制出点、线条、圆、渐变背景、图像

    七.内联 SVG:

    1.什么是SVG:

    (1)SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

    (2)SVG 用于定义用于网络的基于矢量的图形

    (3)SVG 使用 XML 格式定义图形

    (4)SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

    (5)SVG 是万维网联盟的标准

    2.SVG 的优势:

    (1)SVG 图像可通过文本编辑器来创建和修改

    (2)SVG 图像可被搜索、索引、脚本化或压缩

    (3)SVG 是可伸缩的

    (4)SVG 图像可在任何的分辨率下被高质量地打印

    (5)SVG 可在图像质量不下降的情况下被放大

    3.把 SVG 直接嵌入 HTML 页面:

    	<!DOCTYPE html>
    	<html>
    	<body>
    	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    		  <polygon points="100,10 40,180 190,60 10,60 160,180"
    		  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    	</svg>
    	</body>
    	</html>
    

    八.Canvas vs SVG:

    1.SVG:

    (1)SVG 是一种使用 XML 描述 2D 图形的语言

    (2)SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器

    (3)在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形

    2.Canvas:

    (1)Canvas 通过 JavaScript 来绘制 2D 图形

    (2)Canvas 是逐像素进行渲染的。

    (3)在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象

    3.Canvas 与 SVG 的比较:

    (1)Canvas:

    依赖分辨率

    不支持事件处理器

    弱的文本渲染能力

    能够以 .png 或 .jpg 格式保存结果图像

    最适合图像密集型的游戏,其中的许多对象会被频繁重绘

    (2)SVG:

    不依赖分辨率

    支持事件处理器

    最适合带有大型渲染区域的应用程序(比如谷歌地图)

    复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

    不适合游戏应用

    九.地理定位:

    1.定位用户的位置:

    (1)HTML5 Geolocation API 用于获得用户的地理位置

    (2)鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的

    2.使用地理定位:

    (1)使用 getCurrentPosition() 方法来获得用户的位置

    (2)返回用户位置的经度和纬度的代码示例:

    		<script>
    			var x=document.getElementById("demo");
    			function getLocation()
    			{
    			 if (navigator.geolocation)
    			  {
    					navigator.geolocation.getCurrentPosition(showPosition);
    			  }
    			else{x.innerHTML="Geolocation is not supported by this browser.";}
    			 }
    			function showPosition(position)
    			{
    			x.innerHTML="Latitude: " + position.coords.latitude +
    			"<br />Longitude: " + position.coords.longitude;
    			}
    		</script>
    

    (3)示例代码解释:

    检测是否支持地理定位

    如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息

    如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象

    showPosition() 函数获得并显示经度和纬度

    3.处理错误和拒绝:

    (1)getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

    (2)示例代码:

    		function showError(error)
    		  {
    			switch(error.code)
    				  {
    					case error.PERMISSION_DENIED:
     					 x.innerHTML="User denied the request for Geolocation."
      					 break;
    					case error.POSITION_UNAVAILABLE:
     					 x.innerHTML="Location information is unavailable."
     					 break;
    				 case error.TIMEOUT:
      					  x.innerHTML="The request to get user location timed out."
    					  break;
    					case error.UNKNOWN_ERROR:
      					  x.innerHTML="An unknown error occurred."
    					  break;
    			 }
    		}
    

    (3)错误代码:

    Permission denied - 用户不允许地理定位

    Position unavailable - 无法获取当前位置

    Timeout - 操作超时

    4.在地图中显示结果:

    (1)如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图

    (2)示例代码:

    		function showPosition(position)
    		{
    			var latlon=position.coords.latitude+","+position.coords.longitude;
    			var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    			+latlon+"&zoom=14&size=400x300&sensor=false";
    			document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
    		}
    

    5.getCurrentPosition() 方法 - 返回数据:

    (1)若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性

    (2)属性:

    		属性							描述
    
    		coords.latitude				十进制数的纬度
    
    		coords.longitude				十进制数的经度
    
    		coords.accuracy				位置精度
    
    		coords.altitude				海拔,海平面以上以米计
    
    		coords.altitudeAccuracy		位置的海拔精度
    
    		coords.heading				方向,从正北开始以度计
    
    		coords.speed				速度,以米/每秒计
    
    		timestamp					响应的日期/时间
    

    6.Geolocation 对象 - 其他有趣的方法:

    (1)watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)

    (2)clearWatch() - 停止 watchPosition() 方法

    十. Web 存储:

    1.在客户端存储数据:

    (1)HTML5 提供了两种在客户端存储数据的新方法:

    localStorage - 没有时间限制的数据存储

    sessionStorage - 针对一个 session 的数据存储

    (2)之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高

    (3)在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能

    (4)对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据

    (5)HTML5 使用 JavaScript 来存储和访问数据

    2.localStorage 方法:

    (1)localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用

    (2)如何创建和访问 localStorage:

    		<script type="text/javascript">
    			localStorage.lastname="Smith";
    			document.write(localStorage.lastname);
    		</script>
    

    (3)对用户访问页面的次数进行计数的例子:

    		<script type="text/javascript">
    			if (localStorage.pagecount)
    			 {
    				  localStorage.pagecount=Number(localStorage.pagecount) +1;
    			  }
    			else
    			{
    			  localStorage.pagecount=1;
    			}
    			document.write("Visits "+ localStorage.pagecount + " time(s).");
    		</script>
    

    3.sessionStorage 方法:

    (1)sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除

    (2)如何创建并访问一个 sessionStorage:

    		<script type="text/javascript">
    			sessionStorage.lastname="Smith";
    			document.write(sessionStorage.lastname);
    		</script>
    

    (3)对用户在当前 session 中访问页面的次数进行计数的例子:

    		<script type="text/javascript">
    		if (sessionStorage.pagecount)
    		 {
    			  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    		  }
    		else
    		  {
    			 sessionStorage.pagecount=1;
    		  }
    		document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
    		</script>
    

    十一.HTML 5 应用程序缓存:

    1.什么是应用程序缓存:

    (1)HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问

    (2)应用程序缓存为应用带来三个优势:

    a.离线浏览 - 用户可在应用离线时使用它们

    b.速度 - 已缓存资源加载得更快

    c.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    (3)使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本

    2.HTML5 Cache Manifest 实例:

    带有 cache manifest 的 HTML 文档(供离线浏览)的示例:

    		<!DOCTYPE HTML>
    		<html manifest="demo.appcache">
    		<body>
    		The content of the document......
    		</body>
    		</html>
    

    3.Cache Manifest 基础:

    (1)如需启用应用程序缓存,在文档的 标签中包含 manifest 属性

    (2)manifest 文件的建议的文件扩展名是:".appcache"

    (3)manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置

    4.Manifest 文件:

    (1)manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)

    (2)manifest 文件可分为三个部分:

    a.CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

    b.NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

    c.FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

    (3)CACHE MANIFEST:

    第一行,CACHE MANIFEST,是必需的:

    			CACHE MANIFEST
    			/theme.css
    			/logo.gif
    			/main.js
    

    manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的

    (4)NETWORK:

    NETWORK 小节规定文件 “login.asp” 永远不会被缓存,且离线时是不可用的:

    			NETWORK:
    			login.asp
    

    可以使用星号来指示所有其他资源/文件都需要因特网连接:

    			NETWORK:
    			*
    

    (5)FALLBACK:

    FALLBACK 小节规定如果无法建立因特网连接,则用 “offline.html” 替代 /html5/ 目录中的所有文件:

    			FALLBACK:
    			/html5/ /404.html
    

    第一个 URI 是资源,第二个是替补

    5.更新缓存:

    (1)一旦应用被缓存,它就会保持缓存直到发生下列情况:

    a.用户清空浏览器缓存

    b.manifest 文件被修改(参阅下面的提示)

    c.由程序来更新应用缓存

    (2)完整的 Manifest 文件:

    		CACHE MANIFEST
    		# 2012-02-21 v1.0.0
    		/theme.css
    		/logo.gif
    		/main.js
    
    		NETWORK:
    		login.asp
    
    		FALLBACK:
    		/html5/ /404.html
    

    (3)以 “#” 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新

    (4)如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

    6.关于应用程序缓存的注释:

    (1)一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件

    (2)浏览器对缓存数据的容量限制可能不太一样

    十二.Web Workers:

    1.什么是 Web Worker:

    (1)web worker 是运行在后台的 JavaScript,不会影响页面的性能

    (2)当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成
    (3)web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行

    2.HTML5 Web Workers 实例:

    (1)检测 Web Worker 支持:

    在创建 web worker 之前,请检测用户的浏览器是否支持它:

    			if(typeof(Worker)!=="undefined")
    			{
    			// Yes! Web worker support!
    			 // Some code.....
    			}
    			else
    			{
    			 // Sorry! No Web Worker support..
    			}
    

    (2)创建 web worker 文件:

    在一个外部 JavaScript 中创建我们的 web worker

    我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中:

    			var i=0;
    
    		function timedCount()
    		{
    			i=i+1;
    			postMessage(i);
    			setTimeout("timedCount()",500);
    		}
    		timedCount();
    

    (3)创建 Web Worker 对象:
    下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 “demo_workers.js” 中的代码:

    			if(typeof(w)=="undefined")
    			 {
    				 w=new Worker("demo_workers.js");
    			  }
    

    然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器:

    			w.onmessage=function(event){
    				document.getElementById("result").innerHTML=event.data;
    			};
    

    (4)终止 Web Worker:

    当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

    如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

    			w.terminate();
    

    3.Web Workers 和 DOM:

    由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

    window 对象、document 对象、parent 对象
    

    十三.服务器发送事件:

    1.Server-Sent 事件 - 单向消息传递:

    (1)Server-Sent 事件指的是网页自动获取来自服务器的更新

    (2)以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

    例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

    (3)HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新

    2.接收 Server-Sent 事件通知:

    (1)EventSource 对象用于接收服务器发送事件通知:

    		var source=new EventSource("demo_sse.php");
    		source.onmessage=function(event)
    		{
    			document.getElementById("result").innerHTML+=event.data + "<br />";
    		};
    

    (2)例子解释:

    创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 “demo_sse.php”)

    每接收到一次更新,就会发生 onmessage 事件

    当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中

    3.检测 Server-Sent 事件支持:

    检测服务器发送事件的浏览器支持情况:

    		if(typeof(EventSource)!=="undefined")
    		{
    		 // Yes! Server-sent events support!
    		// Some code.....
    		}
    		else
    		{
    		// Sorry! No server-sent events support..
    		}
    

    4.服务器端代码实例:

    (1)为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)

    (2)服务器端事件流的语法是非常简单的。把 “Content-Type” 报头设置为 “text/event-stream”

    5.EventSource 对象:

    	事件				描述
    
    	onopen			当通往服务器的连接被打开
    
    	onmessage		当接收到消息
    
    	onerror			当错误发生
    

    十四.Input 类型:

    1.新的 Input 类型:

    email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color

    2.浏览器支持:

    	nput type	IE		Firefox		Opera		Chrome		Safari
    
    	email		No		4.0			9.0			10.0		No
    
    	url			No		4.0			9.0			10.0		No
    
    	number		No		No			9.0			7.0			No
    
    	range		No		No			9.0			4.0			4.0
    
    Date pickers	No		No			9.0			10.0		No
    
    	search		No		4.0			11.0		10.0		No
    
    	color		No		No			11.0		No			No
    

    3.Input 类型 - email:

    (1)email 类型用于应该包含 e-mail 地址的输入域,在提交表单时,会自动验证 email 域的值

    (2)代码示例:

    		E-mail: <input type="email" name="user_email" />
    

    4.Input 类型 - url:

    (1)url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值

    (2)代码示例:

    		Homepage: <input type="url" name="user_url" />
    

    5.Input 类型 - number:

    (1)number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定

    (2)示例代码:

    		Points: <input type="number" name="points" min="1" max="10" />
    

    (3)下面的属性来规定对数字类型的限定:

    		属性			值			描述
    
    		max			number		规定允许的最大值
    
    		min			number		规定允许的最小值
    
    		step		number		规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    
    		value		number		规定默认值
    

    6.Input 类型 - range:

    (1)range 类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条,您还能够设定对所接受的数字的限定

    (2)代码示例:

    		<input type="range" name="points" min="1" max="10" />
    

    7.Input 类型 - Date Pickers(日期选择器):

    (1)HTML5 拥有多个可供选取日期和时间的新输入类型:

    date - 选取日、月、年

    month - 选取月、年

    week - 选取周和年

    time - 选取时间(小时和分钟)

    datetime - 选取时间、日、月、年(UTC 时间)

    datetime-local - 选取时间、日、月、年(本地时间)

    (2)代码示例:

    		Date: <input type="date" name="user_date" />
    

    8.Input 类型 - search:

    (1)search 类型用于搜索域,比如站点搜索或 Google 搜索。

    (2)search 域显示为常规的文本域

    十五.HTML5 表单元素:

    1.HTML5 的新的表单元素:

    datalist、keygen、output

    2.浏览器支持:

    	Input type	IE	Firefox		Opera	Chrome	Safari
    
    	datalist	No	No			9.5		No		No
    
    	keygen		No	No			10.5	3.0		No
    
    	output		No	No			9.5		No		No
    

    3.datalist 元素:

    (1)datalist 元素规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的;

    (2)如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

    		Webpage: <input type="url" list="url_list" name="link" />
    		<datalist id="url_list">
    		<option label="W3School" value="http://www.W3School.com.cn" />
    		<option label="Google" value="http://www.google.com" />
    		<option label="Microsoft" value="http://www.microsoft.com" />
    		</datalist>
    

    (3)option 元素永远都要设置 value 属性

    4.keygen 元素:

    (1)keygen 元素的作用是提供一种验证用户的可靠方法

    (2)keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥

    私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

    (3)目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

    (4)代码示例:

    		<form action="demo_form.asp" method="get">
    		Username: <input type="text" name="usr_name" />
    		Encryption: <keygen name="security" />
    		<input type="submit" />
    		</form>
    

    5.output 元素:

    (1)output 元素用于不同类型的输出,比如计算或脚本输出:

    (2)代码示例:

    		<output id="result" onforminput="resCalc()"></output>
    

    十六.HTML5 表单属性:

    1.HTML5 的新的表单属性:

    (1)新的 form 属性:

    autocomplete、novalidate

    (2)新的 input 属性:

    autocomplete、autofocus、form、form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、height 和 width、list、min, max 和 step、multiple、pattern (regexp)、placeholder、required

    2.浏览器支持:

    	Input type			IE		Firefox		Opera		Chrome		Safari
    
    	autocomplete		8.0		3.5			9.5			3.0			4.0
    
    	autofocus			No		No			10.0		3.0			4.0
    
    	form				No		No			9.5			No			No
    
    	form overrides		No		No			10.5		No			No
    
    	height and width		8.0		3.5			9.5			3.0			4.0
    
    	list				No		No			9.5			No			No
    
    	min, max and step	No		No			9.5			3.0			No
    
    	multiple			No		3.5			No			3.0			4.0
    
    	novalidate			No		No			No			No			No
    
    	pattern				No		No			9.5			3.0			No
    
    	placeholder			No		No			No			3.0			3.0
    
    	required			No		No			9.5			3.0			No
    

    3.autocomplete 属性:

    (1)autocomplete 属性规定 form 或 input 域应该拥有自动完成功能

    (2)autocomplete 适用于 标签,以及以下类型的 标签:text, search, url, telephone, email, password, datepickers, range 以及 color

    (3)当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

    		<form action="demo_form.asp" method="get" autocomplete="on">
    		First name: <input type="text" name="fname" /><br />
    		Last name: <input type="text" name="lname" /><br />
    		E-mail: <input type="email" name="email" autocomplete="off" /><br />
    		<input type="submit" />
    		</form>
    

    4.autofocus 属性:

    (1)autofocus 属性规定在页面加载时,域自动地获得焦点。

    (2)autofocus 属性适用于所有 标签的类型

    (3)代码示例:

    		User name: <input type="text" name="user_name"  autofocus="autofocus" />
    

    5.form 属性:

    (1)form 属性规定输入域所属的一个或多个表单

    (2)form 属性适用于所有 标签的类型

    (3)form 属性必须引用所属表单的 id

    (4)代码示例:

    		<form action="demo_form.asp" method="get" id="user_form">
    		First name:<input type="text" name="fname" />
    		<input type="submit" />
    		</form>
    		Last name: <input type="text" name="lname" form="user_form" />
    

    6.表单重写属性:

    (1)表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定

    (2)表单重写属性有:

    formaction - 重写表单的 action 属性

    formenctype - 重写表单的 enctype 属性

    formmethod - 重写表单的 method 属性

    formnovalidate - 重写表单的 novalidate 属性

    formtarget - 重写表单的 target 属性

    (3)表单重写属性适用于以下类型的 标签:submit 和 image

    (4)代码示例:

    		<form action="demo_form.asp" method="get" id="user_form">
    		E-mail: <input type="email" name="userid" /><br />
    		<input type="submit" value="Submit" />
    		<br />
    		<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
    		<br />
    		<input type="submit" formnovalidate="true" value="Submit without validation" />
    		<br />
    		</form>
    

    7.height 和 width 属性:

    (1)height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度

    (2)height 和 width 属性只适用于 image 类型的 标签

    (3)代码示例:

    		<input type="image" src="img_submit.gif" width="99" height="99" />
    

    8.list 属性:

    (1)list 属性规定输入域的 datalist。datalist 是输入域的选项列表

    (2)list 属性适用于以下类型的 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。

    (3)代码示例:

    		Webpage: <input type="url" list="url_list" name="link" />
    		<datalist id="url_list">
    		<option label="W3Schools" value="http://www.w3school.com.cn" />
    		<option label="Google" value="http://www.google.com" />
    		<option label="Microsoft" value="http://www.microsoft.com" />
    		</datalist>
    

    9.min、max 和 step 属性:

    (1)min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)

    (2)max 属性规定输入域所允许的最大值。

    min 属性规定输入域所允许的最小值。

    step 属性为输入域规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)

    (3)min、max 和 step 属性适用于以下类型的 标签:date pickers、number 以及 range

    (4)代码实例:

    		Points: <input type="number" name="points" min="0" max="10" step="3" />
    

    10.multiple 属性:

    (1)multiple 属性规定输入域中可选择多个值

    (2)multiple 属性适用于以下类型的 标签:email 和 file

    (3)代码实例:

    		Select images: <input type="file" name="img" multiple="multiple" />
    

    11.novalidate 属性:

    (1)novalidate 属性规定在提交表单时不应该验证 form 或 input 域

    (2)novalidate 属性适用于 以及以下类型的 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.

    (3)代码示例:

    		<form action="demo_form.asp" method="get" novalidate="true">
    		E-mail: <input type="email" name="user_email" />
    		<input type="submit" />
    		</form>
    

    12.pattern 属性:

    (1)pattern 属性规定用于验证 input 域的模式(pattern)

    (2)模式(pattern) 是正则表达式

    (3)pattern 属性适用于以下类型的 标签:text, search, url, telephone, email 以及 password

    (4)下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):

    		Country code: <input type="text" name="country_code"
    		pattern="[A-z]{3}" title="Three letter country code" />
    

    13.placeholder 属性:

    (1)placeholder 属性提供一种提示(hint),描述输入域所期待的值

    (2)placeholder 属性适用于以下类型的 标签:text, search, url, telephone, email 以及 password。

    (3)提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

    		<input type="search" name="user_search"  placeholder="Search W3School" />
    

    14.required 属性:

    (1)required 属性规定必须在提交之前填写输入域(不能为空)

    (2)required 属性适用于以下类型的 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

    (3)代码示例:

    		Name: <input type="text" name="usr_name" required="required" />
    
    展开全文
  • 学习心得随记——阿西河前端教程——HTML的面试题——HTML5 有哪些新特性——声明方式
  • HTML5新特性

    千次阅读 2022-03-17 15:53:10
    HTML5新特性1. 语义化标签2. 增强型表单3. 媒体元素4. Canvas绘图5. SVG绘图6. 地理定位7. 拖放API8. Web Worker9. WebStorage10. WebSocket 1. 语义化标签 就是看到标签就知道这是什么意思,比如头部就是 header,...
  • HTML5有哪些新特性

    千次阅读 2019-03-14 23:55:34
     IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持标签后,还需要添加标签默认的样式。  可直接使用成熟的框架、比如html5shiv  <!--[if...
  • HTML5十个新特性

    万次阅读 多人点赞 2018-07-17 16:17:23
    :尚不是H5标准技术,基于HTML5 Canvas提供硬件3D加速渲染;有一个非常强大3D扩展库:three.js (四)Canvas绘图   H5原生技术,基于网页画布2D位图绘图技术,善于表现细腻颜色,可用于统计图表、页面...
  • HTML5新特性浅谈

    万次阅读 多人点赞 2016-10-17 21:25:58
    2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成。HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以期能在互联网应用迅速发展的时候...这些年为了兼容IE6放弃了很多HTML5新特性
  • html5有哪些新特性,移除了那些元素?如何处理html5新标签的浏览器兼容问题 article;IE7/。 2,还新增了以下的几大类元素,利用这一特性让这些浏览器支持HTML5新标签,tt、header。 如何处理HTML5新标签的浏览器...
  • HTML5和CSS3新特性一览

    万次阅读 多人点赞 2017-04-04 20:53:05
    HTML5提供了的元素来创建更好的页面结构: 标签 描述 定义页面独立的内容区域。 定义页面的侧边栏内容。 允许您设置一段文本,使其脱离其父元素的文本方向设置。 定义命令按钮...
  • HTML5新特性。兼容性:HTML5归根结底也是HTML的一个版本,它不是颠覆性的革新,而是兼容之前版本。 合理性:新增的标签等,不是随意的构造的,而是根据使用大数据分析用户习惯,为用户提供便利而开发的。例如方便...
  • HTML5新特性:FileReader 和 FormData

    万次阅读 2017-09-04 13:34:19
    其中我用到了两个HTML5新特性:FileReader和FormData; 首先介绍下这两个方法: HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取文件...
  • H5C3新特性总结(一)

    千次阅读 2018-11-25 21:30:26
    2.上面谈到的兼容性结节方案:其实很简单,判断浏览器是否小于或等于ie8,引入插件(插件名叫html5shiv.js),就行了,操作如下: <!-- 标签在IE8和之前的浏览器里不支持 兼容方法:引入插件,就行了 但是:...
  • *HTML5 现在已经不是SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 *绘画canvas   用于媒介回放的video 和audio 元素  本地离线存储localStorage 长期存储数据,浏览器关闭后数据不丢失; ...
  • Hibernate5总结及新特性

    千次阅读 2017-06-09 14:13:35
    5. 明确调用Hibernate程度时,session的方法必须在事务之内执行, 因为session是操作缓存中的数据,只有提交了事务之后,缓存中的数据才能写到数据库中 。 6. 明确Hibernate对单表的增删改查操作,注意查询的时候...
  • 一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器对于一些新特性也是在逐渐支持,不能肯定说某个浏览器100%支持了HTML5。而且,IE11做了一个恶心的举动...
  • HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 (1)绘画 canvas; (2)用于媒介回放的 video 和 audio 元素; (3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不...
  • HTML5新特性之离线缓存技术

    万次阅读 2016-04-12 16:34:32
    HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定, 依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了...
  • HTML5不是什么新鲜事。自初始版本(2008 年 1 月)以来,我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么?到目前为止,我还没有真正使用过很多! 在本文中,我列出了 10 个这样的...
  • CSS3有哪些新特性

    千次阅读 2021-03-20 21:29:21
    CSS3的新特性 1.CSS3是CSS2.1的一个升级版,它是对CSS的一个扩展。 2.CSS3的主要新特性: 1)选择器 2)阴影 3)形状转换(2D <-> 3D) 4)变形 5)动画(过渡动画、帧动画) 6)边框 7)多重背景 8)反射 9)...
  • JDK1.8新特性(一):JDK1.8究竟有哪些新特性

    万次阅读 多人点赞 2019-12-22 13:43:34
    如果能熟练掌握使用这些差异、新特性,你会发现另一片天地。今天抽时间整理下,JDK1.8新特性究竟有哪些?并以【JDK1.8新特性】专题逐一展开讨论、学习。 (JDK1.8新特性常常在面试中被问及的频率很高哦) JDK1.8概述...
  • CSS3 渐变新特性HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家带来帮助,愿意一起...
  • HTML5

    千次阅读 2022-03-10 11:06:25
    2.1 html5 添加了一些的input输入特性,改善更好的输入控制和验证。 2.2html5新增了五个表单元素 2.3html5新增表单属性 三、视频和音频 3.1 音频 3.2 视频 四、Canvas 绘图 五、SVG 绘图 5.1 什么是SVG? ...
  • 这里由于不是本文的主要内容,所以就不详细介绍HTML5表单新特性,需要了解和学习的介意查看本人的另外一篇文章,里面有很详细的介绍关于HTML5的表单的新特性。 网址: ...
  • 从JAVA5到JAVA10新特性总结

    千次阅读 多人点赞 2018-04-01 16:08:08
    JDK5新特性 1:自动装箱与拆箱: 自动装箱的过程:每当需要一种类型的对象时,这种基本类型就自动地封装到与它相同类型的包装类中。 自动拆箱的过程:每当需要一个值时,被包装对象中的值就被自动地提取出来,没...
  • <div style="text-align: center" mce_style="text-align: center"> 这句出现这个问题:验证(XHTML5):特性“mec_style”不是元素“div”的有效特性 求大大帮帮忙!
  • jdk5-jdk10各个版本的新特性

    万次阅读 2017-12-02 08:20:31
    jdk各个版本新特性汇总(1.5-1.8)
  • HTML5新增标签(一)

    千次阅读 2022-03-14 13:04:01
    HTML5新特性主要是针对以前的不足,增加了一些标签,表单和新表单属性 但是呢!这些标签大多都存在兼容性的问题,基本是IE9以上的版本才支持 之前我们做布局,都用的是div,但是没有语义性 一、新增块级...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 423,710
精华内容 169,484
关键字:

哪个不是html5的新特性