html5学习笔记---01.HTML5介绍,02.HTML5的新特性

2013/6/10
01.HTML5介绍
a.创梦技术qq交流群：CreDream：251572072
--------------------
a.创梦技术qq交流群：CreDream：251572072
HTML 是Hyper Text Markup Language的简称，它是一种用于描述网页文档的标记语言，
而HTML5则是这种标记语言的新标准。
-----------------------------------------
b.自1993 年6 月HTML 的第一版草案发布，到1999 年12 月24 日HTML 4.01 的发布，
HTML 一直在不断更新。但是HTML4并没有给HTML 带来太大的突破，随着网络的迅
速发展，它渐渐满足不了网络应用的需求了。2000年1 月26日，可扩展超文本置标语
言（eXtensible Hyper Text Markup Language），即 XHTML 出现了。XHTML 的表现方式与
HTML 类似，不过语法上更加严格。因为XHTML 更加注重页面规范和可用性，所以W3C
执意发展XHTML。但是因为种种原因XHTML 的进展非常缓慢，最主要是因为XHTML2
不兼容以往任何一个版本的HTML 。在这种情况下，HTML5出现了。
-----------------------------------------------
c.HTML5草案的前身名为 Web Applications 1.0 ，于2004年由WHATWG 提出，2007年
W3C 接纳了这种标准，并成立了新的HTML 工作团队。HTML5的第一份正式草案于2008
年1 月22日公布。HTML5是W3C与WHATWG合作的结果，它成为 HTML、XHTML 以
及 HTML DOM 的新标准。
----------------------------------------
2013/6/10
a.创梦技术qq交流群：CreDream：251572072
02.HTML5的新特性
------------------------
a.HTML5有很多令人心动的特性和新功能，比如，强化了Web 网页的表现性能，增加了　
本地数据库等 Web 应用的功能，以及图像操作等。
b.HTML5在图像上引入了Canvas 标签，通过Canvas ，用户可以动态生成各种图形图像、
图表以及动画，而不再依赖于Flash、silverlight 等插件了。
c.另外，HTML5在地理位置操作上引入了Geolocation API ，其特点在于：
本身不去获取用户的位置，而是通过第三方接口来获取，例如IP 、GPS 、WIFI等方式。 ❑
用户可以随时开启和关闭，在被程序调用时也会首先征得用户同意，保证了用户的 ❑
隐私。
d.同时，HTML5还在数据储存上增加了本地数据库，可以使用WebSQL 来储存数据，并
且引入了web storage API 实现了离线缓存功能，以此替代了cookies，使得数据保存空间更
大、更安全。
e.举几个例子，来说明一下HTML5的优越之处
----------------------------------------------
1. 使用video 标签播放动画
<video width="640" height="360" preload="auto" poster="hoge.png" controls autoplay>

<source src="hoge.webm" type='video/webm; codecs="vp8, vorbis"'>

<source src="hoge.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

<p> 无法播放动画。<a href="hoge.html"> 推荐环境请看这里。</a></p>
</video>
-----------------------------------------------------------------
2. 使用audio 标签播放音频
<audio controls loop>

<source src="hoge.ogg">

<source src="hoge.wav">

<source src="hoge.mp3">

<p> 无法播放音频。<a href="hoge.html">推荐环境请看这里。</a></p>
</audio>
--------------------------------------------------------
3. 使用Canvas标签绘制图形
<canvas id="canvas" width="640" height="360"></canvas>
<script>
//获取context对象
var canvas = document.getElementById('canvas');
if(canvas.getContext){
var context = canvas.getContext('2d');
// 设置颜色
context.fillStyle = 'rgb(255,0,0)';
// 从坐标(20,30)开始，画一个64×36大小的矩形
context.fillRect(20,30,64,36);
}
</script>
--------------------------------------------------
4. 轻松取得当前的位置
<script>
window.addEventListener('load'. function () {
//判断可否使用geolocation
if(navigator.geolocation){
//定期获取所在地
navigator.geolocation.watchPosition(update);
}
}, false);
//取得位置并表示
function update(position){
//纬度
var lat = position.coords.latitude;
//经度
var lng = position.coords.longitude;
//把纬度和经度显示出来
document.write(' 纬度：'+lat+'，经度：'+lng);
}
</script>
---------------------------------------------
5. 将大量的数据保存在客户端
<script>　
//用localStorage来保存数据
localStorage.key = '想要保存的值';
//将localStorage中的值取出来
var hoge = localStorage.key;
//“想要保存的值”在页面上显示
document.write(hoge);
</script>
-----------------------------------
6.form的强化

<input name="email" type="email">

<input name="text" type="text" require>

<input name="text" type="text" placeholder=" 例：姓名">
-------------------------------------------------------------
7. 全新的标签属性
在HTML5中取消了一些过时的HTML4标记，其中包括纯粹显示效果的标记，如
<font> 和<center> ，它们已经被CSS 取代了。HTML5 吸取了针对XHTML2的一些建议，加
强了一些用来改善文档结构的功能，如引入新的HTML 标签 header、footer 、dialog 、aside、
fi gure 等，使开发者能够更加容易地创建文档，以前开发者在实现这些功能时一般都是使用
div。另外，它还取消了一部分旧标签，如字体设置font 、居中设置center 等。一小部分标签
的含义也有所改变，如粗体样式b 和斜体样式i 标签虽然仍然保留，但它们的意义已经和以
前有所不同，现在这些标签的意义只是为了将一段文字标识出来。
以上就是HTML5的一些新特性。需要注意的是，虽然HTML5已被W3C接纳，但现在
还只是草案，在正式版发布之前，它的样式仍可能会有所变更。
---------------------------------------------------------

html5学习笔记---01.HTML5介绍,02.HTML5的新特性相关推荐

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
学习笔记(01):Web前端与HTML5移动开发系列一：HTML篇-06，HTML基本构成和语法
立即学习:https://edu.csdn.net/course/play/4381/77470?utm_source=blogtoedu <html>
HTML5学习笔记（三）：HTML5的智能提示在VisualStudio2010
(一)首先下载HTML5在VS2010中的插件工具 (1)下载地址 (2)安装 (二)在VS2010中选中HTML5插件工具|选项|文本编辑器|HTML|验证
【虚幻4/UE4】学习笔记01——软件介绍、安装及界面
因为工作需要,一个完全零基础的小白开始学习UE4的征途开始啦~ 一.什么是UE4 UE4是一套为游戏开发者设计和构建优先.模拟和可视化的集成工具. 简言之,做游戏的软件. 二.UE4的功能实时逼真渲 ...
Java日期学习笔记（二）：JDK1.8新特性
Java 8另一个新增的重要特性就是引入了新的时间和日期API,它们被包含在java.time包中.借助新的时间和日期API可以以更简洁的方法处理时间和日期. 在介绍本篇文章内容之前,我们先来讨论Ja ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
html5表格所有属性,HTML5学习笔记之表格标签
HTML5学习笔记之表格标签其他HTML5相关文章一.表格标签 image 1.作用: 以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 2.格式 ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

html5学习笔记---01.HTML5介绍,02.HTML5的新特性

html5学习笔记---01.HTML5介绍,02.HTML5的新特性相关推荐

最新文章

热门文章