1、什么是前端？
任何直接能够跟用户打交道的交互界面都可以称之为前端
软件开发架构
c/s架构
b/s架构
本质上 b / s也是 c / s 架构
浏览器输入网址发生了几件事？
1、输入网址
2、朝服务端发送请求
3、服务器接收并查询浏览器想要的数据返回浏览器
4、浏览器拿到数据展示页面
HTTP协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵守这套协议
文件的后缀并不是给计算机看的，而仅仅是给人看的。因为数据在网路的传输中都是以二进制的形式进行传输的。
HTML
超文本标记语言
服务端
客户端
文件（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 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <title>这是我的第一个前端页面</title> <!--<style>--> <!--h1 {--> <!--color: green;--> <!--}--> <!--</style>--> <!--<script>--> <!--alert('hello baby~')--> <!--</script>--> <script src="04%20myjs.js"></script> <link rel="stylesheet" href="03%20mycss.css"> </head> <body> <h1>来啦 老弟！</h1> </body> </html>
body内标签
基本标签
h1~h6 ：标题标签
p ：段落标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 我是正常文本 <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <h4>我是h4</h4> <h5>我是h5</h5> <h6>我是h6</h6> <h1>咏鹅</h1> <p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，</p><p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，</p> 鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波， <s>199</s>现价99 <br> <u>下划线</u> <hr> <i>斜体</i> <b>加粗</b> </body> </html>
特殊符号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 1<a 2>3 ¥ © ® <p>苍茫的&天涯&是我的 爱绵绵的青山脚下一片海</p> </body> </html>
常用标签
div ：
是一个块级元素（说明可以进行嵌套）。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
span：
用来组合文档中的行内元素。
p：
定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
a：
标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
img：
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
标签分类1：
双标签 h1 ~h6 p a
自闭合标签 img br hr
标签分类2：（*****）：
块儿级标签 div h1~h6 p hr br
独占一行
块儿级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块儿级标签能够设置长宽
行内标签 span a img i s b u
自身内容有多的就占多大
行内标签不能设置长宽
列表标签：
ul：无序列表
ol：有序列表
dl：标题列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<ul type="disc">--> <!--<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">--> <!--<li>111</li>--> <!--<li>222</li>--> <!--<li>333</li>--> <!--<li>444</li>--> <!--<li>555</li>--> <!--<li>666</li>--> <!--</ol>--> <dl> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl> </body> </html>
ul去除自带的样式（网页开发中大量用到）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { list-style-type: none; padding-left: 0; } </style> </head> <body> <ul> <li>书籍1</li> <li>书籍2</li> <li>书籍3</li> <li>书籍4</li> <li>书籍5</li> </ul> </body> </html>
表格标签：
固定书写格式
<table>
<thead></thead>
<tbody></tbody>
</table>
tr 一个 tr 表示一行
border 调整列表的边框
cellspacing 调整单元格与外边框之间的距离
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>
from表单
功能：获取用户输入（手动输入/选择/默认值），并将获取到的用户信息发送给后端
from表单中只有input 的 type 类型为 submit 才会触发提交信息的动作
如果不想通过 input 标签来触发提交动作，那么可以直接写一个 <button>button按钮</button>
input
通过控制 type 的类型从而实现不同的获取用户输入的标签样式
text 普通文本
password 密文
date 日历
radio checked 单选框 如果属性名和属性值相等那么可以简写
checkbox 多选框
file 获取文件
form 表单上传文件需要修改两个参数的值
1、将method 由默认的get改为post
2、将enctype 编码格式由默认的urlencoded 改为 fromdata
submit 触发form表单提交数据的行为
button 普通的按钮。啥功能也没有（但是用的最多，因为可以自定义）
reset 重置from表单内容
select
选择框 默认是单选的 可以通过 mutiple 参数将单选变为多选
一个option 就是一个选项
textarea
获取用户打断文本值
button 标签 也可以发出form 表单的提交动作
form表单中几个重要的属性
action ：用来控制数据到底提交给谁 写URL来指定提交给谁
from 表单默认是 get 请求 可以通过 method 属性修改提交方法
from 表单中需要给每一个获取用户输入的标签加上name 属性来标识当前数据的类型
你可以将name 属性当作字典的key 用户输入的当做字典的value 并且你可以手动设置value 值
from表单发送文件 需要修改enctype属性的值
默认是 urlencode 不支持传输文件
需要将其修改为 multipart / from-data
GET请求与POST请求
get请求：
朝服务端获取资源(可以携带参数供服务端校验)
不推荐携带敏感型的参数
get请求携带的参数是有大小限制的 大概4KB
可以携带一些不重要的参数
post请求:朝服务端提交数据
post请求：
朝服务端提交数据
敏感性的信息都应该采用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>
总结:
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>