看懂《书源规则:从入门到入土》(2)HTML基础
前言
:现在我们已经知道了在搜索书籍时浏览器是如何与服务器交互的。
也许上一章有细心的酷友发现了一个小问题,为什么提到的请求方式有get和post,但为什么只讲了post。
因为get方式在小说站的搜索中用得是比较少的,在本章中反而更适合提及。
现在,我们要开始处理服务器返回的信息了。
本章可能需要的工具:
1:浏览器(要能打开控制台/审查元素。如果一定要在手机上搞(比如没有💻的我
)的话好像有个xp模块能干这事)
2:可能还需要翻译工具
免责声明:
该系列(看懂《书源规则:从入门到入土》)图文仅供学习使用,自行编写的规则所造成的后果请自行承担,本人概不负责。
------------
什么是HTML:
html(HyperText Markup Language,超文本标记语言)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。
-------------
有看上一章的应该见过这样一张图。这一大坨代码就是这个网页的html代码
那么,浏览器是怎么得到这段代码的?通过http响应啊
,接受到响应后浏览器对响应体解码后就得到了网页的html代码。
一般来说,当我们在地址栏里输入网址后。浏览器会向服务器发送一个GET请求
刚刚我们是不是还说过,搜索还能通过get方法发出?(众人:fsxitutu你是千年金鱼化形的吗
?)。也许有酷友悄悄查过,form不仅能通过post提交数据还能通过get提交数据。那么get是怎么提交呢?
答案是通过URL query,说简单点,就是把提交的参数写在URL上
,然后发送get请求。
举个例子
比如我想在必应上搜索coolapk,当我点击搜索后。会跳转到一个“cn.bing.com/search?q=coolapk”这样的链接
有看之前的内容的应该能猜到了,这次的method应该是:GET /search?q=coolapk h2
的确是这样。当指定提交方法为get后,点击搜索后,表单向action属性指定的路径添加参数名和参数值作为最终的请求路径。
也就是说,如果是get的话,搜索地址我们是
域名/路径?名称={{key}}这样写
---------
写了那么多
,我们终于通过一个URL从服务器拿到了想要的响应。现在我们看看服务器发给我们的html文档是什么玩意。
那么,我们必须要接触到浏览器提供的一个功能“查看网页源代码”,这里显示的就是浏览器对响应体解码后得到的数据。
对于大部分chromium内核的浏览器, 在URL前加"view-source:"可以查看网页源代码
组成一个html文档的单位是标签(有时候也叫节点、元素),图中那些小于号(<)和大于号(>)之间括住的英文(包括<和>)就是标签。
每用<标签名>打开一个标签,写完这个标签的内容后必须用</标签名>关闭这个标签;如果是单标签则是
<标签名 />这样写。
在开标签(<标签名>)中,在标签名后可以给这个标签加上属性
比如说<div class="search">,这个的意思是:这是一个div标签,它有一个叫class的属性,class属性的属性值是"search"。
图中那么一大堆英文看起来是不是慌了?别慌,慢慢来
一个html文档主要分为两部分,文档声明和根标签。
文档声明(图中1所指的灰色代码):<!DOCTYPE html>
这段代码的作用是告诉浏览器,应该用什么标准解读文档并渲染网页。<!DOCTYPE html>的意思是让浏览器用html5标准去解读和渲染。
根标签(图中2所指的标签):<html>
用来存放网页的内容。
根标签有两个子标签,head(图中箭头3所指)和body(图中箭头4所指)
head标签里是放一些希望浏览器在加载网页前预读取的信息。比如说设置元数据(比如字符集),设置网页标题,设置css(Cascading Style Sheets,层叠样式表),设置一些js(JavaScript)事件。
body标签里放的就是网页的内容了,也就是你在浏览器里能看到的东西。
---------
现在,我们回到那个搜索栏
这里写了一个form标签,并设置了3个属性:
name="articlesearch"
action="/search.html"
method="post"
这里照搬一下MDN上的解释
name:表单的名称。
action:处理表单提交的 URL。
method:浏览器使用这种HTTP方式来提交表单。
也就是说,这个表单的名字叫articlesearch,当我们点下提交后,通过post的方式把表单收集到的数据提交到/search.html
我们继续向里看,有一个输入控件(input标签),名称是s,类型(type属性)是文本框(type属性值是text);所以,在点击提交时,就会提交一段 “s=输入内容” 的字符串。比如说我们在输入框输入"abc",点提交,就会在请求里发送"s=abc"
提交表单那点破事:
1:如果要提交多个参数(即表单里有多个不同name的input标签),参数间用"&"连接
例:提交a=1 , b=2
get protocol://domain/path?a=1&b=2
post protocol://domain/path,{'method':'POST','body':'a=1&b=2'}
2:get因为是附加到URL的,请注意URL长度限制!
----------
现在,我们从服务器拿到了搜索结果。这里注意一个问题,因为js是可以操作文档的,所以从查看源码里拿到的源码不一定管用(但有时候需要两头抓
)。所以我们需要从浏览器控制台抓取元素。
这里可以看到在网页中“完美世界脚印帝”这几个字是一个链接,链接到“/246_246202/”
解释:a标签用于制作点击链接,href属性指定点击后打开的URL
href指定的路径有2种(其实还有更多,但暂时用不到,有兴趣的可以去看MDN):绝对路径,相对路径。
相对路径分相对当前目录和相对当前域。
绝对路径:就是一个完整URL,包括协议,域名,路径。比如<a href="https://coolapk.com" target="_blank" rel="nofollow">查看链接
指定的就是绝对路径。
相对当前目录:相对于当前URL目录。比如<a href="1.html">指定的就是相对路径,如果现在是在看a.com/b/2.html,点击链接后就会打开a.com/b/1.html
相对当前域:相对于当前域的路径,以“/”开头。比如<a href="/c/1.html">指定的就是域绝对路径,如果我现在在看的是a.com/b/1.html,点击链接后打开的就是a.com/c/1.html
注意:图中a标签里的“完美世界脚印帝”这几个字也是一个节点,叫文本节点
----------
吐槽:
在控制台找标签这种活真的应该在电脑干,起码能直接鼠标点击网页控制台就直接跳转到对应标签。手机只能靠盲按。
结语&真心话&预告
在本章,我们终于拿到了搜索结果。下一章,我们将通过规则,让阅读去解析网页。
想学web开发的酷友建议去读读MDN上关于web开发的教程吧。毕竟这一个系列的图文是面向想写书源又没什么基础的小白的我不太可能真的花大篇幅每个标签每个接口都讲一下,只有在用到的时候才会提一下。我只是让想尽可能帮大家把读规则文档所需要的知识补全,以便理解文档而已。
敬请期待下一章:规则入门
----------
引用:
HTML - 维基百科:
查看链接
HTML - MDN:
查看链接