• HTML5入门指南


    1、HTML5到底是什么?

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟W3C)完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS3JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA)

    2、HTML5好处-为什么要用HTML5

     

    THML5在布局上更得体,记得以前的主流table过渡到主流div;今的布局对搜索引擎更加友好,比如<article>内总是会包含文章内容,而nav是导航信息;HTML5的移动手机支持也日趋完善,兼容移动端可是一个简单概念。虽然多网合一,兼容问题永远存在,布局适配也是一门技术活;另外在Pad等其他客户端也发挥着越来越重要的优势。

     

    3、HTML5的技术组成:

     

    离线功能

     

    HTML5透过JavaScript提供了数种不同的离线储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。

    WebStorage – 比Cookies更大、更有弹性的的储存

    Web SQL Database – 本地端的SQL资料库

    Indexed DB – Key-value的本地资料库

    Application Cache – 将部分常用的网页内容cache起来

     

    即时通讯

     

    以往网站由于HTTP协定以及浏览器的设计,即时的互动性相当的受限,只能使用一些技巧来「模拟」即时的通讯效果,但HTML5提供了完善的即时通讯支援。

     

    什么轮询、第三方的统统不要,自已来实现。

    WebSocket – 即时的socket连线

    Web Workers – 以往JavaScript都是single thread,透过Worker可以有多个运算

    Notifications – 塬生的提示讯息,类似像OS X的Growl提示

     

    文件以及硬件支持

     

    不知道大家有没有发现,在Gmail等新的网页程式当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Drag’n Drop和File API。

     

    Drag’n Drop – HTML元素的拖拉

    File API – 读取使用者本机电脑的内容

    Geolocation – 地理定位

    Device orientation – 手持装置的方向

    Speech input – 语音输入

     

    语意化

     

    语意化的网路是可以让电脑能够更加理解网页的内容,对于像是搜寻引擎的优化(SEO)或是推荐系统可以有很大的帮助。

     

    New tags – 新的标籤,像是<header>、<section>等

    Application tags – 也是新的标籤,像是<meter>、<progress>等

    Microdata – 加入语意的资料让搜寻引擎等网站可以正确显示

    Form type – <form>可以加入的type便多了,包含email和tel等属性,浏览器会协助进行资料格式的验证

     

    多媒体

     

    Audio、Video的标签支援以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。

     

    Audio video – 影片和音乐的塬生播放支援

    Canvas – 2D的绘图功能支援

    Canvas 3D – 3D的绘图功能支援

    SVG – 向量图支援

     

    CSS 3

     

    CSS3支援了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。

     

    Selector – 更有弹性的选择器

    Webfonts – 嵌入式字体

    Layout – 多样化的排版选择

    Stlying radius gradient shadow – 圆角、渐层、阴影

    Border background – 边框的背景支援

    Transition – 元件的移动效果

    Transform – 元件的变形效果

    Animation – 将移动和变形加入动画支援

     

    JavaScript

     

    在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

    DOM API – 更方便的查询DOM元件

    History API – 浏览器的上下页内容修改,方便AJAX可以保留浏览记录

     

    4、现在就用HTML5

     

    截至目前而言,主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支援了许多的HTML5标準,而且目前最新版的IE 9也支援了许多HTML5标準,随着使用者陆续升级到新版的浏览器,开发者应该在现在就可以着手开发!兼容性问题会随着时间的推移而越来越少。但对于不得不照顾底版本用户的网站,网上也有大量的回退解决方案最大的原因今天你就开始使用HTML5是因为它是未来,不要掉队了!HTML5不会往每个方向发展,但是更多的元素已经被很多公司采用,并且开始着手开发。

     

  • 相关阅读:
    MVVM架构~knockoutjs实现简单的购物车
    Thrift架构~目录
    WebApi系列~在WebApi中实现Cors访问
    WebApi系列~基于RESTful标准的Web Api
    MVVM架构~目录
    IOS设计模式学习(20)命令
    MySQL保留关键字
    Eclipse with C++: "Launch failed. Binary not found."
    HTML5 Canvas鼠标与键盘事件
    通过openssh远程登录时的延迟问题解决
  • 原文地址:https://www.cnblogs.com/wangdan0915/p/7877835.html
Copyright © 2020-2023  润新知