阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML5 有哪些新特性?

      HTML5 有哪些新特性

      HTML5 标准提供了哪些新的 API?

      这个问题可以聊的东西特别多,下面是我搜集的以及一些扩展知识;

      一、声明方式

      本站就是基于HTML5规范书写的HTML代码;

      核心

      HTML4 规定了三种声明方式,分别是:严格模式、过渡模式 和 框架集模式;

      而HTML5因为不是SGML的子集,只需要<!DOCTYPE>就可以了:

      HTML4声明方式

      HTML4 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset;

      HTML4 Strict / 严格

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      

      HTML4 Transitional /过渡

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      

      HTML4 Frameset/框架集

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
      

      HTML5声明方式

      HTML5 现在已经不是 SGML 的子集,从最开始的声明方式就不一样了,改为了<!DOCTYPE>

      <!DOCTYPE html>
      

      关于声明方式的更改,这个可以参考

      HTML5 主要是关于图像,位置,存储,多任务等功能的增加,下面是具体的

      二、语义化更好的内容标签

      本站就是用了很多语义化标签,比钱header/footer/article等

      核心

      为了规范HTML页面,有利于搜索引擎;

      对前端开发人员的好处:可以根据这些语义化标签,更好的进行模块化处理;我们可以在写React/Vue等项目的时候,根据这些来做模块区分;

      对外的好处:我们可以和设计师沟通,按照这种模块进行页面设计,如果是PS设计的页面,还可以参考这个进行图层编组

      三、音频、视频

      音频、视频 API(audio,video)

      可以在标签内查看用法

      核心

      通过 audio/video 实现音频和视频的操作;

      使用时候需要注意几种数据源格式的支持;

      还有一些辅助标签来精细的做多媒体,比如可以通过<track>做歌词和字幕。

      四、表单控件

      HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

      • color
      • date
      • datetime
      • datetime-local
      • email
      • month
      • number
      • range
      • search
      • tel
      • time
      • url
      • week

      具体参考:HTML5 新的 Input 类型

      核心

      更有利于移动端做表单时候,比如电话号码,email,输入类型的限制;

      但是:我们真正做项目的时候,不能光靠这个来做校验,不仅我们前端要做校验,一个合格的后端不应该相信前端传入的任何数据;

      五、5个API-本地存储

      核心

      长期存储数据的 localStorage比较常用

      临时存储的 sessionStorage,浏览器关闭后自动删除,实际工作中使用的场景不多

      localStorage

      本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

      只读的 localStorage 属性允许你访问一个 Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。

      localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。

      具体参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

      阿西河前端教程的夜间模式,就是根据localStorage来实现的;

      sessionStorage

      sessionStorage 的数据在浏览器关闭后自动删除

      sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookies 的运行方式不同。

      具体参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage

      五、5个API-画布/Canvas

      演示:https://wow.techbrood.com/fiddle/30964

      五、5个API-地理/Geolocation

      地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑,报告地理位置前会先请求用户许可。

      具体参考:HTML5 Geolocation(地理定位)

      类似Google搜索页面,底部显示位置的样子,还有点餐的,我的位置相关的;

      延伸:如果我们打算根据不同的地理位置加载不同的资源,可以借助第三方的IP库;参考 JavaScript 获取用户客户端的 ip 地址,邮编,城市名;

      五、5个API-拖拽释放

      HTML拖拽释放 (Drag and drop) 接口使应用程序能够在浏览器中使用拖放功能。

      例如,通过这些功能,用户可以使用鼠标选择可拖动元素,将元素拖动到可放置元素,并通过释放鼠标按钮来放置这些元素。

      可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。

      详情参考 HTML 拖放 API

      在线浏览拖拽效果:https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html

      核心

      功能:可以把一个元素拖动放到目标区域,并且可以定义它的中间效果;

      它的实现过程有:

      • 1.确定什么是可拖动的源
      • 2.定义拖动元源
        • 定义拖动数据
        • 定义拖动图像
        • 定义拖动效果
      • 3.定义一个放置区
      • 4.处理放置效果
      • 5.拖动结束

      五、5个API-Web Workers

      webworker, websocket, Geolocation

      当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

      web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

      具体参考:HTML5 Web Workers

      核心

      Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。

      在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。

      这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。

      其他

      比如 ruby 可以定义带拼音的效果:https://www.axihe.com/books/web.html ,这个页面中『花一万块钱去培训, 不如用来读点书』,其中培训上面的拼音Sòng Qián就是 ruby 标签做的;

      HTML5 迁移

      本站有一个 HTML5 迁移 这个推荐一定要看看,讲的是HTML4的网页怎么转移到HTML5,里面介绍了我们常用的HTML5知识

      更多的一些知识,可以参考下面几个知识点

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录