html
前端
前端
1.什么是前端？
任何直接能够跟用户打交道的交互界面都可以称之为前端
2.为什么要学前端？
因为我们是Python全栈开发
软件开发架构
c/s架构
b/s架构
本质上b/s也是c/s架构
浏览器输入网址发送了几件事？
1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面
HTTP协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循这套协议
文件的后缀名到底是给谁看的？
文件的后缀并不是给计算机看的，而仅仅是给人看的
HTML(hyper text makeup language)
超文本标记语言
服务端
客户端
文件(html页面)
在python中写的服务端
然后启动服务端
在浏览器输入127.0.0.1:8080
就会获取到服务端发送来的信息
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')# 表示遵循http协议
conn.send(b'<h1>hello baby</h1>')
conn.close()
'''
herf 链接,超链接
'''
文本文件内容(标题,网站链接,图片链接)
<h1>hello baby</h1>
<a href='https://www.luffycity.com'>click me to some color to see</a>
<img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'>
服务端(pycharm)
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')# 表示遵循http协议
with open('a', 'rb')as f:
for line in f:
conn.send(line)
conn.close()
读取文本信息发送给浏览器显示
浏览器也就是客户端输入一个网址,就是给服务端发送消息,消息基于http协议,服务端也是基于http协议把数据解开,解开之后才知道你想要某一个资源,所以会去对应的地方找某一个资源,读出来,再发回客户端.基于网络传输就是二进制
浏览器拿到的是二进制,在浏览器把数据按照固定的格式解开对应的图片等等.(这个固定的格式就是html)(所有服务端都是按照这个标准来的)
<!DOCTYPE html> # 文档文件类型HTML
<html>
<head>
head存放的内容用户是看不到的,主要是给浏览器和收索引擎看的
<head>
<body>
用户能够看见的内容都在body里面
<!--这是单行注释-->
<!--
这是多行注释
-->
<body>
<html>
html的内容
<!DOCTYPE html>
<html lang="en"> #默认语言为英文
<head>
<meta charset="UTF-8">
<title>丫丫</title>
</head>
<body>
<h1>hello baby</h1>
<a href='https://www.luffycity.com'>click me to some color to see</a>
<img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'>
</body>
</html>
打开html文件返回给浏览器
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')# 表示遵循http协议
with open(r'E:\untitled1\前端\html.html', 'rb')as f:
for line in f:
conn.send(line)
conn.close()
html文件打开方式
方式1：找到改文件选择浏览器打开
方式2：pycharm内自动打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<style> #标签的样式,写css代码
h1{
color:green; # 标签的颜色
}
</style>
<script> #内部可以直接写js代码，也可以通过src属性,引入外部js代码文件
alert('hello baby')
</script>
</head>
<body>
<h1>hello baby</h1>
<a href='https://www.luffycity.com'>click me to some color to see</a>
<img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'>
</body>
</html>
/
<link rel="stylesheet" href="03%20mycess.css"> #%20是你的文件名有空格
# link是连接到css文件中,css文件是HTML元素的属性,如标签的颜色
hello baby
click me to some color to see # a代表anchor 锚点, href超链接,
```
head内常用标签(以上举例)
title:页面标题
style：写css代码 (定义内部样式表)
script:内部可以直接写js代码，也可以通过src属性
引入外部js代码文件
link:通过href引入外部css文件(引入外部样式表文件或网站图标)
js.js文件的内容
alert('hello baby')
html.html文件里的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<script src="js.js"></script> #引入外部的js.js文件
<link rel="stylesheet" href="03%20mycess.css">
</head>
<body>
<h1>hello baby</h1>
<a href='https://www.luffycity.com'>click me to some color to see</a>
<img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'>
</body>
</html>
body内标签
基本标签
h1~h6：标题标签
p:段落标签(paragraph)
s:划掉字体(删除线)(subline)
u:下划线(unberline)
i:斜体(italic)
b:加粗(bold)
br:换行(break row)
hr:分隔线(horizontal rule)
特殊符号
1<a (1<a)(smaller than)
3>2 (3>2)(bigger than)
¥ (¥)
©©
®®
<p>苍茫的天涯是我的 爱绵绵的青山脚下一片海</p> 空格
标签分类2（******）：
块儿级标签 div h1~h6 p hr br (div:division)
独占一行
块儿级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块儿级标签能够设置长宽
行内标签 span a img i s b u
自身内容有多的就占多大
行内标签不能设置长宽
常用标签(******)
div
span
p
a
img
什么是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
各部分之间用“/”符号隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<script src="js.js"></script>
<link rel="stylesheet" href="03%20mycess.css">
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
<s>打折啦</s>
<br>
<u>下划线</u>
<hr>
<i>斜体</i>
<b>加粗</b>
1<a
2>3
¥
©
®
<p>苍茫的天涯是我的 爱绵绵的青山脚下一片海</p> # non-breaking space
</body>
</html>
a标签:链接标签
可以通过href跳转到指定的网址
锚点功能:回到顶部
<a href="" id="a1">top</a>
<a href="#a1">bottom</a>
ps：target属性用来控制是否在当前页面跳转
默认是_self当前页
也可以指定成_blank新建页面跳转
所有的html标签都应该有一个id属性，用来唯一标识当前标签 为后续的DOM操作提供基础
也就意味着同一份html中标签的id不能重复，不写id属性也是可以的
img标签
src图片路径:即可以是网络上的图片地址也可以是本地的图片地址
alt当图片加载失败之后自动展示的提示信息
title鼠标悬停在图片上时显示的文本
图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div1
<div>
div2
<div>
div3
</div>
</div>
</div>
<div>div</div>
<span>span</span>
<span>span</span>
<!--<a href="http://www.baidu.com" target="_self">click me</a>-->
<!--<a href="http://www.baidu.com" target="_blank">click me</a>-->
<!--<a href="" id="a1">top</a>--> #id是唯一的
<!--<a href="" id="a2">top</a> # id不能一样
div*3 3个div
<!--<div style="height: 1000px;background: green"></div>-->
<!--<div style="height: 1000px;background: pink"></div>-->
<!--<div style="height: 1000px;background: blue"></div>-->
<!--<a href="#a1">bottom</a>-->
图片地址可以是浏览器上复制的,也可以是本地的src(source)
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1914461969,1034806639&fm=26&gp=0.jpg" alt="">
<img src="12423.jpg" alt="jason女朋友">
<img src="1.jpg" alt="jason女朋友" title="我女朋友好看吧" width="400">
</body>
</html>
列表标签
ul:无序列表 (unorder list)
ol：有序列表 (order list)
dl：标题列表 (definition list)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<ul type="disc">--> (disc 表示圆点(默认),circle 表示白圆点,square正方形,none什么都没有)
<!--<li>jason</li>-->
<!--<li>egon</li>-->
<!--<li>kevin</li>-->
<!--<li>tank</li>-->
<!--<li>nick</li>-->
<!--<li>sean</li>-->
<!--<li>jerry</li>-->
<!--<li>owen</li>-->
<!--<li>echo</li>-->
<!--<li>oscar</li>-->
<!--<li>mac</li>-->
<!--<li>rocky</li>-->
<!--</ul>-->
<!--<ol type="i">-->('A':大写英文字母排序,'i':小写的罗马数字排序,'I':大写罗马数字排序,'a':小写的英文字母排序,'1':阿拉伯数字排序,默认)
<!--<li>111</li>-->
<!--<li>222</li>-->
<!--<li>333</li>-->
<!--<li>444</li>-->
<!--<li>555</li>-->
<!--<li>666</li>-->
<!--</ol>-->
<dl>
<dt>标题1</dt> (definition title)
<dd>内容1</dd> (definition description)
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
</body>
</html>
表单标签
固定就以下面的格式书写
<table>
<thead></thead>
<tbody></tbody>
</table>
tr 一个tr表示一行
border调整列表的边框
cellspacing 调单元格与外边框之间的距离
cellpadding 调文本与单元格之间的距离
rowspan 垂直方向合并
colspan 水平方向合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>18</td>
<td rowspan="2">学习</td>
</tr>
<tr>
<td>egon</td>
<td>73</td>
<!--<td>吃饭</td>-->
</tr>
<tr>
<td>nick</td>
<!--<td>18</td>-->
<td colspan="2">戴帽子</td>
</tr>
</tbody>
<!--导航条开始-->
<!--导航条结束-->
<!--侧边栏开始-->
<!--侧边栏结束-->
</table>
</body>
</html>
form表单
功能:获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作 那么可以直接写一个<button>button按钮</button>
input
通过控制type的类型从而实现不同的获取用户输入的标签样式
text 普通文本
password 密文
date 日历
radio 单选框
checkbox 多选框
file 获取文件
submit 触发提交数据的行为
button 普通的按钮
reset 重置form表单内容
select
选择框 默认是单选的 可以通过multiple参数将单选变为多选
一个option就是一个选项
textarea
获取用户大段文本值
form表单中几个重要的属性
action:用来控制数据到底提交给谁 写url来指定提交给谁
form表单默认是get请求 可以通过method属性修改提交方法
form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型
你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值
form表单发送文件 需要修改enctype属性的值
默认是urlencoded不支持传输文件
需要将其修改为multipart/form-data
GET请求与POST请求
get请求:获取想要的数据
post请求:提交数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>用户注册</h3>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
<p>username:<input type="text" name="username" value="jason"></p>
<p>password:<input type="password" name="password"></p>
<p>birth:<input type="date" name="birthday"></p>
<p>gender:
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1" >
保密<input type="radio" name="gender" checked value="2">
</p>
<p>hobby:
<input type="checkbox" checked name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">双色球
</p>
<p>province默认单选:
<select name="province" id="">
<option value="beijin">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
</p>
<!--<p>province多选:-->
<!--<select name="" id="" multiple>-->
<!--<option value="">北京</option>-->
<!--<option value="">上海</option>-->
<!--<option value="">深圳</option>-->
<!--</select>-->
<!--</p>-->
<!--<p>province1:-->
<!--<select name="" id="">-->
<!--<optgroup label="北京">-->
<!--<option value="">朝阳区</option>-->
<!--<option value="">海淀区</option>-->
<!--<option value="">昌平区</option>-->
<!--</optgroup>-->
<!--<optgroup label="上海">-->
<!--<option value="">浦东新区</option>-->
<!--<option value="">静安区</option>-->
<!--<option value="">徐汇区</option>-->
<!--</optgroup>-->
<!--<optgroup label="深圳">-->
<!--<option value="">南山区</option>-->
<!--<option value="">宝安区</option>-->
<!--<option value="">福田区</option>-->
<!--</optgroup>-->
<!--</select>-->
<!--</p>-->
<p>info:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>file:
<input type="file" name="file">
</p>
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<button>button按钮</button>
</form>
</body>
</html>
总结:
前端HTML
超文本标记语言
注释
<!--单行注释-->
<!--
多行注释
-->
ps:写HTML的时候，注释一般都是成双成对的
即
<!--xx功能开始-->
<!--xx功能结束-->
文件的后缀名
head内常用标签(不是给用户看的)
title 定义网页标题
style 内部写css样式代码
link 引入外部css样式文件
script 可以在内部直接写js代码也支持src属性
导入外部js文件
meta 定义网页原信息
name='keywords' content="......"
name='description' content="......"
body内常用标签(body内标签才是给用户看的)
基本标签
h1~h6 p u i s b br hr
特殊符号
<
>
©
®
&
¥
常用标签
div
span
a
href='url' 跳转到指定网址
锚点功能 一个a调到另一个a标签
具体案例:回到顶部
target 默认是在当前页面跳转 _self
指定成_blank新建页面跳转
img
src 放图片地址(可以是本地的也可以是网络上的)
alt 当图片加载失败时可以指定显示的提示信息
title 鼠标悬停上之后显示的提示信息
width 长宽在设置的时候只需要设置一个另一个自动等比例缩放
heigth
列表标签
无序列表
ul>li 可以通过ul内type属性来控制无序的标识
有序列表
ol>li 可以通过ul内type属性来控制有序的标识(1,a,A,I,i)
标题列表
dl
dt 标题
dd 内容
表格标签
<table> 可以通过type参数设置边框
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>18</td>
<td>训人</td>
</tr>
<tr>
<td>egon</td>
<td>84</td>
<td>被训</td>
</tr>
<tr>
<td>kevin</td>
<td>30</td>
<td>看热闹</td>
</tr>
</tbody>
</table>
table标签内可以设置的属性
type
cellspacing 设置单元格与边框之间的距离
cellpadding 设置文本值域单元格之间的距离
单元格标签可以设置的属性
rowspan 垂直方向
colspan 水平方向
form表单
以用户注册为例
input
type属性可以变幻的值
text
password
date
radio checked 如果属性名和属性值相等那么可以简写
checkbox checked
file form表单上传文件需要修改两个参数的值
1.将method由默认的get改为post
2.将enctype编码格式由默认的urlencoded改为formdata
submit 提交按钮 触发form表单提交数据的动作
button 上面功能都没有。就是一个普通按钮
reset 重置用户填写的信息
select 选择标签 默认是单选的 可以通过设置multiple参数改为多选
一个个的option就是一个个的选项
textarea
大段文本框
button标签 也可以出发form表单的提交动作
总结:
1 获取用户输入的标签都必须有一个name属性
用户输入的值会被存放到标签的value属性中
你可以理解为name属性对应是字典的key
用户输入的被value属性获取的到值是字典的value
2 label标签
通常是和input标签组合使用
<form action="">
<label for="i1">username:<input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" name="pwd" id="i2"></label>
<input type="submit">
</form>
请求方法:
get请求:朝服务端获取资源(可以携带参数供服务端校验)
不推荐携带敏感型的参数
get请求携带的参数是有大小限制的 大概4KB
可以携带一些不重要的参数
post请求:朝服务端提交数据
敏感性的信息都应该采用post提交方式
标签分类1:
双标签:h1~h6 a p div span table ul ol dl
自闭和标签: img br hr input
标签分类2:
块儿级标签
独占一行
块儿级标签可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是不能嵌套任何的块儿级标签只能嵌套行内标签
可以设置长宽
行内标签
大小取决于内容大小
不能设置长宽
