阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML5 教程

      HTML5 教程

      HTML5是HTML最新的修订版本,在2010年,由万维网联盟(W3C)正式推出来,到2014年10月完成规范制定。

      当时移动互联网刚刚兴起,iPhone手机也刚刚开始在国内火,诺基亚刚刚达到巅峰,HTML5的最初设计目的是为了在移动设备上支持多媒体,

      HTML5 的规范刚推出来,就被浏览器厂商热烈欢迎和支持,各种布道文章也大喊新的WEB时代要来临了。

      这个教程重点介绍什么是HTML5,HTML5产生的时代背景,为什么HTML5会如此深受业界欢迎,以及为HTML5能够帮助我们解决什么问题

      关于朱安邦写的这个HTML5教程

      这个教程的内容,最初是翻译国外网站w3schools上的HTML教程,也就是我们常说的 w3schools.com 这个网站,因为是英文版的,国内查看不方便,而且这种方式已经有成功运行的案例,比如国内山寨版的 w3school.com.cn 就是这么干的,包括菜鸟教程也是这样,教程类网站大多数都是这么做的;直接把国外的翻译后放在自己网站上的,然后在这个基础上再自己稍微添加一些内容,就可以快速搞出来一个教程。

      放了一段时间以后,我发展这么做是一件非常不负责任的做法,感觉自己是一名专业的前端开发者,这个教程有很多明显不合理的地方,而且也不是很适合新手来学习,只能让人了解HTML5是什么,根本不适合打算从事专业前端开发的人来学习,也不是修修补补就能解决的;

      所以我决定把原有的教程推倒重来,重写一个版本的HTML5教程,写一个适合从事专业前端开发的教程。

      在本站中你可以找到关于HTML5 的标签及属性描述,详细请点击 HTML5参考手册

      学习HTML5之前的准备

      国内很多产品经理说的H5页面,指的是基于HTML5的页面,HTML5已经是简写了,H5是对简写的简写,虽然不严谨,但是大家都这么说,所以遇到这种情况,你清楚怎么回事就好。

      1. 首先要看完 HTML教程
      2. 下载一个专业的代码编辑器,
        • 如果你对编辑器不是很了解,可以查看本站的 编辑器专题
        • 推荐使用VSCode

      【注意】:一定不要使用记事本来写代码;网上有一种说法是用记事本写代码,可以让你对代码更加熟练;不清楚是谁开始说的,但是这个绝对是一个扯淡的做法;如果你想做一名专业的前端开发,不要浪费时间做这种无聊的事情,你应该下载专业的编辑器;开始使用默认的形式,默认会开智能提示,让你快速输入正确的代码,等熟练以后,如果打算练习对代码的书写,可以关掉智能提示就可以了;

      写一个简单的HTML5网页

      新建一个 index.html 文件,把下面的内容输入到刚才建立的 index.html 文件中

      <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8">
          <title>文档标题</title>
      </head>
      
      <body>
          阿西河前端教程......
      </body>
      
      </html>
      

      一定要动手写一下,这个动手跟着做,非常重要!

      注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。小伙伴们可以试试加上和移除 <meta charset="utf-8"> 之后,网页分别有什么变化。

      声明必须位于 HTML5 文档中的第一行, 使用非常简单,直接写一行 <!DOCTYPE html> 这样就可以了。

      写代码时候的注意事项

      下面是我从事几年前端开发中,经常看到新手学习中的常见问题。

      1. 代码写完之后记得保存,一定不要在未保存的状态下查看效果。
      2. 改完之后,保存之后记得把页面刷新一下。
      3. 确定自己当前查看的网页,和正在修改的网页是同一个文件。

      HTML5的目标

      HTML5做了很多改变,但是他们的目标是没有变的,目标是为了能够创建更简单的WEB程序,书写更简洁的HTML代码,以前的HTML4代码,写的实在是太臃肿了。

      在HTML4里面像文本框获得光标焦点的功能,就必须依靠JS来完成,在HTML5里,使用元素的属性就可以实现了,会让页面更加简洁明了。

      在HTML4里面很多使用div标签,但是HTML里,提出了语义化的概念,直接有footer,header等等,可以让页面看起来更直观。

      正是因为HTML5增加的功能,都是大家以前需要苦逼要做的事情,很繁琐的事情,现在一下就可以搞定,就深受开发者和浏览器厂商的喜欢。

      HTML5 新特性

      下面这些”新特性”,先简单了解下,有一个大概的印象,后面会详细介绍用法,已经使用场景和注意事项的;

      • 语义化元素
      • 新的表单控件

        • 新表单元素, 新属性,新输入类型,自动验证。
      • 新属性

      • 完全支持 CSS3

      • Video 和 Audio

      • 2D/3D 制图

      • Canvas/SVG

      • 本地存储/本地离线存储

      • 本地 SQL 数据

      • Web 应用

      大概

      HTML5 语义化
      HTML5 表单元素与属性
      HTML5 表单验证
      HTML5 增强的页面元素
      HTML5 文件API
      HTML5 拖放API
      HTML5 多媒体播放
          6.1 video元素与audio元素的基础知识 / 123
              6.1.1 HTML 4页面中播放视频或音频的方法 / 123
              6.1.2 HTML 5页面中播放视频或音频的方法 / 124
          6.2 属性 / 125
          6.3 方法 / 129
          6.4 事件 / 132
              6.4.1 事件处理方式 / 132
              6.4.2 事件介绍 / 132
              6.4.3 事件捕捉示例 / 133
      HTML5 Canvas 元素
          HTML5 Canvas 路径
          HTML5 Canvas 渐变图形
          HTML5 Canvas 变形图形
          HTML5 Canvas 图形组合
          HTML5 Canvas 给图形绘制阴影
          HTML5 Canvas 使用图像
          HTML5 Canvas 绘制文字
          HTML5 Canvas 补充知识
      
      
      
      第 7 章 本地存储 / 135
          7.1 Web Storage / 136
              7.1.1 Web Storage是什么 / 136
              7.1.2 简单Web留言本 / 139
              7.1.3 作为简易数据库来利用 / 141
          7.2 本地数据库 / 144
              7.2.1 本地数据库的基本概念 / 144
              7.2.2 用executeSql来执行查询 / 145
              7.2.3 使用数据库实现Web留言本 / 146
              7.2.4 transaction方法中的处理 / 149
      第 8 章 离线应用程序 / 151
          8.1 离线Web应用程序详解 / 152
              8.1.1 新增的本地缓存 / 152
              8.1.2 本地缓存与浏览器网页缓存的区别 / 152
          8.2 manifest文件 / 153
          8.3 浏览器与服务器的交互过程 / 155
          8.4 applicationCache对象 / 156
              8.4.1 swapCache方法 / 157
              8.4.2 applicationCache对象的事件 / 158
      第 9 章 通信API / 162
          9.1 跨文档消息传输 / 163
              9.1.1 跨文档消息传输的基本知识 / 163
              9.1.2 跨文档消息传输示例 / 163
          9.2 Web Sockets通信 / 166
              9.2.1 Web Sockets通信的基本知识 / 166
              9.2.2 使用Web Sockets API / 166
              9.2.3 Web Sockets API使用示例 / 167
              9.2.4 发送对象 / 168
      第10章 使用Web Workers处理线程 / 170
          10.1 基础知识 / 171
          10.2 与线程进行数据的交互 / 174
          10.3 线程嵌套 / 176
              10.3.1 单层嵌套 / 176
              10.3.2 在多个子线程中进行数据的交互 / 178
          10.4 线程中可用的变量、函数与类 / 180
      第11章 获取地理位置信息 / 181
          11.1 Geolocation API的基本知识 / 182
              11.1.1 取得当前地理位置 / 182
              11.1.2 持续监视当前地理位置的信息 / 184
              11.1.3 停止获取当前用户的地理位置信息 / 184
          11.2 position对象 / 184
          11.3 在页面上使用google地图 / 186
      
      卖前端学习教程

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

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

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

      目录
      目录