HTML5 教程

🌙
手机阅读
本文目录结构
axihe

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang