前端
前端介绍：任何直接能够跟用户打交道的交互页面都可以称之为前端
软件开发架构：
c/s架构
b/s架构
本质上b/s也是c/s架构、
浏览器输入网址发生了几件事？
1.输入网址
2.朝服务端发送请求（GET / POST）
3.服务器接受请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面
HTTP协议：
超文本传输协议
客户端服务端在数据交互的时候都必须遵循这套协议
补充：所有文件的后缀名并不是给计算机看的，仅仅只是告诉用户这个文件类型，计算机只有二进 制一个格式
HTML文档结构：
<!DOCTYPE html> <!--声明为html5
<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
表格标签
from 表单:前后端数据交互
标签分类:
双标签:h1-h6 ,p , a
自闭合标签: img , br , hr
块级标签:div, h1-h6, p,hr,br
特点:独占一行,块级标签能够嵌套块级标签和行内标签,能够设置长宽
行内标签:span ,a , img , i ,s, b,u
特点:自身内容有多的就占多大,行内标签不能设置长宽
UPL:统一资源定位符
UPL是统一资源定位符,也被成为网页地址,是因特网上标准的资源的地址
UPL地址有四大部分组成:
- 协议:http://, ftp://等
- 站点地址:可以是域名或IP地址
- 页面在站点中的目录:STU
- 页面名称:例如Index.html,各部分之间用' / '隔开
a标签:
<!--
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鼠标悬停在图片上时显示的文本
图片调节长宽的时候只需要调节一个,另一个参数自动等比例缩放
-->
列表标签:
<!--
ur:无序列表
ol:有序列表
dl:标题列表
-->
表单标签:
<!--固定就以下面的格式书写-->
<table>
<thead></thead>
<tbody></tbody>
</table>
<!--
tr:一个tr表示一行
border调整列表的边框
cellspacing调整单元格与外边框之间的距离
cellpadding 调文本与单元格之间的距离
rowspan 垂直方向合并
colspan 水平方向合并
-->
from表单:
<!--
功能:获取用户输入(手动输入/选择/默认值),并将获取到的用户信息发送给后端
from表单中只有input的type类型为submit才会触发提交信息的动作,如果不想通过input标签来触发提交动作,那么可以直接写一个<button>button按钮</button>
input:
通过控制type的类型从而实现不同的获取用户输入的标签样式
text 普通文本
password 密文
date 日历
radio 单选框
checkbox 多选框
file 获取文件
submit 出发提交数据的行为
button 普通的按钮
reset 重置from表单内容
select 选择框,默认是单选的,可以通过multiple参数将单选变为多选,一个option就是一个选项
textarea 获取用户打断文本值
from表单中几个重要的属性:
action 用来控制数据到底提交给谁,写url来指定提交给谁
from表单默认时get请求,可以通过method属性提交修改方法
from表单中需要给每一个获取用户输入的标签加上name属性来表示当前数据的类型,你可以将namesx当作字典的key,用户输入的当作字典values,并且你可以手动设置values
from表单发送文件,需要修改enctype,默认是urlencodedu支持传输文件,需要将其修改为multipart/from-data
-->