本文的目的是通过短时间、简单的猜边游戏来了解网页的基本要素。 因为以前没有接触过web开发，所以这次是入门。
大多数网页都包含三种技术： HTML、CSS和JavaScript。 对应的三种文件格式为. html、 css和. js。 首先给出这个游戏的代码，通过分析学习。 了解了整体框架后，在学习中对自己不知道的部分进行百度一下，我觉得可以更快地学习。 因此，我不太详细。 建议使用Chrome和Firefox浏览器进行调试，以获得最新的标准支持。
游戏解释这是一个非常简单的游戏。 用户输入两个名称，点击测量，即可看到边缘指数。 整个游戏有前面提到的三个文件。
超文本标记语言(HTML部分的HTML )负责向用户呈现界面，并通过各种标记定义网页的目录和内容。 最新的标准是HTML5，新标准下的游戏开发是最近点燃的方向。 以下代码适用： doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title边缘碰撞/titlelinkrel=' style sheet ' type=' text/CSS ' hree/H2 pformfieldsetlabelfor=' boy name '男性姓名/label input type=' text ' id=' boy name '/label for=' girl name '女性姓名/label inname buttontype=' button 'nclick=' tell story () )测量一下/button/fieldset/form divid=' output '/div /
的称为tag，通常一致的tag内容称为container，单个tag称为element。 在tag中，可以定义type等参数。 html标签包含包含两部分的html代码：头和主体。 另一方面，在head中，title定义了在浏览器中显示的标记名称，link tag显示指向css文件的链接，script显示要使用的JavaScript文件。 如果不想使用外部css和js文件，可以直接将代码粘贴到head部分。 在body部分，h1推出了大标题，h2、h3等可以定义神勇的小猫级别的标题。 表单和字段设置标签的内部为表。 标签和输入分别定义标签和输入文本框。 button定义按钮，onclick参数设置单击按钮时执行的代码。 div tag提供了可通过JS实时更改的html内容，具体如何更改将在后面介绍。 一些CSS也称为样式表，用于定义网页的视觉样式和样式，包括字体大小、颜色和边距。 CSS文件代码： body { background-color : RGB 65228、255、255 }； (H1 )文本对齐：中心； (H2 )文本对齐：中心； color : RGB (20，180，30 )； }fieldset{ width: 600px； 文本对齐3360中心； margin :自动； }label{ float: left； 文本对齐： right； padding-right: 1em； clear :左； width: 300px； }input{ float: left； }button{ display: block； clear: both； margin :自动； }#output{ text-alig
n: center; font-size: 36px; color: rgb(120,30,250);}可以看到，代码是分块构成的，每个块定义对应的tag的样式。最后一个#output之前加#可以把一个div通过id变成一个可以操作的container。 大多数参数都能从名字看出含义，这也是网页开发中的一个要点。因为网页代码通常数量多，良好的命名方式可以加快开发速度。 不过，有几个参数略微复杂。padding定义了tag内部的边缘空白，而margin定义了外部的边缘空白。float使tag中内容向某个方向靠，clear则是使某个方向上开始的元素就是这个tag，即不会在左边还有元素。比如label就使得每个label停靠在容器最左边。clear：both则使得这个元素单独成一行。 JavaScript部分 JS历史悠久，生命力非常强大。在客户端Angular等各种各样的库，甚至可以在浏览器里模拟linux系统（jslinux），也可以运行大型游戏（doom和epic citadel）。而在服务器端，node.js在chrome浏览器v8引擎基础上作为server，性能远超php。可以说，JS is the future。当然这是一句玩笑话。 在这个游戏HTML文件中看到，按键被点击时会调用tellStory函数，这个函数是在JavaScript文件中定义的。 下面给出代码： function tellStory() { var textBoyName=document.getElementById("boyName"); var boyName=textBoyName.value; var textGirlName=document.getElementById("girlName"); var girlName=textGirlName.value; var output=document.getElementById("output"); var point=Math.ceil(10*(Math.random()+9)); story=boyName+" 和 "+girlName+" 此时此刻的缘分指数为 "+point; output.innerHTML=story;}//end tellStory
这段代码仅仅定义了一个函数。函数中getElementById可以根据id得到相应的元素，取其value值就是用户输入的文本。使用random函数随即生成一个分数，就可以输出了（额，如何生成分数可以更sophisticate一些）。当然，这个输出是输出到output对应的div元素中的。 进一步的学习 将css和js代码分别存储为文件，使用浏览器打开html文件，这个游戏就可以运行了。 这是一个非常简单的游戏，对于初学者，可以跟着Wiley.HTML5.Game.Development.for.Dummies.2013这本书学习。 空谈误国，实干兴邦。如果一直只是看代码，看书，是很难精通网页开发的。最好自己实现一些功能模块，可以参照现有的大网站的网页，学习过程中W3C School的参考手册很方便。