如何区分或识别任何网站的 header/footer/carousell 和其他部分？
How to separate or identify header/footer/carousell & other parts of any website?
我想分离出任何网站的首页header/footer/sidebar/carousel。
例如，如果我输入 google.com 或 alibaba.com 或 flipkart.com
我可以通过 PHP CURL 检索该主页。 （其中一些是我们无法编码的）
但问题是如何识别？每个平台都使用不同的编程语言。
市场上有APIfree/paid吗？可能吗？
这是我试过的
$url = "https://www.google.com";
$homepage = file_get_contents($url);
$doc = new DOMDocument;
$doc->loadHTML($homepage);
echo "<pre>";
print_r($doc);
exit;
这是PHP语言的例子。我希望看到任何语言 (Java/.NET) 的解决方案。
主要问题。可不可以？
所以会有这样的 REST API 并在 JSON 中给出响应。
POST api/getWebsiteData
Params : <Website URL>
示例响应
{
"header" : <html goes here>,
"menu" : <html goes here>,
"footer" : <html goes here>,
.....
....
}
我同意，我们不会得到 100% 的解决方案，因为一些网站查看源代码是加密的。
简短的回答是否定的，这是不可能的。
较长的答案是您 可以 构建可能满足您需求的东西，但我几乎可以保证它不会在没有大量网络的情况下工作，还有很多很多调整。我的意思是很多。喜欢这么多的工作，你成为 Google.
网页实际上由两部分组成，HTML 和 DOM。 HTML 是您将从 file_get_contents 等函数中获得的内容，当浏览器解释它们时，它们会转换为 DOM。此外，一旦JavaScript介入，它还可以随意修改DOM。一些网页有一个漂亮的一对一映射用于初始加载 HTML 到 DOM 但其他人有非常小的 HTML 并且依赖 JS 来创建和操作 DOM.
接下来是CSS和CSSOM，后者是JS可以访问的，类似于HTML的DOM。在 CSS 中，您可以说“将 header 放在底部，将页脚放在顶部”。有多少人这样做？可能为零，这只是一个 far-fetched 示例，但还有很多更小的细微差别示例。有些人认为一个站点上应该只有一个 header，而其他人则认为 header 包含标题。例如，您可以（我已经看到）headers 在页脚内。 （我也不是说我同意还是不同意。）此外，网络上到处都是 HTML 和 CSS 类，例如：
<div class="a">...</div>
<div class="b">...</div>
哪一个是 header 哪个是页脚？或者，哪个是侧边栏？一个可能是菜单吗？更好的是，转到 ReactJS official site 并检查他们的 DOM，你会看到这样的代码：
<div class="css-1vcfx3l"><h3 class="css-1xm4gxl"></h3><div>
你觉得那些 类 有意义吗？
因此，如果您沿着这条路走下去，您将不得不弄清楚要从哪里开始。您是否只想解析 HTML 而忽略 JS/CSS/DOM/CSSOM？如果是这样，那通常被称为屏幕抓取（或者至少是十年前我做的）。
如果你想变得更复杂，大多数浏览器可以运行处于“headless mode”然后与之交互。例如，如果您在 server-side JS 中，则有 Chromium in headless mode, but I'd really recommend using an abstraction over that such as Symfony's Panther if you are in PHP or Puppeteer。 （我知道有很多选择，任何阅读本文的人都可以在评论中随意提出。）
无论简单还是复杂，您都会想要编写自己的规则。在过去几年中编写的 semi-modern 站点很有可能具有根或 near-root <HEADER>、<MAIN> 和 <FOOTER> 标签。如果找到这些，您的一般规则可能会更简单。您也很有可能在其中找到 <ASIDE> 和其他语义 HTML5 标签。
如果您没有找到这些，您也许仍然可以查看 <div class="header"> 和类似内容的 near-root 标签。您可能需要处理 header 的替代版本，尤其是跨语言（人类，而不是计算机，所以英语、西班牙语等）。
使用这些规则，我认为您通常可以构建能够解析网络上大量站点的内容。
不过，我要提个醒，主页往往很奇怪 one-offs，因为它们往往包含网站上所有其他内容的子集，但没有自己的实际内容。在这方面，您通常仍会找到 header 和页脚，但里面几乎所有内容都感觉像是边栏或类似内容。
至于轮播？老实说，那真的很难。轮播是用 JS 构建的，所以如果你只看 HTML，你可能只会找到带有一堆图像的 <UL>。实际上，在我写这篇文章时，我想我会以 <UL> 为目标并假设它们是轮播。肯定会有 false-positives 但这是一个很常见的模式。然而，并不是每个人都是 <UL> 粉丝，所以他们可能只是普通 <DIV>.
我之所以这么说，是因为我过去曾构建过这些，但出于非常具体的站点和非常具体的原因。正如我在开头所说，编写一个可以在任何地方工作的通用解析器是一项大量工作。
这是一个棘手的问题，除非您是 google，否则我怀疑是否有可能制定出适用于多个网站的解决方案。
首先让我们从几个网站开始，看看它们发送给客户的内容。
维基百科文章的 HTML 看起来像这样
<h2><span class="mw-headline" id="History">History</span></h2>
<h3><span class="mw-headline" id="Development">Development</span></h3>
<div class="thumb tright"><div class="thumbinner" style="width:172px;"><a href="/wiki/File:Tim_Berners-Lee_April_2009.jpg" class="image"><img alt="Photograph of Tim Berners-Lee in April 2009" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Tim_Berners-Lee_April_2009.jpg/170px-Tim_Berners-Lee_April_2009.jpg" decoding="async" width="170" height="234" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Tim_Berners-Lee_April_2009.jpg/255px-Tim_Berners-Lee_April_2009.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Tim_Berners-Lee_April_2009.jpg/340px-Tim_Berners-Lee_April_2009.jpg 2x" data-file-width="1195" data-file-height="1648" /></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Tim_Berners-Lee_April_2009.jpg" class="internal" title="Enlarge"></a></div><a href="/wiki/Tim_Berners-Lee" title="Tim Berners-Lee">Tim Berners-Lee</a> in April 2009</div></div></div>
<p>In 1980, physicist <a href="/wiki/Tim_Berners-Lee" title="Tim Berners-Lee">Tim Berners-Lee</a>, a contractor at <a href="/wiki/CERN" title="CERN">CERN</a>, proposed and prototyped <a href="/wiki/ENQUIRE" title="ENQUIRE">ENQUIRE</a>, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an <a href="/wiki/Internet" title="Internet">Internet</a>-based <a href="/wiki/Hypertext" title="Hypertext">hypertext</a> system.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer <a href="/wiki/Robert_Cailliau" title="Robert Cailliau">Robert Cailliau</a> collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes<sup id="cite_ref-4" class="reference"><a href="#cite_note-4">[4]</a></sup> from 1990 he listed<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[5]</a></sup> "some of the many areas in which hypertext is used" and put an encyclopedia first.
这很容易用 php / python / Java 程序解析并分成不同的部分。
现在让我们看看 google 支持页面。源基本上是 javascript 的 2000 行，仅此而已。
解析这个是可能的，但要困难得多，因为您需要实际呈现页面并在 <header>、<div> 和 <p> 标记出现在 [=] 之前执行 javascript 39=].
我相信有可能创建一个 api thay 扫描像 wikipedia 或 Whosebug 这样的网站，因为它们在服务器端生成 HTML 并且只需要客户端呈现它并应用 css 样式。
如果网站是基于像 react.js 这样的技术，您会看到整个页面只是 javascript，在执行和呈现之前无法处理任何内容。
能不能重新渲染然后解析？可能是的，但是可以为任何给定网站执行此操作的 API 需要大量工作，因此您最好训练 AI 来阅读网页并让它为您指出它们。
我想分离出任何网站的首页header/footer/sidebar/carousel。
例如，如果我输入 google.com 或 alibaba.com 或 flipkart.com
我可以通过 PHP CURL 检索该主页。 （其中一些是我们无法编码的）
但问题是如何识别？每个平台都使用不同的编程语言。
市场上有APIfree/paid吗？可能吗？
这是我试过的
$url = "https://www.google.com";
$homepage = file_get_contents($url);
$doc = new DOMDocument;
$doc->loadHTML($homepage);
echo "<pre>";
print_r($doc);
exit;
这是PHP语言的例子。我希望看到任何语言 (Java/.NET) 的解决方案。
主要问题。可不可以？
所以会有这样的 REST API 并在 JSON 中给出响应。
POST api/getWebsiteData
Params : <Website URL>
示例响应
{
"header" : <html goes here>,
"menu" : <html goes here>,
"footer" : <html goes here>,
.....
....
}
我同意，我们不会得到 100% 的解决方案，因为一些网站查看源代码是加密的。
简短的回答是否定的，这是不可能的。
较长的答案是您 可以 构建可能满足您需求的东西，但我几乎可以保证它不会在没有大量网络的情况下工作，还有很多很多调整。我的意思是很多。喜欢这么多的工作，你成为 Google.
网页实际上由两部分组成，HTML 和 DOM。 HTML 是您将从 file_get_contents 等函数中获得的内容，当浏览器解释它们时，它们会转换为 DOM。此外，一旦JavaScript介入，它还可以随意修改DOM。一些网页有一个漂亮的一对一映射用于初始加载 HTML 到 DOM 但其他人有非常小的 HTML 并且依赖 JS 来创建和操作 DOM.
接下来是CSS和CSSOM，后者是JS可以访问的，类似于HTML的DOM。在 CSS 中，您可以说“将 header 放在底部，将页脚放在顶部”。有多少人这样做？可能为零，这只是一个 far-fetched 示例，但还有很多更小的细微差别示例。有些人认为一个站点上应该只有一个 header，而其他人则认为 header 包含标题。例如，您可以（我已经看到）headers 在页脚内。 （我也不是说我同意还是不同意。）此外，网络上到处都是 HTML 和 CSS 类，例如：
<div class="a">...</div>
<div class="b">...</div>
哪一个是 header 哪个是页脚？或者，哪个是侧边栏？一个可能是菜单吗？更好的是，转到 ReactJS official site 并检查他们的 DOM，你会看到这样的代码：
<div class="css-1vcfx3l"><h3 class="css-1xm4gxl"></h3><div>
你觉得那些 类 有意义吗？
因此，如果您沿着这条路走下去，您将不得不弄清楚要从哪里开始。您是否只想解析 HTML 而忽略 JS/CSS/DOM/CSSOM？如果是这样，那通常被称为屏幕抓取（或者至少是十年前我做的）。
如果你想变得更复杂，大多数浏览器可以运行处于“headless mode”然后与之交互。例如，如果您在 server-side JS 中，则有 Chromium in headless mode, but I'd really recommend using an abstraction over that such as Symfony's Panther if you are in PHP or Puppeteer。 （我知道有很多选择，任何阅读本文的人都可以在评论中随意提出。）
无论简单还是复杂，您都会想要编写自己的规则。在过去几年中编写的 semi-modern 站点很有可能具有根或 near-root <HEADER>、<MAIN> 和 <FOOTER> 标签。如果找到这些，您的一般规则可能会更简单。您也很有可能在其中找到 <ASIDE> 和其他语义 HTML5 标签。
如果您没有找到这些，您也许仍然可以查看 <div class="header"> 和类似内容的 near-root 标签。您可能需要处理 header 的替代版本，尤其是跨语言（人类，而不是计算机，所以英语、西班牙语等）。
使用这些规则，我认为您通常可以构建能够解析网络上大量站点的内容。
不过，我要提个醒，主页往往很奇怪 one-offs，因为它们往往包含网站上所有其他内容的子集，但没有自己的实际内容。在这方面，您通常仍会找到 header 和页脚，但里面几乎所有内容都感觉像是边栏或类似内容。
至于轮播？老实说，那真的很难。轮播是用 JS 构建的，所以如果你只看 HTML，你可能只会找到带有一堆图像的 <UL>。实际上，在我写这篇文章时，我想我会以 <UL> 为目标并假设它们是轮播。肯定会有 false-positives 但这是一个很常见的模式。然而，并不是每个人都是 <UL> 粉丝，所以他们可能只是普通 <DIV>.
我之所以这么说，是因为我过去曾构建过这些，但出于非常具体的站点和非常具体的原因。正如我在开头所说，编写一个可以在任何地方工作的通用解析器是一项大量工作。
这是一个棘手的问题，除非您是 google，否则我怀疑是否有可能制定出适用于多个网站的解决方案。
首先让我们从几个网站开始，看看它们发送给客户的内容。
维基百科文章的 HTML 看起来像这样
<h2><span class="mw-headline" id="History">History</span></h2>
<h3><span class="mw-headline" id="Development">Development</span></h3>
<div class="thumb tright"><div class="thumbinner" style="width:172px;"><a href="/wiki/File:Tim_Berners-Lee_April_2009.jpg" class="image"><img alt="Photograph of Tim Berners-Lee in April 2009" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Tim_Berners-Lee_April_2009.jpg/170px-Tim_Berners-Lee_April_2009.jpg" decoding="async" width="170" height="234" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Tim_Berners-Lee_April_2009.jpg/255px-Tim_Berners-Lee_April_2009.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Tim_Berners-Lee_April_2009.jpg/340px-Tim_Berners-Lee_April_2009.jpg 2x" data-file-width="1195" data-file-height="1648" /></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Tim_Berners-Lee_April_2009.jpg" class="internal" title="Enlarge"></a></div><a href="/wiki/Tim_Berners-Lee" title="Tim Berners-Lee">Tim Berners-Lee</a> in April 2009</div></div></div>
<p>In 1980, physicist <a href="/wiki/Tim_Berners-Lee" title="Tim Berners-Lee">Tim Berners-Lee</a>, a contractor at <a href="/wiki/CERN" title="CERN">CERN</a>, proposed and prototyped <a href="/wiki/ENQUIRE" title="ENQUIRE">ENQUIRE</a>, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an <a href="/wiki/Internet" title="Internet">Internet</a>-based <a href="/wiki/Hypertext" title="Hypertext">hypertext</a> system.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer <a href="/wiki/Robert_Cailliau" title="Robert Cailliau">Robert Cailliau</a> collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes<sup id="cite_ref-4" class="reference"><a href="#cite_note-4">[4]</a></sup> from 1990 he listed<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[5]</a></sup> "some of the many areas in which hypertext is used" and put an encyclopedia first.
这很容易用 php / python / Java 程序解析并分成不同的部分。
现在让我们看看 google 支持页面。源基本上是 javascript 的 2000 行，仅此而已。
解析这个是可能的，但要困难得多，因为您需要实际呈现页面并在 <header>、<div> 和 <p> 标记出现在 [=] 之前执行 javascript 39=].
我相信有可能创建一个 api thay 扫描像 wikipedia 或 Whosebug 这样的网站，因为它们在服务器端生成 HTML 并且只需要客户端呈现它并应用 css 样式。
如果网站是基于像 react.js 这样的技术，您会看到整个页面只是 javascript，在执行和呈现之前无法处理任何内容。
能不能重新渲染然后解析？可能是的，但是可以为任何给定网站执行此操作的 API 需要大量工作，因此您最好训练 AI 来阅读网页并让它为您指出它们。