HTML5新特性

文章共627个字 读完大约需要2分钟

最简单的文档声明

HTML5简化了文档声明,你现在可以使用简单的几行代码来生成一个H5页面。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
<head>
<meta chaset="utf-8">
<title>HTML5 page</title>
</head>

<body>
<!-- .... -->
</body>

</html>

HTML5新增元素

canvas新元素

Canvas是开发跨平台动画和游戏的标准解决方案,能够实现对图像和视频进行像素级操作,Canvas本质是一块透明区域,理解为画布,而绘画操作则需要依赖JavaScript

标签 描述
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
认识canvas元素
1
<canvas id = 'myCanvas'></canvas>
  • 默认带有宽高属性,在不指定宽高的情况下默认创建宽300px150px的矩形画布。
  • 我们可以向操作其他元素那样为其添加css样式。
  • Canvas行内元素
Canvas如何绘制图形
  1. html结构中添加canvas元素,并添加ID便于获取。
  2. 根据ID找到元素
  3. 通过getContext('2d')创建context对象。
  4. 使用JavaScript绘制路径。

以下实例会绘制出一个矩形:

1
2
3
4
5
6
7
8
<style>.my-canvas{width: 200px;height: 100px;}</style>
<canvas id = 'myCanvas1' class = 'my-canvas'></canvas>
<script>
let c = document.getElementById('myCanvas');
let context = c.getContext('2d');
context.fillStyle = 'skyblue';
context.fillRect(50, 25, 100, 50);
</script>

更多关于canvas的信息请看文章:Canvas元素

新多媒体元素

标签 描述
<audio> 定义音频内容
<video> 定义视频内容
<source> 定义多媒体资源<video><audio>
<embed> 定义嵌入内容(比如插件)
<track> 为诸如<video><audio>元素之类的媒介规定外部文本轨道。

新表单元素

标签 描述
<datalist> 定义选项列表
<output> 定义不同的输出类型,比如脚本输出

新的语义结构元素

标签 描述
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<footer> 定义页脚
<header> 定义头部
<nav> 定义导航
<section> 定义文档中的节
<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)

代办事宜

  • 第一个h5页面
  • html5新增标签
  • canvas元素绘制简单图形和图像处理
  • web存储
  • H5地理位置

推荐文章

-->