素心阁

给🎼✌ 望✌ 🐱✌ 🦈皇 🧊✌ 涵✌ 童🔪 ⭐✌ 赵✌ 红✌ 折✌ 🥬✌ 等7️⃣他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中的各类标签，开启我们的实战之旅。
其实我们要学的东西真的很简单，能够耐下心来看到这里，你已经成功了一半啦！打起精神，我们继续前进吧💪

闲嚼半曲赠何人？软吁熬得懒灯尽。
宜共杯盏无共镜，易知眉眼难知心。
水墨流风吹醉醒，金石凝霭荡波平。
饮泪贪欢扮酩酊，陈霜旧雪沾袖襟。

朗朗乾坤云作镜，纷纷烟雨众成林。
一场闹剧一出景，几般生意几门心。
萍水阡陌无义信，鱼龙江湖有明清？
莫笑孔孟绝踪影，谁云老庄欲安宁！

湖河愿治终有净，血骨欲饮独无清。
金峰玉海千重岭，凝霜雾月百丈冰。
痴云足托周君鼎，疑烟不显秦王镜。
世间万难俱有解，一难无解在人心。

一分古气居灵隐，百般禅机在深林。
飞来奇峰非仙岭，请去佛缘须素心。
空舟不渡盈囊意，净莲难采浊世音。
莫使人心对明镜，明镜无处问凡情。

山雷日海风炉铁，泥霜雾月骨泪尘。
五四烟炬今尚在，不见当年传火人。

仙桥难度凡尘羽，神鸾不解人间趣。问仙君共饮陈浆甘醴否，却闻说羽化未肯溺麸曲。烟波浪荡花朝久，不似云间逍遥游，淡千秋。休与君论人世好，但听君言君何求。
君欲人目乎，嫣妍艳媚何其多！多多到底是七色。香晖染春岸，落花压秋波。锦簇攀枝软，枝枝低，枝枝折，枝枝破，破红流去黄泥抹。瘦绿浅草促须擢，无使与花将地夺，九州不阔。
君欲人耳乎，听钟听鼓听竽瑟？金阶宝殿乐班厚，泥墙烂瓦衣衾薄。流水琴师息香火，绝弦知音难再得。金风徒愿颂功果，世音莫敢言人过。天赐良喉削葱指，曾不若，悲鸟歌。
君欲人舌乎，油盐酱醋有百味，更添腥膻弄唇舌，缠绵难舍。谁曾知，尝尽百味，终不过，苦辣酸咸，更无多。羊羹玉屑好下酒，羊骨刮尽饥民腹，孰得脱！
佳酿万钱，一杯忘本，一杯忘义，酒壶人间。玉液豪欢鞍马后，血骨恨饮乱沙前。仙君岂曾愿酩酊，毒酒一滴肝肠煎。造化灵芝非易取，人成丹铁独难咽。纵刀自把万端剪，飞天辞作羽化仙。

但敢割长袖，莫能酾毒酒。
刀俎非我手，不必悲鱼肉。

冷炙虽烹不烂，热肠未断先寒。苦辣酸咸都愈淡，遑论泥炭腥膻。
腹中粗食白饭，俱是他人心肝。襟怀贱卖换铜板，沽取半世苟安。