公众号排版进阶-WEB技术1引子：拿盒子画画的艺术
1. 什么是WEB技术
WEB技术，浅显来说，就是做网站的技术。
听着吓人，其实呢，我们只需要学习它的冰山一角就可以了，其他的部分都跟我们没什么关系。
具体来说，我们学习的是HTML5和CSS3的一小部分✅️
为什么我们要学习WEB技术？
很简单，因为我们做的公众号图文本质上就是网站💻
在图文编辑器中打开HTML功能，可以看到，所有东西本质上其实都是HTML。
因此，只要学会了这项技术，我们就可以做出各种各样的效果😍
可以修改、微调素材库中其他人做的组件，也可以按照自己的想法，定制出自己的组件😋
2. 本系列教程包括哪些内容
教程分为14个部分：
有同学可能觉得，这也太多了，不想学了怎么办。其实，我们只会涉及到公众号图文排版用得上的内容，体量不会太大👌
不过也正因如此，教程中的所有结论都主要适用于公众号图文排版，不能完全推广到网站制作等领域。
另外，我们的教程大多是独立的，可以跳着学，也可以用到什么学什么，并不需要一次全部学完。
不过教程的前四篇属于基础，建议学一下，没完全学会的话也没关系，实践中自然就会了。
3. 如何学习这项技术
学习技术和念书有很大的差别。念书是考什么学什么，考的东西都写在课本上，全学完了再去考；学习技术是用什么学什么，内容很广，细挖的话能挖很深，不可能全都学会，也不可能提前知道哪些知识会用到。
因此，任何教程都只是提纲挈领的“目录”，要想学好这项技术，一定要学会“查字典”。查搜索引擎、看手册、问AI、阅读前人的博客……离开了这些，我们什么也学不会。
推荐三个实用的参考网站：
MDN手册：https://developer.mozilla.org/zh-CN/docs/Web
W3school：https://www.w3school.com.cn
菜鸟教程：https://www.runoob.com/html/html-css.html
再次强调，这些东西属于“字典”，属于参考资料，其中的大部分内容我们是用不上的，千万不能胡子眉毛一把抓，把里面的内容当课本啃，而是应当看菜吃饭，量体裁衣。
4. 初识HTML与Style
4.1 HTML
HTML，全称HyperText Markup Language，即超文本标记语言。
超文本，其实就是“点一下就能跳转到别的地方”的链接，也就是这玩意⬇️
超文本根本不需要我们自己做，公众号平台会帮我们做好。所以，我们可以直接把HT划掉，只学ML就好啦✌
那么，ML，标记语言，又是什么东西呢？是英语俄语西班牙语那种吗？是Python Java C那种吗？是不是要学很多东西呀😨
其实都不是，不要被它的名字吓到啦。标记，顾名思义，就是贴标签。
只要给我们的文字贴上标签，浏览器就能知道我们想要什么效果。
但是我们手里只有键盘，没有标签，我们要如何用键盘表示标签呢？🤔
有同学说，很简单呀，我们在需要贴标签的地方，标注起止位置，不就可以了吗：
看上去很合理，但这种方案存在歧义😵
我们无从知晓，“标签开始”“标签结束”究竟是标签位置的标志，还是标签内正文的一部分。
解决起来很简单😋只要用特殊的符号，包裹住我们的标志，就不会有歧义了。
被尖括号包裹的部分，就是标签开始和结束的标志；没有尖括号的部分，就原样显示。
非常清晰，再也不会弄混了！🫡
为了提高效率，我们可以使用英文，再改用特殊符号 “/” 来区分开始和结束👍
🍾恭喜你！发明了标记语言！
4.2 CSS
CSS，全称Cascading Style Sheets，即层叠样式表。
别慌，我们不用学层叠，也不用学表，只需要学样式就好啦😄是不是简单多了？
我们现在已经学会了怎么写标签了，可是我们的标签还没有样式，相当于一个空白标签，贴与不贴毫无区别。
那么，我们要怎么把样式写进标签里呢？
很简单，照猫画虎就好啦。从最简单的方案开始，用英文引号划定边界，再把中文改成英文：
当当当当！完工啦🌶️
4.3 实际写出来长什么样？
这是攻，这是防，这是苇名弦一郎。
这是乘，这是除，这是费马大定理。
现在我们已经学会了HTML和Style的书写方法。
芜湖，结课！马上开始实战吧：
这叽里咕噜说的啥呀😵💫俺都看花眼了，现在退课还来得及吗？
哈哈，看来我们还有不少东西要学呢。
不过大家也不要被这一团代码吓到了。其实，我们的图文编辑器能够帮我们完成大部分工作，并不需要我们一个字一个字手敲。
我们要做的仅仅是一些微调工作，大部分时候只需要读得懂即可。
4.4 拿盒子画画 为啥一直在讲标签
很简单：标签就是盒子 盒子就是标签！
比方说一个这样的组件，有四张照片，右上角和左下角还有两个直角形状的线条装饰，它是如何完成的呢？
首先，我们贴一个巨大的标签，把这六张图片包装到一起。
然后我们在左下角和右上角贴上我们的线条装饰。
最后依次把我们的四张照片贴上去，就完工啦。
大盒子装着小盒子，小盒子装着文字或图片，这就是HTML标签的结构。是不是非常清晰呢？
引子的内容到这里就结束啦。在这篇教程中，我们对于后面要学习的内容有了简单模糊的认识，感受了HTML和Style大概的书写方式。
下一篇教程 《标签：抄起盒子搭建一切》，我们将具体学习HTML中的各类标签，开启我们的实战之旅。
其实我们要学的东西真的很简单，能够耐下心来看到这里，你已经成功了一半啦！打起精神，我们继续前进吧💪