简单谈一下HTML5

HTML5概述

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成.

谁在开发HTML5?WHATWG、W3C、IETF。

为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。

2008年1月22日 HTML 5 的第一份正式草案公布;

2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿;

2013年5月6日, HTML 5.1正式草案公布。

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。

尽管HTML5标准的一些特性非常具有革命性,但是HTML5旨在进化而非革命。

HTML5规范是基于用户优先准则编写的,遇到冲突时,用户第一位,其次页面作者,再次浏览器,然后是规范制定者,最后是理论

HTML5要的就是简单,避免不必要的复杂性。改进如下:

1,以浏览器原生能力代替负责的JavaScript代码

2,新的简化的DocTYPE

3,新的简化的字符集申明

4,简单而强大的HTML5 API

无插件范式

HTML5 API

http://caniuse.com/ 按照浏览器的版本提供了详尽的HTML5功能支持情况

http://html5test.com/ 显示用户浏览器对HTML5的支持情况。

HTML5 新标签

canvas


标签


描述


<canvas>


标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

多媒体


标签


描述


<audio>


定义音频内容


<video>


定义视频(video 或者 movie)


<source>


定义多媒体资源 <video> 和 <audio>


<embed>


定义嵌入的内容,比如插件。


<track>


为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

表单


标签


描述


<datalist>


定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。


<keygen>


规定用于表单的密钥对生成器字段。


<output>


定义不同类型的输出,比如脚本的输出。

语义和结构

HTML5提供了新的元素来创建更好的页面结构:


标签


描述


<article>


定义页面的侧边栏内容


<aside>


定义页面内容之外的内容。


<bdi>


允许您设置一段文本,使其脱离其父元素的文本方向设置。


<command>


定义命令按钮,比如单选按钮、复选框或按钮


<details>


用于描述文档或文档某个部分的细节


<dialog>


定义对话框,比如提示框


<summary>


标签包含 details 元素的标题


<figure>


规定独立的流内容(图像、图表、照片、代码等等)。


<figcaption>


定义 <figure> 元素的标题


<footer>


定义 section 或 document 的页脚。


<header>


定义了文档的头部区域


<mark>


定义带有记号的文本。


<meter>


定义度量衡。仅用于已知最大和最小值的度量。


<nav>


定义运行中的进度(进程)。


<progress>


定义任何类型的任务的进度。


<ruby>


定义 ruby 注释(中文注音或字符)。


<rt>


定义字符(中文注音或字符)的解释或发音。


<rp>


在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。


<section>


定义文档中的节(section、区段)。


<time>


定义日期或时间。


<wbr>


规定在文本中的何处适合添加换行符。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

特性

语义特性(Class:Semantic)

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性(Class: OFFLINE & STORAGE)

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

连接特性(Class: CONNECTIVITY)

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

三维、图形及特效特性(Class: 3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

性能与集成特性(Class: Performance & Integration)

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

时间: 2024-11-11 11:23:03

简单谈一下HTML5的相关文章

玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径. 这些代码是在猎豹浏览器上实现的,有些浏览器可能不支持. [html] view plaincopy <!DOCTYPE html> <me

浅谈:html5和html的区别

什么是html5呢? html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言,随后和W3C的xhtml2.0(标准)相结合,产生现在最新一代的超文本标记语言.可以简单点理解成:HTML 5 ≍ HTML+CSS 3+JS+API. hmtl5于html的区别 我们现在web前端开发的静态网页,一般都是html4.0.同时是符合W3C的xhtml1.0规范来的.那么他们两者又有什么实质性的区别呢? 1.在文档类型声明上 html:<!DOCTYPE html PUBL

【数据结构】简单谈一谈二分法和二叉排序树BST查找的比较

二分法查找: 『在有序数组的基础上通过折半方法不断缩小查找范围,直至命中或者查询失败.』 二分法的存储要求:要求顺序存储,以便于根据下标随机访问 二分法的时间效率:O(Log(n)) 二分法的空间效率:原地查询 O(1) 二分法对应的搜索树是确定的. 二叉排序树查找: 『借助二叉排序树进行搜索,但因为所建立的树本身不一定是轴对称的,所以每次比较并不能确保减小一半范围.』 二叉树的存储要求:需要树形结构,相比顺序存储需要占用更多的空间,但也有链接型数据结构灵活可拓展的有点. 二叉排序树查找的时间复

简单谈一谈JavaScript中的变量提升的问题

1,随笔由来 第一天开通博客,用于监督自己学习以及分享一点点浅见,不出意外的话,应该是一周一更或者一周两更.  此博客所写内容主要为前端工作中遇上的一些问题以及常见问题,在此基础上略微发表自己的一点浅见,如有出现错误,请看到的各位能够不吝赐教,此致谢意. 前几天在某技术群中水的正欢,忽然有群友提出了一个问题,虽然不难,卻是常人忽视的点,且出现次数较多,所以在此写一点东西,提醒一下自己. 2,JavaScript中的var 与 function 首先我们来看下面这个demo var f = fun

简单谈一谈Java内部类的使用原因

使用内部类的原因 学习总得知其所以然,前面的一篇文章中我有提到过关于java内部类的几种用法以及一些示例,但是不明白内部类具体可以做什么,显然学习起来很渺茫,今天的文章简单说一说使用内部类的几个原因,为了可读性更好,示例都极大的简化了,希望能给初学者一些帮助 (一) 封装性 作为一个类的编写者,我们很显然需要对这个类的使用访问者的访问权限做出一定的限制,我们需要将一些我们不愿意让别人看到的操作隐藏起来, 如果我们的内部类不想轻易被任何人访问,可以选择使用private修饰内部类,这样我们就无法通

Google搜索成最大入口,简单谈下个人博客的SEO

个人静态博客SEO该考虑哪些问题呢?本篇文章给你答案 咖啡君在开始写文章时首选了微信公众号作为发布平台,但公众号在PC端的体验并不好,连最基本的文章列表都没有,所以就搭建了运维咖啡吧的网站,可以通过点击文章底部"阅读原文"访问网站体验 为了方便管理及节约成本,选择了免费的Github Pages作为网站运行平台.用Django写了个管理后台来管理文章,管理后台跑在我的电脑上,它可以将markdown格式的内容生成静态页面并自动上传至Github,管理后台的介绍看这篇文章:利用Djang

关于环境变量 ORACLE_SID 简单谈下

[[email protected] ~]$ export ORACLE_SID=12323 [[email protected] ~]$ !sql sqlplus / as sysdba SQL*Plus: Release 10.2.0.1.0 - Production on Thu Nov 6 02:24:04 2014 Copyright (c) 1982, 2005, Oracle.  All rights reserved. Connected to an idle instance.

python 之类变量和实例变量(简单谈一谈)

# -*- coding: utf-8 -*- """ Created on Sun Nov 13 23:19:03 2016 @author: toby """ class Province:     def __init__(self,name,capital,leadership):         self.Name = name         self.Capital = capital         self.Leadership

DNS简单谈析

DNS查询主机名IP流程:(例:www.wxl.com) 1)先查看本身本地有没有记录,若无则向 . (root)查询 2)向最顶层 . (root)查询,查询到向第二层.com去询问www.wxl.com 3)在.com上查询,要你去wxl.com去询问www.wxl.com 4)在wxl.com上查询到了www.wxl.com.这条A记录,得到www.wxl.com的IP 5)DNS服务器缓存在本地,这样下次访问时就不用向 . (root)中查询 DNS 共有13(a-h)台根服务器,共有5