今天先介绍下 html5 新增的结构元素，有的经常使用到，有的用不上，虽然说它们的出现是更促进页面更有语义，更好的 seo，但其实当页面禁用样式后，它们的展现跟 div 是没撒差别，有同学可能会说，既然一样，又不影响页面的最终展现，不管是 article 还是 section 能用就好了。如果考虑实际项目的针对用户，我也是这么认为的，但作为一个重构仔，我们还是得专业点，再考虑到无障碍这块，那么 html5 标签的作用就更明显了。于是复习下...
以前需要用JS写一个自动完成组件（Suggest），很费劲。HTML5时代则不用了，直接使用datalist标签，直接减少了工作量。如下<!DOCTYPE html> <html><head><title>HTML5 datalist tag</title><meta charset="utf-8"></head><p>浏览器版本：<input list="words"></p><datalist id="words"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"><option va...
定义和用法 标签定义嵌入的内容，比如插件。 实例 HTML 4.01 与 HTML 5 之间的差异 标签是 HTML 5 中的新标签。 属性 new : HTML5 中的新属性。 属性值描述 height 属性" target="_blank" href="http://www.gxlcms.com/w3school/html5/att_embed_height.htm">heightpixels设置嵌入内容的高度。 src 属性" target="_blank" href="http://www.gxlcms.com/w3school/html5/att_embed_src.htm">srcurl嵌入内容的 URL。 type 属性" t...
下面例子为用canvas标签画多条直线 代码如下: index_three 您的浏览器不支持canvas标签。 //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //线条的颜色 ctx.strokeStyle="#FF9933"; ...
上一篇介绍了html5标签video（播放器）初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读取、设置等写相关操作，从而开始播放器的扩展之路。 本文的目录： 1.获取影片总时长2.播放、暂停3.获取影片已播放时间和设置播放点4.音量的获取和设置 第一、获取影片总时长 对播放器（video）操作，首先要得...
近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么这几介绍的是一些更为直接的应用。 本文目录: 1.使用标签2.加上一些必要参数3.自动播放或自动加载4.规范播放器 第一步：使用标签 使用的方法很简单，就是一句代码：代码如下: 第二步：加上一些必要的参数，比如播放...
在HTML页面的中，可以用像下面的代码来添加标签：代码如下: Your browser does not support HTML5 Canvas.译注：对于canvas，以下写法是不允许的：代码如下: 让我们来看一下上述代码到底做了些什么。标签有3个主要的属性，包括： 1.id。我们可以在JavaScript代码中用id值来引用该标签。在上述代码中，id值为canvasOne。2.width。canvas的宽度，以像素为单位。在上述代码中，width值为500个像素。3.height。canvas的高度，以像素为单...
以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在里，看看会有什么不同。自己试了以下，果然有问题。 先看一下代码：代码如下:canvas body{margin:0;} canvas{margin:20px; /*width: 400px; height: 300px;*/ } function draw() ...
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。 标签的属性代码如下:src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 html 代码代码如下: //audio和vi...
标签可以在HTML5浏览器中播放音频文件。 默认提供一个控制面板，但是有些时候我们只需要播放声音，控制面板由我们自己来定义其显示的状态。 这里我们可以使用JS来进行控制，代码如下：代码如下:var audio ;window.onload = function(){ initAudio();}var initAudio = function(){ //audio = document.createElement("audio") //audio.src=Never Say Good Bye.ogg audio = document.getElementById(audio);}function getCurrentTim...
结构标签：(块状元素) 有意义的div标记定义一篇文章 标记定义一个页面或一个区域的头部 标记定义导航链接 标记定义一个区域 标记定义页面内容部分的侧边栏 标记定义文件中一个区块的相关信息 标记定义一组媒体内容以及它们的标题 标签定义 figure 元素的标题。 标记定义一个页面或一个区域的底部 标记定义一个对话框(会话框)类似微信 多媒体交互标签标记定义一个视频 标记定义音频内容 标记...
你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。源码下载：点击下载 我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。 HTML 我们只需要在页面中加...
定义和用法 标签定义有序列表。HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中，不赞成使用 "start" 属性，在 HTML 5 中是允许的。在 HTML 4.01 中，不赞成使用 "compact" 和 "type" 属性，在 HTML 5 中，不再支持这两个属性。提示和注释提示：请使用 CSS 来定义列表的类型。例子XML/HTML Code复制内容到剪贴板ol> li>Coffeeli> li>Teali> ol> ol> li start="60">Coffeeli> li>Teali> ol> HTML5提供的OL标签...
制作手机版网站的时候，除了页面简洁、操作方便等访问者可以看到的地方以外，就是 Meta 标签的设置，合理设置 Meta 标签 对手机版网站的搜索引擎优化，手机浏览器的渲染展示都有非常大的帮助。对于桌面平台web布局中大家对meta标签再熟悉不过了，它永远位于 head 元素内部，对做SEO的朋友一定对meta有种特殊的感情吧，今天我们就来说说移动平台的meta标签，在移动平台meta标签究竟有哪些神奇的功效呢？ 1、Meta 之 viewport 说到移...
HTML5中的title标签是用来定义网页的标题，它显示在浏览器的最顶端，另外title标签是放置在<head></head>标签内的。html网页中只能有一个标题标签作为唯一标题显示，那么为什么要设置title标签呢，因为当网页有了标题之后，浏览者一看就会知道网页的相关内容。title标签的语法<title></title>title 元素在所有 HTML 文档中是必需的。它的作用：定义浏览器工具栏中的标题提供页面被添加到收藏夹时的标题显示在搜索引擎结果中的页面标...