关于HTML(一)---------HTML5新特性1

（一）、  语义标签

       1、<section></section>

　　　　定义文档中的主体部分的节、段。

　　2、<article></article>

　　　　一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如什么论坛的文章，博客的文本。。。

　　3、<aside></aside>

　　　　用来装载页面中非正文的内容，独立于其他模块。例如广告、成组的链接、侧边栏。。。

　　4、<header></header>

　　　　定义文档、页面的页眉。通常是一些引导和导航信息，不局限于整个页面头部，也可以用在内容里。

　　5、<footer></footer>

　　　　定义了文档、页面的页脚，和header类似。

　　6、<nav></nav>

　　　　定义了一个链接组组成的导航部分，其中的链接可以链接到其他网页或者当前页面的其他部分。

　　7、<hgroup></hgroup>

　　　　用于对网页或区段(section)的标题元素(h1~h6)进行组合。

　　8、<figure></figure>

　　　　用于对元素进行组合。

　　9、<figcaption></figcaption>

　　　　为figure元素加标题。一般放在figure第一个子元素或者最后一个。

　　10、<details></details>

　　　　定义元素的细节，用户可以点击查看或者隐藏。

　　11、<summary></summary>

　　　　和details连用，用来包含details的标题。

　　12、<canvas></canvas>

　　　　用来进行canvas绘图。

　　13、<video></video>

　　　　定义视频。

　　14、<audio></audio>

　　　　定义音频。

　　15、<embed></embed>

　　　　定义嵌入网页的内容。比如插件。

　　16、<source></source>

　　　　该标签为媒介元素(比如video、audio)定义媒介元素。

　　17、<datalist id='dl'></datalist>

　　　　定义可选数据的列表，与input配合使用(<input list='dl'>)可制作输入值的下拉列表。

　　18、<mark></mark>

　　　　在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

　　19、<meter [min/max/low/high/optimum/value]></meter>

　　　　度量衡，用红黄绿表示出一个数值所在范围。

　　20、<output></output>

　　　　定义不同类型的输出，样式与span无异。

　　21、<progress></progress>

　　　　进度条，运行中的进度。

　　22、<time></time>

　　　　定义日期或者时间。

　　23、<keygen></keygen>

　　　　定义加密内容。

　　24、<command></command>

　　　　定义命令行为。

（二）、表单新特性

 

       10个input的type值

 

　　　　1、email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口。

 

　　　　2、url：地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口。

 

　　　　3、number：数字输入域。(可设置min、max、step)

 

　　　　4、tel：电话号码输入域，在手机浏览器中弹出数字输入域。

 

　　　　5、search：搜索输入域，在手机浏览器右下角呈现搜索按键。

 

　　　　6、range：范围选择控件。

 

　　　　7、color：颜色选择控件。

 

　　　　8、date/month/week：时间选择控件。

 

　　11个表单元素新属性

 

　　　　1、autocomplete：自动补全，是否自动记录之前提交的数据，以用于下一次输入建议。

 

　　　　2、placeholder：占位符，用于在输入框中显示提示性文字，与value不同，不能被提交。

 

　　　　3、autofocus：自动获得输入焦点。

 

　　　　4、multiple：是否允许多个输入值，若声明该属性，那么输入框中允许输入多个用逗号隔开的值。

 

　　　　5、form：值为某个表单的id，若设置，则该输入域可放在该表单外面。

 

　　　　6、：在表单提交时会验证是否有输入，没有则弹出提示消息。

 

　　　　7、maxlength：限制最大长度，只有在有输入的情况下才有用，不区分中英文。

 

　　　　7.5、minlength：限制最小长度，但它不是H5标准属性，仅部分浏览器支持。

 

　　　　8、min：限定输入数字的最小值。

 

　　　　9、max：限定输入数字的最大值。

 

　　　　10、step：限定输入数字的步长，与min连用。

 

　　　　11、pattern：指定一个正则表达式，对输入进行验证。(正则默认首尾加^$)

（三）、视频和音频

 

       1、视频(video)

 

　　　　H5新加了video标签，用来播放视频，默认为一个300*150的inline-block。

 

　　2、音频(audio)

 

　　　　H5新加了audio标签，用来播放音频，默认为一个300*30并且display为none的inline-block(除非有controls属性)。但手机ios系统中的safari浏览器不支持这个标签，其余的都支持。

 

　　3、下面列举一些video、audio对象共有的一些成员：

 

　　　　src：指定要播放的资源路径。

 

　　　　autoplay：是否自动播放。

 

　　　　controls：是否显示播放控件。

 

　　　　currentTime：当前播放的时间点。

 

　　　　duration：总时长(s)。

 

　　　　ended：是否结束。

 

　　　　loop：是否循环播放。

 

　　　　muted：是否静音。

 

　　　　volume：音量设置(0~1)。

 

　　　　paused：是否在播放。

 

　　　　preload：指定视频预加载方案。

 

　　　　play()：播放。

 

　　　　pause()：暂停。

 

　　　　onplay：开始播放事件。

 

　　　　onpause：开始暂停事件。

 

　　　　onplaying：正在播放中事件。

（四）、Canvas绘图

 

H5引入了canvas标签，默认是一个300*150的inline-block。canvas的宽高只能用它自身的width和height属性来指定，而不能使用css样式中的width、height。

 

　　一、获得‘画笔’对象，canvas所有的任务都需要它来执行

 

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

 

　　二、一些canvas常用的属性

 

　　　　fillStyle：填充样式

 

　　　　strokeStyle：描边样式

 

　　　　lineWidth：描边宽度

 

　　　　font：绘制文本所用的字体大小和类型

 

　　　　textBaseline：文本对其的基线

 

　　　　shadowOffsetX、shadowOffsetY：阴影偏移量

 

　　三、使用canvas绘制图形

 

　　　　1、绘制矩形

 

　　　　ctx.fillRect(x,y,w,h)：填充一个矩形

 

　　　　ctx.strokeRect(x,y,w,h)：描边一个矩形

 

　　　　ctx.clearRect(x,y,w,h)：清除一个矩形范围内的内容

 

　　　　2、绘制文本

 

　　　　ctx.fillText(txt,x,y)填充文本

 

　　　　ctx.strokeText(txt,x,y)描边文本

 

　　　　ctx.measureText(txt)测量

 

　　　　*要注意的是文本的定位点默认在文本基线(alphabetic)的起始点！

 

　　　　3、为图形文字添加阴影

 

　　　　例：ctx.shadowColor='#000';//颜色

 

　　　　　　ctx.shadowOffsetX=8;//水平偏移量

 

　　　　　　ctx.shadowOffsetY=8;//垂直偏移量

 

　　　　　　ctx.shadowBlur=10;//模糊半径

 

　　　　4、在绘图时使用渐变色

 

　　　　ctx.createLinearGradient(x1,y1,x2,y2)：创建线性渐变对象

 

　　　　ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)：创建径向渐变对象

 

　　　　ctx.addColorStop：添加颜色点

 

　　　　5、绘制路径

 

　　　　ctx.beginPath()：开始路径

 

　　　　ctx.closePath()：结束路径

 

　　　　ctx.moveTo(x,y)：移动到指定点

 

　　　　ctx.lineTo(x,y)：绘制直线路径到指定点

 

　　　　ctx.arc()：绘制拱形路径

 

　　　　ctx.ellipse()：绘制椭圆路径

 

　　　　ctx.bezierCurveTo()：绘制贝塞尔曲线路径

 

　　　　ctx.linJoin()：修改折线拐点处样式

 

　　　　6、绘制图像

 

　　　　ctx.drawImage()

 

　　　　7、对于绘制上下文状态的改变和修改

 

　　　　ctx.translate(x,y)：坐标轴原点移动到指定点

 

　　　　ctx.rotate()：旋转画笔

 

　　　　ctx.scale()：画笔缩放

 

　　　　ctx.save()：保存绘图上下文当前的变形数据

 

　　　　ctx.restore()：恢复最近一次的保存的变形相关的状态

 

　***Canvas是个纯js实现的绘制位图的技术。

（五）、SVG绘图

 

 

相对于canvas绘图，SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，H5把它纳入了标准标签库，并进行了一些瘦身。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用核心DOM的方法来操作；SVG的样式可以用css，但是只能用其专有的属性；如果要使用js动态生成SVG其中的元素，创建方法得用document.createElementNS('http://www.w3.org/2000/svg','标签名')；SVG元素的nodeName都是纯小写形式。

 

　　一、使用方法

 

　　　　在HTML文件中直接使用SVG相关标签(<svg></svg>)即可，默认是一个300*150的inline-block。

 

　　二、绘制不同图形(部分)

 

　　　　1、绘制矩形

 

　　　　<rect [width/height/x/y/fill/fill-opacity/stroke/stroke-width/stroke-opacity]></rect>

 

　　　　2、绘制圆形

 

　　　　<circle [r/cx/cy]></circle>

 

　　　　3、绘制椭圆

 

　　　　<ellipse [rx/ry/cx/cy]></ellipse>

 

　　　　4、绘制直线

 

　　　　<line [x1/y1/x2/y2/stroke]></line>

 

　　　　5、绘制折线

 

　　　　<polyline [points/stroke]></polyline>

 

　　　　6、绘制多边形

 

　　　　<polygen [points]></polygen>

 

　　　　7、绘制文本

 

　　　　<text [x/y/font-size/alignment-baseline/fill]></text>

 

　　　　8、绘制图像

 

　　　　<image [width/height/xlink:href]></image>

 

　　　　9、特效对象——渐变特效

 

　　　　<defs>

 

　　　　　　<linearGradient [x1/y1/x2/y2]>

 

　　　　　　　　<stop [offset/stop-color]></stop>

 

　　　　　　</linearGradient>

 

　　　　</defs>

 

　　　　10、特效对象——高斯模糊滤镜

 

　　　　<defs>

 

　　　　　　<filter>

 

　　　　　　　　<feGaussionBlur [stdDeviation]>

 

　　　　　　</filter>

 

　　　　</defs>