HTML5从入门到精通,零基础学员必看

 

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些?

1. HTML5可以同时在多种设备上运行,这一点是其他方式都无法做到的;

2. 在互联网中随意被分享,并且搜索时可以及时被找到;有搜索扩展性。

3. HTML5应用可以使用交互式设计来提供最佳体验,而不需要更改代码。你可以从桌面到手机到平板电脑无缝进行切换,而无需重复安装不同的应用;

4. HTML5适用于多厂商标准,建立在协议之上,是众多公司努力的结果。

所以,只要你平时上网,你看完这篇文章之后,相信你一定能够对html5有一个基本的认识。

有小白会问html5是做什么的?

这里极其简单的概括:用于实现我们能够看到的所有网站,但是不涉及到数据层面(也就是负责将一张设计好的网页图片(设计师的工作),用代码实现出来,在一个地方放置个块,给一个块设置颜色,调整字体大小,让图片动起来等)。

html5的由来

不熟悉html5的人,可能会很熟悉一个2005年以前常用的词语——网页设计与制作。

随着行业的发展,网站的制作越来越受到了人们的重视,社会化分工越来越明细。在2005年,“web前端开发工程师”这个词语开始出现在各个一线城市。2008年,html5横空出世,2009年html5这个全新的词语在北京的一些顶尖级公司出现,2012年,逐渐的普及开来,2014年迅速发展。

1. HTML5有本地存储的特征,基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。

2. 利用HTML5非常方便的在网页上添加视频和音频,不需要很复杂的代码,就能打造一款功能齐全的HTML5播放器。

3. CSS3的使用可以提供更多的CSS属性,可以制作更加丰富的渲染效果。

除了以上基本知识点以外,还需要掌握:HTML5的前端技术也是必备的,其中包括:CSS、HTML、DOM、javascript、Ajax,jquery,Vue,jquery- mobile,zepto等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理以及存在的各种Bug。

上面讲的是HTML5主要一些特征。

 

html5的基本组成

html5 = html + cs+ java

html指的是结构

css指样式

js即java,指的是行为

关于结构、样式、行为的理解

结构——在整个网页中有标题,有列表,有图片等。

样式 —— 标题文字的字体大小、颜色、字体;图片的大小;某个块的背景色或背景图等。

行为——在网页上四处飘动的广告;图片滚动;浏览淘宝时鼠标移动到商品时,放大商品的效果等。

 

容易弄混的概念

html5移动端的功能和应用程序。

对于苹果手机中的应用程序,属于ios开发,语言是oc;对于其他安卓系统的手机,需要使用java语言进行开发。html5能够做的是移动端的网页以及微信平台中的移动端网页。

前端后台的区别

无论html5还是ios,在整个网页开发流程当中,前端(html5)开发工程师,主要负责的是“前台页面制作”,“网站测试”,“修改”三个部分。

html5 与 网页设计与制作 的区别

原有的网页设计与制作,主要针对pc平台,进行网页网站的设计与制作,相对会涉及一部分设计工作,并将美工图实现成网页。通常使用的工具是网页三剑客——photoshop、flash、dreamweaver。然而,行业的发展使得“网页设计与制作”这一职业逐渐遭到了淘汰,原因主要有四:

【一】:网页设计与网页制作是两个完不同的领域,一个由美感主导,另一个则需要逻辑思维主导。对于开发人员来说,如果将宝贵的精力分散到两个不同的行业中,最后通常两方面都是半斤八两,没有实质的竞争力;

【二】:网页设计与制作,这一职业中的制作,指的是网页的结构与样式(即html+css),而当前网站中java已经占据了极大的比重,如果还停留在原有的结构和样式中,发展空间会变得很小;

【三】:网页设计与制作当中的结构实现,通常采用的是table布局;而web前端开发工程师、html5当中结构的实现,采用的是div+css方式的布局,因此,dreamweaver工具的使用也就没有什么必要性了,取而代之的是内存占用小,开发速度快的文本类编辑器。而flash,在与html5的大战当中战败,当前已经退出了移动端以及电视平台的市场争夺,在pc平台也越来越少。转言之,flash在网页制作的领域里已经江郎才尽~原来的网页三剑客只剩下一个ps,在前端工作的要求中,需要掌握基本的切图即可。

【四】移动互联网的飞速发展,也使得html5的地位迅速提升。移动设备有其特殊的开发要求,原有的网页设计与制作,早已无法满足开发的需要。

html5是移动互联网前端的主流开发语言,所以说,无论做手机网站还是在手机app应用,前端的样式都是html5开发。html5作为移动互联网主流前端开发语言,从事html5相关开发工作,就业前景真的是一片光明。在目前还没有一个前端的开发语言能取代html5的位置。

 

新手想学习更多HTML5课程知识,获取学习资料。【html&css】免费学习资料,搜【WEB前端互动交流群】

 

转载于:https://www.cnblogs.com/CCDS01/p/6364929.html

HTML 5 简介............................................................................................................................................................15 HTML 5 视频............................................................................................................................................................17 HTML 5 音频............................................................................................................................................................21 HTML 5 Canvas........................................................................................................................................................25 HTML 5 Web 存储....................................................................................................................................................36 HTML 5 Input 类型................................................................................................................................................41 HTML 5 表单元素....................................................................................................................................................51 HTML 5 表单属性....................................................................................................................................................56 HTML 5 参考手册....................................................................................................................................................70 HTML 5 标准属性....................................................................................................................................................79 HTML 5 事件属性....................................................................................................................................................79 HTML 5 标签
第1篇 HTML基础   第1章 HTML基础 3   教学录像:22分钟   1.1 HTML的基本概念 4   1.2 HTML发展史 4   1.3 HTML的基本结构 5   1.3.1 HTML文件的编写方法 5   1.3.2 文件开始标签<html> 7   1.3.3 文件头部标签<head> 7   1.3.4 文件标题标签<title> 7   1.3.5 文件主体标签<body> 7   1.3.6 编写文件的注意事项 8   1.4 编写第一个HTML文件 8   1.4.1 HTML文件的编写方法 8   1.4.2 手工编写页面 9   1.4.3 使用可视化软件制作页面 10   1.4.4 使用浏览器浏览HTML文件 14   1.4.5 使用HTML开发的明日图书网 14   1.5 小结 15   1.6 习题 16   第2章 HTML文件基本标记 17   教学录像:44分钟   2.1 HTML头部标记 18   2.2 标题标记<title> 18   2.3 元信息标记<meta> 19   2.3.1 设置页面关键字 19   2.3.2 设置页面描述 20   2.3.3 设置编辑工具 20   2.3.4 设定作者信息 21   2.3.5 限制搜索方式 22   2.3.6 设置网页文字及语言 22   2.3.7 设置网页的定时跳转 23   2.3.8 设定有效期限 24   2.3.9 禁止从缓存中调用 24   2.3.10 删除过期的cookie 25   2.3.11 强制打开新窗口 25   2.3.12 设置网页的过渡效果 26   2.4 基底网址标记<base> 29   2.5 页面的主体标记<body> 30   2.5.1 设置文字颜色——text 31   2.5.2 背景颜色属性——bgcolor 32   2.5.3 背景图像属性——background 32   2.5.4 设置链接文字属性——link 35   2.5.5 设置边距——margin 37   2.6 页面的注释标记 38   2.7 实例演练——创建基本的HTML网页 38   2.8 小结 39   2.9 习题 40   第3章 设计网页文本内容 41   教学录像:29分钟   3.1 标题文字的建立 42   3.1.1 标题文字标记<h> 42   3.1.2 标题文字的对齐方式——align 43   3.2 设置文字格式 44   3.2.1 设置文字字体——face 44   3.2.2 设置字号——size 45   3.2.3 设置文字颜色——color 46   3.2.4 粗体、斜体、下划线——strong、em、u 46   3.2.5 上标与下标——sup、sub 47   3.2.6 设置删除线——strike 48   3.2.7 等宽文字标记——code 49   3.2.8 空格——&nbsp; 49   3.2.9 其他特殊符号 50   3.3 设置段落格式 51   3.3.1 段落标记——p 51   3.3.2 取消文字换行标记——nobr 52   3.3.3 换行标记——br 53   3.3.4 保留原始排版方式标记——pre 53   3.3.5 居中对齐标记——center 54   3.3.6 向右缩进标记——blockquote 55   3.4 水平线标记 56   3.4.1 添加水平线——hr 56   3.4.2 设置水平线的宽度与高度   ——width、height 57   3.4.3 设置水平线的颜色——color 58   3.4.4 设置水平线的对齐方式——align 59   3.4.5 去掉水平线阴影——noshade 60   3.5 其他文字标记 60   3.5.1 文字标注标记——ruby 60   3.5.2 声明变量标记——var 61   3.5.3 忽视HTML标记   ——plaintext、xmp 62   3.6 小结 63   3.7 习题 63   第4章 使用列表 65   教学录像:35分钟   4.1 列表的标记 66   4.2 使用无序列表 66   4.2.1 无序列表标记——ul 66   4.2.2 无序列表的符号类型——type 67   4.3 使用有序列表 69   4.3.1 有序列表标记——ol 69   4.3.2 有序列表的属性——type 70   4.3.3 有序列表的起始数值——start 72   4.4 定义列表标记——dl 73   4.5 菜单列表标记——menu 74   4.6 目录列表——dir 75   4.7 使用嵌套列表 76   4.7.1 定义列表的嵌套 77   4.7.2 无序列表和有序列表的嵌套 78   4.8 小结 79   4.9 习题 80   第5章 超链接 81   教学录像:22分钟   5.1 超链接的基本知识 82   5.1.1 超链接 82   5.1.2 绝对路径 82   5.1.3 相对路径 82   5.2 超链接的建立 83   5.2.1 超链接标记的基本语法 83   5.2.2 建立文本超链接 83   5.2.3 设置超链接的目标窗口 85   5.3 内部链接 87   5.4 书签链接 89   5.4.1 建立书签 89   5.4.2 链接到同一页面的书签 91   5.4.3 链接到不同页面的书签 92   5.5 外部链接 93   5.5.1 通过HTTP协议 94   5.5.2 通过FTP 94   5.5.3 发送E-mail 95   5.5.4 下载文件 96   5.6 其他链接 98   5.6.1 脚本链接 98   5.6.2 空链接 99   5.7 小结 99   5.8 习题 100   第6章 使用图像 101   教学录像:35分钟   6.1 图像的基本格式 102   6.2 添加图像——img 102   6.3 设置图像属性 103   6.3.1 图像高度——height 103   6.3.2 图像宽度——width 104   6.3.3 图像边框——border 105   6.3.4 图像水平间距——hspace 107   6.3.5 图像垂直间距——vspace 108   6.3.6 图像相对于文字基准线的对齐方式   ——align 108   6.3.7 图像的提示文字——alt 110   6.4 图像的超链接 111   6.4.1 设置图像的超链接 111   6.4.2 设置图像热区链接 112   6.5 小结 116   6.6 习题 116   第7章 表格的应用 118   教学录像:48分钟   7.1 创建表格 119   7.1.1 表格的基本构成——table、tr、td 119   7.1.2 表格的标题——caption 120   7.1.3 表格的表头——th 121   7.2 设置表格基本属性 123   7.2.1 表格的宽度——width 123   7.2.2 表格的高度——height 125   7.2.3 表格的对齐方式——align 126   7.3 设置表格的边框 127   7.3.1 表格边框的宽度——border 127   7.3.2 表格边框的颜色——bordercolor 128   7.3.3 表格内框的宽度——cellspacing 130   7.3.4 表格内文字与边框的间距   ——cellpadding 131   7.4 设置表格背景 132   7.4.1 表格的背景颜色——bgcolor 132   7.4.2 表格的背景图像——background 133   7.5 设置表格的行属性 134   7.5.1 高度的控制——height 134   7.5.2 行的边框颜色——bordercolor 135   7.5.3 行的背景颜色——bgcolor、background 136   7.5.4 行文字的水平对齐方式——align 137   7.5.5 行文字的垂直对齐方式——valign 139   7.5.6 表格标题的垂直对齐方式——align 140   7.6 调整单元格属性 141   7.6.1 单元格大小——width、height 141   7.6.2 单元格水平跨度——colspan 142   7.6.3 单元格垂直跨度——rowspan 143   7.6.4 单元格对齐方式——align、valign 144   7.6.5 单元格的背景色 146   7.6.6 单元格的边框颜色——bordercolor 147   7.6.7 单元格的亮边框——bordercolorlight 148   7.6.8 单元格的暗边框——bordercolordark 150   7.6.9 单元格的背景图像——background 151   7.7 表格的结构 152   7.7.1 表格的表头标记——thead 153   7.7.2 表格的表主体标记——tbody 154   7.7.3 表格的表尾标记——tfoot 156   7.8 表格的嵌套 157   7.9 小结 159   7.10 习题 159   第8章 层标记——div 161   教学录像:33分钟   8.1 层 162   8.1.1 层的分类 162   8.1.2 定义数据块 162   8.2 <div>标签 163   8.2.1 <div>标签的简介 163   8.2.2 <div>标签的属性 164   8.2.3 <span>标签与<div>标签 170   8.3 <iframe>标签 172   8.3.1 <iframe>标签的简介 172   8.3.2 <iframe>标签的属性 172   8.4 <layer>标签和<ilayer>标签 174   8.4.1 标签层的使用 175   8.4.2 <layer>标签和<ilayer>标签的区别 176   8.5 应用div制作下拉菜单导航条 176   8.6 小结 179   8.7 习题 179   第9章 编辑表单 181   教学录像:26分钟   9.1 使用表单标签——form 182   9.1.1 处理动作——action 182   9.1.2 表单名称——name 183   9.1.3 传送方法——method 183   9.1.4 编码方式——enctype 184   9.1.5 目标显示方式——target 185   9.2 添加控件 185   9.3 输入类的控件 186   9.3.1 文字字段——text 186   9.3.2 密码域——password 187   9.3.3 单选按钮——radio 188   9.3.4 复选框——checkbox 189   9.3.5 普通按钮——button 190   9.3.6 提交按钮——submit 191   9.3.7 重置按钮——reset 192   9.3.8 图像域——image 193   9.3.9 隐藏域——hidden 195   9.3.10 文件域——file 195   9.4 列表/菜单标记 197   9.5 文本域标记——textarea 198   9.6 id标记 199   9.7 小结 200   9.8 习题 200   第10章 多媒体页面 202   视频讲解:18分钟   10.1 设置滚动文字 203   10.1.1 滚动文字标签——marquee 203   10.1.2 滚动方向属性——direction 203   10.1.3 滚动方式属性——behavior 204   10.1.4 滚动速度属性——scrollamount 205   10.1.5 滚动延迟属性——scrolldelay 206   10.1.6 滚动循环属性——loop 207   10.1.7 滚动范围属性——width、height 208   10.1.8 滚动背景颜色属性——bgcolor 209   10.1.9 滚动空间属性——hspace、vspace 209   10.2 添加背景音乐 211   10.2.1 设置背景音乐——bgsound 211   10.2.2 设置循环播放次数——loop 212   10.3 添加多媒体文件 213   10.3.1 添加多媒体文件标记——embed 213   10.3.2 设置自动运行——autostart 214   10.3.3 设置媒体文件的循环播放——loop 215   10.3.4 隐藏面板——hidden 216   10.3.5 添加其他类型的媒体文件 217   10.4 小结 217   10.5 习题 218   第2篇 HTML 5高级应用   第11章 HTML 5的新特性 221   视频讲解:6分钟   11.1 谁在开发HTML 5 222   11.2 HTML 5的新认识 222   11.2.1 兼容性 222   11.2.2 实用性和用户优先 222   11.2.3 化繁为简 223   11.3 无插件范式 223   11.4 HTML 5的新特性 224   11.5 小结 224   第12章 HTML 5与HTML 4的区别 225   视频讲解:51分钟   12.1 语法的改变 226   12.1.1 HTML 5的语法变化 226   12.1.2 HTML 5中的标记方法 226   12.1.3 HTML 5语法中的3个要点 227   12.1.4 标签实例 228   12.2 新增的元素和废除的元素 228   12.2.1 新增的结构元素 228   12.2.2 新增的块级的语义元素 230   12.2.3 新增的行内的语义元素 231   12.2.4 新增的嵌入多媒体元素与交互性元素 231   12.2.5 新增的input元素的类型 232   12.2.6 废除的元素 233   12.3 新增的属性和废除的属性 234   12.3.1 新增的属性 234   12.3.2 废除的属性 236   12.4 全局属性 237   12.4.1 contentEditable属性 237   12.4.2 designMode属性 238   12.4.3 hidden属性 239   12.4.4 spellcheck属性 239   12.4.5 tabindex属性 240   12.5 小结 240   12.6 习题 240   第13章 HTML 5的结构 242   视频讲解:20分钟   13.1 新增的主体结构元素 243   13.1.1 article元素 243   13.1.2 section元素 245   13.1.3 nav元素 247   13.1.4 aside元素 248   13.1.5 time元素 250   13.1.6 pubdate属性 250   13.2 新增的非主体结构元素 251   13.2.1 header元素 251   13.2.2 hgroup元素 252   13.2.3 footer元素 252   13.2.4 address元素 253   13.3 小结 253   13.4 习题 254   第14章 HTML 5中的表单 255   视频讲解:50分钟   14.1 新增表单元素与属性 256   14.1.1 新增的属性 256   14.1.2 增加与改良的input元素的种类 259   14.1.3 output元素的添加 264   14.1.4 应用新增元素制作注册表单 264   14.2 对表单的验证 266   14.2.1 自动验证 266   14.2.2 checkValidity显式验证法 267   14.2.3 避免验证 268   14.2.4 使用setCustomValidity方法自定义   错误信息 268   14.3 增加的页面元素 269   14.3.1 新增的figure元素 270   14.3.2 新增的details元素 271   14.3.3 新增的mark元素 272   14.3.4 新增的progress元素 274   14.3.5 新增的meter元素 275   14.3.6 改良的ol列表 276   14.3.7 改良的dl列表 276   14.3.8 加以严格限制的cite元素 277   14.3.9 重新定义的small元素 278   14.4 小结 278   14.5 习题 279   第15章 HTML 5中的文件与拖放 280   视频讲解:40分钟   15.1 选择文件 281   15.1.1 通过file对象选择文件 281   15.1.2 使用blob接口获取文件的类型与大小 282   15.1.3 通过类型过滤选择的文件 283   15.2 使用FileReader接口读取文件 285   15.2.1 检测浏览器是否支持FileReader接口 285   15.2.2 FileReader接口的方法 285   15.2.3 使用readAsDataURL方法预览图片 286   15.2.4 使用readAsText方法读取文本文件 287   15.2.5 FileReader接口中的事件 288   15.3 拖放API 290   15.3.1 实现拖放的步骤 290   15.3.2 通过拖放显示欢迎信息 291   15.4 dataTransfer对象应用详解 293   15.4.1 使用effectAllowed和dropEffect属性   设置拖放效果 293   15.4.2 使用setDragImage方法设置拖放图标 294   15.5 小结 295   15.6 习题 295   第16章 多媒体播放 296   视频讲解:35分钟   16.1 HTML 5多媒体的简述 297   16.1.1 HTML 4中多媒体的应用 297   16.1.2 HTML 5页面中的多媒体 297   16.2 多媒体元素基本属性 298   16.3 多媒体元素常用方法 302   16.3.1 媒体播放时的方法 302   16.3.2 canPlayType(type)方法 304   16.4 多媒体元素重要事件 304   16.4.1 事件处理方式 304   16.4.2 事件介绍 305   16.4.3 事件实例 306   16.5 小结 308   16.6 习题 309   第17章 绘制图形 310   视频讲解:1小时32分钟   17.1 canvas的基础知识 311   17.1.1 canvas是什么 311   17.1.2 在页面中放置canvas元素 311   17.1.3 绘制带边框的矩形 312   17.2 在画布中使用路径 314   17.2.1 使用arc方法绘制圆形 314   17.2.2 使用moveTo与lineTo路径绘制火柴人 316   17.2.3 贝塞尔和二次方曲线 317   17.3 运用样式与颜色 319   17.3.1 fillStyle 和 strokeStyle属性 319   17.3.2 透明度 globalAlpha 321   17.3.3 线型 Line styles 323   17.4 绘制渐变图形 325   17.4.1 绘制线性渐变 325   17.4.2 绘制径向渐变 326   17.5 绘制变形图形 328   17.5.1 坐标的变换 328   17.5.2 矩阵变换 330   17.6 组合多个图形 333   17.7 给图形绘制阴影 335   17.8 应用图像 336   17.8.1 绘制图像 336   17.8.2 图像的局部放大 338   17.8.3 图像平铺 339   17.8.4 图像裁剪 341   17.8.5 像素的处理 342   17.9 绘制文字 344   17.10 保存与恢复状态 345   17.11 文件的保存 346   17.12 对画布绘制实现动画 347   17.13 综合实例——桌面时钟 348   17.14 小结 350   17.15 习题 351   第18章 数据存储 352   视频讲解:50分钟   18.1 初识Web Storage 353   18.1.1 什么是Web Storage 353   18.1.2 使用Web Storage中的API 353   18.1.3 sessionStorage和localStorage的实例   ——计数器 355   18.1.4 Web Storage综合实例——留言本 357   18.1.5 JSON对象的存数实例——用户信息卡 359   18.2 本地数据库 361   18.2.1 Web SQL数据库简介 361   18.2.2 使用Web SQL Database API 362   18.2.3 本地数据库实例——用户登录 363   18.3 小结 367   18.4 习题 367   第19章 离线应用程序 368   视频讲解:13分钟   19.1 HTML 5离线Web应用概述 369   19.1.1 离线Web应用概述 369   19.1.2 本地缓存与浏览器网页缓存的区别 370   19.2 创建HTML 5离线应用 370   19.2.1 缓存清单(manifest) 370   19.2.2 配置IIS服务器 372   19.2.3 浏览缓存清单 372   19.3 浏览器与服务器的交互过程 373   19.4 applicationCache对象 374   19.4.1 swapCache方法 375   19.4.2 applicationCache对象的事件 376   19.5 小结 379   19.6 习题 379   第20章 使用Web Worker处理线程 380   视频讲解:25分钟   20.1 Web Worker概述 381   20.1.1 创建和使用Worker 381   20.1.2 Web Worker应用实例——求和运算 382   20.2 在Worker内部能做什么 383   20.3 多个JavaScript文件的加载与执行 384   20.4 线程嵌套 384   20.4.1 单层嵌套 385   20.4.2 在多个子线程中进行数据的交互 387   20.5 小结 390   20.6 习题 390   第21章 通信API 391   视频讲解:4分钟   21.1 跨文档消息通信 392   21.1.1 使用postMessageAPI 392   21.1.2 跨文档消息传输 392   21.2 小结 394   第22章 获取地理位置信息 395   视频讲解:12分钟   22.1 Geolocation API的概述 396   22.1.1 使用getCurrentPosition方法获取   当前地理位置 396   22.1.2 持续监视当前地理位置的信息 398   22.1.3 停止获取当前用户的地理位置信息 398   22.2 position对象 398   22.3 在google地图上显示“我在这里” 399   22.4 小结 401   22.5 习题 401   第3篇 HTML 5项目实战   第23章 旅游信息网前台页面 405   视频讲解:20分钟   23.1 概述 406   23.2 网站预览 406   23.3 关键技术 410   23.3.1 网站主体结构设计 410   23.3.2 HTML 5结构元素的使用 410   23.4 网站公共部分设计 411   23.4.1 设计网站公共header 411   23.4.2 设计网站公共footer 418   23.5 网站主页设计 419   23.5.1 显示网站介绍及相关图片 419   23.5.2 主页左侧导航的实现 421   23.6 留下足迹页面设计 424   23.6.1 播放音乐 424   23.6.2 添加留言功能的实现 425   23.7 小结 426   附录 习题参考答案 427   HTML 5从入门到精通   目 录   X   XI
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值