我们已经准备就绪，是时候创建PingPong游戏了。1、我们将继续我们的jQuery安装示例，在编辑器里打开index.html；2、然后，在body里用DIV节点创建游戏平台，在游戏平台中有2个拍子和一个球,闲话不多说看代码吧
Headerandfooter
Html5引进了许多新的特性和改进，其中一项就是语义。Html5增加了新的元素来加强语义。我们现在只使用2个，header和footer。
标签定义文档的页眉（介绍信息），
标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
相关文章推荐：《Html5游戏开发之乒乓Ping Pong游戏示例(一) 》
放置JavaScript代码的最佳位置
我们将JavaScript代码放置在标签之前所有页面内容之后，而不是放置到
区域是有理由的。
在翻译这本书的时候，最新的jQuery版本是1.7(原话是:Atthetimeofwritingthisbook,thelatestjQueryversionis1.4.4。JQuery是有min版和开发版的，你可以随意选择)。这就是为什么jQuery文件在我们的代码示例中的名字是jquery-1.7.min.js。这个版本号也许会和你使用的不通，但是用法是一样的，除非jQuery有大的修改使新版本不再向下兼容。
页面准备好后运行我们的代码
我们需要在运行我们的JavaScript代码前确保页面已经准备就绪.否则，当我们尝试访问没有加载完的元素的时候我们会得到一个错误。jQuery提供给我们了一个方法来确保页面是被加载完成的。代码如下：
代码如下:
jQuery(document).ready(function(){ //codehere. })
Copier après la connexion
实际上，我们只需要这样写：
代码如下:
$(function(){ //codehere. });
Copier après la connexion
这个$标记是jQuery的简写。当我们calling（这个词是调用的意思，zhuangbility一下）$(something),我们实际上是在callingjQery(something).
$(function_callback)是readyevent(事件)的另一个简写。
它是和以下代码相同的：
代码如下:
$(document).ready(function_callback);
Copier après la connexion
同样，和下面的也相同:
代码如下:
jQuery(ducument).ready(function_callbak);
Copier après la connexion
小测验
1、那个位置最适合放置JavaScript代码？
元素中间。
创建PingPong游戏的元素
我们已经准备就绪，是时候创建PingPong游戏了。
动起来
1、我们将继续我们的jQuery安装示例，在编辑器里打开index.html。
2、然后，在body里用DIV节点创建游戏平台，在游戏平台中有2个拍子和一个球：
![Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![Projet de pratique HTML5+CSS [Site officiel de Hand Knock Onmyoji]](https://img.php.cn/upload/course/000/000/068/639c32efbb754401.png)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
