HTML5是下一代HTML 标准。2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。 HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search

  • CSS3 Flex 弹性布局实例代码详解_css3_CSS_网页制作

    一、基本概念 //任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性

    24 2018-11-10 0 24

  • Canvas中设置width与height的问题浅析_html5教程技巧

    最近因为工作需要，所以就学了一下Html中的Canvas标签。Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flas

    9 2018-11-10 0 9

  • 浅谈移动端网页图片预加载方案 _html5教程技巧

    由于公司业务需要，vue制作的网页需要连接智能家居的wifi，然而这种wifi是没有连接互联网的，仅用于手机与家居的对接。这样，就导致了网页在这种wifi下无法加载服务器上的图片。就此，针对vue单页面系统，我想出来3种方案。1.在

    12 2018-11-10 0 12

  • 纯css3实现思维导图样式示例_css3_CSS_网页制作

    思维导图又称之为脑图他大概是这个样子滴：网上大部分实现有用d3.js实现，有手动用svg实现，最近工作需要，本人很懒，在琢磨看看用css3能不能实现呢？答案是肯定的 下面上代码html代码<div class="mainBody" id="node1"> <h1>

    9 2018-11-10 0 9

  • 使用CSS属性选择器来拼接HTML的DNA的方法_CSS教程_CSS_网页制作

    CSS属性选择器非常神奇，它们可以帮你避免添加数不胜数的类名，从另一方面来指出你代码里的一些问题。但是大家不用慌，虽然属性选择器复杂且强大，但是很易于学习和使用。在这篇文章，我们将讨论它们是如何运行起来的，再教大家

    15 2018-11-10 0 15

  • Canvas实现保存图片到本地的示例代码_html5教程技巧

    一、简介需求： 将HTML5的内容保存为图片
    思路： 通过Canvas绘图生成base64图片，长按即可保存到本地
    问题： canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩二、具体问题问题1：canvas是禁止跨域的，

    55 2018-10-12 0 55

  • 快速实现一个简单的canvas迷宫游戏的示例_html5教程技巧

    前言（最近设计模式看的有点头大，一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下）
    现在canvas已经不算新鲜了，不过由于日常业务中并不常用，所以实践并不多，今天分享一下，如何实现简单canvas迷宫。这个例子来源

    64 2018-10-12 0 64

  • HTML5中form如何关闭自动完成功能的方法_html5教程技巧

    什么是HTML5的form自动完成功能？首先，HTML5 中有个新属性autocomplete ，autocomplete 属性规定表单是否应该启用自动完成功能，它自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应

    60 2018-10-12 0 60

  • 如何用canvas实现在线签名的示例代码_html5教程技巧

    随着计算机和网络技术的飞速发展，在线签名技术越来越多的被应用在无纸化办公中，这种直观便利的操作不仅可以大幅提升办公效率，而且使用数字化存储方式，避开了传统的纸质签字存储查阅困难等问题。在我们在日常生活中，已经有

    90 2018-10-12 0 90

  • canvas简易绘图的实现（海绵宝宝篇）_html5教程技巧

    最近在研究canvas，简单的用canvas绘制了一下卡通人物--海绵宝宝。图片如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>canvas海绵宝宝</title> </head> <body> <canvas id="canvas" wi

    43 2018-10-12 0 43

  • canvas 如何绘制线段的实现方法_html5教程技巧

    学习canvas，首先得知道如何去绘制线段，然后才能通过很多简单的线段去实现比较复杂的图形，比如常见的图表，柱状图，折线图等都是通过一段一段的线段实现的。基础知识canvas 的基础知识不算多，主要掌握如何绘制线段，图形，图片，文

    114 2018-10-12 0 114

  • html5 input输入实时检测以及延时优化_html5教程技巧

    有个项目是，这么个情况，输入框，实时监测输入，触发请求。第一想法是input 上的onchange()方法，试了一下，不好用，是值等更改确认了，才会触发，不即时。上网查了一下，$("#fix").on('input propertychange', function(event){});方法

    119 2018-10-12 0 119

  • 利用canvas实现图片压缩的示例代码_html5教程技巧

    项目中做身份证识别时，需要传送图片的 base64 格式编码，但是手机拍摄的照片都太大了，转成 base64 简直可怕，因此找了一下解决办法涉及到的知识点 onchange 事件是在上传完文件之后触发 使用 files 属性获取到上传的

    43 2018-10-12 0 43

  • 详解移动端Html5页面中1px边框的几种解决方法_html5教程技巧

    问题提出这是一个比较老的问题了，我第一次注意到的时候，是UI设计师来找我麻烦，emmm那时候我才初入前端职场，啥也不懂啊啊啊啊啊，情形是这样的：设计师拿着手机过来：这些边框都粗了啊，我的设计稿上是1px的我：？？？？我写的是1px呀，不信你

    55 2018-10-12 0 55

  • htnl5利用svg页面高斯模糊的方法_html5教程技巧

    先在页面任意区域放上这段代码stdDeviation设置模糊量，最低0<svg style="display:none"> <filter id="blur-effect-1"> <feGaussianBlur stdDeviation="1"/> </filter> <filter id="blur-effect-2">

    47 2018-10-12 0 47

  • Html5页面二次分享的实现_html5教程技巧

    对于H5页面来说二次分享还是蛮重要的，毕竟qq还是微信发出去之后习惯性的使用自带的分享功能。和PC端不同，PC直接复制地址了。前两天在做请柬，踩了不少的雷，个人开发和公司开发还是不一样，各种问题，其他问题放在一个请柬的后

    100 2018-10-12 0 100

  • 利用Storage Event实现页面间通信的示例代码_html5教程技巧

    我们都知道触发window.onstorage必须满足以下两个条件： 通过localStorage.setItem或sessionStorage.setItem保存（更新）某个storage 保存（更新）这个storage时，它的新值必须与之前的值不同上面的第二个条件，简单来讲就是

    183 2018-10-12 0 183

  • canvas实现二维码和图片合成的示例代码_html5教程技巧

    上个版本街道一个需求，使用url生成一个二维码，然后和另外一张图片合成一张图拍你，实现思路是这样的 使用jr-qrcode将url生成data:base64供img使用 然后使用canvas 将两张图合成一张图片遇到的问题生成图片之后发现

    1075 2018-10-12 0 1075

  • HTML5拖拽功能实现的拼图游戏_html5教程技巧

    具体代码如下所示：
    <!--代码如下，最下面给出了我测试用的9张250*250的图片切片--><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>drag拖拽</title> <style> .box{ float: l

    207 2018-10-12 0 207

  • 移动端Html5页面生成图片解决方案_html5教程技巧

    现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！1.生成图片可以用canvas,但是由于已经有了html2canvas这个开源库，所以为了节省时间就没有自己写了github地址

    14 2018-10-12 0 14

  • 详解WebSocket跨域问题解决_html5教程技巧

    WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持

    14 2018-10-12 0 14

  • 详解html5 postMessage解决跨域通信的问题_html5教程技巧

    本文介绍了详解html5 postMessage解决跨域通信的问题，分享给大家，具体如下：效果图postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, [transfer]

    11 2018-10-12 0 11

  • HTML5 manifest离线缓存的示例代码_html5教程技巧

    简介离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。使用缓存接口可为您的应用带来

    17 2018-10-12 0 17

头条

推荐视频教程

  • PHP入门视频教程之一周学会PHP
  • 弹指间学会HTML视频教程
  • 弹指间学会CSS视频教程
  • javascript初级视频教程
  • CSS3 最新视频教程

    • HTML5中文学习网：永久免费的在线教程，先进技术学习阵地！

    Copyright 2011-2018 http://www.html5cn.com.cn/ All Rights Reserved | 京ICP备18048875号网站地图广告服务

    html5先行者