前端页面结构简单介绍

1.head和body

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

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

body>
html>

这其中主要包含了headbody两个模块,head下又分了metatitle两部分。
我们可以先自行简单建一个页面

2.table

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

<table>

  <tr>

      <td>
          姓名
      td>
  tr>
table>

body>
html>

上面这段逻辑中,table表示表格,tr表示行,td表示列,可以通过快捷命令ctrl+/添加注释。
然后可以点击图中的浏览器,访问这段逻辑所对应的前端页面
前端页面结构简单介绍_第1张图片
前端页面结构简单介绍_第2张图片
就可以看到一个非常简陋的页面
当我们新加一部分代码

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>

就可以发现,比刚才的界面,好看了一丢丢
前端页面结构简单介绍_第3张图片
我们如果在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>

就有点表格的感觉了
前端页面结构简单介绍_第4张图片

3.ul

ulli可以输出无序列表,在上面的逻辑里加上


<ul>
    <li>小鸡炖蘑菇li>
ul>

就会得到
前端页面结构简单介绍_第5张图片

4.ol

olli可以输出有序列表,在上面的逻辑里加上


<ol>
    <li>吃早饭li>
    <li>吃中饭li>
    <li>吃晚饭li>
ol>

就会得到
前端页面结构简单介绍_第6张图片

5.a

a可以输出超链接

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

就会得到
前端页面结构简单介绍_第7张图片
点进去就会进入CSDN的官方网站

你可能感兴趣的:(python记录,前端,html)