0

HTML5基础-新增标签+新增属性+布局案例

html5中常用的结构标签article 文章header 头部nav 导航section 区域aside 侧边栏hgroup 区块的相关信息figure 定义一组内容及标题figcaption 定义figure元素的标题footer 底部dialog 对话框使用习惯:header/section/footer > aside/article/figure/hgroup/nav > divembed可插入flash文件,但flash已经逐渐被淘汰,不建议使用meter状态标签,可以定义电压optimum是标准状态low与high之间呈现绿色,其余呈现黄色<meter valu...

阅读全文>>

0

HTML、HTML5重难点

一、XHTML与HTML的区别文档结构XHTML DOCTYPE 是强制性的<html>中的 XML namespace 属性是强制性的<html>、<head>、<title>以及 <body>也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素属性语法XHTML 属性必须使用小写XHTML 属性值必须用引号包围XHTML 属性最小化也是禁止的二、HTML5中一些新特性用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离...

阅读全文>>

0

实现HTML5网站中常见的拖拽上传文件

当我们学习了 HTML 提供的原生拖放(drag & drop)后,是时候想一想这个东西可以用来作什么,可以在什么时候使用,使用的场景等等场景分析当我们在注册成功一个账户时,一般网站会让我们上传我们的用户头像,或者在实名认证的时候会涉及到身份证图片上传到等,这时候我们可以使用input提供的file属性进行选择本地文件进行上传。我们再想一下,当在电脑端的情况下,当用户打开文件选择框时再寻找图片对应的文件夹,再进行选取文件的时候是不是会有点麻烦呢?我们可不可以让用户找到图片文件,直接引入实现上传呢?答案是可以的。怎么做经过这些分析后,我们可以尝试使用 HTML5 提供的拖拽,使得目标元素...

阅读全文>>

0

H5和HTML5的区别,小白们必须清楚哦

注意注意:H5不=HTML5H5 是一个产品名词HTML5是一个技术名词对于知乎多个相关问题里批判H5的叫法,我只想说:图样图森破,上台拿衣服打个比方,如果有个人跟你说:“我要做个网站,H5的”。那他是想让你用header、footer、nav、section等标签?让你用Geolocation、localStorage、WebWorker等API?都不是,他想要的功能你用HTML4就能做出来了。更别说还得兼容老IE浏览器呢~所以年轻人,你们要用心理解客户的需求,不要沉迷于技术。人家一定不是让你去用一种不被所有浏览器兼容的技术。所以,H5指的不是HTML5,而是某种在微信等移动端看上去酷炫能够...

阅读全文>>

0

WebSocket的优点

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。HTML5开始提供WebSocket协议的支持。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。WebSocket连接过程客户端通过HTTP协议向服务端发送握手,服务端向客户端返回ACK,此时握手成功,建立连接并维持该...

阅读全文>>

0

html5网页特效-canvas实现火焰跟随鼠标

效果:逼真的火焰跟随鼠标,还冒出火花,照亮背景文字使用canvas绘制使用javascript,但并无复杂逻辑。上手程度:简单笔记:google字体第一步:很简单的初始化函数。var oCanvas;init = function(){ oCanvas = new Fire(); oCanvas.run();}window.onload = init;第二步:初始化canvas,定义各种基础的东西,以及为鼠标添加事件监测。addEventListener第三个参数的意思是,若为false,则为事件处理顺序为先进先处理,为true则为先进后处理。 var Fire = function(){ t...

阅读全文>>

0

html5网页特效-水墨动画

效果鼠标触碰按钮,出现水墨风格动画屏幕自适应一份html文件,一份css文件,无javascript,上手程度:很简单笔记:root这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示元素,除了优先级更高之外,与 html 选择器相同。box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。content-box:在宽度和高度之外绘制元素的内边距和边框。border-box:在宽度和高度之内绘制元素的内边距和边框。inherit:从父元素继承颜色渐变linear-gradient背景漂亮的深蓝-浅蓝效果就是这个的作用。具体请看developer.mozil...

阅读全文>>

0

Web端文件上传从未如此简单,但却很强大——bootstrap-fileinput

介绍对于文件上传,我们并不陌生,HTML自带了上传文件表单,但是我们都知道,那些真的满足不了我们的大多数需求,诸如多选、预览、删除、拖拽等各类繁杂的功能,原生的文件上传Input确实很难满足我们的需求,因此就诞生了很多第三方的上传组件,比如大家熟知的百度WebUploader、之前我也有介绍过类似的组件,功能都非常丰富,大家可以根据自己的需求酌情选择,符合自己的需要才是最好的,当然原生的或许就够了呢!Githubhttps://github.com/kartik-v/bootstrap-fileinput此项目一共多大一千多次提交,60+发布以及,4k+star,可见还是很受广大开发者的认可的...

阅读全文>>

0

浏览器语言家族添加一新成员WebAssembly

WebAssembly初出茅庐万维网联盟(W3C)最近宣布,WebAssembly核心规范现已成为正式的Web标准。因此,在HTML,CSS和JavaScript之后,WebAssembly正式成为第四种在浏览器中本地运行的语言。WebAssemblyWebAssembly核心规范将WebAssembly描述为一种安全,可移植的低级代码语言,目的在于高效执行和紧凑表示。 WebAssembly设计的目的是为了独立于硬件,独立于语言和独立于平台。因此,WebAssembly可以针对所有现代体系结构,台式机或移动设备以及嵌入式系统。 WebAssembly程序可以嵌入在浏览器中,作为独立VM运行或...

阅读全文>>

0

是时候拯救我的 HTML 技术了

和 JavaScript、CSS 相比,HTML 经过三十多年的发展,似乎逐渐走进无人问津的角落,如何才能让 HTML 再次回到人们视野的中心。作者 | Yaser Adel Mehraban译者 | 谭开朗,责编 | 屠敏出品 | CSDN(ID:CSDNnews)以下为译文:有多少次,身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?为什么HTML一直处于无人问津的角落,因为JavaScript和CSS总是吸引人们的注意力。请在脑海里先保留这种印象,因为我要用一些简单的技巧来发挥作用,让HTML再次回到人们视野的中心。以下是创建一目了然、可维护和可扩展的代码的一些方法,其很...

阅读全文>>