html5代码标签HTML5常用的标签适用干货

HTML5新构造标签

HTML5新其他标签

html5代码标签HTML5常用的标签适用干货 jQuery

HTML5新input类型

HTML5新属性

HTML5高等运用

html4和html5比拟：

Html4代表示例：

</div>

Html5代码示例：

</section>

HTML5新构造标签：

<header></header>页头

<footer></footer>页脚

<nav></nav>导航

<section></section>内容区块

<article></article>文章区块

<aside></aside>article之外的信息

<hgroup></hgroup>标题组

<figure></figure>数据组

<figcaption></figcaption>数据组标题

<header></header>用法

</header>

</header>

<p>文章正文内容</p>

</article>

<footer></footer>用法

文章主体

文章脚注

</footer>

</article>

<ul>

</ul>

</footer>

<nav></nav>用法

<nav>

<ul>

</ul>

</nav>

<section></section>用法

</section>

<article></article>用法

</header>

</footer>

</article>

<aside></aside>用法

</article>

<hgroup></hgroup>用法

</hgroup>

</header>

</article>

<figure></figure>用法

</figure>

新元素标签追加样式：

解释：由于很多浏览器还未支持html5新元素，须对新元素追加如下解释

//追加block解释

article,aside,dialog,figure,footer,header,legend,nav,section{display:block}

另：ie8前的浏览器不支持css方法追加，须用如下方法：

document.createElement(“header”);

document.createElement(“nav”);

document.createElement(“article”);

document.createElement(“footer”);

</script>

HTML5新其他标签：

<video></video>视频

<audio></audio>音频

<mark></mark>标记

<time></time>韶光

<wbr></wbr>软换行

<canvas></canvas>绘图

<video></video>用法

<audio></audio>用法

<mark></mark>用法

<p>感激您光临本站 <mark>段师长西席</mark>。
</p>

<time></time>用法

<wbr></wbr>用法

<p>学好网页设计必须要学会的软件有：

<wbr />photoshop<wbr />dreamweaver<wbr />flash。

</p>

<canvas></canvas>用法

语法：

注：canvas标签只是图形容器，您必须利用脚本来绘制图形。

利用范例：

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

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

HTML5新input类型：

<input type=“email” />e-mail地址文本框

<input type=“url” />url地址文本框

<input type=“number” />数值文本框

<input type=“range” />数值范围文本框

日期干系类型：

HTML5新属性：

表单干系属性

链接干系属性

其他属性

全局属性

表单干系属性

autocomplete属性

autofocus属性自动得到焦点属性

placeholder属性提示信息属性

form属性表单声明属性

required属性内容考验属性

链接干系属性

<a><area>新加media属性

<area>新加hreflang属性

<base>新加target属性

其他属性

<ol>新加reversed属性

<menu>新加type和label属性

全局属性

可编辑内容属性contentEditable

页面可编辑属性designMode

隐蔽元素属性hidden

拼写检讨属性spellcheck

焦点获取属性tabindex

HTML5高等运用

绘图运用canvas

多媒体掌握

表单验证

绘图运用canvas

用canvas绘制图形

用canvas绘制渐变色

用canvas绘制变形图形

绘制图像

动画效果

用canvas绘制图形——绘制矩形

获取canvas元素

获取2d图形（获取高下文）

设定绘图样式fillStyle,strokeStyle

设定线宽lineWidth

用canvas绘制图形——绘制路径

获取canvas元素

获取2d图形（获取高下文）

创建路径beginPath()

创建圆形路径arc(x,y,radius,startAngle,endAngle,anticlockwise)

关闭路径closePath()

用canvas绘制图形——绘制圆形

var canvas = document.getElementById(\"大众mycanvas\公众);

var ctx = canvas.getContext(\"大众2d\"大众);

ctx.arc(150,100,100,0,(Math.PI/180)360,true);

ctx.fillStyle=\公众rgba(255,0,0,0.4)\"大众;

ctx.fill();

用canvas绘制图形——绘制三角

方法moveTo（x,y）,lineTo（x,y）：

var obj = document.getElementById(\公众mycanvas\"大众);

var context = obj.getContext(\"大众2d\"大众);

context.strokeStyle=\"大众red\"大众;

context.moveTo(0,0);

context.lineTo(10,100);

context.lineTo(130,100);

context.lineTo(0,0);

context.stroke();

用canvas绘制图形——绘制弧线

方法bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y)）

var obj = document.getElementById(\公众mycanvas\"大众);

var context = obj.getContext(\"大众2d\"大众);

context.strokeStyle=\"大众red\公众;

context.moveTo(0,0);

context.bezierCurveTo(10,0,100,0,100,100);

context.stroke();

用canvas绘制渐变色——绘制线性渐变

方法createLinearGradient(xStart,yStart,xEnd,yEnd);

方法addColorStop(offset,color);

var obj = document.getElementById(\"大众mycanvas\公众);

var context = obj.getContext(\"大众2d\"大众);

var objLg = context.createLinearGradient(0,100,500,100);

objLg.addColorStop(0,\公众red\"大众);

objLg.addColorStop(0.5,\"大众green\"大众);

objLg.addColorStop(1,\"大众blue\公众);

context.fillStyle=objLg;

context.fillRect(0,0,500,300);

用canvas绘制渐变色——绘制放射渐变

方法createRadialGradient(x0,y0,r0,x1,y1,r1);

方法addColorStop(offset,color);

var obj = document.getElementById(\公众mycanvas\"大众);

var context = obj.getContext(\公众2d\公众);

var rg = context.createRadialGradient(50,50,0,50,50,50);

context.createR

rg.addColorStop(0,\公众red\"大众);

rg.addColorStop(1,\"大众green\"大众);

context.fillStyle=rg;

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

用canvas绘制变形图形——平移

方法：translate(x,y);

var obj = document.getElementById(\"大众mycanvas\公众);

var context = obj.getContext(\"大众2d\"大众);

context.translate(100,150);

context.fillStyle=\"大众red\"大众;

context.fillRect(0,0,200,200);

用canvas绘制变形图形——缩放

方法：scale(x,y);

var obj = document.getElementById(\"大众mycanvas\"大众);

var context = obj.getContext(\"大众2d\"大众);

context.scale(2,2);

context.fillStyle=\"大众red\公众;

context.fillRect(0,0,10,10);

用canvas绘制变形图形——旋转

方法：rotate (angle);

var obj = document.getElementById(\"大众mycanvas\"大众);

var context = obj.getContext(\"大众2d\公众);

context.rotate(Math.PI/1805);

context.fillStyle=\"大众red\"大众;

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

绘制图像

方法：drawImage(image,x,y,w,h)

var obj = document.getElementById(\"大众mycanvas\公众);

var context = obj.getContext(\"大众2d\"大众);

var image = new Image();

image.src=\公众img.jpg\公众;

context.drawImage(image,0,0,500,300);

图像平铺

方法：createPattern(image,type)

var obj = document.getElementById(\"大众mycanvas\"大众);

var context = obj.getContext(\公众2d\"大众);

var img = new Image();

img.src=\"大众img.jpg\"大众;

var ptrn = context.createPattern(img,\"大众repeat\公众);

context.fillStyle=ptrn;

context.fillRect(0,0,2000,2000);

请私信我回答“666”，为严哥打Call~，还有更多惊喜哦~

....................................................................

我的微信"大众号：UI严选 —越努力，越幸运

html5代码标签HTML5常用的标签适用干货

微蹙作者

htmlimg自适应自顺应设计自顺应图片的完全教程

php加载js文件路径技巧干货 l 第五空间线上赛中的两道逆向题解

html5代码标签HTML5常用的标签 适用干货

微蹙作者

htmlimg自适应自顺应设计自顺应图片的完全教程

php加载js文件路径技巧干货 l 第五空间线上赛中的两道逆向题解

猜你喜欢

html5代码标签HTML5常用的标签适用干货