【黑师音画帖小白教程】第三十讲：完结篇
第三十讲：完结篇
一个Web页的标准代码结构其实并不复杂，童鞋们在查看网页源码觉得头大，可能的原因是不了解网页的HTML代码结构。那些密密麻麻的代码，抽取出主干，无非就是如下这几行（可能存在一些细节差异，但标准结构一样）：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title>网页标题</title> </head> <body> <!-- 这里是呈现在页面中的所有代码 --> </body> </html>
各行代码的意义对做帖来说无关紧要，大家只需知道帖子代码放在何处就行。实际上如果真不知道帖子代码放在什么地方也没什么问题，因为发布帖子时你的代码安插在何处论坛程序都包办了，我们这里列出网页代码结构是想从理论层面提升自己对Web世界的认知，最终达到看山是山看水是水的境界——即看源码不再头大头疼。Web页的body标签是Web页的躯体，我们帖子的代码会和其他要呈现在页面里的其他元素的代码一样安放在body标签之内。
如果你在自己的计算机里使用文本编辑器制作帖子，那么，你应该使用类似于上面代码的HTML模板，帖子的代码放在body标签<body> ... </body> 的省略号处。你应该将帖子名作为网页标题填写在 <title>网页标题</title> 里，这样查看帖子效果时浏览器对应标签栏的标题就是你帖子的名字。假如整个帖子页面只是你的帖子代码而没有网页标准的代码结构也不会出什么大事，你的帖子代码能够照常运行，但是，浏览器会非常不高兴，例如Firefox 火狐浏览器意见很大，会在控制台报告你的网页存在怪异的现象。
热衷于做帖的童鞋，应该拥有一个趁手的代码编辑器。Windows自带的记事本不理想，它既不能代码高亮，也没有排在各行代码前的行号，它天生就不是用来写代码的——就像它的名字一样它合适用了记事；Linux系统的文本编辑器可以一用，小巧但支持代码高亮、有行号。如果你的计算机系统是Windows，则建议安装一款第三方代码编辑软件，免费软件当中，大型的有微软的 Visual Studio Code，中等个儿的有国人出品的 Notepad--，袖珍的有老外制作的 MadEdit（多语言工作界面，自动支持中文界面）；收费软件当中，国产的 EverEdit 最值得推荐，性价比高功能还特齐全，日产的 EmEditor 和 EverEdit 功能类似但价位高得离谱。这里罗列的几个软件中，MadEdit 可以到 马黑网盘 下载，放在常用软件目录里，那里还有两个特别版的 Emeditor（使用时不要升级额，另外请注意操作系统是32位的就只能使用32位版本）；Viual Studio Code过于庞大，但它确实很厉害，可以大大提升编写工程的进度；Notepad-- 是对标台独程序员的 Notepad++ 而开发的，很好用（Notepad++ 很优秀，但由于将政治倾向注入软件中，现在已被抵制了，国人几乎都不再使用）；EverEdit不注册也可以全功能使用，就是每次打开软件会弹出关于子窗口，费用不高，注册后一年中可以激活5次，相当于你可以在五台机器中使用该正版软件。还有很多可选的非常优秀的代码编辑器，免费付费的都有，这里就不一一介绍了，感兴趣的朋友可以网搜一下。
可能有的童鞋除了Windows记事本不想去使用第三方代码编辑器，那也没啥问题，又不是做不出帖子来。不过呢，记事本功能确实太弱，不利于高效地编写代码，建议只用它来做些笔记。实在不愿意安装和使用第三方代码编辑器的，可以考虑使用在线编辑器，本人开发的 pencil code 可以一用，目前共三个版本，都有行号，最新的版本还支持代码高亮，可以在 马黑整站系统 首页的右侧找到入口。网站中还提供直接对标做帖子的在线工具。这些工具（CSS doodle 支持版除外）能保存最新预览过的代码，下次相同浏览器打开它时代码还在，方便制帖作业。
不论以何种编辑器编写帖子代码，帖子的代码结构都会如下所示：
<!-- 第一部分 ：CSS代码 --> <style> /* 这里是CSS代码 ：制定HTML元素样式 */ </style> <!-- 第二部分 ：HTML代码 - 帖子核心骨架 --> <div id="tz"> ... </div> <!-- 第三部分 ：JS代码 --> <script> /* 这里是JS代码 ：动态操纵HTML元素 */ </script>
而做帖用到的知识和技巧则方方面面，本系列讲义通过前面29个章节介绍了一些常用到的知识与技能只是沧海一粟，但如果能充分掌握下来，那便是迈入了前端的门槛，日后随着坚持不懈的做帖实践可以慢慢积累经验、拓展新的知识层面——例如svg、画布canvas、JS API等等都将纳入自己的知识体系。扩展知识体系不要心急，碰上问题再去查找资料，一个一个地处理问题、一点一滴地积累知识，进步就会不等自来。
浏览器的选择也至关重要。网络发展到今天，浏览器五花八门，但归根结底，当下浏览器内核老大是谷歌维护的Chromium，就连微软的Edge 也早已投入 Chromium 的怀抱；此外，还有两个小众内核，一是火狐浏览器的 Gecko，二是苹果生态的 Webkit2。国内一众浏览器除华为新研制的浏览器外，均没有自己的内核，绝大多数都是封装了 Chromium 和已经过期的 IE Trident 内核。选用什么浏览器因人而异，但基于 Chromium 内核的浏览器是首选，且最好内核版本要靠谱，国产的建议使用百分浏览器，考虑兼容问题的可以加装一个双核浏览器（有IE内核，Chromium 版本偏低）备用，国外产品的，若使用的操作系统是win10或以上版本的建议使用 Edge；谷歌的 Chrome 浏览器也可以选择，它通用于各 Windows 版本，但因谷歌退出了中国市场，应考虑使用特殊的“国行版”；火狐（Firefox）是一款较为特别的浏览器，它致力于推崇w3c前端标准，有些方面做得很优秀，但有些方面有做的不到位；Opera过去有自己的内核，现在也转型 Chromium 内核了。不论使用哪一个浏览器，建议不能再使用IE，微软早已亲手将它亲生的IEv这个爱子宣判了死刑——微软家大业大，无视w3c标准，自创一套东东，最终积重难返，连自己都不愿意再维护了。
顺便提一下，主流浏览器都有Web源码检查机制，在打开的网页按F12，浏览器右侧或底部（位置可定制）会有 DevTools 栏目，上面的控制台（controls）选项卡对查找JS错误很有用，至少能知道自己的代码中哪一行出了问题，从而在做补救时不至于找不到方向。
本讲义就到此结束了。感谢大家的坚持与支持！
前一篇: 【黑师音画帖小白教程】第二十九讲：帖子子元素布局技巧（二）
下一篇: 没有了
评论列表 [0条]
