首页 > 数据库 >巨蟒python全栈开发数据库前端1:HTML基础

巨蟒python全栈开发数据库前端1:HTML基础

时间:2022-12-25 21:04:09浏览次数:45  
标签:浏览器 python 标签 send 全栈 HTML 页面 conn browser

 

1.HTML介绍

什么是前端?

前端就是我们打开浏览器的页面.,很多公司都有自己的浏览器的页面,这个阶段学习的就是浏览器界面

比如京东的界面:https://www.jd.com/

 

引子

例1 

socket客户端不用写,只需要写一个服务端就可以引入了

可以这么认为,浏览器就是客户端

#py文件
import socket
server=socket.socket()

ip_port=('127.0.0.1',8002)
server.bind(ip_port)
server.listen()

conn,addr=server.accept()
from_browser_msg=conn.recv(1024)
print(from_browser_msg)
conn.send(b'hello browser')

客户端输入地址:127.0.0.1:8002端口,那么结果显示如下,

巨蟒python全栈开发数据库前端1:HTML基础_HTTP

怎么办?

服务端显示如下

b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8002\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'

整理如下:(\r\n的意思就是换行)

b'GET / HTTP/1.1
Host: 127.0.0.1:8002
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

'

 

OSI七层模型中的,应用层传输协议,包括HTTP&HTTPS协议

 上边的就是HTTP协议,协议就是消息的格式

 

例二:(必须按照http协议的规则,传输消息)

 

import socket
server=socket.socket()

ip_port=('127.0.0.1',8002)
server.bind(ip_port)
server.listen()

conn,addr=server.accept()
from_browser_msg=conn.recv(1024)
print(from_browser_msg)
#例一
# conn.send(b'hello browser') #这样显示不出来
# 例二
conn.send(b'HTTP/1.1 200 ok \r\n\r\n hello browser')
#这样就显示出来了,因为加入了协议

 

 

巨蟒python全栈开发数据库前端1:HTML基础_html_02

 

网站中出现了如上信息

 ,这样web项目成功结束了,谢谢!

当然web项目没有这么简单

 

 例三:

import socket
server=socket.socket()

ip_port=('127.0.0.1',8002)
server.bind(ip_port)
server.listen()

conn,addr=server.accept()
from_browser_msg=conn.recv(1024)
print(from_browser_msg)
#例一
# conn.send(b'hello browser') #这样显示不出来
# 例二
# conn.send(b'HTTP/1.1 200 ok \r\n\r\n hello browser')
#例三
conn.send(b'HTTP/1.1 200 ok \r\n\r\n')
conn.send(b'<h1>hello browser</h1>')

结果:字体变大了(又黑又大)

<h1>就是需要学的,也就是html5超文本标记语言的标签,也就是一种标记.

巨蟒python全栈开发数据库前端1:HTML基础_HTTP_03

例四:

在txt文档中输入:

how do you do!

 

将txt文档拖入google浏览器中,

结果显示如下:

巨蟒python全栈开发数据库前端1:HTML基础_HTTP_04

 

第一阶段:


 第一次用pycharm打开创建一个html5语言的页面

例一:

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

</body>
</html>

例二:

import socket
server=socket.socket()

ip_port=('127.0.0.1',8002)
server.bind(ip_port)
server.listen()

conn,addr=server.accept()
from_browser_msg=conn.recv(1024)
print(from_browser_msg)
#例一
# conn.send(b'hello browser') #这样显示不出来
# 例二
# conn.send(b'HTTP/1.1 200 ok \r\n\r\n hello browser')
#例三
# conn.send(b'HTTP/1.1 200 ok \r\n\r\n')
# conn.send(b'<h1>hello browser</h1>')
#例四
conn.send(b'HTTP/1.1 200 ok \r\n\r\n')#注意这个地方必须加上http协议,否则客户端,也就是浏览器不会打印
with open('test.html','rb')as f:
data=f.read()
conn.send(data)

test.html文件

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

</body>
</html>

运行结果显示:

巨蟒python全栈开发数据库前端1:HTML基础_属性值_05

 

上边这个就是统一资源定位器

/clschao/articles/10067251.html

上边这个就是服务器上存储的地址

 

例三:

思考:如何渲染页面,变成一个优秀的页面?

按住F12,查看html页面的调试台,和pycharm的调试台差不多

巨蟒python全栈开发数据库前端1:HTML基础_html_06

 

通过下面这块就可以查看超文本标记语言,小米的设计了,右键=>检查,也是查看

巨蟒python全栈开发数据库前端1:HTML基础_HTTP_07

注意:调试的时候尽量使用""谷歌浏览器""渲染引擎,来进行调试

头疼的问题:兼容所有浏览器,现在差不多可以兼容了,但是IE特立独行,一直坚持自己的,我们也没有办法

 

主要学习的课程包括:(必须先学基础,后边的框架满足不了我们的时候,我们可以自己定制自己的效果)

html:骨架

css:添加漂亮的效果

js:给页面添加动态效果

jquery:更简单,效果更多的封装的一个小的框架(js)
bootstrap:(css的一个封装)现成用就行了

 

巨蟒python全栈开发数据库前端1:HTML基础_html_08

小技巧:在html中,!+Tab,就是找回原来的文件.

 

(1)<!DOCTYPE html>声明为HTML5文档。

(2)<html>、</html>是文档的开始标记和结束的标记

(3)<head>、</head>定义了HTML文档的开头部分。

(4)<title>、</title>定义了网页标题,在浏览器标题栏显示。

(5)<body>、</body>之间的文本是可见的网页主体内容。

 

严格封闭标签:<html></html>, <div></div>

例如:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>

<h1>123</h1>
<div>ABC</div>
<input type="text">

</body>
</html>

结果如下:

巨蟒python全栈开发数据库前端1:HTML基础_HTTP_09

 

HTML常用标签

  head内常用标签

巨蟒python全栈开发数据库前端1:HTML基础_属性值_10

 

本次主要标签meta,h1,title

<title></title>:简单来说,就是网页的名字

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

 注意:meta是自封闭的页面

例一:

meta标签

巨蟒python全栈开发数据库前端1:HTML基础_HTTP_11

例二:

<!DOCTYPE html>
<html lang="en">
<head>
<!--<meta charset="UTF-8" class="xxx" dogngua="999">-->
<meta charset="UTF-8">

<meta http-equiv="refresh" content="2">
<!--上边这条语句代表2s钟就会刷新一次。-->

<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--上边这条语句代表2s钟就会刷新一次。并且跳转到百度搜索页面-->

<title>docker</title>
</head>
<body>

<h1>123</h1>
<div>ABC</div>
<input type="text">

</body>
</html>

 

 

标签的语法:

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> 
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 

  1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

<!--2秒后跳转到对应的网址,注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #如果把URL和后面的内容去掉,就是2秒钟刷新一次,这些内容了解一下就行
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器,你按照最高标准来渲染我的页面,了解一下就可以啦

  2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字,也就是别人是可以通过这些关键字搜索到我的这个文章的,搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的,就是怎么让你们公司的网站在别人搜索的时候能够靠前显示,不算那个花钱的,百度是充值的,你冲个20w,别人可能一天就给你点击完了,特别的贵

<meta name="description" content="xxxxxpythonxxx学习"> #是对这个文档的描述,在百度一些内容的页面上,f12打开看看

巨蟒python全栈开发数据库前端1:HTML基础_属性值_12

 

浏览器内核:

    浏览器    --    内核

    IE           --    trident

    chrome  ---   blink

              火狐       ---   gecko

    Safari     ---   webkit

「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。

 

2.补充

补充1

(下面就代表是英文,中文是zh-CN)

 

巨蟒python全栈开发数据库前端1:HTML基础_属性值_13

补充2

(下边代表HTTP的版本,200代表"状态码",ok代表状态"标识符")

巨蟒python全栈开发数据库前端1:HTML基础_html_14

 

3.展示给用户的标签

body内常用标签(HTML中的重点)

基本标签(块级标签和内联标签)

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr> #就是单独个一个水平线
每次加上一些内容,别忘了刷新一下页面,才能看到新添加的效果或者内容,其实上面这些标签很少用

注意:

1.html中多个空格代表1个空格,下面的多个空格只代表一个空格

例如:<b>宝           宝</b>

2.<b>宝&nbsp&nbsp&nbsp宝</b>

上边每个&nbsp,代表一个空格

特殊字符(还有好多其他的,可以直接百度搜HTML特殊符号对照表)

巨蟒python全栈开发数据库前端1:HTML基础_HTTP_15

 

div标签和span标签(常用)

区别:

div标签独占一行

span共享一行

 

块级标签:p、h1--h6、hr、div

内联标签:b、i、u、s

img标签

 

<img src="图片的路径" 
   alt="图片未加载成功时的提示"
   title="鼠标悬浮时提示信息" (截图时显示)
   width="宽"
   height="高(宽高两个属性只用一个会自动等比缩放)">

 

src的路径又分为两种:网上的一个图片路径和本地的一个相对图片路径

巨蟒python全栈开发数据库前端1:HTML基础_属性值_16

 

a标签:

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

 

<a href="http://www.oldboyedu.com">点我</a>
什么是URL?
URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分:为协议:http://、ftp://等
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。

什么是URL?

href属性指定目标网页地址。该地址可以有几种类型:

  • 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
  • 相对URL - 指当前站点中确切的路径(href="index.htm") #学django的时候会用的比较多
  • 锚URL - 指向页面中的锚(href="#top"),博客的目录经常用到,还可以跳转到 name属性为p1的a标签上,<a name='top'>xxx</a>(返回到顶部)

 

巨蟒python全栈开发数据库前端1:HTML基础_HTTP_17

巨蟒python全栈开发数据库前端1:HTML基础_属性值_18

 

target:

 

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

 

列表

  1.无序列表

<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>

 type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

2.有序列表

<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>

 

type属性: start是从数字几开始

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

 

3.标题列表(就像大纲一样,有一个层级效果)

 

<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

 

 表格(为了单元格不溢出,合并的时候要去掉后边的或者前面的)

<table border='1'>
<thead> #标题部分
<tr> #一行
<th>序号</th> #一个单元格
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>


<tbody> #内容部分
<tr> #一行
<td>1</td> #一个单元格
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距 (内边框和内容的距离)
  • cellspacing: 外边距.(内外边框的距离)
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格)

 

4.form表单

5.css引入基本选择器

6.百度注册框



标签:浏览器,python,标签,send,全栈,HTML,页面,conn,browser
From: https://blog.51cto.com/u_11182673/5968339

相关文章

  • 巨蟒python全栈开发linux之centos6
    1.nginx复习1.nginx是什么nginx是支持反向代理,负载均衡,且可以实现web服务器的软件在129服务器中查看,我们使用的是淘宝提供的tengine,也是一种nginx服务器我们下载的是tengi......
  • Python super()参数详解
    这里记录一下python中的super()的两个参数需要注意的关键点。具体来说如以下代码所示:#子类B父类AclassB(A):def__init__(self):super(B,self).__init......
  • 【编程基础】正则表达式基本使用及在Python中使用正则表达式匹配内容
    前言当接触一个新知识点或者技术时,只要问完哲学中的三大问题,基本就对这个知识点或者技术有大致的了解,这也是我学习一个新技术常用的方法,那到底是哪三大问题呢?是什么?怎么做,为......
  • 【编程实践】出行无忧,利用Python爬取天气预报
    前言天气预报就是应用大气变化的规律,根据当前及近期的天气形势,对某一地未来一定时期内的天气状况进行预测。它是根据对卫星云图和天气图的分析,结合有关气象资料、地形和季节......
  • Python开发环境
    以下为阿里算法平台的推荐版本为:python==3.6tensorflow==1.13.1(cpu&gpu)torch==1.5.0prophet==1.0.1cuda==10.0tfplus==1.0.9penrose=2.0.0常见包安装:Python......
  • 如何使用ChatGPT来自动化Python任务
    1.概述最近,比较火热的ChatGPT很受欢迎。今天,笔者为大家来介绍一下ChatGPT能做哪些事情。2.内容ChatGPT是一款由OpenAI开发的专门从事对话的AI聊天机器人。它的目标是让A......
  • 从一道CTF题学习python字节码到源码逆向
    概述:该题来源为2022爱春秋冬季赛ezpython,难度不是很大刚好适合我这样的萌新入门题目:30LOAD_CONST1(204)3LOAD_CONST......
  • python中pandas操作excel数据
    python自动化办公领域,pandas处理excel表格非常优秀,今天初次使用pandas,测试一下。#coding:utf-8importpandasaspdfile_path=r"G:\41个设备.xlsx"data=pd.read_excel......
  • 推荐-centos7安装高版本python3.10
    前言如果在centos7上编译安装python3.7以上版本,ssl功能会出问题,因为python3.7以后需要更高版本的openssl支持,这样的话,就需要提前编译安装高版本的openssl,比如1.1.1系列,这......
  • Web入门:HTML5拖放
    欢迎来的我的小院,恭喜你今天又要涨知识了!案例内容利用ondragstart、ondragover、ondrop属性,并编写相关代码,完成图片的拖放。演示学习<!DOCTYPEhtml><htmllang="en"......