前端 1 什么是前端？ 任何直接能够跟用户打交道的交互界面都可以称之为前端 2 为什么要学前端？ python全栈开发软件开发架构 c/s架构 b/s架构 本质上b/s也是c/s架构浏览器输入网址发生了几件事？ 1 输入网址 2 向服务端发送了请求 3 服务器接收请求并查询浏览器想要的数据返回给浏览器 4 浏览器拿到数据展示页面HTTP协议 超文本传输协议文件的后面名是给谁看？ 文件的后缀并不是给计算机看，只仅仅是给人看的HTML 超文本标记语言
HTML文档结构
Title
html文件打开方式
方式1： 找到该文件选择浏览器打开
方式2：pycharm内自动打开 先启动服务器
head内常用标签
title:页面标题 就是你新打开网页的标题
style：写css代码
script:内部可以直接写js代码，也可以通过src属性 引入内部js代码文件 就是你进入一个网页的时候上面会有一个提示信息
link：通过href引入外部css文件 可以对你下面的body里面的内容加样式
这是我的第一个前端页面 来了 老弟
body内标签
基本标签
h1~h6:标题标签
p: 段落标签 块级标签 自己站一行
199现价99 #双十一砍价原价199 现价 99 #块级标签 独占一行下划线 #字体下面带下划线
#块级标签 一行的分割线斜体 #斜体加粗 #加粗
特殊标签
空格是 &本身是&；
大于号 &get;小于号 <金钱￥ ¥；版权符号 ©注册商标 ®一个空格可以用敲一个空格会显示出来 你再去敲空格 页面上只显示一个可以用& 表示一个空格单位
常用标签
div 块级标签 独占一行
span 行内标签内容有多少占多数空间
a 标签 href 跟一个网页地址 target 可以设置参数 默认（_self）是当前网页跳转 改为_blank 后就是在打开一个新网页
a 标签 还支持定位 <a href="" id="a1">top</a>
img 图片标签 <img src="123.jpg" alt="王鸥"> alt 图片不存在或者损坏的时候显示的图片是什么 title="王鸥" width="400" title 鼠标悬停在上面显示的内容
width 可以设置图片大小 图片都是等比例缩小 放大的
页尾 a 标签 <a href="#a1">返回顶部</a> #在这里点击可以返回到顶部
标题列表
无需列表 ul>li*2
有序列表ol>li*2 ol 后面可以type设置排序的方式
标题列表 <dl>
| name | age | bobby |
|---|---|---|
| jason | 19 | 学习 | #列合并
| egon | 18 | |
| owen | 撩妹 | #横向合并|
写功能的时候 记得写注释
后面维护的时候方便查找
form表单（******）
功能：获取用户输入（手动输入/选择输入/默认值），并将获取到的用户信息发送给后端
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作 那么可以直接写一个<button> button按钮</tutton>
input
通过控制type的类型从而实现不同的获取用户输入的标签样式
text 普通文本
password 密文
date 日历
radio 单选项(加了之后变成选项 不加用默认text) 默认值checked
checkbox 多选框 默认值checked
file 获取文件
submit 触发提交数据的行为
button 普通的按钮 <input type="button" value="普通按钮">
reset 重置form表单内容
select
选择框 默认是单选的 可以通过multiple参数将单选变成多选 <select name="" id="" multiple> 下面可以跟多个option
一个option就是一个选项
textarea
获取用户大段文本值
form表单中几个重要的属性
action:用来控制数据到底提交给谁，写url来指定提交给谁
form表单默认是get请求，可以通过methord属性修改提交方法
form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型
你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值
form表单发送文件 需要修改enctype属性的值
默认urlencoded不支持传输文件
需要将其修改文multipart/form-data
1 获取用户输入的标签都必须需有一个name属性
用户输入的值会被存放到标签的value属性中
你可以理解为name属性对应是字典的key
用户输入的被value属性获取得到值是字典的valu
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请求与POST请求
get请求：向服务端获取资源（可以携带参数供服务端校验）
不推荐携带敏感性的参数
get请求携带的参数是有大小限制的 大概4KB
可以携带一些不重要的参数
post请求：朝服务端提交数据
敏感性的信息 都应该采用post提交方式
将form 表单中的method改为post就可以了注册的时候
总结：
标签分类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.htmlhttp://222.172.123.33/stu/intro.htmlURL地址由4部分组成第1部分：为协议：http://、ftp://等 第2部分：为站点地址：可以是域名或IP地址第3部分：为页面在站点中的目录：stu第4部分：为页面名称，例如 index.html各部分之间用“/”符号隔开。a标签：连接标签 可以通过href跳转到指定的网址 锚点功能：回到顶部 top bottom ps:target属性用来控制是否在当前页跳转 默认是_self当前页 也可以指定成_blank新建页面跳转所有的html标签都应该有一个id属性，用来唯一标识当前标签，为后续的DOM操作提供基础 也就意味着同一份html中标签的id不嫩重复，不写id属性也是可以的img标签 src图片路径：即可以是网络上的图片地址也可以是本地的图片地址 alt当前图片加载失败之后自动展示的提示信息 title 鼠标悬停在图片上时显示的文本 图片调节长宽的啥时候只需要调节一个，另外一个参数自动等比例缩放列表标签 ul:无需列表 ol:有序列表 dl：标题列表表单标签 固定以下面的格式书写