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的官方网站

前端页面结构简单介绍相关推荐

Ubuntu目录结构简单介绍笔记
一.Ubuntu目录结构简单介绍 Ubuntu目录结构简单介绍 /根目录 1.boot/启动文件.所有与启动有关的文件都保存在这里 ·grub/ Grub引导器相关的文件 2.dev/设备文件 ...
【前端基础】简单介绍什么是软件
简单介绍什么是前端开发什么是软件系统软件应用软件游戏软件软件的构成服务端服务端常用开发语言客户端客户端的常见形式文字客户端(C/S架构) 图形化界面(C/S架构) 网页(B/S架构 ...
前端框架Bootstrap简单介绍
下载: 解压之后: 把这些文件拷贝到项目中页面使用时只需要引入: 然后我们就可以参考官网来设计需要的前端页面了设计一个按钮:button 只需要标明css样式中使用的类下面就是现实效果: ...
磁盘结构简单介绍，硬盘工作原理，接口种类IDE,SATA,SCSI,FC接口，主引导技术MBR，文件系统类型
磁盘的结构物理结构: 盘片:硬盘有多个盘片,每个盘片2面磁头:磁盘里最贵的一个,非接触式,读写合一分离式数据结构: 扇区:盘片被平均分割成多个扇形区域,每个存放512字节磁道:同一个盘片不同半 ...
mvc跳转html,ASP.NET MVC页面重定向简单介绍
在asp.net中页面重定向:Server.Execute("m2.aspx"); 服务器保存此页转向前的数据后,使页面转向到m2.aspx执行, 再返回本页继续执行.再将三者结果 ...
（入门）前端开发的简单介绍
前端的开发首先离不开前端基础技术(html.css和js),其次想要有更好的发展应用就要用到前端框架. 那么有以下六个问题需要简答地了解一下. 一.前端.后端各自的工作是什么? 简地是说前端就是设计用 ...
Go语言的流程结构简单介绍
文章目录流程结构流程结构 if if的基本表达特殊用法 switch swith基本用法 fallthrough Type Switch for 基础语法 for语法2 for的range格式 ...
Elasticsearch目录结构简单介绍
我Linux机器上的Elasticsearch是通过下载的zip包(tar.gz包)安装的,目录结构如下: # 查看elasticsearch目录下的文件和目录 [es@zzf elasticsear ...
线性结构和非线性结构简单介绍
简数据结构包含:线性结构和非线性结构. 线性结构: 线性结构是十分常用的数据结构,其特点是数据元素之间存在一对一的线性关系.如:arry[6] = 6 线性结构有两种不同的存储结构,分为:顺序存储结 ...

前端页面结构简单介绍

1.head和body

2.table

3.ul

4.ol

5.a

前端页面结构简单介绍相关推荐

最新文章

热门文章