“小白，HTML标签看完了么？文档对象模型看了么？”
“看了，我终于知道你昨天问我的那个关于网页结构的问题了，原来根据文档对象模型，网页就是一个对象嵌套的结构，最外层是html标签，里面是head和body标签，head和body里面又有各自的子标签，可以一直嵌套。”
“嗯，大概就是这个意思，好了现在你打开WebStorm软件，新建一个项目，项目的位置你看着设定就可以了，创建好项目以后我告你第一步怎么做。”
“我创建了一个mylearn项目，现在我该怎么做呢？”
“在mylearn上面点右键，新建一个html页面”
“创建好以后，看一下HTML文档的结构，是不是跟你之前看的DOM模型一致？”
“这里面的几个标签你应该都认识吧？”，老朱说到。
“认识，head是网页的头部对象，body是网页的主体部分。title是网页的标题。”
“好了，给title设定一个标题吧！比如‘我的H5第一课’，设定好标题以后在当前页面里面放一个div层上去，并且给他一个id号main”。
“好嘞，马上去办~”，小白兴奋的开始了他的第一次动手学习。
小白做完以后找到老朱，“朱哥，做好了！”
老朱看完以后对小白说：“我说的要求你已经实现了，可是你有没有注意在你创建的页面中，默认的meta和title标签都跟他们的父标签有一定的缩进？在我们写标签的时候一定要注意这个问题，每个级别的标签缩进距离都要有区分。你把光标移到div前面，点一下Tab键就可以了。”
“好了，在你的html页面上点右键，选择浏览器中查看，然后选择chrome浏览器，看看效果吧！”
“网页打开了，除了网页标题是我的H5第一课，整个网页都是空的！”
“好的，今天就这样吧！”
小白很惊讶，“怎么今天就让我做了一个空的页面啊，我感觉什么都没干啊~”
“小白，你今天已经学不少东西了，你用WebStorm创建了项目、在项目中创建了Html页面、了解了HTML标签的缩进、还在浏览器中查看了这个页面，看上去没有什么技术含量，可这些都是你以后会经常碰到的事情，我希望你能把今天学的这点东西好好练习一下，另外下午有时间把CSS看一下，不用记住CSS每个属性怎么写，你了解一下CSS能控制什么样式，可以用在页面中什么地方就可以了。”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！
网友评论