HTML5 教程

🌙
手机阅读
本文目录结构
a'xi'he

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

大概

第 3 章 HTML 5的结构 / 27
    3.1 新增的主体结构元素 / 28
        3.1.1 article元素 / 28
        3.1.2 section元素 / 30
        3.1.3 nav元素 / 32
        3.1.4 aside元素 /33
        3.1.5 time元素与微格式 / 35
        3.1.6 pubdate属性 / 36
    3.2 新增的非主体结构元素 / 36
        3.2.1 header元素 / 37
        3.2.2 hgroup元素 / 38
        3.2.3 footer元素 / 38
        3.2.4 address元素 / 39
    3.3 HTML 5结构 / 40
        3.3.1 大纲 / 40
        3.3.2 对新的结构元素使用样式 / 43
        3.3.3 article元素的样式 / 44
第 4 章 表单与文件 / 45
    4.1 新增元素与属性 / 46
        4.1.1 新增属性 / 46
        4.1.2 大幅度地增加与改良了input元素的种类 / 49
        4.1.3 对新的表单元素使用样式 / 54
        4.1.4 output元素的追加 / 55
    4.2 表单验证 / 55
        4.2.1 自动验证 / 55
        4.2.2 显式验证 / 57
        4.2.3 取消验证 / 58
        4.2.4 自定义错误信息 / 58
    4.3 增强的页面元素 / 59
        4.3.1 新增的figure元素与figcaption元素 / 60
        4.3.2 新增的details元素 / 61
        4.3.3 新增的mark元素 / 62
        4.3.4 新增的progress元素 / 64
        4.3.5 新增的meter元素 / 65
        4.3.6 新增的menu元素与command元素 / 66
        4.3.7 改良的ol列表 / 66
        4.3.8 改良的dl列表 / 67
        4.3.9 加以严格限制的cite元素 / 68
        4.3.10 重新定义的small元素 / 69
    4.4 文件API / 69
        4.4.1 FileList对象与file对象 / 69
        4.4.2 Blob对象 / 70
        4.4.3 FileReader接口 / 72
    4.5 拖放API / 77
        4.5.1 实现拖放的步骤 / 77
        4.5.2 DataTransfer对象的属性与方法 / 80
        4.5.3 设定拖放时的视觉效果 / 80
        4.5.4 自定义拖放图标 / 81
第 5 章 绘制图形 / 82
    5.1 canvas元素的基础知识 / 83
        5.1.1 在页面中放置canvas元素 / 83
        5.1.2 绘制矩形 / 84
    5.2 使用路径 / 86
        5.2.1 绘制圆形 / 86
        5.2.2 如果没有关闭路径会怎么样 / 88
        5.2.3 moveTo与lineTo / 90
        5.2.4 使用bezierCurveTo绘制贝济埃曲线 / 91
    5.3 绘制渐变图形 / 93
        5.3.1 绘制线性渐变 / 93
        5.3.2 绘制径向渐变 / 95
    5.4 绘制变形图形 / 96
        5.4.1 坐标变换 / 96
        5.4.2 坐标变换与路径的结合使用 / 98
        5.4.3 矩阵变换 / 99
    5.5 图形组合 / 103
    5.6 给图形绘制阴影 / 105
    5.7 使用图像 / 107
        5.7.1 绘制图像 / 107
        5.7.2 图像平铺 / 109
        5.7.3 图像裁剪 / 111
        5.7.4 像素处理 / 113
    5.8 绘制文字 / 115
    5.9 补充知识 / 117
        5.9.1 保存与恢复状态 / 117
        5.9.2 保存文件 / 118
        5.9.3 简单动画的制作 / 119
第 6 章 多媒体播放 / 122
    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
第 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
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

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

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

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

关注我: Github / 知乎

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


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang