前端页面结构简单介绍

最新推荐文章于 2024-08-15 15:54:59 发布

孟意昶

最新推荐文章于 2024-08-15 15:54:59 发布

阅读量1.3k

点赞数

分类专栏： python记录文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_44999258/article/details/126771410

版权

python记录专栏收录该内容

21 篇文章 3 订阅

订阅专栏

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+/添加注释。
然后可以点击图中的浏览器，访问这段逻辑所对应的前端页面
在这里插入图片描述

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

<!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>

就可以发现，比刚才的界面，好看了一丢丢
在这里插入图片描述
我们如果在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>

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

3.ul

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

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

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

4.ol

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

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

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

5.a

a可以输出超链接

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

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

孟意昶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录