前端 1 什么是前端？ 任何直接能够跟用户打交道的交互界面都可以称之为前端 2 为什么要学前端？ python全栈开发 软件开发架构 c/s架构 b/s架构 本质上b/s也是c/s架构 浏览器输入网址发生了几件事？ 1 输入网址 2 向服务端发送了请求 3 服务器接收请求并查询浏览器想要的数据返回给浏览器 4 浏览器拿到数据展示页面 HTTP协议 超文本传输协议 文件的后面名是给谁看？ 文件的后缀并不是给计算机看，只仅仅是给人看的 HTML 超文本标记语言
HTML文档结构
<!DOCTYPE html> <html lang="en"> <head> <!--head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的--> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--用户能够看见的内容都在body里面--> <!-- 这是多行注释 --> </body> </html>
html文件打开方式
方式1： 找到该文件选择浏览器打开
方式2：pycharm内自动打开 先启动服务器
head内常用标签
title:页面标题 就是你新打开网页的标题
style：写css代码
script:内部可以直接写js代码，也可以通过src属性 引入内部js代码文件 就是你进入一个网页的时候上面会有一个提示信息
link：通过href引入外部css文件 可以对你下面的body里面的内容加样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/lakei/"> <!--两秒后跳转到对应的网址--> <title>这是我的第一个前端页面</title> <script src="04%20myjs.js"></script> <!--script:内部可以直接写js代码，也可以通过src属性 就是你进入一个网页的时候上面会有一个提示信息--> <link rel="stylesheet" href="03%20mycss.css"> </head> <body> <h1>来了 老弟</h1> <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=4d1f3cc25966d0167a199e28a72ad498/728da9773912b31bc49572268d18367adbb4e1c0.jpg" alt="王鸥"> </body> </html>
body内标签
基本标签
h1~h6:标题标签
p: 段落标签 块级标签 自己站一行
<s>199</s> 现价99 #双十一砍价原价199 现价 99 <br> #块级标签 独占一行 <u>下划线</u> #字体下面带下划线 <hr> #块级标签 一行的分割线 <i>斜体</i> #斜体 <b>加粗</b> #加粗
特殊标签
空格是 &本身是&；
大于号 &get; 小于号 < 金钱￥ ¥； 版权符号 © 注册商标 ® 一个空格可以用敲一个空格会显示出来 你再去敲空格 页面上只显示一个 可以用& 表示一个空格单位
常用标签
div 块级标签 独占一行
span 行内标签内容有多少占多数空间
a 标签 href 跟一个网页地址 target 可以设置参数 默认（_self）是当前网页跳转 改为_blank 后就是在打开一个新网页
a 标签 还支持定位 <a href="" id="a1">top</a>
<div style="height: 1000px;background: rgba(122,81,58,0.53)"></div>
<div style="height: 1000px;background: #3652a5"></div>
<div style="height: 1000px;background: #1b8ea5"></div>
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>
<dt>标题1</dt>
<dd>内容</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
table border="1" 表的外边框宽度
<body> <table border="10"> <thead> <tr> <th>name</th> <th>age</th> <th>bobby</th> </tr> </thead> <tbody > <tr> <td>jason</td> <td>19</td> <td rowspan="2">学习</td> #列合并 </tr> <tr> <td>egon</td> <td>18</td> <!--<td>吃饭</td>--> </tr> <tr> <td>owen</td> <!--<td>18</td>--> <td colspan="2">撩妹</td> #横向合并 </tr> </tbody> </table> </body> </html>
写功能的时候 记得写注释
<!--导航条开始-->
<!--导航条结束-->
<!--侧边栏开始-->
<!--侧边栏结束-->
后面维护的时候方便查找
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就可以了注册的时候
<form action="" method="post">
<label for="i1">username: <input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" id="i2" name="password"></label>
<input type="submit">
</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> <theade></theade> <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 获取用户大段文本值