html5飘,HTML5浮动

html5是什么，干什么用的?

HTML5是一种web标记语言，用于开发网页使用。HTML是web应用中一种”超文本标记语言（HTML）“的第五次重大修改，我们将这次修改后的HTML标准，称之为"HTML5"。

html5就是包括HTML、CSS和JavaScript在内的一套技术组合，强化了Web网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。所以说未来HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。但是HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

拓展资料：

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

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

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。

WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。

在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

百度百科_html5

相关问答

Q1: html5具体是什么，与htmlcssjavascript有什么区别？

HTML5是做什么的？

极其简单的概括：用于实现我们能够看到的所有网站，但是不涉及到数据层面（也就是负责将一张设计好的网页图片[设计师的工作]，用代码实现出来，在一个地方放置个块，给一个块设置颜色，调整字体大小，让图片动起来等）。

HTML5的由来

不熟悉HTML5的人，可能会很熟悉一个2005年以前常用的词语——网页设计与制作。

随着行业的发展，网站的制作越来越受到了人们的重视，社会化分工越来越明细。在2005年，“WEB前端开发工程师”这个词语开始出现在各个一线城市。2008年，HTML5横空出世，2009年HTML5这个全新的词语在北京的一些顶尖级公司出现，2012年，逐渐的普及开来，2014年迅速发展。

HTML5的基本组成

HTML5 = HTML + CSS + JavaScript

HTML指的是结构

CSS指样式

JS即JavaScript，指的是行为

关于结构、样式、行为的理解：

结构 - 在整个网页中有标题，有列表，有图片等。

样式 - 标题文字的字体大小、颜色、字体；图片的大小；某个块的背景色或背景图等。

行为 - 在网页上四处飘动的广告；图片滚动；浏览淘宝时鼠标移动到商品时，放大商品的效果等。

无技术基础，看懂HTML5

Q2: HTML5应用前景怎么样？

HTML5及其技术生态链（CSS3/SVG/Web Socket/Web Worker/WebGL）是新一代网页编程技术，是技术风口，所以人才需求增长会比较快。“5”代表的是Next Generation。风口意味着你可以少用力就得到较多，但也容易浮躁飘起来。

2.成为高手大概需要多久

“高手”怎么定义，如果能独立开发一个带特定动效的静态网站，可能半年就可以，能独立开发游戏，那得精通JS和其他方面的辅助知识，能独立开发3D效果，又需要GLSL以及物理数学相关知识，你还需要学习面向对象编程这些基本的技术，那精通这些可能5年，可能10年，这是一个持续的学习，但这个方向是好的，不会学而无用。

3.成为高手的一个细致过程，这段时间需要做些什么

建议学习路线：

了解基本的网络知识（如HTTP/TCP/IP协议堆栈）-HTML基本标签使用-CSS-HTML5（新语法和新标签）-CSS3（这个学习过程比较长，有很多内容，原先PS中的效果很多都可以借助CSS3各种阴影(shadow)、滤镜(filter)、渐变(gradient)、变换（transform）来实现，以及动画@keyframes和响应式设计media query）-JS-SVG-WebGL（这一块很难，大部分前端工程师不会接触到，可以了解下）-Web Animation、Web Socket等其他知识，然后了解必要的后台开发知识，知道Web整体处理流程。

4.目前相比安卓ios，html5缺陷在哪里

本质上我们讨论的是web app（也就是h5 app）和本地app的区别，web的特点是跨平台，开发/发布/维护成本低，用户免频繁下载升级骚扰（虽然可能要清除缓存）。缺点是其协议所确定的，短连接导致流量成本高，用户操作交互性能低，通过web socket建立长连接可以改进。但这些问题和90年代的桌面系统一样，随着网络的快速发展，会逐步消除。另外出于安全或标准化的考虑，HTML5在硬件接口上的支持不可能和本地APP一样，因此在需要特定硬件设备支持（优化）的应用上，你需要开发本地APP。但大多数通用型应用都可以逐步使用HTML5来替代。

最后补充一点，我们谈app时，区分为本地应用（native app，使用java/objectivc/swift/c来开发）、Web应用（web app，就是基于http协议的网页应用）以及hybrid app（混搭应用，使用web的技术来开发，借助工具生成本地应用，或者本地应用内置webview控件），个人不喜欢hybrid app，这只是一种过渡技术或者囿于公司资源所限所采取的折衷开发方案。我建议学习纯粹的web技术。但需要了解本地app，技术之间本来就是互相取长补短的，h5的发展本身也是兼容吸收了本地应用的长处。

Q3: html5是什么？

HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。

广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务。

扩展资料：

HTML5添加了许多新的语法特征，其中包括video、audio和canvas元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。

其它新的元素如section、article、header和nav则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的，同时也有一些属性和元素被移除掉了。

一些元素，像a、cite和menu被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

参考资料来源：百度百科——html5

Q4: html5怎样在页面中加入雪花效果

在后台添加js特效可实现这样的效果。

js代码为：

script language="JavaScript"

!--

var no = 5; //雪片数目

var speed = 20; //飘动速度。(值越大越慢)

var ns4up = (document.layers) ? 1 : 0; //当前浏览器类型，如果是NS则为1

var ie4up = (document.all) ? 1 : 0; //当前浏览器类型，如果是IE则为1

var s, x, y, sn, cs;

var a, r, cx, cy;

var i, doc_width = 800, doc_height = 600;

x = new Array();

y = new Array();

r = new Array();

cx = new Array();

cy = new Array();

s = 8; //每次下落的高度，越小越平滑，但是也越慢

if (ns4up) { //以NS兼容方式

doc_width = self.innerWidth; //取页面宽度

doc_height = self.innerHeight; //取页面高度

}

else

if (ie4up) { //以IE兼容方式

doc_width = document.body.clientWidth; //取页面宽度

doc_height = document.body.clientHeight; //取页面高度

}

for (i = 0; i no; ++ i) { //根据前面定义的雪片数目写进相应数目的层

initSnow(); //随机初始化层的坐标

if (ns4up) { //如果浏览器是NS

//用layer作为雪片(星号)的容器

document.write("layer name=\"dot"+ i +"\" left=\"1\" ");

document.write("top=\"1\" visibility=\"show\"font color=\"red\"");

document.write("*/font/layer");

}

else

if (ie4up) { //如果浏览器是IE

//用div作为雪片的容器

document.write("div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"font color=\"red\"");

document.write("*/font/div");

}

}

//初始化雪片，生成随机坐标

function initSnow() {

a = 6;

r[i] = 1;

sn = Math.sin(a);

cs = Math.cos(a);

cx[i] = Math.random() * doc_width + 1;

cy[i] = Math.random() * doc_height + 1;

x[i] = r[i] * sn + cx[i];

y[i] = cy[i];

}

//计算雪花位置，从新位置上出现，看起来就像是新产生的一样。

function makeSnow() {

r[i] = 1;

cx[i] = Math.random() * doc_width + 1;

cy[i] = 1;

x[i] = r[i] * sn + cx[i];

y[i] = r[i] * cs + cy[i];

}

//雪花下落的计算

function updateSnow() {

r[i] += s;

x[i] = r[i] * sn + cx[i];

y[i] = r[i] * cs + cy[i];

}

//在NS浏览器上处理雪片下落的主程序

function SnowdropNS() {

for (i = 0; i no; ++ i) { //依次处理每片雪花

updateSnow(); //下落

if ((x[i] = 1) || (x[i] = (doc_width - 20)) || (y[i] = (doc_height - 20))) { //如果超出屏幕范围

makeSnow(); //则调整雪片到新位置上

doc_width = self.innerWidth; //更新页面宽度数据

doc_height = self.innerHeight; //更新页面高度数据

}

document.layers["dot"+i].top = y[i]; //改变层的Y坐标，应用新的位置

document.layers["dot"+i].left = x[i]; //改变层的X坐标，应用新的位置

}

setTimeout("SnowdropNS()", speed);

}

//在IE浏览器上处理雪片下落的主程序

function SnowdropIE() {

for (i = 0; i no; ++ i) { //依次处理每片雪花

updateSnow(); //下落

if ((x[i] = 1) || (x[i] = (doc_width - 20)) || (y[i] = (doc_height - 20))) { //如果超出屏幕范围

makeSnow(); //则调整雪片到新位置上

doc_width = document.body.clientWidth; //更新页面宽度数据

doc_height = document.body.clientHeight; //更新页面高度数据

}

document.all["dot"+i].style.pixelTop = y[i]; //改变层的坐标，应用新的位置

document.all["dot"+i].style.pixelLeft = x[i];

}

setTimeout("SnowdropIE()", speed); //准备下一次下落过程。

}

if (ns4up) { //如果是NS

SnowdropNS(); //调用SnowdropNS使雪片下落

}

else

if (ie4up) { //如果是NS

SnowdropIE(); //调用SnowdropIE使雪片下落

}

--

/script

说明：可以根据自己的需求根据说明进行相应参数的修改