初始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”的组织共同协商策划的。
初始html5的更多相关文章
- 初始html5,遇到的第一个问题
1.首先感到html5是html的延续,只是增加了新的标签属性,这是我的第一感觉 2.我写了几行画矩形的canvas入门代码,遇到了不显示问题 3.下面是我写完代码后的问题 刷新后还是这样 4.我的代 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 测试开发之前端——No1.HTML和HTML5
学习之前,让我们先来了解一下HTML. 它的英文全称是:Hyper Text Markup Language,中文通常被称为超文本标记语言,HTML是Internet中用于编写网页的主要语言,HTML ...
- HTML5 初始文档声明
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML5 Canvas:初始Canvas
Canvas ,HTML 5中引入它,可以做很多事情:画图.动画.游戏开发等等. Canvas 元素 Canvas 中文翻译为:画布. <canvas id=”yourCanvasId” wid ...
- HTML5统计图表数据初始动画
在线演示 本地下载
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频
目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
随机推荐
- javaIO——概述
以前看java书,都将IO作为一个大的章节甚至模块来编写,可见IO在java语言中的重要性. java的流按功能和处理的目标数据不同可以分为字节流和字符流.字符流处理的基本数据单元是字符:字节流处理的 ...
- C#/.net 通过js调用系统相机进行拍照,图片无损压缩后进行二维码识别
这两天撸了一个需求,通过 JS 调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...
- JS 编程艺术
JS艺术片段剪贴 getFullDate: function (date) { //返回 YYYY年MM月DD日 var year = month = day = ' '; if (isNaN(dat ...
- 14.JdbcUtils框架
1.编写自己的JdbcUtils 框架 2.使用 dbUtils 框架 1.视频中自己编写的JdbcUtils框架差不多就是dbUtils框架 2.使用 使用dbutils框架完成curd,以及批处理 ...
- Jmeter服务器压力测试使用说明
Jmeter服务器压力测试使用说明 Apache JMeter是Apache组织开发的基于Java的压力测试工具. 官方地址:http://jmeter.apache.org/download_jme ...
- excel隔行取数据
.6…行数据取出来 好用的公式推荐出来 1.3.5…和2.4.6…行数据取出来 在空白单元格输入=OFFSET(A2,ROW(A2)-2,0) 或=OFFSET(A1,ROW(A1),0) #1,3, ...
- shell脚本基础编写
shell脚本的格式 名称:Shell 脚本文件的名称可以任意,但为了避免被误以为是普通文件,建议将 .sh 后缀加上,以表示是一个脚本文件. shell 脚本中一般会出现三种不同的元素: 第一行的脚 ...
- Java入门第二季——第4章 多态
第4章 多态 多态性是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作 4-1 Java 中的多态 注意:不能通过父类的引 ...
- .net System.Net.Mail 之用SmtpClient发送邮件Demo
private static bool sendMail() { try { //接收人邮箱 string SendTo = "XXXXX@163.com ...
- JDK、JRE、JVM的区别与关系
JDK JDK是Java开发工具包,是Sun Microsystems针对Java开发员的产品. JDK中包含JRE,在JDK的安装目录下有一个名为jre的目录,里面有两个文件夹bin和lib,在这里 ...