第15关|第15关 爱豆发微说喜欢我——HTML基础
你好啊，还是我，吴枫。大家都这么熟啦，我们就少些客套话直接按F11然后进入复习：
文章图片
1
文章图片
2 
文章图片
3
文章图片
4 
文章图片
5 
文章图片
6
文章图片
7 还记得我们上一关的进度吧？
文章图片
8 想要学习解析数据，首先要自己读懂数据，在本关卡你就要学习点关于html网页的知识。下面是关于html基础知识的大纲：
文章图片
9 我们先解释下html是什么东西，html它是一种文件格式，可以用浏览器打开。这就好比MP3文件用音乐播放器打开，MP4用视频播放器打开，txt用记事本打开……
浏览器的工作过程，简单来理解就是：浏览器从网络上接收一个html的文档，然后拿去做解析，最后呈现给你。
文章图片
10 就和word，和txt文件一样，html文件也可以被查看、编辑、修改的。就比如：新垣结衣的百科页面。
文章图片
11 你可能觉得这是P图得来的效果，但你要相信P图这种操作属于设计师。
是修改html网页源代码实现的啦，好简单的，学完这个关卡你也可以做得到。
文章图片
12 想改东西，就要先会看东西。下面我们先说下，怎样查看一个html网页的源代码。【注：下面我们的示范，会用谷歌浏览器（chrome）和火狐浏览器（Firefox）来进行演示。推荐你也使用这二者之一。】
答案就是：右键-查看源代码。如果是使用Safari浏览器，可以打开【偏好设置】-【高级】-【在菜单栏中显示“开发”菜单】，这样点击菜单页的【开发】就可以啦。
文章图片
13 目前市面上主流的浏览器，都会支持这样操作。当然，你还可以使用快捷键ctrl+u来查看网页源代码。
这样做的好处是，整个网页的源代码都完整地呈现在你面前。坏处是代码和实际显示的内容分割开来，你不太容易懂，每行代码的含义。
所以更多时候，我们会用：右键-检查。
文章图片
14 同样，它也有快捷方式，是ctrl+shift+i。这时，将鼠标放在代码上，这块代码所影响的区域，会在左侧标亮。
文章图片
15 看到代码区左上角，有一个图标长这样吗？
文章图片
16 点击它（快捷方式是ctrl+shift+c），然后再把鼠标放在网页区，你会发现很好玩的事情：和刚才的情景恰恰相反，鼠标放在网页，右边代码区和它相关的代码会被标亮出来：
文章图片
17 如果你的目标，是修改喜欢的明星，Ta的百科页面。那么这个功能就能帮你找到：应该去改哪个地方。
另外，很多互联网公司都会在控制台（console）藏入前端工程师的招聘广告，比如：知乎。
文章图片
18 我推荐你用这种方式，去翻一翻自己喜欢的网站，或许会有惊喜。
文章图片
19 下面，我们来解释下一个html文件里的几个关键性要素，我们后面的爬虫操作，离不开它们的。
偷改明星的微博，也离不开。
下面给大家展示一个简陋的电商网站，和它的网页源代码（不用细看）：
文章图片
20 
文章图片
21 当然，我知道这个页面丑得令人发指。
但好在它的结构有够明朗，看上去还算蛮清晰的。
再但是，划重点：你并不需要真的懂！因为如果想完全读懂一个网页的东西，你要掌握的是另外一门课《HTML基础教程》。
那你要懂的，只是分清楚一个网页，是由哪几部分组成，这就足够我们去学习后面的内容。
第一个，标签：网页上充满标签。标签由两部分构成——开始标签和结束标签。
我们节选一部分代码作为案例，如下所示。
文章图片
22 
文章图片
23 在这里，开始标签和结束标签就构成一个完整的标签，我们可以看到结束标签的内容和开始标签一致，只是会多一个符号“/”。
不过，也有的标签是形单影只地出现，比如上面的，就是此类。它的构成就是<文字文字文字/>，或者<文字文字文字>。这些你知道就好，大部分情况下用的都是成双成对出现的标签。
标签是可以嵌套标签的，比如在标签里，还嵌套了一个标签，看到了吧，看到了吧，在案例的第三行。
不同的标签会有它不同的功能，比如标签，就是它会成为网页的标题。
元素：开始标签和结束标签中间的所有东西（包括标签本身），我们称之为“元素”。
属性：当理解了标签和元素的含义，你会发现一些不守规矩的标签，比如：
文章图片
24 我们来看看，这里面有几个标签：
文章图片
25 此处，标签和标签后面，都跟了一长串“style=……”的东西。它们就是属性。属性是用来描述标签的特性的。
比如标签的含义是网页中的一块区域，style属性就描述了这块区域的高、宽、底色……等信息。
在属性里，有两类比较特殊，需要我们特别留意：一个是id属性，一个是class属性。
有的元素会有id属性，id属性在一个网页中是唯一的。所以我们可以通过查找id的方式，来找到这个元素。
比如下面，《海边的卡夫卡》前面会有一个id="201"的东西，它就是一个id属性。
文章图片
26 class的作用是定义元素的样式，而且可以复用。也就是说在一个网页里，如果元素最终呈现的样式是一样的，那么它们就可能采用同一个class属性。
比如在我们这个电商网站，四本书名最终呈现的样式就是一致的。所以理论上，也可以用class来定义这个样式。不过为了代码精简便于教学，这里并没有采用。我们会在后面的案例实操里用到class。
你一定要认真地记住上面这几个名词的意思，不然等会……还要回来翻看。
文章图片
27 它是一个非常明朗的结构，像极了电脑的文件夹。
文章图片
28 请比照上图，认真地阅读下面的每一个字：
html有两个最大的元素head和body；body里面有一个div元素；div元素里面又有6个小div元素；其中的第3个div元素里有一个h3元素和一个bl元素；bl元素里有4个带有id属性的li元素；其中的第一个里面包含《海边的卡夫卡》。
所以如果我们想找《海边的卡夫卡》，它的完整路径就是html>body>div>div>bl>li#201。
有没有感觉眼熟？仿佛在哪里见过？对！看下面这张图，看橙色的框！完整路径，浏览器是会告诉我们的！
文章图片
29 现在，我推荐你把上面书店的网页代码结合效果图，再阅读一遍，我猜你会有不同的感受：
文章图片
30 
文章图片
31 
文章图片
32 当终于学完这些知识，现在我们可以正式开始做点正事：就标题里讲的那件事。
首先，打开你喜欢的明星，Ta的微博首页。
文章图片
33 使用快捷方式ctrl+shift+i，或者鼠标右键打开调试。
文章图片
34 点击代码区左上角的那一个小箭头，然后选中网页区里，你想要修改的地方。这样，它所对应的元素就在代码区里被标记出来。
文章图片
35 如果你没在代码区，看到和网页区对应的内容。这很好解释，看见上图里用圆圈框起来的地方吗？一个向右的小三角意味着，这一块的内容被折叠了，它还可以展开。
点击小三角，它会变成一个向下的小三角，而我们想要的内容，就在里面。
文章图片
36 那事情就简单了，把上图红框里的内容，修改掉就好啦。
那么到底应该怎么改呢？……把鼠标点上去，就和修改word一样改就好2333
文章图片
37 依照上图，把想改的东西全部改掉，按下enter确认。你会发现左边就变成，你输入的样子。
文章图片
38 点击代码区右上角的叉号，关掉【审查】界面，大功告成！
文章图片
39 现在，我们可以反思一下。刚刚修改的，是什么？
来举个例子：
文章图片
40 这里就有一个元素。开始标签是，结束标签是。
它有6个属性那么多，分别是target，render，suda-uatrack，class，extra-data，href。每个属性都还有它对应的值——就是每个等号后面的那部分。
而我们所修改的呢，是元素内的普通文本内容。对应的展示效果就是：
文章图片
41 以上，就是本关卡的所有内容！我们待会见！
【第15关|第15关 爱豆发微说喜欢我——HTML基础】打个赏给点动力呗~
推荐阅读
- 第6.2章（设置属性）
- 2018-02-06第三天|2018-02-06第三天 不能再了，反思到位就差改变
- 第三节|第三节 快乐和幸福（12）
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- android第三方框架（五）ButterKnife
- 开学第一天（下）
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 第326天
- 跌跌撞撞奔向你|跌跌撞撞奔向你 第四章（你补英语，我补物理）