1.head和body

为了使用python进行爬虫，所以需要先前端页面结构进行初步认识，可以在pycharm里新建一个.html文件，自动就会生成一个框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

这其中主要包含了head、body两个模块，head下又分了meta和title两部分。
我们可以先自行简单建一个页面

2.table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表格 ctrl+/ 快速注释-->
<table>
<!--行-->
  <tr>
<!--列-->
      <td>
          姓名
      </td>
  </tr>
</table>

</body>
</html>

上面这段逻辑中，table表示表格，tr表示行，td表示列，可以通过快捷命令ctrl+/添加注释。

然后可以点击图中的浏览器，访问这段逻辑所对应的前端页面

多页面前端架构 前端页面结构_前端页面


多页面前端架构 前端页面结构_前端页面_02


就可以看到一个非常简陋的页面

当我们新加一部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表格 ctrl+/ 快速注释-->
<table width="200px" height="200px" border="1px">
<!--行-->
  <tr>
<!--列-->
      <td>
          姓名
      </td>
      <td>
          性别
      </td>
      <td>
          年龄
      </td>
  </tr>
</table>

</body>
</html>

就可以发现，比刚才的界面，好看了一丢丢

多页面前端架构 前端页面结构_python_03


我们如果在table里继续加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表格 ctrl+/ 快速注释-->
<table width="200px" height="200px" border="1px">
<!--行-->
  <tr>
<!--列-->
      <td>
          姓名
      </td>
      <td>
          性别
      </td>
      <td>
          年龄
      </td>
  </tr>
  <tr>
<!--列-->
      <td>
          张三
      </td>
      <td>
          男
      </td>
      <td>
          20
      </td>
  </tr>
</table>

</body>
</html>

就有点表格的感觉了

多页面前端架构 前端页面结构_前端页面_04

3.ul

ul和li可以输出无序列表，在上面的逻辑里加上

<!--ul li-->
<ul>
    <li>小鸡炖蘑菇</li>
</ul>

就会得到

多页面前端架构 前端页面结构_python_05

4.ol

ol和li可以输出有序列表，在上面的逻辑里加上

<!--0l li 有序列表-->
<ol>
    <li>吃早饭</li>
    <li>吃中饭</li>
    <li>吃晚饭</li>
</ol>

就会得到

多页面前端架构 前端页面结构_多页面前端架构_06

5.a

a可以输出超链接

<a href="">

就会得到

多页面前端架构 前端页面结构_前端_07