前端页面结构简单介绍

1.head和body

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

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

body>
html>
1
2
3
4
5
6
7
8
9
10

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

2.table

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

<table>

  <tr>

      <td>
          姓名
      td>
  tr>
table>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

上面这段逻辑中，table表示表格，tr表示行，td表示列，可以通过快捷命令ctrl+/添加注释。
然后可以点击图中的浏览器，访问这段逻辑所对应的前端页面
在这里插入图片描述

就可以看到一个非常简陋的页面
当我们新加一部分代码

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

<table width="200px" height="200px" border="1px">

  <tr>

      <td>
          姓名
      td>
      <td>
          性别
      td>
      <td>
          年龄
      td>
  tr>
table>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

就可以发现，比刚才的界面，好看了一丢丢
在这里插入图片描述
我们如果在table里继续加内容

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

就有点表格的感觉了
在这里插入图片描述

3.ul

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


<ul>
    <li>小鸡炖蘑菇li>
ul>
1
2
3
4

就会得到
在这里插入图片描述

4.ol

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


<ol>
    <li>吃早饭li>
    <li>吃中饭li>
    <li>吃晚饭li>
ol>
1
2
3
4
5
6

就会得到
在这里插入图片描述

5.a

a可以输出超链接

<a href="https://www.csdn.net/">CSDNa>
1

就会得到
在这里插入图片描述
点进去就会进入CSDN的官方网站

相关阅读:
张俊将出席用磁悬浮技术改变生活演讲
 【博学谷学习记录】超强总结，用心分享丨人工智能 Python面向对象学习总结之Python与Java的区别
 Spring详解
 Bitmap 的基本原理
 FFmpeg和SDL实现视频播放器之 ⌈音视频同步⌋
react 学习 —— 16、使用 ref 操作 DOM
【物联网】Arduino+ESP8266物联网开发(二)：控制发光二极管按钮开关控制开关灯
 Vue3+Ts+Vite 项目搭建&项目说明
 在macOS上实现多进程任务处理
 【OpenCV 例程200篇】212. 绘制倾斜的矩形
原文地址：https://blog.csdn.net/weixin_44999258/article/details/126771410