上个月我表弟突然给我打电话，说想学H5网页开发，问我从哪儿下手。他原话是这么说的：“哥，我看网上教程一堆，越看越懵，什么标签、什么盒子模型，我连从哪打开编辑器都不知道。”说实话我当时就笑了，因为我自己刚开始那会儿也这样，打开编辑器盯着空白页面发了十分钟呆，完全不知道第一行该敲什么。
所以今天咱们不聊那些虚的，就说说一个纯新手入门H5网页开发，到底该先把哪几个基础概念啃下来。这几个概念你要是没搞明白，后面学再多花里胡哨的效果都是白搭。
标签和元素到底有什么区别
很多人刚开始学H5网页开发的时候，把“标签”和“元素”混着叫，其实它俩还真不是一回事。标签就是你写在代码里的那个尖括号包裹的东西，比如段落标签、标题标签。元素呢，是标签加上里面的内容再加上结束标签，一整个合起来才叫元素。
我当初学的时候就没分清楚，跟人聊天说起“元素”来，人家以为我在说页面上的某个方块，结果我说的是代码里的写法，闹了不少笑话。你记住一点就行：标签是代码符号，元素是页面上实际存在的那块东西。这个区分清楚了，后面看文档才不会晕。
盒子模型不是让你画盒子，是让你理解空间分配
说到盒子模型，我得多唠叨两句。很多人一听这名字以为跟画图有关，其实它讲的是页面上每个元素占多大地方、边距怎么算。你就把页面上每个元素想象成一个快递箱子，箱子本身有大小，箱子里面的东西和箱子壁之间有间隙，箱子外面可能还垫着泡沫。
快递箱子这个比喻是我自己瞎琢磨的，但我觉得挺管用。你写H5网页开发的时候调间距调不对，十有八九就是盒子模型没吃透。我见过一个朋友调一个按钮的位置，调了一下午没对齐，后来发现是内边距和外边距搞混了。这种坑你提前搞明白概念就能绕过去。
提示：盒子模型这个概念建议你花二十分钟专门搞懂，它贯穿你写页面的每一天。别急着往下学浮动和定位，先把这个整明白。
文档流决定了元素的默认排队方式
文档流这个词听着挺唬人，其实说白了就是元素在页面上默认怎么排队。块级元素从上往下堆，行内元素从左往右排。你写H5网页开发的时候，如果没给元素设置特殊的定位方式，它们就老老实实按这个规矩来。
我刚开始有个毛病，看到一个元素位置不对就想加定位属性，结果越加越乱。后来一位前辈跟我说，你先看看这玩意儿在文档流里本来该在哪，大部分情况下调调边距就解决了，不用动不动就脱离文档流。这话我记到现在，也送给你。
选择器是你和页面沟通的方式
选择器这个东西，说简单也简单，说绕也绕。它的作用就是告诉浏览器：我要给哪个元素加样式。你用类选择器、用编号选择器、用标签选择器，效果和用法都不一样。
关于选择器权重的问题，我其实到现在也不是每次都能一眼看准。有时候两个样式冲突了，我就在脑子里过一遍哪个权重高，偶尔还会翻车。但这不影响你先把基础写法用熟，权重的事用多了自然有感觉。
常见问题：学H5网页开发需要先学编程语言吗？
不用的。入门阶段你接触的是超文本标记语言和样式表，它们不是传统意义上的编程语言，更像是描述性的写法。先把页面结构和样式搞明白，后面再考虑要不要深入学脚本语言。
动手写一个最简单的页面比看十篇教程都强
概念说得再多，不动手都是空的。你就打开电脑记事本，写一个标题、一个段落、一张图片，保存成网页文件，双击打开看看效果。这个过程走一遍，上面说的标签、元素、文档流这些概念马上就活了。
我表弟后来就按我说的做了这个练习，完事儿给我发了条消息说：“哥，原来就这么回事啊。”你看，有时候拦住你的不是难度，是你总觉得得先准备齐全才能动手。
至于后面要不要学响应式布局、要不要碰框架，那是下一步的事。你现在要做的就是把这几块基石踩稳了，后面添砖加瓦才不会塌。要是你在入门路上遇到什么卡壳的地方，欢迎来天泰星资讯翻翻其他文章，或者直接留言跟我唠唠。