阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      朱安邦的 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
      目录
      目录