1、HTML5是这样到来的.HTML从1991年开始第一版, 然后一直到1999年出现w3c发布的HTML 4.01的时候, html发展才相当成熟. 也是现在用途最多的一个版本. 然后下一个跨时代的版本就是2012发布的html5. 它在html4的基础上增加了很多的动画效果. 还有新增很多样式. 也是现在移动端开发必选的一个版本. 现在大多数的框架, 包括jquery mobile, bootstarp3 都是使用html5作为开发基础. 来做现在的响应式的界面设计. 因为我们要讲的也是一个移动端的web. 所以使用的会是html5的这个版本.
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/e40b3127e7ef2806c61ce769b840b6f39087f2b1.jpg)
2、HTML怎么去声明: 这里讲解3个版本, 一个是4.0, 一个是5. 还有一个XHTML1.0, 因为再往前返, 也没有什么意义, 都已经是淘汰的东西. 可以从下图中看出, HTML的声明最简单, 只需要DOCTYPE html就可以完成. 这里需要注意, 这些声明, 要发在文档的最前面, 以为浏览器要知道用那种版本去编译你的网页内容. 不同的版本浏览器支持的也不太一样. 名次叫做渲染内容, 也就是把该显示在浏览器上.
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/90c61d1c99c0affc549b519b2372941fbfe4eab1.jpg)
3、最基本的HTML的代码如下图, 讲解一下内容. 在html中, 通常出现的就是标记. 标记大多数都需要一个开始和一个结束, 可能想说的是, 做东西要有始有终吧. 比方说html开始标记: <html> 那么就需要一个关闭的</html> 这些都是一些标记名称. 都是预先定义好的一些标识. head代表这个是页面的头部. 里面可以写浏览器中标题的名字. 然后body代表的是内容, 就是我们现在在页面上看到的内容都是存放在body中的.
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/bfa52adaf05e4a23c46c8ba91dd818196020e2b1.jpg)
4、常用的标签: a 链接标签, p段落标签. br换行. table表格. h1标题. <!-- -->这个是html中的注释. title文档的标题. 等等还有很多的标签, 给大家举个栗子. 我们去超市买东西, 有食品区. 生活用品区. 可以把超市理解成是一个html, 那么里面的区. 就是一个一个的标记. 它可以告诉你需要什么样的东西,就去什么样的区去找.
5、现在我们要实现这样的一个功能. 就是在页面上显示"这是我的第一个页面, 努力就会成功! 时常告诉自己. 坚持就会有胜利". 然后加上一个要求. 就是编码格式为utf-8. 为什么要加上这个编码格式呢, 因为在网站访问的过程中会有不同的字符集来显示页面内容. 为了能够样页面正常的显示, 不出现乱码, 就添加上字符集.<meta charset="UTF-8">. 以后的开发中将都会使用该字符集.
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/0d2fe5f202b375d75e66ce40515872dadf49d8b1.jpg)
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/8a17b3042e6817e980fc7b4cd356d53da924ceb1.jpg)
6、在MyEclipse中来书写这段代码. 首先打开myeclipse. 创建一个项目. 项目名称为: WebOS_01. 然后在index.jsp中. 填写这段代码. 这里需要把html4的内同柙丕牌容替换成html5, 或者把这个页面删除重新创建一个, 创建成html5为模版的jsp页面. <% %>这个里面是jsp的内容. 不要删除. 保留. 修改jsp首行定义的.pageEncoding="utf-8". 这个是说这个jsp页面定义为utf-8的字符集. 然后运行tomcat. 使用http://localhost:8080/WebOS_01来访问这个页面.
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/cd93a56651598540cb377156b5a23a42a17ac4b1.jpg)
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/ed792abb19efa25fea09b7cf59828689a0463bb6.jpg)
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/b6f0f0f97fbd4c7cdbae49f5b8bad341027d30b6.jpg)
![如何动手写移动Web网站：[1]如何学习html](https://exp-picture.cdn.bcebos.com/023cff37c97622bc8ad8bad3a05fd546049628b6.jpg)
7、自己尝试练习一下: 把这些内容放在 h1, h2, h3,h4, h5, h6 中查看一下效果(不要忘记<>哦), 然后在写完一个标签之后, 写上一个<br> 看一下效果, 放在p中, 你在看一下效果. 自动动手丰衣足食. 本节主要讲了html的简单的框架, 然后在myeclipse中如何显示页面内容. 加油, 成功属于你.
