`

HTML5的新功能

 
阅读更多

3.1.1 输入框自动获取焦点实现
在网页加载完成是,光标自动聚焦在用户需要输入的地方,比如邮箱登陆页面的输入用户名,之前我们需要在网页 onload 的时候来用 javascript 代码指定某个输入框获取焦点的做法,现在html 5直接支持在输入框中加入autofocus属性。

<input type="text" id="username" name="username" autofocus />

3.1.2 文本框的输入提示实现
之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息,而在HTML5中我们只需写下如下代码即可实现

<input    type="email" id="uemail"    name="uemail"

placeholder="example@domain.com"required />

实现效果如图3-1所示。


图3-1 输入提示示例

在类型后面增加一个placeholder属性,属性的值就是提示框里的值。

3.1.3 表单验证功能
1)判断必填项:

有些表单项是表单内必填项,和以往相比现在只需要在表单项中增加一个属性,required即可。

示例代码如下:

<input type="text" id="username" name="username" required autofocus />如果此项为空,则会有相应提示,效果如图3-2所示。


图3-2 必填项提示图

如果此项为空,则会有相应提示,

2)判断数据格式

在HTML5中,对数据格式的校验,也是属于内建类型,相应的表单项类型会有相应的内建验证规则,不需要我们额外编写JavaScript代码来实现。

代码如下

<input   type="email" id="uemail"    name="uemail"     placeholder="example@domain.com" required />

代码Input type="email" 浏览器会自调用内建的Email验证代码,验证当前的输入项是法合法,效果如图3-3所示。


图3-3 Email格式判断示例

3.1.4 滑动块输入的实现
在输入数字类型等可变值时,我们也可以通过拖动滑动块的形式来选择合适的值,特别是在选择颜色值时,拖动滑动块改变颜色的RGB值,更为直观可行。

Range滑动块代码实现如下:

<input type="range" min="1" max="100" step="10" name="s" />

效果如图3-4所示。


图3-4 滑动块示例

可以直接拖动,可以设置最小值、最大值、以及每拖动一格的步长。Min及max属性设置滑动块的最小值与最大值,Step设置滑动块拖动的步长

3.1.5 数字输入框实现

除了3.1.4的滑动块可以输入数值外,HTML5还有另一种数据输入类型Number,使用此属性可以能过点击输入框后面的增加或减少小按钮来调整要输入的数值。实现代码如下:

<input type=”number”/>

效果如图3-5所示。


图3-5 数字输入示例

用如此少的代码,就能实现如此有趣的功能,HTML5到来如何能不让大家心动。

3.1.6 输入框下拉提示实现
请看HTML5对表单下拉输入框的截图展示,由此我们输入表单的时候,可以很方便的从预设值中选择要输入的信息。

下拉提示的核心代码如下:

       <input id="search" type="url" list="searchlist" required />

       <datalist id="searchlist">

           <option value="http://www.google.com" label="Google" />

           <option value="http://www.yahoo.com" label="Yahoo" />

           <option value="http://www.bing.com" label="Bing" />

           <option value="http://www.baidu.com" label="Baidu" />

       </datalist>

效果如图3-6所示。


图3-6 下拉提示示例

可以用作现在很流行的ajax输入提示,也可以当作是一个可编辑的下拉菜单。即可自行输入,也可以直接下拉选择。但是使用用脚本代码也太过于烦索,HTML5可以很好解决这个问题。

3.1.7 日期选择框实现
它可以让我们很方便的使用日期选择框,不需要我们再用很复杂的JavaScript代码来实现了。

该选择框的核心代码如下:

<input type="date" name="birthday" />

Date 表单项可以让我们直接选择日期,方便我们输入日期选择框效果如图3-7所示。


图3-7 日期选择框示例

3.1.8 文件上传功能块实现
使用此功能我们可以很轻松的上传文件

代码如下:

<input type="file" accept = "image/png" />

效果如图3-8所示


图3-8 文件上传示例

Accept是文件接受的类型,可以用‘*’指代所以有文件

3.2 对视频和音频的支持
视频和音频是我们在互联网上使用最频烦最多的,然而网站开发人员却要因为插件不同编写大量重复性代码,对用户来说也要装多种插件,如今HTML5内建支持视频音频。

3.2.1 Video属性列表
W3C公布的HTML5标准草案中<Video>中的属性和描述如表3-1所示。

表3-1 video属性表

属性

描述

autoplay
true | false
如果是 true,则视频在就绪后马上播放。

controls
true | false
如果是 true,则向用户显示控件,比如播放按钮。

height
pixels
设置视频播放器的高度。

loopend
numeric value
定义在视频流中循环播放停止的位置,

loopstart
numeric value
定义在视频流中循环播放的开始位置。

playcount
numeric value
定义视频片段播放多少次。默认是 1。

poster
url
在视频播放之前所显示的图片的 URL。

src
url
要播放的视频的 URL。

start
numeric value
定义播放器在音频流中开始播放的位置。

width
pixels
设置视频播放器的宽度

由上表可以看出,通过浏览器本身对视频的支持,能够完成常用的视频操作

3.2.2 video标签实现
以下是视频在完全支持<Video>浏览器中的通用代码,通过如此简短的代码,我们便能在自己的网站上,嵌入我们的视频,丰富我们的页面。

核心代码如下:

<video   width="560" height="330" controls="controls"      autobuffer="autobuffer">

<!--autobuffer 自动缓冲-->

    <source src="E:/Video/BigBuckBunny.ogv" type="video/ogg" />

    <source src="E:/Video/BigBuckBunny.mp4" type="video/mp4" />

您的浏览器不支持<Video>标签!请您使用最新Firefox,Opera,Safari,Chrome浏览器观看!

<!--这段文字在您的浏览器不支持时显示-->

</video>

在chrome浏览器里的视频播放效果如图3-9所示。


图3-9 视频播放示例

视频标签的控件很简单,只有播放/暂停按钮,进度栏可以拖动先择播放,还有音量控制器。互动功能有些简单,可以通过添加额外的代码获取更多的互动控制,但是满足基本的视频播放不成问题。

关于各浏览器对视频格式的支持情况请看第一章2.2.2小节各浏览器对HTML5音频视频格式的支持速查表

测试显示:Firefox3.6与IE8支持不好,Chrome与Opera能很正常显示,但是支持不同的格式。

3.3.3 Audio的属性
W3C公布的HTML5标准草案中<Audio>中的属性和描述如表3-2所示。

表3-2 Audio属性表

属性

描述

autoplay
true | false
如果是 true,则音频在就绪后马上播放。

controls
true | false
如果是 true,则向用户显示控件,比如播放按钮。

end
numeric value
定义播放器在音频流中的何处停止播放。

loopend
numeric value
定义在音频流中循环播放停止的位置

loopstart
numeric value
定义在音频流中循环播放的开始位置。

src
url
所播放音频的 url。

start
numeric value
定义播放器在音频流中开始播放的位置。

3.3.2 Audio标签实现
以下是视频在完全支持<audio>浏览器中的通用代码

<audio src="王菲-传奇.ogg" controls="controls"      autoplay">

您的浏览器不支持<audio>标签!请您使用最新Firefox,Opera,Safari,Chrome浏览器观看!

<!--上段文字在您的浏览器不支持时显示-->

</audio>

对音频的支持,各浏览器较统一,除了IE外都支持MP3程式,在音频方面对<audio>的应用不会有格式的障碍。播放效果如图3-10所示。


图3-10 音频播放示例

关于各浏览器对音频格式的支持情况请看第一章2.2.2小节各浏览器对HTML5音频视频格式的支持速查表

测试显示:Firefox3.6与IE6支持不好,Chrome与Opera能很正常显示。

测试结果:IE浏览器不支持,Firefox3.6也不支持,只有Chrome 和 Safari浏览器支持.

 

 

 

 

第4章 canvas绘图功能实现
HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素。Canvas 元素也是最值得研究的地方,因此单独列出来一章研究。每一个 canvas 元素都有一个"上下文( context ) (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。

大部分的浏览器都支持 2D canvas 上下文,它包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Chrome,Opera,Safari 还支持 3D canvas ,Firefox 也可以通过插件形式支持 3D canvas .下面就分别介绍基于HTML5的2D与3D绘图功能的强大

4.1 Canvas元素的 2D context API
本节主要实现如何使用基本 canvas 函数,如绘制线条、形状、处理图像和文字等

4.1.1 基本图形绘制
首先创建 canvas 的方法,在 HTML 页面中添加 <canvas> 元素,设置Canvas的width和height属性。示例代码如下。

<canvas id="myCanvas" width="300" height="150">

Fallback content, in case the browser does not support Canvas.

</canvas>

为了能在 JavaScript 中引用元素,最好在创建<canvas>标签时给元素设置 ID ,设定高度和宽度等属性。

创建好了画布后,要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas元素,然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形

// 找到canvas元素.

var elem = document.getElementById('myCanvas');

// i在其它浏览器里

if (elem && elem.getContext) {

//获取canvas2D上下文.

var context = elem.getContext('2d');

if (context) {

    // 你需要确定该图形的起始坐标点(x,y),高度,宽度

    context.fillRect(0, 0, 150, 100);

}

}

可以把上面代码放置在文档 head 部分中,或者放在外部文件中。

核心代码如下:

    <script type="text/javascript"><!--

window.addEventListener('load', function () {

// 找到canvas元素.

var elem = document.getElementById('myCanvas');

if (!elem || !elem.getContext) {

    return;

}

//获取canvas2D上下文.

var context = elem.getContext('2d');

if (!context) {

    return;

}

context.fillStyle = '#00f';

context.fillRect(0, 0, 150, 100);

}, false);

    // --></script>

将该代码放入支持HTML5的浏览器中会显示一个蓝色的矩行该代码显示效果如4-1图所示。


图4-1 基本图形绘制效果

4.1.2 图形美化
通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla()( 若浏览器支持,如 Opera10 和 Firefox 3)。

通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同:x, y, width, height。前两个参数设定 (x,y) 坐标,后两个参数设置矩形的高度和宽度。

可以使用 lineWidth 属性改变线条粗细。让我们看看使用了fillRect,
strokeRect clearRect 和其他的例子:

context.fillStyle   = '#00f'; // 蓝色

context.strokeStyle = '#f00'; // 红色

context.lineWidth   = 4;          //改变线条粗细

context.fillRect (0, 0, 150, 50);

context.strokeRect(0, 60, 150, 50);

context.clearRect (30, 25, 90, 60);

此例子效果图见图4-2.


图4-2 图形效果图

4.1.3 路径绘图

通过 canvas 路径(path)可以绘制任意形状。可以先绘制轮廓,然后绘制边框和填充。

要创建自定义形状,首先要使用 beginPath()才能开始绘制,然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。

下面代码为绘制曲线方法的关键代码:

<script type="text/javascript">

<!--window.addEventListener('load', function () {

// 获取canvas无素.

Var elem=document.getElementById('myCanvas');

                                          if (!elem || !elem.getContext) {

                                          return;

                            }

// 获取canvas 2D内容

var context = elem.getContext('2d');

        if (!context) {

             return;

            }

context.fillStyle = '#00f';                          //填充样式为蓝色

context.strokeStyle = '#f00';            //填充线条为红色

context.lineWidth = 4;                             //填充线条宽度为4

// 画一条线和绘制贝塞尔曲线路径

context.beginPath();

context.moveTo(10, 10);

context.lineTo(100, 100);

context.moveTo(150, 100);

//前四个参数是两个控制点坐标,后两个参数是曲线终点坐标。

context.bezierCurveTo(180, 30, 250, 180, 300, 100);

//所绘的线必须经过Stroke()方法执行后才能显示出来

context.stroke();

//该动作必须要结束,否则下个绘图动作会以此图结束点为起点

context.closePath();

// 画一个圆角用arc函数.

context.beginPath();

// 定义: 圆点的X,y坐标,半径,以及角度,是否顺逆时针等

context.arc(125, 115, 30, 0, 360, false);

context.stroke();

context.closePath();

}, false);

// --></script>

将上述代码放到支持HTML5 <canvas>元素的浏览器中,显示效果如图4-3所示。


图4-3 路径绘图示例

4.1.4 Canvas图像处理
2D context API中ImageData 可以完成很多功能。下面特效实现了简单的颜色反转滤镜:

// 获取canvas像素数组

var imgd = context.getImageData(x, y, width, height);

var pix = imgd.data;

// 循环反转各个像素.

for (var i = 0, n = pix.length; i < n; i += 4) {

pix[i ] = 255 - pix[i ]; // 红色           

/*因为图像读取模式使用的是RGB模式第个颜色的介素值区间为0~255,故 用255减去当前像素值就可完成反转*/

pix[i+1] = 255 - pix[i+1]; // 绿色

pix[i+2] = 255 - pix[i+2]; // 蓝色

// i+3 是透明度的值

}

//画出反转后的图像

context.putImageData(imgd, x, y);

使用此滤镜前后的图像效果如图4-4所示。


图4-4 颜色反转滤镜

4.1.5 对文字的处理
对于文字API只有最有最新的 Chrome版本和 Firefox 才开始支持 Text API ,context 对象可以设置以下 text 属性:

font:文字字体,同 CSS font-family属性

textAlign:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.

textBaseline:文字竖直对齐方式。可取属性值:top, hanging, middle,
alphabetic, ideographic, bottom。默认值:alphabetic.

有两个方法可以绘制文字: fillText 和 strokeText。第一个绘制带 fillStyle 填充的文字,后者绘制只有 strokeStyle 边框的文字。两者的参数相同:要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话,浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的
(x,y) 坐标的相对位置。

下面是一个在 canvas 中绘制"HeNan university" 文字的例子

context.fillStyle    = '#00f';

context.font         = 'italic 30px sans-serif';

context.textBaseline = 'top';

context.fillText ('HeNan University!', 0, 0);//参数0,0是文字绘制的起始坐标

context.font         = 'bold 30px sans-serif';

context.strokeText('XuHui', 0, 50);

其效果图如图4-5所示。


图4-5 文字处理效果

4.2 Canvas元素的3D context API
HTML5标准将内建3D技术的支持,其中WebGL就是一项用于加速网页3D图形界面应用的通用技术标准。近日,Khronos联盟组织发布了WebGL标准的草案版本。标准的草案版本中使用了HTML5的有关技术来绘制OpenGL ES 2.0图像,这样便无需使用插件便可以达到将网页3D化的目的

4.2.1 3D canvas实现示例
尽管大多最近浏览器都支持HTML5标准(IE除外),但是还不是很完全,需要安装插件,或者官方发布的特殊支持浏览器。当然这只限于在探索研究使用,并不适合大部分用户,下面就以一个3D立方体来演示HTML5的3D绘图功能。

提示:运行该程序请使用Opera9.62支持3D绘图浏览器,其它浏览器不能正确显示。核心代码如下

      <canvas id="canvas"          width="200"   height="200" style="background:#aaf;">

             Canvas not supported!

      </canvas>

      <script>

             var canvas;

             var context3d;

             var rotation;

             var texture;

             var cube;

//渲染立方体

             function render(){

                    context3d.beginScene();

                    context3d.translate(0,0,-5);

                    context3d.rotateY(rotation);

                    context3d.rotateX(rotation);

                    rotation += 2;

                    context3d.color = "white";

                    context3d.draw3DModel(cube);

                    context3d.endScene();

             }

             function onTick(){

                    render();

             }

             function onload(){

                    canvas = document.getElementById("canvas");

                    context3d = canvas.getContext("opera-3d");

//如果浏览器不支持3D,则会显示如下提示

                    if (!context3d)

                    {

                           alert("3d canvas not supported");

                           return;

                    }

                    logo = new Image();

                    logo.src = "operalogo.png";

                    texture = context3d.createTexture(logo);

                    context3d.texture = texture;

//绘图开始

                    cube = context3d.create3DModel();

                    cube.addVertex(-1, 1, 1, 0, 0);         //绘制8个顶点

                    cube.addVertex(1, 1, 1, 1, 0);

                    cube.addVertex(-1, -1, 1, 0, 1);

                    cube.addVertex(1, -1, 1, 1, 1);

                    cube.addVertex(-1, 1, -1, 1, 1);

                    cube.addVertex(1, 1, -1, 0, 1);

                    cube.addVertex(-1, -1, -1, 1, 0);

                    cube.addVertex(1, -1, -1, 0, 0);

                    cube.addTriangle(0,1,2);                 //绘制三角形

                    cube.addTriangle(2,1,3);

                    cube.addTriangle(4,5,6);

                    cube.addTriangle(6,5,7);

                    cube.addTriangle(0,4,2);

                    cube.addTriangle(2,4,6);

                    cube.addTriangle(1,5,3);

                    cube.addTriangle(3,5,7);

                    cube.addTriangle(0,4,1);

                    cube.addTriangle(1,4,5);

                    cube.addTriangle(2,6,3);

                    cube.addTriangle(3,6,7);

                    rotation = 0;

                    setInterval(onTick, 10);             //设置旋转时间间隔

             }

             document.onload = onload();

      </script>

程序运行截图如图4-6所示。


图4-6 旋转的方块

4.4 本章小节
通过本章对<canvas>功能主要是2D的绘图功能,图片处理,文字处理,和3D的动画技术的研究,能够更深入一步了解浏览器绘图的原理,在最后综合前面所示,参考部分技术人员的示例,做了一个简短的HTML5示例。当然<canvas>的功能选不止这些,如需要进一步了解,请查阅相关资料。

 

 

 

 

 

 

 

结束语
HTML 5 是未来的 Web 的一部分。它的新元素会产生更干净更简单的代码,让页面更容易理解。Div 和 Span 仍然有用处,但是不会像以前那样频繁地使用它们了。许多页面不再需要它们了。

尽管目前并非所有浏览器都支持这些元素,但这是 HTML 引入大多数新元素之后的普遍情况,比如 img、table、object 等等。随着时间的推移,支持会逐渐完善。浏览器会忽略不认识的 HTML 元素,这意味着老式浏览器的用户仍然能够阅读 HTML 5 页面,他们的浏览方式与以前一样。现代浏览器的用户可以获得更好的用户体验,但是没有人会由于 HTML 5 新元素而妨碍浏览。

通过分析演示这些HTML5的新特性,让我如实感到技术的进步给开发人员带来的便利,给用户带来越来越多的良好体验,相信未来的网络将会浏览器的天下,或许我们的所有的操作都会浏览器上完成。作为程序员,发现并能掌握前沿的开发技术,对于提高自己,跟上技术进步的步伐都是必要的。虽然目前是不能普及,但是我们要看到其前景。我相信HTML5的前景是光明的。

不足之处是,个人对HTML5应用方面理解的不是透彻,时间和能力有限,没有做出更好的实例。而且就HTML5标准本身而言,因为处于草案研究阶段,各项功能指标并没有明确的定义,而且出于浏览器本身的局限,有些效果并不能很好的显示,需要多个浏览期相互配合才能完全表现出来。我期待着关于HTML5的草案能尽快确定下来,向全球推广,再配合CSS3.0和JavaScript的支持,未来的计算机,将会是浏览器的世界.

并由此可见,适时升级自己的浏览器,会给我们带来更好的用户体验,也希望本文能让大家更多的了解HTML5,了解我们未来不可或缺的标准。

分享到:
评论

相关推荐

    HTML5:一些 HTML5 新功能演示

    HTML5是下一代超文本标记语言,它在2014年正式成为标准,极大地扩展了网页制作的能力,引入了许多新的特性和改进。本演示将聚焦HTML5的一些...在实际开发中,掌握并熟练运用这些新功能,将有助于提升项目的质量和效率。

    html5模板.pdf

    1. HTML5 新功能的应用 - Web Storage: 提供了localStorage和sessionStorage,用于在浏览器端存储数据,解决了传统cookies容量有限的问题。 - Storage事件监听:允许实时监听数据存储的变化,实现数据同步更新。 ...

    HTML5实现签到 功能

    HTML5实现签到功能的知识点主要包括HTML5基础、CSS样式、JavaScript编程、jQuery库的使用以及如何将这些技术综合运用在移动端的签到页面开发中。接下来将详细说明: 1. HTML5基础:HTML5是最新一代的超文本标记语言...

    html5模板.docx

    本项目是关于使用HTML5技术来设计和制作一个名为"XXXX"的网站,旨在考察学生对HTML5新功能的掌握程度以及网页设计的能力。 首先,根据考核要求,网站必须包含至少10个页面,并且每个页面至少应用一个JavaScript特效...

    你不知道的5个HTML5新功能

    这不能说我们虚荣,多少年来,基本的HTML API一直没有任何发展,以至于当有一个小的新功能出现时,例如placeholder,都会让我们露出新奇的眼神。尽管新式的浏览器中实现了很多HTML5特征,但大部分程序员仍对一些小的...

    html5获得数据库新数据画图

    代码内付说明可以选择性观看,利用html5最新功能canvas画曲线图,利用了html5和ajax方法获得数据库的值让后让他改变图片,这里是用thinkphp写读取数据库的部分,有需要的朋友可以自己改造数据库读取的页面部分。

    HTML5调研资料,自己整理

    HTML5调研,包括对浏览器的要求,html5新功能,以及现在国内应用html5技术的网站

    html5新增加的几个功能

    html5新增加的几个功能,语音识别,,图像识别,html游戏:

    HTML5部分功能浅析

    2.2.1 主流浏览器对HTML5部分标签兼容表:不同的浏览器对HTML5新标签的支持程度不同,早期版本的IE浏览器支持较差,但现代浏览器已基本实现全面支持。 2.2.2 主流浏览器对HTML5流媒体格式的兼容:HTML5支持如MP4、...

    html5仿手机通讯录按字母排序及搜索功能

    HTML5是一种强大的网页开发语言,它为创建交互性和富媒体的网页提供了许多新的特性。在本文中,我们将探讨如何利用HTML5实现一个仿手机通讯录的功能,包括按字母排序和搜索功能。 首先,我们需要理解HTML5的核心...

    HTML 5用户指南

    本书共分为10章,系统全面地介绍了HTML 5规范的核心内容,以及这些内容在当前浏览器中的支持情况,并告知开发者如何在当前的环境下应用这些功能,开发出漂亮的Web应用。本书短小精悍,但是信息量巨大;本书注重实践...

    (最新版本)HTML5批量图片上传插件支持多个图片上传功能

    HTML5是一种先进的网页标记语言,它在传统的HTML基础上进行了大量扩展和增强,为网页开发者提供了更强大的工具和功能。其中一个显著的改进就是对文件上传的支持,尤其是批量图片上传功能。在传统的HTML4中,文件上传...

    HTML5新特性

    HTML5Gallery等网站展示了大量使用HTML5新特性的优秀案例,对于开发者来说,可以参考这些实例学习如何利用HTML5的新功能来提升网站的用户体验和功能性。HTML5教程则帮助开发者了解如何开始使用这些新特性,以创建...

    html5最新的开发语言

    这个“html5最新的开发语言”主题涵盖了HTML5的新特性和改进,对于任何想要深入理解或使用HTML5进行网页开发的人来说都是重要的学习资料。 HTML5的核心目标是提高Web应用的可用性、可访问性和互操作性,同时减少对...

    jQuery+html5实现的3D焦点轮播幻灯片(html5zoo.js html5zoo-slides).zip

    本篇文章将详细探讨如何利用jQuery和HTML5技术实现这一功能,主要涉及的知识点包括jQuery库的运用、HTML5的新特性以及3D变换的应用。 首先,jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM操作、事件...

    标准html5贷款页面

    首先,HTML5是现代网页开发的基础,它提供了许多增强用户体验的新特性。在贷款首页中,HTML5的语义化标签如、、、和被用于构建页面结构,使内容更加清晰易懂,同时利于搜索引擎优化(SEO)。 接着,列表页通常包含...

    网站新功能引导js-示例

    网站新功能引导是一种常见于网页设计中的用户体验策略,旨在帮助用户熟悉网站的新增或改进功能。在本示例中,“网站新功能引导js-示例”着重于利用JavaScript实现这一功能,通过弹出层向用户展示指导信息,并利用...

    HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)

    不管这些HTML5新功能有多强大,多好用,它们都是为了帮助我们更好的开发浏览器前端应用。我之前给大家分享过一篇你不知道的5个HTML5新功能,目的是希望里面的提到的一些技术能帮助改进你的web应用。这里我还想分享给...

    html5实现一个小礼物功能

    HTML5是一种强大的网页开发标准,它为开发者提供了许多新的特性和功能,使得创建交互式、动态的网页变得更加简单。在这个“html5实现一个小礼物功能”的项目中,我们可以看到HTML5如何与CSS和JavaScript结合,来创造...

    html5介绍.ppt

    HTML5是一种用于构建网页的标准标记语言,它不仅扩展了HTML4的功能,还引入了许多新特性来增强网页的表现力和交互性。HTML5的发展始于2004年,由WHATWG(Web Hypertext Application Technology Working Group)提出...

Global site tag (gtag.js) - Google Analytics