HTML5 的新特性:
①、用于绘画的 canvas 元素。
②、用于媒介回放的 video 和 audio 元素。
③、对本地离线存储的更好的支持。
④、本地 SQL 数据。
⑤、新的特殊内容元素,比如 article、header、nav、footer、section。
⑥、新的表单控件,比如 calendar、date、time、email、url、search。
HTML5 图形
使用 HTML5 可以简单的绘制图形:
可以使用 <canvas> 元素,内联 SVG。
CSS3 提供了一些新选择器,新属性。
HTML5 使用 CSS3 可以实现 2D/3D 转换,动画,圆角、阴影效果,还可以下载字体。
HTML5 多媒体
使用 HTML5 可以简单的在网页中播放音频和视频:
<audio> 可用于播放音频,<video> 可用于播放视频。
如需播放音频,则使用以下代码:
<audio controls autoplay>
<source src="audio/彼岸.mp3" type="audio/mpeg">
<source src="audio/平凡之路.ogg" type="audio/ogg">
</audio>
如需播放视频,则使用以下代码:
<video width="320px" height="240px" controls autoplay>
<source src="video/预谋.mp4" type="video/mp4">
<source src="video/如果你也听说.webm" type="video/webm">
</video>
controls 属性供添加播放、暂停和音量控件。autoplay 属性则在准备就绪后马上播放。
<audio> 元素定义音频。<video> 元素定义视频。
使用 JavaScript 来绘制图形
首先,JS 通过设置的 ID 属性获取 <canvas> 元素: var c = document.getElementById("myCanvas");
然后,创建 context 对象: var ctx = c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
最后的两行代码用于绘制一个红色背景的矩形: ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
设置 fillStyle 属性可以是 CSS 颜色,渐变,或图案。fillStyle 默认设置是 #000000(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
理解 Canvas 坐标
canvas 是一个二维网格,左上角坐标为 (0,0)。
上面代码中的 fillRect 方法拥有参数 (0,0,150,75),意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
Canvas 绘制路径
moveTo() 把路径移动到画布中的指定点,不创建线条
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
stroke() 绘制已定义的路径
arc() 创建弧/曲线(用于创建圆形或部分圆)
arcTo() 创建两切线之间的弧/曲线
beginPath() 起始一条路径,或重置当前路径
closePath() 创建从当前点回到起始点的路径
fill() 填充当前绘图(路径)
clip() 从原始画布剪切任意形状和尺寸的区域
isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 false
在 Canvas 上画线,我们将使用以下两种方法:
①:moveTo(x,y) 定义线条开始坐标。
②:lineTo(x,y) 定义线条结束坐标。
最后通过 stroke() 方法来绘制当前路径。
Canvas 线条样式:
lineWidth 属性设置或返回当前线条的宽度
lineJoin 属性设置或返回所创建边角的类型
lineCap 属性设置或返回线条末端线帽的样式
miterLimit 属性设置或返回最大斜接长度
Canvas 图像
使用 canvas 可以把一幅图像放置到画布上 drawImage(img,x,y);
在画布上定位图像,并规定图像的宽度和高度: context.drawImage(img,x,y,width,height);
HTML5 新的 input 类型
color 类型用在 input 字段主要用于选取颜色。 选择你喜欢的颜色: <input type="color" name="lovecolor" />
search 类型用于搜索域,比如站点搜索或 Google 搜索。
url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。
email 类型用于应该包含 E-mail 地址的输入域。在提交表单时,会自动验证 email 域的值是否合法有效:
tel 类型定义输入电话号码字段。
number 类型用于应该包含数值的输入域,输入数字的字段,支持设定对所接受的数字的限定。
range 类型用于应该包含一定范围内数字值的输入域,用于精确值不重要的输入数字的控件,该类型显示为滑动条。
time 类型允许你选择一个时间,用于输入时间的控件,不带时区。
month 类型允许你选择一个月份,month 和 year 控件,不带时区。
week 类型允许你选择周和年,week 和 year 控件,不带时区。
date 类型允许你从一个日期选择器选择一个日期,date 控件,包括年、月、日,不包括时间。
HTML 5一些新的标签用法
<article>标签定义外部的内容。 <article></article>
<aside>标签定义 article 以外的内容。 <aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>
<audio> 标签定义声音,比如音乐或其他音频流。 <audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
<canvas> 标签定义图形,比如图表和其他图像。 <canvas id="myCanvas" width="200" height="200"></canvas>
<command> 标签定义命令按钮,比如单选按钮、复选框或按钮。 <command onclick=cut()" label="cut">
<datalist> 标签定义可选数据的列表。 <datalist></datalist>
<details> 标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。 <details></details>
<embed> 标签定义嵌入的内容,比如插件。 <embed src="horse.wav" />
<figcaption> 标签定义 figure 元素的标题。 <figure><figcaption>PRC</figcaption></figure>
<figure> 标签用于对元素进行组合。 <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
<footer> 标签定义 section 或 document 的页脚。
<header> 标签定义 section 或 document 的页眉。
<hgroup> 标签用于对网页或区段(section)的标题进行组合。
<keygen> 标签定义生成密钥。
<mark>主要用来在视觉上向用户呈现那些需要突出的文字。
<nav> 标签定义导航链接的部分。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步