专栏首页我分享我快乐HTML5常用的标签

HTML5常用的标签

目录:

HTML5新结构标签

HTML5新其他标签

HTML5新input类型

HTML5新属性

HTML5高级应用

html4和html5对比:

Html4代表示例:

<div id=“header”></div>

<div id=“nav”></div>

<div class=“section”>

<div class=“article”></div>

</div>

<div id=“sideBar”></div>

<div id=“footer”></div>

Html5代码示例:

<header></header>

<nav></nav>

<section>

<article></article>

</section>

<aside></aside>

<footer></footer>

HTML5新结构标签:

<header></header>页头

<footer></footer>页脚

<nav></nav>导航

<section></section>内容区块

<article></article>文章区块

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

<hgroup></hgroup>标题组

<figure></figure>数据组

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

<header></header>用法

<header>

<h1>网页标题</h1>

</header>

<article>

<header>

<h1>文章标题</h1>

</header>

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

</article>

<footer></footer>用法

<article>

文章主体

<footer>

文章脚注

</footer>

</article>

<footer>

<ul>

<li>站内链接</li><li>站内链接</li><li>站内链接</li>

</ul>

</footer>

<nav></nav>用法

<nav>

<ul>

<li><a href=“#”>链接内容</a></li>

<li><a href=“#”>链接内容</a></li>

<li><a href=“#”>链接内容</a></li>

</ul>

</nav>

<section></section>用法

<section>

<h1>标题</h1>

<p>内容</p>

</section>

<article></article>用法

<article>

<header>

<h1></h1>

</header>

<footer>

<ul><li></li></ul>

</footer>

</article>

<aside></aside>用法

<article>

<h1>文章标题</h1>

<p>内容</p>

<aside>相关内容</aside>

</article>

<hgroup></hgroup>用法

<article>

<header>

<hgroup>

<h1>主标题</h1>

<h2>子标题</h2>

</hgroup>

</header>

<p>正文</p>

</article>

<figure></figure>用法

<figure>

<figcaption>标题</figcaption>

<img src=“a.jpg”>

<img src=“b.jpg”>

<img src=“c.jpg”>

</figure>

新元素标签追加样式:

说明:因为很多浏览器还未支持html5新元素,须对新元素追加如下说明

//追加block说明

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

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

<script>

document.createElement(“header”);

document.createElement(“nav”);

document.createElement(“article”);

document.createElement(“footer”);

</script>

HTML5新其他标签:

<video></video>视频

<audio></audio>音频

<embed></embed>多媒体

<mark></mark>标记

<time></time>时间

<wbr></wbr>软换行

<canvas></canvas>绘图

<video></video>用法

<video src=“test.ogg" controls="controls"></video>

<audio></audio>用法 <audio src=“test.wav"></audio>

<embed></embed>用法 <embed src=“test.swf"></embed>

<mark></mark>用法

<p>谢谢您光临本站 <mark>段先生</mark>。</p>

<time></time>用法

<p>早上 <time>9:00</time> 上班。</p>

<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

<wbr></wbr>用法

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

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

</p>

<canvas></canvas>用法

语法:

<canvas></canvas>

注:canvas标签只是图形容器,您必须使用脚本来绘制图形。

使用范例:

<canvas id="myCanvas"></canvas>

<script>

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” />数值范围文本框

日期相关类型:

<input type=“date” />

<input type=“month” />

<input type=“week” />

<input type=“time” />

<input type=“datetime” />

<input type=“datetime-local” />

HTML5新属性:

表单相关属性

链接相关属性

其他属性

全局属性

表单相关属性

autocomplete属性

autofocus属性 自动获得焦点属性

placeholder属性 提示信息属性

form属性 表单声明属性

required属性 内容检验属性

链接相关属性

<a><area>新加media属性

<area>新加hreflang属性

<link>新加sizes属性

<base>新加target属性

其他属性

<ol>新加reversed属性

<meta>新加charset属性

<menu>新加type和label属性

<style>新加scoped属性

<script>新加async属性

<iframe>新加sandbox,seamless,srcdoc

全局属性

可编辑内容属性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/180*5);

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);

本文分享自微信公众号 - 我分享我快乐(duan_uid),作者:段惠勇

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-03-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何将flash制作的动画存成高质量的GIF

    喜欢用flash制作GIF动画的同学有个疑惑就是flash直接导出的GIF质量不高无法达到我们对动画的色彩要求,所以下面教大家如何将flash制作的动画存成...

    用户1730674
  • web前端设计课程预习指导

    很多同学希望在进入web前端设计课程阶段之前做一下预习和准备工作。 我为大家准备了预习小卡片(对于零基础的你来说要死记硬背哦) 一、先背过下面的单词小卡片 ?...

    用户1730674
  • 想做卡片式设计,花瓣不在了该上哪里找参考?

    作为承载信息的“容器”,卡片式设计能够包含文本、媒体和按钮等元素,而且能够适应不同设备、屏幕尺寸,平衡用户界面和用户体验之间的关系。

    用户1730674
  • 【30分钟学完】canvas动画|游戏基础(2):从零开始画画

    上篇主要是理论的概述,本篇会多些实践,来讲讲canvas的基础用法,并包含一些基础三角函数的应用,推荐没有canvas基础的朋友阅读,熟悉的朋友可以跳过。 本人...

    :::::::
  • 在 JavaScript 中新的绘图思路[每日前端夜话0xB8]

    我曾经用 Python 海龟图形生成过这个图像,并有用 JavaScript 复制它的强烈冲动。

    疯狂的技术宅
  • 29行代码使用HTML5 Canvas API绘制一颗红心

    Jerry Wang
  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • python学习笔记(十 三)、网络编程

      Python提供了强大的网络编程支持,很多库实现了常见的网络协议以及基于这些协议的抽象层,让你能够专注于程序的逻辑,而无需关心通过线路来传输比特的问题。

    py3study
  • asp.net core 认证及简单集群

    众所周知,在Asp.net WebAPI中,认证是通过AuthenticationFilter过滤器实现的,我们通常的做法是自定义AuthenticationF...

    guokun

扫码关注云+社区

领取腾讯云代金券