初始html5

一、html5的发展历史：

2004年提出构想；2008年发布第一份草案；2012年前后位推广阶段；2020年最终测试；2022年正式发布。

二、html5新特性：

（1）html5 语义化更好：

      新增的标签

       多媒体功能：video\audio\canvas\svg

       表单功能增强

（2）Javascript APIs

   本地存储

   获取拖拽内容信息

   地理位置信息

（3）CSS3 布局排版：

   字体、多列显示……

   视觉效果：背景、圆角、阴影、渐变、透明……　

   动画支持：transform(变换)、transition(过渡)和animation(动画)

2、新增的结构元素

<article> 定义文章

<aside> 定义文章的侧边栏

<figure> 一组媒体对象以及文字

<figcaption> 定义 figure 的标题

<footer>定义页脚

<header>定义页眉

<hgroup>定义对网页标题的组合

<nav>定义导航

<section> 定义文档中的区段

<time>定义日期和时间

3、新增的其他元素

<video> 定义视频

<audio> 定义音频

<embed> 插入各种多媒体

<mark> 定义需要突出显示或高亮显示的文本

<progress>显示js中耗费的函数的进程

<time>表示时间或日期

<canvas>定义图形，提供画布

<command>表示命令按钮

<details> 表示用户要求得到并可以得到的详细信息

<wbr>表示软换行

4、新增的input元素的类型

<email> 表示必须输入E-mail地址的文本输入框

<url> 表示必须输入URL地址的文本输入框

<number> 表示必须输入数值的文本输入框

<range> 表示必须输入一定范围内的数字值的文本输入框

三、Canvas 绘制图形、图画、动画

<canvas id="canvas" width="838" height="220"></canvas> 
<script> 
    var canvasContext = document.getElementById("canvas").getContext("2d"); 
    
    canvasContext.fillRect(250, 25, 150, 100); 
    canvasContext.beginPath(); canvasContext.arc(450, 110, 100,Math.PI * 1/2, Math.PI * 3/2); 
　　 canvasContext.lineWidth = 15; 
    canvasContext.lineCap = 'round'; 
    canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; 
    canvasContext.stroke(); 
</script>    

 

四、Web Storage   本地存储

（1）传统的HTML使用的是众所周知的cookie，各种浏览器都支持，直接用js就可以调用，很方便。但cookie也有它本身的缺陷与不足。比如存储空间小，每个站点大小限制在4 KB左右，又有时间期限…

（2）HTML5的新标准可以很好地解决上面的一些问题。当然，本地存储还可以解决更多我暂时没提到的问题，本地存储可以存储5M大小的数据，甚至还可以更多。 它主要有四种：localstorage , sessionstorage, webSQL , indexedDB。

（3）CSS3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems等许多Web界巨头联合组成的一个名为“CSS Working Group”的组织共同协商策划的。