HTML 1d
CSS 2d
JS 2d
JQuery 1d
Bootstrap 1d
今日内容博客地址:https://www.cnblogs.com/Dominic-Ji/p/10136928.html
前端
1.什么是前端？
任何直接能够跟用户打交道的交互界面都可以称之为前端
2.为什么要学前端？
因为我们是Python全栈开发
软件开发架构
c/s架构
b/s架构
本质上b/s也是c/s架构
浏览器输入网址发送了几件事？
1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面
HTTP协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循这套协议
文件的后缀名到底是给谁看的？
文件的后缀并不是给计算机看的，而仅仅是给人看的
HTML
超文本标记语言
服务端
手撸服务端
import socket
server=socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,adress=server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK
')
with open(r'C:Usersdell-pcPycharmProjectsvideotest est.html','rb') as f:
for line in f:
conn.send(line)
conn.close()
客户端
文件(html页面)
HTML
文档结构
<!DOCTYPE html>
<html>
<head>
head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的
</head>
<body>
用户能够看见的内容都在body里面
</body>
</html>
注释
<!--这是单行注释-->
<!--
这是多行注释
-->
html文件打开方式
方式1：找到改文件选择浏览器打开
方式2：pycharm内自动打开
head内常用标签
title:页面标题
style：写css代码
script:内部可以直接写js代码，也可以通过src属性
引入外部js代码文件
link:通过href引入外部css文件
body内标签
基本标签
h1~h6：标题标签
p:段落标签
特殊符号
常用标签(******)
div
span
p
a
img
列表标签
ul>li
表格标签
form表单(******):前后端数据交互
标签分类1:
双标签 h1~h6 p a
自闭和标签 img br hr
标签分类2（******）：
块儿级标签 div h1~h6 p hr br
独占一行
块儿级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块儿级标签能够设置长宽
行内标签 span a img i s b u
自身内容有多的就占多大
行内标签不能设置长宽
URL:统一资源定位符
什么是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
各部分之间用“/”符号隔开。
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鼠标悬停在图片上时显示的文本
图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放
列表标签
ul:无序列表
ol：有序列表
dl：标题列表
表单标签
固定就以下面的格式书写
<table>
<thead></thead>
<tbody></tbody>
</table>
tr 一个tr表示一行
border调整列表的边框
cellspacing 调单元格与外边框之间的距离
cellpadding 调文本与单元格之间的距离
rowspan 垂直方向合并
colspan 水平方向合并
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
<video width="602px" height="345px" controls="controls">
<source src="test.mp4" type="video/mp4">
</video>
插入在线观看视频文件
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
定时跳转
=====
<script src="04%20myjs.js"></script>
刷新弹出框
js文件中写alert('456')
或者
<script >alert('456')</script>
=====
GET请求与POST请求
get请求:获取想要的数据
post请求:提交数据