朱安邦的 HTML 学习笔记

🌙
手机阅读
本文目录结构

参考

  • A:HTML5与CSS3权威指南
  • B:http://net.pku.edu.cn/~yhf/tutorial/html/html.htm
  • C:https://blog.csdn.net/lgy64422575/article/details/50622329
  • D:http://www.bingmang.net/category/front/html

课表

前言

  • HTML专项训练
  • 本教程包含所有HTML内容,按照功能进行划分章节
    • 不按照版本划分,不单独分HTML5,HTML4,HTML3之类的版本
    • 遇到新版本的标签,我会顺手说下。
    • 我们真实使用的时候,是不会考虑HTML5标签在浏览器张不支持的,即使低版本浏览器,引用一个文件也是可以解决的,这个后期会说;
    • 最新的规范是HTML5,第五版本的HTML标签可以放心使用的
    • 语义化,SEO方面

HTML初识

Html 介绍-C

  • Html /CSS/JS 的关系

  • 认识 html 标签

  • 标签的语法

  • 认识 html 文件基本结构

  • 认识 head 标签

  • 了解 HTML 的代码注释

  • 什么是HTML?学习HTML难吗?-D

  • 适合初学者的html入门教程之一 HTML基本概念-D

  • 适合初学者的html入门教程之二 基础HTML Tag-D

  • 适合初学者的html入门教程之三 Html常用格式-D

  • 适合初学者的html入门教程之六 HTML相对路径和绝对路径-D

  • 适合初学者的html入门教程之十四 HTML头部信息(Head)-D

HTML 结构

HTML 5的结构-A

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

页面-B

  • 文件结构
  • 语言字符集信息
  • 背景色彩和文字色彩
  • 页面空白
  • 链接
  • 开新窗口
  • 标尺线

背景

  • 适合初学者的html入门教程之十三 HTML背景颜色和背景图片-D

文字

  • 适合初学者的html入门教程之十二 HTML字体(Fonts)-D
  • 适合初学者的html入门教程之九 HTML列表(Lists)-D

字体-B

  • 标题
  • 字号
  • 物理字体
  • 逻辑字体
  • 颜色
  • 客户端字体
  • 字符实体
  • 适合初学者的html入门教程之四 Html特殊字符显示-D

文字布局-B

  • 行的控制
  • 文字的对齐
  • 文字的分区
  • 列表
  • 定制列表元素
  • 预格式化文本
  • 空白
  • 多列文本

会移动的文字-B

  • 基本语法
  • 移动属性的设置
  • 外观设置

链接

  • 适合初学者的html入门教程之五 HTML的超链接-D

表格

表格-B

  • 基本语法
  • 跨多行、多列的表元
  • 尺寸设置
  • 文字的对齐/布局
  • 在页面中的对齐/布局
  • 标题

表格进阶-B

  • 色彩

  • 分组显示

  • 边框

  • 分隔线

  • 适合初学者的html入门教程之七 在HTML中创建表格-D

多窗口

3

多窗口页面-B

  • 基本语法

  • 尺寸设置

  • 窗口间相互操作

  • 外观

  • 浮动窗口

  • 适合初学者的html入门教程之八 HTML框架(Frames)-D

表单与文件

第 4 章 表单与文件-A

4.1 新增元素与属性

  • 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

第 3 章 与浏览者交互,表单标签-C

  • 使用表单标签与用户交互
  • 文本输入框密码输入框
  • 文本域支持多行文本输入
  • 使用单选框复选框让用户选择
  • 使用下拉列表框节省空间
  • 使用下拉列表框进行多选
  • 使用提交按钮提交数据
  • 使用重置按钮重置表单信息
  • form 表单中的 label 标签

表单-B

  • 基本语法

  • 文字和密码

  • 复选和单选

  • 图象坐标

  • 隐藏表单的元素

  • 列表框

  • 文本区域

  • 适合初学者的html入门教程之十 HTML表单(Forms)-D

图像与图形

  • 适合初学者的html入门教程之十一 HTML图片(Images)-D

图象-B

  • 基本语法
  • 和文字的对齐
  • 在页面中的对齐/布局
  • 边框
  • 客户端图象映射图

第 5 章 绘制图形-A

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 章 多媒体播放-A

  • 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

多媒体页面-B

  • 嵌入多媒体文本
  • 背景音乐
  • 视频剪辑

本地存储

第 7 章 本地存储-A

  • 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 章 离线应用程序-A

  • 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

通信API

第 9 章 通信API-A

  • 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

Web Workers处理线程

第10章 使用Web Workers处理线程-A

  • 10.1 基础知识 / 171
  • 10.2 与线程进行数据的交互 / 174
  • 10.3 线程嵌套 / 176
  • 10.3.1 单层嵌套 / 176
  • 10.3.2 在多个子线程中进行数据的交互 / 178
  • 10.4 线程中可用的变量、函数与类 / 180

地理位置

第11章 获取地理位置信息-A

  • 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

HTML不同版本的区别

HTML5和HTML4的区别-A

  • 2.1 语法的改变 / 10
  • 2.1.1 HTML 5的语法变化 / 10
  • 2.1.2 HTML 5中的标记方法 / 11
  • 2.1.3 HTML 5确保了与之前HTML版本的兼容性 / 11
  • 2.1.4 标记示例 / 13
  • 2.2 新增的元素和废除的元素 / 13
  • 2.2.1 新增的结构元素 / 13
  • 2.2.2 新增的其他元素 / 15
  • 2.2.3 新增的input元素的类型 / 19
  • 2.2.4 废除的元素 / 19
  • 2.3 新增的属性和废除的属性 / 20
  • 2.3.1 新增的属性 / 20
  • 2.3.2 废除的属性 / 21
  • 2.4 全局属性 / 23
  • 2.4.1 contentEditable属性 / 23
  • 2.4.2 designMode属性 / 24
  • 2.4.3 hidden属性 / 25
  • 2.4.4 spellcheck属性 / 25
  • 2.4.5 tabindex属性 / 25

HTML新版本兼容性

放心使用HTML-A

  • 1.1 迎接新的Web时代 / 2
  • 1.1.1 HTML 5时代即将来临 / 2
  • 1.1.2 HTML 5的目标 / 4
  • 1.2 HTML 5会深受欢迎的理由 / 4
  • 1.2.1 世界知名浏览器厂商对HTML 5的支持 / 4
  • 1.2.2 第一个理由:时代的要求 / 5
  • 1.2.3 第二个理由:Internet Explorer 8 / 6
  • 1.3 可以放心使用HTML 5的三个理由 / 6
  • 1.4 HTML 5要解决的三个问题 / 7

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了