整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

学习总结：适合小白的HTML5前端学习路线

TML5经历了前期HTML快速的更新换代，以其独有特性的优势迅速占据了网页开发市场鳌头。介于目前学习和想要从事HTML5网页开发的人越来越多。小编给大家整理了一下基本的HTML5学习路线图，适应于一些零基础学习HTML5的同学借鉴。

HTML5学习路线规划：

一、HTML5基础

HTML 快速入门、文本、图像、链接、表格、列表、表单、框架;

二、CSS3基础

CSS基础语法、各种选择器(通用选择器、元素选择器、id和class选择器、后代选择器、伪类选择器等)、框模型与背景、文本格式化、表格、显示与定位、浏览器调试

三、HTML5高级

HTML5 增强表单元素、HTML5验证、HTML5新事件和新属性、Canvas绘图、HTML5 SVG、音频和视频处理、离线Web存储与应用、HTML5 拖放、Web Socket API、Geolocation API、Web Worker API

四、实战技能目标

掌握JQuery核心API，HTML5 中的绘图、音频视频处理、表单新特性，轻量级WEBAPP开发。

HTML5开发从根本上改变了开发者开发web和应用的方式，从桌面浏览器到移动应用，HTML5都已经成为前端开发必不可少的语言。特别是移动互联网的爆发和微信这个超级应用对HTML5的支持，掌握HTML5语言的程序员已然成为各个互联网公司的标配，薪资也是一路走高。

如果你想入门HTML5，又苦于没有好的学习方法，可以选择一套优秀的教程来进行学习，让自己少走弯路快速进入HTML5开发的行列。

如果你想快速学习这些知识点并掌握这些技术，可以关注+私信小编关键词【前端开发】，即可获取一套前端开发教程，开启你的前端开发之旅。

联网的发展总是在不断地催生新技术的产生，而 HTML5 和 CSS3 是最近一直被讨论的热门话题，对于每个互联网开发者尤其是前端开发者而言，都充满了好奇与渴望。那么 HTML5 和 CSS3 究竟有哪些让我们眼前一亮的东西呢？

HTML5

HTML 5 草案的前身名为 Web Applications 1.0，于 2004 年被 WHATWG 提出，于 2007 年被 W3C 接纳，并成立了新的 HTML 工作团队。在 2008 年 1 月 22 日，第一份正式草案发布。HTML5 是近十年来 Web 开发标准最巨大的飞跃。和以前的版本不同，HTML5 并非仅仅用来表示 Web 内容，它的新使命是将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下 HTML5 的技术概览有哪些：

HTML5 新增和移除的元素

HTML5 新增了很多多媒体和交互性元素如 video，audio，在 HTML4 当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而 HTML5 只需要通过引入一个标签就可以，就像 img 标签一样方便。在页面布局和内容实现方面 HTML5 新增了很多结构化标签元素以及块级及语义元素，如果你要用 HTML 表示一个文件的上传进度条，在 HTML5 中你可以用 progress 这个元素来表示，它有一个 value 属性描述了已经完成了多少任务，还有一个属性 max 描述了这个任务一共需要多少，还可以通过 DOM 接口得到这个进度条的 position 属性（只读），也就是任务完成的百分比。Youtube 在 HTML5 技术上已经做了一个尝试，http://www.youtube.com/html5 是用 HTML5 做的一个 DEMO，从整个页面源代码来看，非常简洁。当然 HTML5 也对一些元素新增了一些属性，如 input 和 textarea 的 placeholder 属性，相当于输入框的输入提示，script 有一个 async 属性会影响脚本的加载和执行。对于所有的 HTML 共有的属性我们通常把它称作是“全局属性”，如 class，id，tabindex，title，HTML5 也新增了一些全局属性，如 contenteditable，contextmenu，hidden 等属性。HTML5 还增加了对于微数据的支持，如 HTML5 新增的 item，itempro，subject 等属性。

当然 HTML5 也移除了一些表示页面展现的元素，如 font，center，strike 等，这些本应该是 CSS 来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如 frame，frameset，noframe 以及一些不常用的元素如 acronym，而采用 abbr 来表示缩写。HTML5 还移除了一些影响客户端兼容性的 HTML 熟悉，如 link 的 rev 属性，td 的 scope 属性；HTML5 也移除了一些表示页面展现的属性如一些元素的 align，bgcolor 属性。

HTML5 对表单的支持

HTML5 提供了强大的控件类型如 url，email，date，tel 等，强大的约束属性，如 required 表示必填，文件上传的 accept 属性，以及一些表单重复元素模型的支持，HTML5 在提交表单的时候还可以设置提交的方式为 XML 提交方式，这样服务器端接收到的数据将是 XML 格式，HTML5 的表单被定义为“Web Forms 2.0”，目前 Opera 9.5+ 对 Web Forms 2.0 的支持较为完美。

HTML5 DOM 变化

HTML5 在 DOM LEVEL 2 HTML 方面很多都是继承自 HTMLDocument 的接口，当然 HTML5 在 DOM 上也有一些值得注意的新成员，如：支持 getElementsByClassName，可以根据 class 类名选择元素，getSelection() 将会返回当前选中的对象，在选择器上面有两个方法 querySelector 和 querySelectorAll 可以根据 CSS 选择符来获取要查询的元素，相当于 YUI 3 中的 Y.one 和 Y.all。

HTML5 的 Javascript APIs

HTML5 在 Javascript 上面新增了哪些 API 呢？

  • Video/Audio：HTML5 为 Video 和 Audio 提供了 API 来让开发者控制他们自己的用户界面，如可以播放或暂停媒体内容。
  • Canvas：Canvas 是一个新的 HTML 元素，这个元素可以被 Script 语言（通常是 JavaScript）用来绘制图形。例如可以用它来画图、合成图象、或做简单的（和不那么简单的）动画。Canvas 是一个神奇的东西，它给我的第一感觉就像是在用 Photoshop 一样，它的每一个方法跟 Photoshop 是那么地相似，通过 canvas.getContext(‘2d’) 就可以得到这个 Canvas 的 API，你可以通过 fillStyle 设置其填充颜色或是通过 strokeStyle 设置其描边颜色，甚至它画路径的操作跟 Photoshop 的钢笔操作更是不谋而合。Canvas 在很多网站都已经有应用，甚至还可以用 Canvas 来编写 Web Game。
  • Drag&Drop：在指示设备的视觉媒体中，”Drag” 的操作就是鼠标按下（mousedown）并伴随着鼠标移动（mousemove）的事件，而 ”Drop” 则是鼠标释放时触发的事件。在 Drag&Drop 里定义了 DataEvent 和 DataTransfer 接口，同时当拖拽操作发生时会触发如 dragstart，dragenter，dragleave，drop，dragend 等事件。
  • Web Workers：让 JavaScript 多线程，可以在后台做很多工作而不会阻断当前的浏览器操作。
  • Geolocation：地理位置定位，运行 navigator.geolocation.getCurrentPosition(success, error) 这个方法时浏览器会提示是否要共享你的地理位置，如果选择共享，则会回调 success 函数，success 函数有一个参数是 position 对象，这个 position 对象有一个 coords 对象，coords 对象包含了很多地理位置信息如 latitude（维度）和 longitude（经度），这样就可以知道你的具体位置了，这个功能在一些手机如 iPhone 上已经有广泛的应用了。
  • Application Cache：这是 HTML5 对于离线应用的支持，通过在 HTML 元素上加一个属性 manifest，浏览器会提示你是否要将数据缓存到客户端，如果用户选择了允许，则会按照指定的 manifest 文件列表缓存需要的文件，当你的网络不可用时，你还是可以使用这个应用的。对于离线应用，Google 也开发了 Google Gears 浏览器扩展，不过最后 Google 转投 HTML5 可能也是看到了 HTML5 存储和离线应用的这种优势。
  • Storage：Webkit 已经实现了 database storage，你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储，如 sessionStorage 和 localStorage，可以通过 setItem 和 getItem 来存储与取值，相对于 Cookie 的存储来说，存储的容量要大很多。
  • X-Document Messaging：浏览器因为安全和隐私的原因，阻止了不同域之间文档的通信，虽然这是一个安全限制，但是对于那些没有危害的不同域的文档通信带来了很多问题，但是 HTML5 可以实现这种跨文档通信，让我们可以不用管源域是来自哪里，同时可以防止脚本攻击。

HTML5 让你心动了吗？那么 HTML5 什么时候会成为标准呢？据说要等到 2022 年，这有一个很有意思的网站 http://ishtml5readyyet.com/ 告诉你还有多少天 HTML5 会真正到来。

CSS3

CSS3 对于我们 Web 开发者来说不只是新奇的技术，更重要的是这些全新概念的 Web 应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者 JavaScript 去完成圆角、多背景、用户自定义字体、3D 动画、渐变、盒阴影、文字阴影、透明度等提高 Web 设计质量的特色应用。

CSS3 在选择器上面的支持

利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可以选择某一类元素，CSS3 在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3 在样式上的支持

有一个调查说开发者最期待 CSS3 的特性是什么，最后票数最多的是“圆角”，不错，圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图拼凑一个圆角。CSS3 还支持阴影，盒阴影以及文本阴影，渐变，之前你可能是通过IE的滤镜看到过，其实 CSS3 实现起来更加方便。@font-face 可以自定义字体，如果用传统的方式，VD 把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片，而通过 CSS3 用 @font-face 就可以了。CSS3 对于连续文本换行也新增了一个属性 word-wrap，你可以设置其为 normal（不换行）或 break-word（换行），这解决了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字符。使用 CSS3 你还可以给边框加背景，这在 iPhone 上也有应用的例子。CSS3 在背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通过 background-size 来调整背景图的大小来适应这个元素。CSS3 支持 opacity，rgba 和 hsl/a，opacity 和 rgba 的区别是 opacity 设置的透明对其内容也会产生影响，而 rgba 只对你应用的元素产生影响。CSS3 在布局上对于盒模型提供了支持，可以设置 box-sizing 为 content-box 或 border-box，应用为 content-box 就是正常的模式，而应用为 border-box 和 IE5.5 的盒模型很相似，即元素的宽度包括 border 和 padding，这个在布局上可能会比较方便，不用去管到底这个元素会占用多大的宽度，而用 content-box 还需要手动计算一下这个元素实际占用的宽度。

CSS3 对于动画的支持

CSS3 支持的动画类型有：transform（变换）、transition（过渡）和 animation（动画）。你可以对特定的属性设置 transition，transiton 和 animation 的区别不大，animation 的动画是自己定义的，面向的更多的是脚本开发者，往往更加复杂。

为了使用大部分 CSS3 特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分 CSS3 属性。最常见的私有属性是用于 Webkit 核心浏览器的（比如 Safari），它们以 -webkit- 开始，以及 Gecko 核心的浏览器（比如，Firefox），以 -moz- 开始，还有 Konqueror（-khtml-）、Opera（-o-）以及 Internet Explorer（-ms-）都有它们自己的属性扩展（目前只有 IE 8 支持 -ms- 前缀）。

那我们在开发中该如何去用 CSS3 呢？

我觉得首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对 Firefox 和 Safari 等这些支持圆角的浏览器中应用 CSS 圆角，而那些不支持 CSS 圆角的浏览器则显示为直角。其次就是对于不支持 CSS3 的浏览器可以使用 JavaScript 来实现，如 CSS3 任何元素支持 :hover 伪类，我们就可以对只支持链接 :hover 的 IE6 用 JS 来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术。

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”！

原文链接：https://fed.taobao.org/blog/2009/12/18/html5-and-css3-demystification/

作者：空雁

文共3663字，预计学习时长11分钟


来源：Pexels


表单验证是使用HTML5时的一个内置特性，HTML5提供了各种验证属性。作为浏览器端HTML和JavaScript的一部分。在将数据发送到服务器之前，我们可以使用它来验证表单输入。但是，我们应该信任发送的内容，所以最终验证应该仍然在服务器上进行。

当表单输入有效时，要素将显示:valid 伪类样式表。如果它是无效的，那么则出现:invalid 伪类样式表。

当表单输入无效时，浏览器将阻止表单提交并显示错误信息。

表单验证属性

Pattern

Pattern应用于文本、检索、链接、电话、邮件和密码形式的输入元素。

·它将正则表达式设置为数值，然后浏览器对其进行验证。

Min

该属性适用于范围、数字、日期、月、周、时间、本地时间等类型的输入元素。

·当输入范围或数字时，它会检验该值是否大于或等于Min属性的给定值。

·当输入日期、月份或星期时，它会检验日期是否为该属性给定日期或在给定日期之后。

·当输入时间时，它会检验日期和时刻是否都大于或等于该属性给定时期。

Max

Max属性是min属性的对立面，它检查输入的内容是否小于或等于该属性的给定值。

·当应用于范围或数字类型的输入时，它将检查输入的数字是否小于或等于min属性的给定值

·当应用于日期、月份或星期等类型的元素时，它将检查日期是否小于或等于该属性值中给定的日期。

·当应用于时间类型输入时，它将检查日期和时间是否小于或等于min属性的给定值。

Required

该属性验证输入元素是否为空。

·它可以用于文本、检索、链接、电话、邮件、密码、日期、时间、月份、星期、数字、复选框、录音、文档，以及被选中内容和文本框等元素。

来源：Pexels


Step

Step检验输入值是否为整数。

·若输入日期类型的元素，它会检查天数是否为整数。

·若输入月份类型的元素，它会检查月份数是否为整数。

·若输入星期类型的元素，它会检查星期数是否为整数。

·若输入时间类型的元素，它会检查秒数是否为整数。

·若输入范围和数字类型的元素，它会检查范围和数值是否为整数。

Minlength

Minlength属性可应用于文本、检索、链接、电话、电子邮、密码和文本框类型的输入元素。

·它检查用户输入文本字数是否大于或等于该属性值。

Maxlength

Maxlength属性同样可应用于文本、检索、链接、电话、电子邮、密码和文本框类型的输入元素。

·它检查用户输入文本字数是否小于或等于该属性值。

应用表单验证属性

我们可以通过将表单验证属性添加到元素中来使用它们。例如，编写一份以电子邮件地址作为输入的表单。

第一步，输入以下HTML语言：


<formid='form'>
  <labelfor="email">What's  your email address?</label>
  <inputid="email" name="email" requiredpattern="[^@]+@[^\.]+\..+">
  <buttontype='submit'>Submit</button>
</form>


在上述代码中，输入元素带有required属性，根据设定进行输入。

同时，我们还以电子邮件地址的正则表达式作为值，对其添加pattern属性。

接着如下所示，当输入有效或无效时，我们通过添加样式表来改变输入元素的边界：


input:invalid {
  border: 1px solid red
}
input:vvalid {
  border: 1px solid black
}

来源：view rawinput.css 平台： GitHub


此处会用到文章开头提及的伪类样式来完成这一步骤。

最后，通过调用preventDefault来添加JavaScript代码以防止本例中的表单提交。


constform = document.querySelector('#form');
form.onsubmit = (e) => {
 e.preventDefault();
}

再举一个检查输入的长度和范围的例子。比如，编写如下 HTML代码来获取用户的姓名和年龄：


<formid='form'>
  <labelfor="name">What's  your name?</label>
  <inputid="name" name="name" requiredminlength='5' maxlength='20'>
  <br>
  <spanid='name-too-short' hidden>Name is  too short</span>
  <spanid='name-too-long' hidden>Name is  too long</span>
  <br>
  <labelfor="age">What's  your age?</label>
  <inputid="age" name="age" type='number' requiredmin='0' max='150'>
  <br>
  <spanid='age-too-high' hidden>Age is too  high</span>
  <spanid='age-too-low' hidden>Age is too  low</span>
  <br>
  <buttontype='submit'>Submit</button>
</form>


输入的姓名和年龄都具有长度和范围属性，当输入无效时，可以看到以文中所示形式出现的输入信息。

与例一相同，当输入元素有效或无效时，输入样式表来更改输入框边界：


input:invalid {
  border: 1px solid red
}
input:vvalid {
 border: 1px solid black
}


最后，当输入无效时可以通过JavaScript看到验证信息：

const form = document.querySelector('#form');
const name = document.querySelector('#name');
const age = document.querySelector('#age');
const nameTooShort = document.querySelector('#name-too-short');
const nameTooLong = document.querySelector('#name-too-long');
const ageTooLow = document.querySelector('#age-too-low');
const ageTooHigh = document.querySelector('#age-too-high');
form.onsubmit= (e) => {
  e.preventDefault();
}
name.oninput= (e) => {
  nameTooShort.hidden=true;
  nameTooLong.hidden=true;
  if (e.srcElement.validity.tooShort) {
    nameTooShort.hidden=false;
  }
if (e.srcElement.validity.tooLong) {
    nameTooLong.hidden=false;
  }
}
age.oninput= (e) => {
  ageTooLow.hidden=true;
  ageTooHigh.hidden=true;
  if (e.srcElement.validity.rangeOverflow) {
    ageTooHigh.hidden=false;
  }
if (e.srcElement.validity.rangeUnderflow) {
    ageTooLow.hidden=false;
  }
}


在上述代码中，将oninput事件处理程序设置为事件处理程序函数，以便检查后续输入的有效性。

在每个函数中，我先隐藏所有信息，这样就不会看到过时的消息了。然后，根据设置的最小和最大长度来检查名称输入是否太短或太长。

若出现任何错误，会在HTML中取消隐藏相应的信息。

来源：Pexels


同样，我们根据长度的最大最小设定值来检验年龄输入值是否在所属区间内。若出现错误，我们会在HTML中取消隐藏相应的信息。

通过HTML5和JavaScript，不需要任何函数库就可以检验各种类型输入值的有效性。

我们可以检验长度、范围、任何带有正则表达式的模式等输入元素，但在保存之前应当检查服务器端，因为部分用户仍可以破解浏览器端应用程序来跳过验证。



留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范


在线咨询
上一篇：学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习
下一篇：JAVASCRIPT WEBUPLOADER 分块上传

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石林彝族自治县 沿滩区 平房区 琼结县 唐海县 瑞丽市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服