HTML5的入门与深入理解
HTML5是对HTML的第5次重大的修改,虽然HTML5 标准还在制定中,但不能阻碍其势不可挡的脚步,不用HTML5你就OUT了。HTML5与我们常用的HTML4有什么区别呢?
首先要说的是不是所有的浏览器都支持HTML5,Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
下面是在把我个人将网页换成html5标准时所做的改变:
1、换一个W3C标准声明<!doctype html>,少了不少代码,页面干净,爽
2、对于HTML5的标签,IE9之前的版本无法提供支持,为了兼容老版本的浏览器,必须做些额外的工作,十分不爽,要在<head>里引入一个html5.js帮助旧版本的IE浏览器创建HTML5元素节点,麻烦。
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
为了正确显示,CSS中增加如下设置:
3、 使用一些更语义化的标签, 如<header><footer><section><article><menu><figure> 用法:<div class="header"></div>,改为<header></header>,少定义不少 class,HTML干净,有利于SEO,爽。
4、删除了我常用的<b> 和 <font>,好吧,删就删,无感。删除 <frame>, <center>, <big> 标签,多年没用过了,无感。
难道只是这些标签的小改动,就能让HTML5的概念风卷残云吗?我想肯定不是,那么,HTML5的精髓在哪呢?
这个问题我回答不了,查一下资料总结一下:
一、代码更清晰,语义更明确,这几乎是很多人使用它的全部
二、HTML5是最移动化的开发工具。现在越来越多的用户选择使用移动设备访问网站或者web应用。
三、游戏开发
可以使用HTML5的<canvas>开发游戏。HTML5提供了一个非常伟大的,移动友好的方式去开发有趣互动的游戏。如果你开发Flash游戏,你就会喜欢上HTML5的游戏开发。canvas只是一个画布,HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
四、本地存储
HTML5中最酷的特性就是本地存储。有一点像比较老的技术cookie和客户端数据库的融合。它比cooke更好用因为支持多个windows存储,它拥有更好的安全和性能,即使浏览器关闭后也可以保存。
因为它是个客户端的数据库,你不用担心用户删除任何cookie,并且所有主流浏览器都支持。
本地存储对于很多情况来说都不错, HTML5工具中一个不需要第三方插件实现的。能够保存数据到用户的浏览器中意味你可以简单的创建一些应用特性例如:保存用户信息,缓存数据,加载用户上一次的应用状态。
五、视频和音频支持
视频和音频通过HTML5标签<video>和<audio>来访问资源,不再需要Flash和第三方插件。正确播放媒体一直都是一个非常可怕的 事情,你需要使用<embed>和<object>标签,并且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会非常复 杂,大堆得令人迷惑的代码。而且HTML5视频和音频标签基本将他们视为图片:<video src=”"/>。但是其它参数例如宽度和高度或者自动播放呢?不必担心,只需要像其它HTML标签一样定义:<video src=”url” width=”640px” height=”380px” autoplay/>。
实际上这个过程非常简单,然而我们的老浏览器可能并不喜欢我们的HTML5,你需要添加更多代码来让他们正确工作。但是这个代码还是比<embed>和<object>来的简单的多。
HTML5的入门与深入理解的更多相关文章
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- html5 基础入门
html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
随机推荐
- ASP.NET MVC5----基本用法
由于之前在项目中也使用MVC进行开发,但是具体是那个版本就不是很清楚了,但是我觉得大体的思想是相同的,只是版本高的在版本低的基础上增加了一些更加方便操作的东西.下面是我学习ASP.NET MVC5高级 ...
- 图片使用base64展示代码,后台为jfinal
前台使用ajax获取数据,下面步骤为把图片对应的id获取到,然后判断是否为空,不为空则发送请求获取数据,数据为base64数据格式: img需要注明数据类型格式:即data:image/jpg:bas ...
- C语言-Hello, world
你好, 世界 --1-- 语言的编写准备 1.1 C语言源文件的编译执行过程 1.2 常见文件的拓展名 1.3 常用的命令行指令 1.4 环境及运行方法 --2--编写代码 2.1练习 --3-- ...
- spring mvc(注解)上传文件的简单例子
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
- 2D空间中判断一点是否在三角形内
要注意如果是XY坐标轴的2D空间,要取差乘分量z而不是y. 实现原理是,将三角形ABC三个边(AB,BC,CA)分别与比较点判断差乘,如果这3个差乘结果表示的方向一致,说明就在三角形内. 效果: 代码 ...
- [DL学习笔记]从人工神经网络到卷积神经网络_1_神经网络和BP算法
前言:这只是我的一个学习笔记,里边肯定有不少错误,还希望有大神能帮帮找找,由于是从小白的视角来看问题的,所以对于初学者或多或少会有点帮助吧. 1:人工全连接神经网络和BP算法 <1>:人工 ...
- Windows普通窗口程序
2015-10-09 12:55:38 KWindow.h #pragma once #include <windows.h> class KWindow { virtual void O ...
- 2017年1月4日 16:16:24开始学习Linux——好像回到上次发随笔的时间。
auto为C语言局部变量的默认属性 static指明变量的静态属性,也具有作用域限定符的意义 static修饰的全局变量作用域只是生命的文件中,修饰的函数作用域只是声明的文件中 register指明将 ...
- Using FreeMarker templates (FTL)- Tutorial
Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...
- ionic入门之色彩、图标、边距和界面组件:列表
目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...