这里是目录，每组内容都是可以展开的
希望大家读完每一篇都点一个赞，让我知道你在看，这样我会更有动力更新的哦~
如果可以再奢求一点，请我喝杯咖啡吧~ ，让老鼠更努力的用爱发电 老鼠爱发电
4 Likes
0000
我又来了，又来聊编程了。
现在一半儿的人在想：“啊，编程什么的，好难，好复杂，关掉关掉！”
唔，好像我应该挽留一下的，但是……我这个人不太会讲话，就随缘吧。毕竟上学的时候，老师留住了我们的肉身，但我们的思想却依然在各自飞翔，都懂的。
好了，他们离开了，你少了一半的竞争者，这么想想，嘴角不禁开始上扬。
古人云：“行百里者半九十”，现代都是快节奏生活，所以吧，志百里者止于立志，就是 Flag 什么的，连立一下都懒得立。
啊，这个口气好像班主任！但是这种苦口婆心语重心长地老师，我们并不喜欢，还是那种——“班会啊，我们用这个时间讲故事吧”的老师最可爱了！老鼠也要做一只可爱的小老鼠，所以，我们开始聊天吧。
聊什么呢，得起个话题啊，但是，但是前面我说了的，我真的不太会说话。就看见什么讲什么好了。你看这个说单口可难了，没捧哏的托着点，真不好说啊。
我还是很喜欢像这样写东西的，就有聊天的感觉。遇到喜欢的话题，也可能文思泉涌，劈里啪啦的打出来，畅快！不过，你知道的，我们写文档的时候常常并不是这么顺畅的。因为免不了要弄一些格式，这里是个标题，那里罗列几项啥的，格式排版可烦了，要拿起鼠标点点点。Word 我也不怎么会用，简单的格式当然会设置，但是不熟悉嘛，找我需要的功能时间会长一点。你看这么一打断，那种流畅的感觉就没了。
这时候我们就得开动脑筋，让聪明的大脑以每小时半转儿的速度高速运转。诶，要是我在打字的时候先简单的标记下，而不是去用鼠标点点点，是不是就不会有打断的感觉了？
现在假设我们输入这样的内容，大家想想这个过程是不是流畅的：
# 假设我在最开始放一个井号就是说这一行是大标题
## 两个井号就是二号标题，以此类推
为啥多空一行呢，因为这样分段比较明显，哪怕是在记事本里查看都很明显，你看你阅读这些内容的时候就会觉得层次分明的，很好读。
---
用三个短划线分隔不同的内容，就相当于水平线了。
……
好懂吧，也挺方便的，而且真的用电脑里的记事本就可以写，哪怕很老的电脑都可以很流畅。
这时候你可能在想自己要写的某些公文能不能用这种方式，好像不太好用。为什么呢？
因为公文关注的格式参数非常具体，这里必须几号字，那里必须什么颜色……
而我这里面对的场景呢？我需要说明这里是标题，那里是段落，但是标题具体长什么样我并不在意。我关心的是内容的结构，大标题，小标题，层次分明，容易阅读，我的目标达成。
“哦，那我用不上”，有人这样想着离开了。
我这样的写作场景好像很适合这种方式吧，反正我（作者）和你（读者）都不会太关心这篇文章的标题是几号文字。
或者，我要做笔记，那关心的肯定是笔记的内容，而不是这个标题格式是不是符合某个规范。
有懂行的人说了，这不就 markdown 语法嘛，这也不算编程啊，而且看十分钟教程就学会了，你这讲了一堆都是什么啊。
是什么呢？
是什么重要吗？
上面这种标记你看到了，偶尔在某个场景下大概可能会用上吧。这和我们写待办事项前面画个圈也没啥区别，做个标记嘛。
那可以总结一下吗？
- 显然我们刚才只了解了一点点的 markdown 语法，但是似乎我们可以在某些情景下利用它，不管它是什么，因为你理解这种标记的道理，然后按着这种理论可以解决一些问题。
- 它不适合所有场景，所以我们应该了解我们想要什么，和它能给我们什么。
其实就这样，学习嘛，任何知识都可能有用。我们不一定把它学的多么完整，会一点用一点是完全可能的。而理解，才是利用这些知识的关键。知道我想做什么，它能做什么，还有它这样设计的目的是什么，能帮助我们把非常有限的知识发挥出最大的价值。
就好像，锤子，砸钉子的。但没锤子就不能砸钉子吗？找块石头也不是不能用，理解为什么锤子可以把钉子砸进去，就可以找到许多替代品了。这种融会贯通很好玩的，只有一把锤子就只能砸钉子么？开啤酒瓶也可以的……
这些道理想通了，很多事情可以出乎意料的横着来，就妙趣横生。诶，乐趣就在这里了哦~
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
4 Likes
我搞实用编程，开发一些大家用得上的功能。
比较实用的，就是批量发消息，批量发短信，借助图像识别来填发票，借助表格的信息批量生产报表。
批量是学编程的一个重要目的，再也不想做重复的机械劳动了呢（懒得出奇！
1 Like
0001
上次说到了 markdown，那么这次就来聊一聊它，至于这玩意儿算不算代码，是不是编程什么的，并不重要。
为了简单，markdown 会缩写成 md，所以这个格式的文件保存时的后缀可以是 markdown 或者 md，当然，为了方便，大家一般都用 md 后缀。
而本质上，这就是一个文本文件，对，就是 txt，不过是改了个后缀而已。
在格式上，它关注的是“是什么”而不在乎“长什么样”。
用电脑的记事本书写体验当然不太好，其实有很多编辑器的。我一般用 Typora，但这个软件目前收费了，要用它的旧版本才免费，不过即便旧版本，也是一流体验。或者用 VS Code，这个后面我们还会用的，所以后面再讲它。
不过现在嘛，找个在线编辑器先用用就好。比如：
- Cmd Markdown Cmd Markdown 编辑阅读器 - 作业部落出品
- MdEditor https://md.mzr.me/
- Arya https://markdown.lovejade.cn/
- MaHua http://mahua.jser.me/
我就随便搜的，你看哪个顺眼用哪个，等觉得 markdown 适合你的时候再找适合自己的编辑器就好。
标题
上次说过了，前面写井号嘛，不过要注意井号后面最好有一个空格，这样不容易出错。
Markdown 的标记分很多版本，所以会有许多细微的区别，这里就讲讲最简单最基础的，几分钟就学会了。不过以后看到其他语法也别奇怪就是了。
比如有的版本需要在前后都写上井号才行：
# 前后都有井号 #
也有在下一行写三个等号就是大标题，写三个减号就是二号标题的：
这是大标题
===
这是二号标题
---
段落
两个回车表示划分段落，如果只有一个回车，那什么都不会发生。当然啦，有些编辑器会很人性化的回车就划分段落，但是真正切换到代码，还是写了两个回车的。
水平线
某一行写三个或更多减号，表示水平线，一般都是写三个。
这时候就结合上面两个知识了。
下一行紧跟着三个减号，那这行是二号标题
---
空一行才是三个减号，那这一行是个段落，三个减号变成水平线
---
就是一点小细节，怕你们一不小心忘加空行然后迷惑的获得一个标题。
加粗
前面两个星号，后面两个星号，表示对中间的内容加粗。
对后面的文字加粗**哎呀，我被加粗了呢**
因为开始和结束都是一样的，所以一段内容里有多处加粗就会显得混乱。推荐前后加上一个空格：
注意空格在哪里（空格） **这里加粗** （空格）明白了吗？
星号也可以换成下划线，反正我习惯用星号，这里不用记，一次记太多就乱了，我就顺口一说，你知道有多种写法就好。
斜体
要是前后各一个星号，就是斜体。中国人一般也不太爱用斜体。
删除线
前后各两个波浪符（注意是英文标点），就是把中间的文字划掉。
~~大~~ 小老鼠十分可爱！
依然推荐前后加空格，当然开头结尾的空格就不必了。
链接
[用来显示的文字](链接到的地址)
[这篇教程的地址](https://meta.appinn.net/t/topic/30554)
前面一个方括号，后面一个圆括号，就这。
图片
比链接多个感叹号（记得：英文标点）：
列表
每一条前面一个星号或者减号，然后空格，两项之间一个回车：
- 第一项
- 第二项
- 第三项
有序列表
就是前面有序号了：
1. 这是第一项
2. 这是第二项
3. 这是第三项
注意数字后面的必须是英文句号，然后别丢了空格。
列表嵌套
啥是嵌套？管它呢，写出来就明白了。前面的空白用空格填就行，一次两个或者四个空格（两个或者四个都行，但在同一片文档里保持一致）。
- 文具
- 笔
- 铅笔
- 圆珠笔
- 钢笔
- 橡皮
- 尺子
- 食物
- 西红柿
- 洋葱
- 土豆
就，很直观的。
引用
每一行前面加一个 > 和空格就对了：
这让我不禁想到了一句名言：
> 啊，我真可爱啊！
>
> ——大老鼠
写了不少了，还有啥，不管了，一口吃不成个胖子，会这么多可以玩一会儿了。我有木有告诉你们，不用记啊！
你打开我给的那些在线编辑器，照着尝试一下就行了。这种东西，你用的上的话，用用就记住了；用不上的话，记住转眼也就忘了。
当然忘了也没啥，理解这种标记的思想就好，这个还是可能在很多地方用到的。
程序员一般会用 markdown 写文档，因为这很方便，而且也很合适。
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
4 Likes
0002
如果有跟着思考，可能会有一个疑问：
你说关注“是什么”而不是“长什么样”，这可以理解。但是像加粗啊，斜体啊，删除线啊，这些难道不是长什么样么？
这是一个很好的问题，虽然弄懂了这个问题可能也没什么大用，但是理解和不理解还是存在本质区别的，这种区别只能自己在学习的过程中不断体会。
加粗，斜体，删除线，确实都是长什么样，专业点叫做样式。
但这并不矛盾。因为我们前面学习的那些标记表达的并不是这个意思，只是为了方便大家理解，我们说 **这是加粗**。而实际上，它表达的是对标记内容的强调，对，重点是强调，至于怎么去强调，并不关心。当然，一般在文字上，我们会用加粗这种突出显示的方法来强调。但如果不是加粗，而是红色文字，显然也十分合理。
斜体的本质也不是斜体，只是表示需要区别于正文的内容，你看，和正文有区别，但是又不需要突出，是不是就斜体比较方便。如果不是斜体，而是蓝色文字，当然也没有毛病。
删除线怎么解释呢。删除就是删除，但划掉只是表现形式，其实中间这一条叫做贯穿线，是一种文字的装饰线，同样的还有下划线（多见于链接）和上划线（这个很少见）。你看，样式本身并没有删除的含义，只是我们约定俗成的认知罢了。
这种侧重描述这是什么的思想就比较接近我们写代码时的语义化思维，我们的首要目的是表达清楚这是什么，而不是为了让它表现成什么样子。
毕竟，如果我们直接阅读代码，一看就知道这里是标题，那里是强调，这就很好读。又比如，我找你借东西，描述的特别细致精确，我要一个一头大一头小，一头沉一头轻，一头铁的一头木头……就不如直接说借我一把锤子这种表达更明确。
好，理解了优先表达是什么，然后再关注长什么样的思想。
现在我们来解决一些可能产生歧义的问题。
我用**这句话**向**大家**展示前后标记完全**一样**时导致**难以阅读**的情况。
这种，你能一眼看出强调的是哪些词吗？很难，我们得从最开始，一对儿一对儿的才能理清。所以前面我说加空格进行区分，一方面是让编辑器不容易搞错，一方面也是我们自己好读。但这种不够稳定的方式，还是不太适合放在各种场景下去使用。
那我们换一种方式，强调的英文是什么？ strong，就大声说的意思吧（我猜的）。现在我们规定 <strong> 表示从这里开始强调，</strong> 表示到这里结束强调。再试试：
我用<strong>这句话</strong>向<strong>大家</strong>展示前后标记完全<strong>一样</strong>时导致<strong>难以阅读</strong>的情况。
现在是不是随便看哪个位置都可以快速区分开始和结束的位置了。这就是 HTML 了。
这样一个尖括号里面写上单词的形式叫做标签，就是用来对内容进行标记的。
- 开始的叫做开始标签，像：
<strong>这样； - 结束的叫做结束标签，像：
</strong>这样，就是前面多了个斜线。
好懂吧？里面的单词说的是这个标签标记的内容是什么，诶，这就是语义化了。
理解了这些，你再去看 HTML 代码就可以大概理解了。我知道还是看不懂，毕竟里面还有好些简写，不过反正都是标记嘛，这块儿是什么，那块儿是什么，这两块儿是一样的玩意儿……这些你还是能看明白的。
别怕，代码不咬人，你看它两眼，再看它两眼，说不定就看明白点了呢。
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
3 Likes
0003
诶，现在我们敢炸着胆子去看代码了，虽然还是不懂吧，但不害怕就是进步呀！
但我们每天看的网页，它也不是代码这样呀！
你以为浏览器就是上网的，而其实浏览器还做了许多你不知道的工作。就比如它拿到了网页代码，但你不爱看密密麻麻的代码呀，于是它就耐心的向你解释这些代码，把网页渲染成你爱看的样子。
反正把网页代码变成你日常看到的样子，这件事情是浏览器在做的。
好，现在浏览器去读代码，这里是标题，那里是段落，那这俩东西肯定长得不一样吧，要是长得一样，那解释了不等于没解释么。
HTML 关注的是是什么，而 CSS 关注的是长什么样，这里开始认识另一种语言了，也开始接触“结构样式分离”的思想了哦。
那要是没有 CSS ，或者 CSS 里面没说标题该长啥样呢？对，咱就是为难浏览器。
浏览器说我早有准备，并从口袋里摸出一张小字条，上面写了各种东西应该长成什么样子。这就是默认样式，要是没有规定，那就按着默认的样子去渲染这些元素。
但是不同浏览器口袋里的小抄不太一样，所以同样的元素，在不同的浏览器里可能表现的不太一样。这就好像同样是西红柿炒鸡蛋，不同人做出来的还是千差万别的。
然后嘞，我们再丰富一下对 HTML 的认识，一对儿标签，包含里面被标记的内容，算作一个元素，很好理解，这个标题，就是个元素，许多网页元素组成了这个网页。元素里面还可以有别的元素，就是嵌套，大箱子里装小盒子的意思。（你就大概有个印象就好，这些我们后面会反复用，也就是反复演示）
然后，有时候我们并不需要标记一段儿内容，只是标记一个位置，这里是一条水平线，不是说哪几个字给我变成水平线。这时候就没必要用一对儿标签了，就只用一个开始标签就好了，像这样 <hr>。也有人说只用开始标签这个在逻辑上有点乱，不如认为是把开始标签和结束标签合二为一，写成这样 <hr />（里面的空格写不写都行）。都行，反正你都认识就行，这也不是啥复杂问题。这样一个标签就是一个元素了。
还有问题，有时候单纯用标签去表示可能表达不清楚，我说这里放一张图片：<img /> ，这很好理解，在这个位置放图片，那什么图片呢？起码得把图片的地址说清楚吧？所以我们要在标签中加入属性来做进一步的描述。
<img src="https://fakeimg.pl/350x200/?text=Hello" />
src 这个属性说的就是引用的地址，地址是什么呢，就是等号后面的部分。为了说明后面这部分是一个整体，所以后面要用引号包裹。当然，如果内容是纯数字，是可以省略引号的。
一个元素，可以没有任何属性，也可以有多个属性。
现在再去看 HTML 代码是不是觉得有能多看懂一些的感觉？虽然不知道它是啥，但能理清它们的结构了。
其实 HTML 的核心你已经学会了，只是还没认识它们谁是做什么的而已。
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
2 Likes
懒是推动科技技术发展进步的重要推动力~ 
“懒” 从另一个角度讲，就是 “高效”~
毕竟学一次以后都能抄近路，就很划算，很……节能！
0004
现在的问题是什么，我们掌握了方法，但是没有任何的经验。看懂了代码的结构，但不了解每一个单词代表的含义。
啊，打赌，老鼠要骗大家背单词了，快跑快跑！
我要是说不用背单词你肯定不相信，但要是说你一个单词都记不住你肯定也不服气。咱们折中一下，就背一百个，你拿小本子认真记着数，超过一百个你就咬我！但是像 a、if 这种非常基础非常简单的词汇你应该是已经掌握了的，所以不可以计数哦~
（但是，为什么还是觉得你想跑，能不能不用脚跟朝着我？
其实我也没想让你背单词的，只是看着看着你大概就记住了，这可就怪不得我了。
这本来就不是一个一本正经的编程教程，并没有教会你什么的目标。学会什么的可能比较复杂，咱们放松点，就试试能不能轻松的做到能看懂。
h1~h6 是六个标题，p 是段落，a 是链接，img 是图片这个上次说了。好了，好了，就这么多吧，说多了你就跑了，
然后就有好学的小可爱不干了——你少讲点没关系，但最常用的不讲，这就说不过去了，我打开一个网页的源码，看见一大堆 div 和 span，这俩是啥？！
这俩没意义，前面我们说语义化嘛，每个标签都是在描述这是个什么，上面举例也是说这是什么（比如：p 是段落）。但是这俩标签没这方面的意义，诶，那它俩有啥用？还用的这么多。
我们在排版的时候，会有这样的想法，这几个放这边，那几个放那边，这算分组吧，但是没有标签来表示分组这样的意义，那用 div 和 span 就行了。当然还有一些其他的情况，差不多就是当我们需要进行标记，但又没有其他合适的标签可用的时候，就用它俩。
为什么是两个呢？因为它们有一个重要属性是不同的，但其实可以修改，不过用两个标签区分一下比较好懂。这些晚点再说，还没学到那轱辘呢。
我们说了一些 HTML，提到了 CSS，但还没说 CSS 长什么样呢，咱们认识一下它吧：
p {
color: red;
}
好像都认识，但是好像不太懂。
首先 p 这里是选择器，是说在描述哪些元素。哪些呢？p 啊，刚说了，就是段落嘛~标准点的解释是：页面中所有标签为 p 的元素。诶，注意哦，所有的，这可厉害了，这一句管一大片。
大括号里就是具体的描述了，可以写很多条样式，这里只有一条，颜色，是红色。就是说文字是红色的，嗯，虽然说是颜色，其实特指文字的颜色。
如果你的英文水平能够达到初中毕业时及格的水平，并且觉得自己胆子还可以，就是不懂的也敢瞪它两眼，那找个网页，右键——检查（审查，检查元素……反正什么什么类似的名称），进去看吧。只要你放轻松，你会发现自己好像真的能看懂点什么……
嘿，这才到第五篇，你都能看懂个百分之……十的样子。所以，不考虑再往下读五篇么？！
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
2 Likes
0005
好诶，我们可以看懂 HTML 和 CSS 了，那怎么用它们呢？
弄个文本文档，在里面写，然后把文件名改成 index.html，这就是 HTML 文档，不过这样挺麻烦的，还有一些细节需要注意，可是我讲多了你们又不爱看。
那就弄个好用的工具吧，比如安装 VS Code（ https://code.visualstudio.com/ ），下载，安装，一路下一步就行。
想办法在里面新建一个文档，什么，软件是英文的？！先不管它，这不重要，能打字就行，Ctrl+N 应该可以在里面创建一个新的文档。
然后我们看编辑器的右下角，底部有一行小字，你找“纯文本”或者“Plain Text”，点击，然后编辑器上面就弹出一大溜东西可供选择，直接在上面输入 HTML 进行筛选，这样就剩下一项了，选它！
这是干啥嘞？是告诉编辑器，我要写的这个文件是 HTML，你好好给我打辅助哦。
然后那位就说啦，刚才新建了文件之后，第一行就显示这“选择编程语言”，我点这里行不行？行啊，我这不是额外告诉你一个更通用的方法嘛（掩饰
如果你两个都没找到，那保存文件，保存文件会不会？Ctrl+S 这样，就能打开保存对话框了，存在一个你能找得到的地方，文件名就叫 index.html。编辑器一看，嘿，我知道了，这是个 HTML 文档，就照这么去打辅助了！（保存好之后看右下角，会自己变化的哦。
语言设置好了，我们开始写了哦，先沐浴更衣，说三遍老鼠最帅，然后输入一个英文感叹号（表示对我最帅这件事情的充分肯定）。
如果你上面做的都没错，那么现在应该会在感叹号后面出现两条提示，其中第一条的最前面就是一个感叹号，我们就用这个，而且默认选择的也是第一个，这时候按一下 Tab 或者 Enter 确认选用。
你就会惊讶的看见编辑器自己写了一大堆，这是一个基础的 HTML5 页面的模板，嘿，HTML5 哦。
两个按键，写一大堆，虽然我们还不懂，但是这个表演给外行看就……很唬人的！
然后把你学到的那些段落啊，标题啊，写在 body 这对儿标签之间，因为这里面才是网页的主体部分哦~
快去试试吧！最好找地方炫耀一下（满足
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
2 Likes
0006
你尝试着写了个标题，写了几个段落（我知道你其实啥都没做，正经人谁跟着教程操作啊……
然后有一个问题：CSS 放哪里，也想改变文字颜色试试看。
这个 CSS 描述的是元素的样式，对，样式，那就放在 style 标签里面：
<style>
p {
color: red;
}
</style>
那这些样式又放在哪里呢，它们不是直接显示的吧，只是辅助的，那就不放在 body 里，而是放在 head 里面。当然了，实际情况很复杂，所以 style 标签可以放在任何地方，这里只是先说一般的，规范的。
然后你看到 head 里面本身就有一些东西，并感到好奇，但现在你需要了解的也只有三个地方：
<html lang="en">这里在说网页语言，是说用的中文还是英语这种语言。如果是英文，浏览器就该问你要不要进行翻译呀？把 en 改成 zh-CN 就是中文，zh 也行。（诶，这条没在 head 里？！不要在意，顺手讲了<meta charset="UTF-8">这里设置的是网页编码，编码是啥？不重要。你就记住，这里的 UTF-8 在状态栏中也有显示就不会出现乱码。一般这两者都是一致的，也不用管。<title>这里是网页标题</title>，一看就懂，那么清楚的英文单词写着呢。这个标题用来显示在搜索引擎里呀，浏览器的标签上啊，试一下就懂了嘛。
就这就这，现在多认识点标签，属性，样式，差不多就可以看懂网页代码了。而且好多是完整的单词，大概猜猜就差不多，都不用刻意学习。
也该发现了，编辑器里文字五颜六色，好像还蛮好读的，这是代码高亮，就是用来辅助阅读的。还有我写的代码和编辑器自己生成的代码有些行前面有空白，这是缩进，用来表现层级的，也是为了好读。所以代码并不像一些人想象的那样一片密密麻麻的文字乎脸上。
如果你有兴趣，可以去 MDN（ MDN Web Docs ）深入阅读相关文档，别怕，大部分内容都有中文，但很推荐中英对照阅读。你会找到各种标签的功能和用法，也有各种样式的设定。
如果（虽然不可能）你刚才去看了，你很可能会抱怨，确实是中文，但就是看不懂。很正常，毫无压力的去扫读，看几个自己能明白的描述就好了。要是你现在一下子就读的个如饥似渴，我这教程可以完结了，那……就没有咖啡喝了呀（其实现在也没有……
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
2 Likes
0007
你开始意识到了问题——这要学的内容挺多的呀，老鼠骗人入坑！
哎呀呀，被你们发现了呢！
不过嘛 MDN 里的内容我可能也就读了 1/5，至于掌握……也许只有二十分之一吧。不过我们也都没把字典读完过吧？不耽误我们读书写字说话吹牛的。
而且，不会写字但可以阅读也是可能的吧。就比如我读繁体字基本没啥问题，但让我写，也许能写出一两个吧。
首先，写网页真的不难，你现在多认识几个标签和属性就可以的。真正复杂的是排版、动画、表单等等部分，也不是每个人必须会的。
然后，写网页干嘛呀，有这个需求的人其实也不太多吧。我真的就是带你们认识一下呀，认识了以后好办事儿的（你看我真诚地大眼睛！花椒那么大呢~
诶 ，说到认识，那我找某个元素办事儿的时候，怎么找它呢？对，我们聊 CSS 的时候说了一个选择器的概念，当时用的是标签选择器，p 就代表所有标签为 p 的元素。
这时候就有局限性了，你喊：那个人你过来一下。大家一想，我是人啊，我不过去岂不是否认了这一点，所以我得过去，然后周围的人都过来了。你看，“人”这个范围太广了，同样，标签的范围常常也太广了，不是很好用。
你立刻就能想到：给元素起个名！但咱们管理元素，重在管理，所以编个号就行，就是可以给元素设定一个 id，你当它的身份证号就行。身份证号可以重复吗？当然不能，所以页面中元素们拥有的 id 也不应该重复。
不过嘛，事情也有例外，而且网页代码许多时候还是挺随意的，所以就算 id 重复了也不会出错。我是说虽然不应该如此，但是这种情况还是可能存在，你得知道，但自己不要这样去做。
这很精准，毕竟理论上写对 id，就能准确定位到这个元素。但，如果我想把这五个标题，那十个段落都设置为红色文字怎么办？你会发现上面两种方法都不太好弄。这时候我们就要对元素进行归类。给元素设置一个 class 属性，就是元素的类。
同一类元素，显然不是只能有一个，可以是很多个，而且不一定是同种元素，就像刚才的例子，文字是红色的元素，这就是一类。
看一下代码：
<h1 id="title" class="red-text">这是个标题呀</h1>
<p class="red-text">这是个段落</p>
无论是 id 还是 class 都不要用纯数字做名称，容易产生误会。然后对应的到 CSS 里面这么写：
#title {
……
}
.red-text {
color: red;
}
一看就懂，前面写井号的对应 id，前面是个英文句号的是 class。
下一次我们来看看这玩意儿有啥用。
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
1 Like
0008
我们简单的学会了选择元素，今天来用它。
打开浏览器，随便一个网页，按下 F12，或者 Ctrl+Alt+I，哪个管用用哪个，都不管用就右键——检查（或者类似名称）。
反正出现了一个好多代码的东西，不要害怕，看上面有一些标签可以切换，我们切换到 Console（控制台）。如果里面由一堆黄的红的文字，不看它，找一个禁止符的按钮，点一下，世界清净了。
然后在里面输入：doc，开始出现提示，我们要输入 document，注意是小写的，用方向键选中，按一下 Tab 键，好了，单词上去了，这叫自动补全，好玩吧，懒惰的程序员怎么可能背单词，2333，我们主要是大概认识它们，记得住前一两个字母。
然后输入如下内容：
document.querySelector('title').innerText
回车，注意哦，在这里面回车就是运行输入的代码，而换行要用 Shift+Enter。
出来了一些文字，好巧哦，正好是这个网页的标题。那么解释一下：
document的意思是文档，指的就是当前这个网页querySelector在前面这个对象里进行选择- 后面小括号里是选择器，这个你认识了，标签选择器，注意要用引号，单引号双引号都可以的
- 这样就找到并选择了标题元素，我们再获取这个元素的 innerText，就是里面的文字，运行后这些文字被输出出来了。
这有什么用呢？这个标题虽然是明确的显示出来的，但是没法直接复制，如果你需要，那这是一个方法。当然，当然，你直接在代码里找也没啥问题。
还有一些网站，不让你复制，诶，可气不，文字就在那里，他不让你复制。那你就可以用这种方式问问元素，你里面的文字都是啥？然后在控制台里复制，小意思啦~
这里一个细节，如果选择器对应多个元素，用 querySelector 只选中其中第一个。更复杂的情况我们以后再慢慢了解。
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
1 Like
0009
上一节我们用的呢，就是 JavaScript，简称 JS。我们举例用的算是一个比较“高级”的用法了，不过并不难，而且还可能有点实用。
现在我们认识了 HTML、CSS、JavaScript，当然只是初步印象啦。但这已经有助于我们去确立一些学习方向了。
如果你想做出漂亮的页面，肯定要先把 HTML 和 CSS 学好，然后 JS 也是必要的，因为一些动态效果，以及响应式的东西（先理解为网页会很智能的应对各种情况变化）都需要 JS 进行控制。
如果是做一些小工具，当然就首先要学会用 JS 实现功能。具体的功能如果和网页无关，HTML 和 CSS 就是选学的，即便用到，大概现在的水平也能应付。
但如果是和网页相关的小工具，比如提取网页中的数据，对网页进行修改强化等，在掌握 JS 的同时，你也得了解 HTML 和 CSS，不然怎么选择元素，怎么获取内容，怎么修改……就无从谈起了。毕竟你和网页打交道，你总得对它有个认识和了解。就好像你作为一个销售，不一定需要能够非常熟练的使用公司的产品，但对产品的基本功能和特性总是要了解的。
那么想想自己主要的需求是什么，学习编程是想用来做些什么工作，然后以实现这些目标为前提，为此采购原料，不对，是学习相应的技能。是的，很多人会告诉你这不是一个好的学习方法，因为这样学下来很可能不系统。没错，真的会不系统，甚至导致某些基础知识的缺失，这并不好。但这种方法容易产生兴趣，并促使自己坚持学习下来，而学下来了总比半途而废要好。并且，“觉知此事须躬行”。为什么很多人即便拿到一份非常好的教程，还是学的不知所以，因为没有经验，所以不会对内容有深刻的理解。而我们先不管三七二十一的趟过一遍，当然掉了很多坑，撞了许多墙，但成功的喜悦也会是非常实在的。在这之后再去按部就班的按着文档学习，就会各种心有戚戚，哇，原来如此，难怪当时我会掉坑里；这个方法好，一句话完成了我一屏幕代码实现的功能；这个东西有用，我可以用它做这个那个……这样读起文档也是饶有兴趣的。
兴趣，这是很重要很重要的事情！有兴趣才能让学习从一而终。就像我们饿了的时候会有无限的动力去寻找吃的。
所以，在评论里说说你想利用编程做点什么呢？
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
1 Like
我現在有個需求，我想在當前html做一個button，點擊之後，下載本頁面.html。
進階需求是，把css，js，img，都打包成一個.zip下載。
我之前已經基本實現了，只是感覺不是最佳辦法。
我近日忽現靈感，應該用ajax拿到文件數據。不過我現在還沒有去試。
0010
做点什么呢，做个按钮吧，为什么是按钮呢，我不知道，反正就是玩。
第一次会很慢，把涉及的东西都捎带讲一讲，反正当聊天，不会很强的线索感。你也放轻松，别老想着一下子学会什么，咱就边走边聊~
按钮呢是一个元素，这个元素有内容，然后点击它要执行点什么动作，诶，这就比较全面，那我们先来写个按钮：
<button>这就是一个按钮</button>
完全是我们前面接触过的知识，单词也很明确，十分简单。不要觉得无聊嘛，点了没有任何反应的按钮也很好玩的：
<p>请点击下方按钮领取我的祝福，如果没有反应，说明……你笨！</p>
<button>点击这里，聪明的人会获得大大的祝福</button>
看得懂吧，稍微有点娱乐效果的，只是太简单了，而且效果也太……朴素了。如果这个界面很华丽，大概能提升那么点娱乐效果。说到这里，那位设计师朋友立刻做了一张华丽的图片，反正都是点击没反应，图片也可以！只不过鼠标放在按钮上没有变成手型标志，有点穿帮。
哪怕只会一句代码，我也要想方设法用它玩耍，要不然学这劳神子干嘛。
按钮不好看，我们怎么办？当然是给它设定样式了，对，就是写 CSS，你立刻就写出了如下代码：
<style>
button {
color: red;
}
</style>
<button>这就是一个按钮</button>
都讲过，对不对，就是组合一下嘛，搭积木一样啦。
不过这是所有按钮都这个样子，我们要精准一点，只针对这个按钮。一对一，用 id，于是：
<style>
#this-button {
color: red;
}
</style>
<button id="this-button">这就是一个按钮</button>
还是讲过的吧。不过提醒大家哦：HTML 的代码是不区分大小写的，但是 JS 是区分的。然后 HTML 里面的命名可以用短划线，就像上面这样，而且好多也是这么设定的，还有 CSS 属性名里也可以用，后面会看到的。但是 JS 里面命名就不能用，因为会被当成减号。
诶，有点绕？！那简单，你跟我学，只要是命名，我只用字母和数字，我不管它是否区分大小写，我自己严格区分大小写，然后第一位一定是字母，就基本上不会出错了。
然后老鼠眼神不好，鼠目寸光，所以咱们把按钮的文字弄大一点：
<style>
button {
color: red;
font-size: 32px;
}
</style>
<button>这就是一个按钮</button>
看 CSS 的命名里有短划线吧，这俩单词应该都认识吧，文字的尺寸，大概是吧，我英文不好，我猜的……
px 是像素，反正初学先用这个就行。默认文字一般 16px 这样，我也不知道。不过这个数值不能调的太小，一两像素都没法表现一个文字了。所以浏览器会有一个限定，小于 12px 的文字强制按照 12px 进行显示，不能再小啦。不过这个值（12px）在一些浏览器里是可以自己修改的。
这次先到这里，好像，也没讲啥新东西。
你不点个赞，我怎么知道有人看呢？
或者，请我喝杯咖啡，让老鼠更努力的用爱发电 老鼠爱发电
1 Like