HTML5从菜鸟到高手
关注
分享
扫一扫
文章平均质量分 73
从HTML5的基础用法逐步深入，到结合CSS3、Javascript开发各种界面效果，到使用HTML5框架，成就HTML5由菜鸟到高手的进阶之路。
anda0109
密码学与信息安全，区块链，分布式数据库/存储，人工智能。
展开
-
小程序开发之页面布局
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成转载 2017-06-05 15:04:21 · 19617 阅读 · 3 评论 -
微信小程序开发—项目实战之聊天机器人
我参加优快云博客之星评选啦，感谢大家前往投票支持！ 投票地址：http://blog.youkuaiyun.com/vote/list.html?keyword=anda0109#search 项目功能介绍人工智能虚拟机器人“微软小冰”大家玩过吧，很酷的一个应用。发送文字、语音和图片都能得到智能的回复。那现在我们就用小程序做一个模拟的应用，智能聊天机器人。发送文字它可以回复一段话，或一张图片，是不是有点小原创 2016-11-30 08:29:11 · 29305 阅读 · 14 评论 -
微信小程序开发—小程序框架详解（直播分享）
今天在千聊直播用图文的方式分享了小程序框架，也是我的直播首秀。 整体感觉效果不是太满意，一方面用手机录音效果不是太好，另一方面，在直播的过程中，思维没有活跃起来，整个直播的过程感觉比较被动。下面是今天分享的图片部分，留作纪念：原创 2016-12-03 21:44:20 · 5618 阅读 · 0 评论 -
Ionic开发环境搭建
Ionic是基于web技术开发移动应用的跨平台框架，可开发手机web、Ios、Android应用程序。1、Ionic环境安装Ionic开发依赖于Node.js环境，因此需要先安装Node.js，在Node.js环境下执行命令：npm install -g cordova ionicnpm是一个包管理器，这里使用npm安装cordova和ionic，-g表示全局安装，全局安装...原创 2018-02-09 10:52:29 · 1686 阅读 · 2 评论 -
HTML5 web存储—web SQL
什么是web SQL?我们经常在应用程序中大量处理结构化数据，HTML5引入了web SQL database概念，它允许应用程序通过异步的Javascript接口来访问SQLlite数据库。但目前web SQL并不在HTML5的规范中，而是一个单独的规范，Safari、Chrome、Oprea浏览器支持web SQL。三个核心方法Web SQL Database 规范中定义的三个核心方法：ope原创 2016-07-06 18:34:27 · 1453 阅读 · 0 评论 -
HTML5 web存储—web storage
HTML5之前的web中通常使用cookies在客户端存储简单的信息，使用cookies存储永久数据存在以下问题：cookies大小限制在4KB，不适合大量数据存储浏览器限制站点可以在用户计算机上存储的cookies的数量。cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。HTML5的出现则解决了web存储的问题。HTML5提供了本地存储的功能，以键值对存储的解决方案，支持容量原创 2016-07-06 11:48:58 · 1366 阅读 · 1 评论 -
HTML5 canvas画布（六）
贝塞尔曲线贝塞尔曲线的专业介绍请参见： http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html下面是canvas绘制贝塞尔曲线的代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>canvas绘图</title> <scrip原创 2016-07-04 16:59:12 · 3735 阅读 · 0 评论 -
HTML5 canvas画布（五）
drawImage共提供了三个方法：在画布上定位图像。 context.drawImage(img,x,y);在画布上定位图像，并指定图像的宽度和高度。 context.drawImage(img,x,y,width,height);裁切图像，并在画布上定位被裁切的部分。 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,heigh原创 2016-06-27 16:21:03 · 1579 阅读 · 0 评论 -
HTML5 canvas画布（四）
arcTo用法用法：arcTo(x1, y1, x2, y2, radius) 说明：arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当原创 2016-06-25 18:03:18 · 4696 阅读 · 0 评论 -
HTML5 canvas画布（三）
本节主要是canvas各种用法的示例，先解决一个我在应用canvas绘图过程中的一个问题，相信大家可能也遇到过。一个奇怪的问题下面代码是在canvas上绘制一个100*100的矩形：<!doctype html><html><head><meta charset="utf-8"><title>canvas基础练习</title><style> .myCanvas{原创 2016-06-24 11:58:58 · 5703 阅读 · 1 评论 -
HTML5 canvas画布（二）
上一篇《HTML5 canvas画布（一）》对canvas标签作了简单的介绍和用法示例，但实际上canvas的用法是非常强大的，很多酷炫的HTML5动画及游戏都是基于canvs来制作的。因此决定继续来两篇canvas相关的博文，巩固canvas的基础。 本篇主要介绍canvas的相关属性和用法。颜色、样式和阴影 属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式原创 2016-06-23 23:07:53 · 4035 阅读 · 0 评论 -
HTML5多媒体audio和video（二）
前面我们学习了audio和video最基本的用法，为了更加灵活的控制音视频的播放，我们就需要学习HTML5为我们提供的相关属性、方法和事件了。audio和video相关属性 属性 描述 src 用于指定媒体资源的URL地址 autoplay 资源加载后自动播放 buffered controls 提供用于播放的控制条 currentSrc 返回媒体数据原创 2016-06-20 23:30:13 · 3555 阅读 · 0 评论 -
HTML5多媒体audio和video（一）
通常浏览器通过安装flash来实现网页音视频的播放。 HTML5新增了audio和video元素来进行音视频的播放，从而减少了对flash的依赖。audio对音频的支持HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 目前audio元素支持以下三种音频格式： 音频格式 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safar原创 2016-06-20 23:04:02 · 3951 阅读 · 1 评论 -
HTML5 canvas画布（一）
HTML5中canvas元素用于在网页上绘制图形。Canvas的特点Canvas画布是一个矩形区域，可以控制其每一个像素Canvas使用JavaScript来控制画图Canvas具有直线、矩形、圆以及添加图像的方法Canvas标签的使用下面的代码是使用canvas画面绘制一个200*200红色矩形：<!Doctype html><html><head><title>我的canvas页面原创 2016-06-18 22:10:53 · 5252 阅读 · 1 评论 -
HTML5浏览器兼容性解决方案
目前大部分浏览器均支持HTML5。低版本浏览器支持HTML5所有浏览器 ，对无法识别的元素会作为内联元素自动处理。因此可以采用如下方法教会浏览器 处理 “未知” 的 HTML 元素。将 HTML5 元素定义为块元素HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属原创 2016-06-18 14:03:58 · 6870 阅读 · 1 评论 -
HTML5新增及移除的元素
HTML经过10多年的发展，其元素经历了废弃与不断重新定义的过程。为了更好的处理现在的互联网应用，HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、网络工作等新元素。图形绘制新元素 标签 描述 <canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API新多媒体元素 标签 描述 <audio> 定义音频内容 <ve原创 2016-06-18 12:21:33 · 1691 阅读 · 1 评论 -
HTML5简介（二）
HTML5相比上一代HTML有哪些改进？新元素新属性完全支持CSS3vedio和audio2D/3D绘图本地存储本地SQL数据web应用HTML5多媒体使用HTML5可以简单的在网页中播放音频（audio）和视频(vedio)，而不需要flash的支持。HTML5应用使用HTML5可以方便地开发应用。本地数据存储访问本地文件本地SQL数据缓存引用JavaScript支持原创 2016-06-18 11:28:26 · 1515 阅读 · 1 评论 -
HTML5简介（一）
HTML5简介HTML5是HTML的最新修订标准。2014年10月29日，万维网联盟（W3C）宣布，经过8年的努力，HTML5标准规范制定完成。HTML5的设计目的是在移动设备上使用多媒体。HTML5简单易学。什么是HTML5?HTML5是下一代的HTML。HTML5将成为HTML、XHTML以及HTML DOM的新标准。HTML的上一个版本诞生于1999年。HTML的诞生，让互联网的原创 2016-06-18 10:46:22 · 2082 阅读 · 1 评论 -
为什么要学HTML5
一直做C/S结构的我，对HTML5怀着崇拜而又好奇的心情，今天终于下定决心开始好好学习HTML5了。在开始学习HTML5前我得说服自己，为什么要学，学了能给我带来什么好处，以确保我不是一时的心血来潮而半途而废，而是真正发自内心的驱动力促使我去完成这件事情。目前HTML5的应用主要有以下：购物类APP：淘宝、京东等新闻类APP：36氪、网易新闻web游戏：微信内嵌游戏推广类页面：微信传播的各种原创 2016-06-17 22:52:27 · 2797 阅读 · 1 评论