html5作品经验总结,HTML5总结-认识HTML5

一、HTML 4.01 和HTML 5的页面对比

对比HTML 4.0.1(HTML 5之前的版本)和 HTML 5:

576f0683e576

HTML 4.01

576f0683e576

HTML 5

区别:

1、HTML 5 的新doctype很简洁: (注:doctype 定义要放在HTML文件最前面,即可告诉浏览器更准确地选择合适的方式解释和表现你的页面);

2、meta标记只需提供字符编码方式:utf-8 (即,最新的字符集标准);

3、link标记简洁化:去掉了type属性 (因为:CSS已成为HTML默认的标准样式);

4、script标记简洁化:去掉了type属性(因为:javascript已成为默认的标准脚本语言).

二、HTML 5功能上的特色

CSS 3:

让页面生动美观。如 让元素运行动画,给元素漂亮的圆角、阴影等;

Web工作线程:

让多个脚本在后台并发运行,保持用户界面响应性;

表单:

更好地   验证域的填写是否符合预期要求;

离线Web应用:

在未连接网络时,仍正常工作;

多媒体(音频/视频):

不再需要插件,直接用标记元素即可;

新元素:

帮助明确页面的结构,如建立分区、页眉、页脚、导航等;

本地存储:

提供庞大的本地缓存和客户端存储;用来存储首选项/购物车商品等;

画布:

可直接在Web页面上当艺术家:文本、图像、线条、圆、矩形、图案、梯度等;

地理定位:

告诉相应的位置,和各方地图API密切合作;

三、HTML 5的工作模式

1、浏览器加载一个文档,其中包括HTML写的标记和用CSS写的样式;

2、浏览器加载页面时,还会为你的文档创建一个内部模型,其中包括HTML标记的所有元素;

3、浏览器加载页面时,还会加载JavaScript代码,通常在页面加载后执行相应代码;

4、通过上述的特色API,你可以访问音频、视频、使用画布完成2D绘图,访问本地存储等(即使用JavaScript)。

API:画布、套接字、音频、视频、离线缓存、本地存储、拖放、地理定位、表单、Web工作线程。

彩蛋 -浏览器侦查

该网站测试浏览器对HTML 5的支持水平:    点击  (强烈推荐)

TIPS:本文只是个人对过去的总结,不保证简洁性、系统性、易懂性。如需交流:zhejiangdaxue2011(微信号)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值