day32 HTML
什么是前端
只要是跟用户打交道的界面都可以称之为前端
# eg：电脑界面， 手机界面，平板界面，
什么是后端？
eg：python， java，php，go,
不跟用户直接打交道的都可以称为后端
为什么学前端
为了成为全栈工程师
前端，后端， 数据库，Linux
但是，前端不会学的特别深， 要求看得懂别人写的一些简单页面和自己搭建一些简单的页面就可以了
前端的学习历程
# 前端三剑客
1. HTML：网页的骨架，没有任何的样式
2. CSS：美化网页，给网页骨架添加样式的
3. JavaScript：就是让网页动起来， 简称js
软件开发架构
C/S架构
B/S架构
在浏览器地址栏输入网址，回车发生了什么事？
1. 浏览器向服务端发起请求
2. 服务器接收客户端的请求
3. 服务端处理客户端的请求，并且返回给浏览器
4. 浏览器根据特定的规则渲染页面
# 要想让浏览器跟很多个服务端进行交互，那么，就一定要遵循一定规则
HTTP协议
"""
超文本传输协议，用来规定服务端和客户端之间的数据传输格式
"""
# 四大特征：
1、基于请求响应
2、基于TCP/IP协议之上的应用层协议
3、无状态
# 不能保存用户的信息
保存用户信息的一些技术：cookie， session，token。。。。
4、 短连接/无连接
长连接
# 请求数据格式
请求首行 （请求方式，路径，版本号）
请求头 （一大堆kv键值对）
\r\n
请求体 （get请求没有请求体，post请求有请求体）
# get请求参数传递格式：
?k=v&k1=v1&k2=v2...
# 响应数据格式
响应首行 （响应方式）
响应头 （一大堆kv键值对）
\r\n
响应体
# 响应状态码
其实就是用一些数字来表示一些复杂的信息
1xx: 数据提交成功，正在处理，你还可以进行提交
2xx：200 OK 请求成功
3xx：重定向
4xx：404 请求资源不存在， 403:请求的资源没有权限
5xx：500：服务器内部错误
# 请求方式：
1. get请求
跟服务要数据的
eg：baidu.com
2. post请求
提交数据， 比如登录，用户名和密码
HTML简介
<h1>hello baby</h1>
<a href='http://www.baidu.com'>click me</a>
<img class="index-logo-src" src="//www.baidu.com/img/flexible/logo/pc/result.png" alt="到百度首页" title="到百度首页">
标签的分类：
1. 双标签
2.单标签
HTML的书写位置
1. 在pycharm中新建html文件
2. 新建文本文档，然后修改后缀名为.html
HTML的文档结构
<!DOCTYPE html> # 告诉浏览器这个文件是html文件
<html lang="en"> # language，english
<head> # head标签中的代码不是用来给用户看的
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> # body中的内容写什么就显示什么
</body>
</html>
head中常用标签
# 打开html文件的方式：
1. 在pycharm中点击右上角的浏览器图标
2. 双击html文件
# <script>
<title>淘宝</title>
<script>
// js代码
// alert(123)
</script> # 警示框
<link rel="stylesheet" href="mycss.css">--> 链接到自己建的css里
<script src="myjs.js"></script> 链接到自己建的js里
<meta name="keywords" content="购物平台，生活用品"> # 描述性质的
<meta name="description" content="手机，电脑，家电"> # 搜索关键字的
body内常用标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<br>：换行
<hr>：水平线
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
# 特殊字符
空格：
>:>
标签的分类
1. 块儿级元素
# 独自占一行
<h1>~<h6> # 标题
<p></p> #段落
<div></div> # 定义块级元素
2. 行内元素
# 自身文本有多大就占多大
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<span> </span>
标签的嵌套
# 块儿级元素可以嵌套所有的行内元素，
p标签虽然是块儿级元素，但是不能嵌套块儿级元素
# 行内元素只能嵌套行内元素，不能嵌套块儿级元素
img标签
<img src="123.png" alt="这是小姐姐丢失了" title="很好看哦" width="423px" height="500px">
src:
1. 外链地址
2. 本地地址
title：
鼠标悬浮时候的提示，
他是所有标签都有的
width：
图片的宽度，和高度等比例缩放， 宽高只需要写一个
alt：
当图片加载失败的时候，显示的信息
a标签
<a href="http://www.baidu.com" target="_blank" title="点我跳转">点我跳转</a> # 超链接
<a href="http://www.baidu.com"target="_blank">点我跳转</a> # 重新打开一个标签
<a href="http://www.baidu.com"target="_blank"title="快点我">点我跳转</a> # 可以在后面加字
target:
# 新开一个标签打开页面
href:
跳转的链接
target：
1._blank表示在新标签页中打开目标网页
2._self表示在当前标签页中打开目标网页
列表标签
<ul type="square">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
标签的分类
1. 块儿级元素
# 独自占一行
<h1>~<h6>
<p></p>
<div></div>
2. 行内元素
# 自身文本有多大就占多大
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<span> </span>
标签的嵌套
# 块儿级元素可以嵌套所有的行内元素，
p标签虽然是块儿级元素，但是不能嵌套块儿级元素
# 行内元素只能嵌套行内元素，不能嵌套块儿级元素
img标签
<img src="123.png" alt="这是小姐姐丢失了" title="很好看哦" width="423px" height="500px">
src:
1. 外链地址
2. 本地地址
title：
鼠标悬浮时候的提示，
他是所有标签都有的
width：
图片的宽度，和高度等比例缩放， 宽高只需要写一个
alt：
当图片加载失败的时候，显示的信息
a标签
<a href="http://www.baidu.com" target="_blank" title="点我跳转">点我跳转</a>
target:
# 新开一个标签打开页面
href:
跳转的链接
列表标签
<ul type="square">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
表格
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<table border="5" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">egon</td> # 占两行
<td>18</td>
<td>male</td>
</tr>
<tr>
<td>2</td>
<!-- <td>jason</td>-->
<td colspan="2">19</td> # 占两列
<!-- <td>male</td>-->
</tr>
<tr>
<td>3</td>
<td>ly</td>
<td>20</td>
<td>female</td>
</tr>
</tbody>
</table>
# 就是可以把用户输入的数据提交到后端
eg：写一个登录页面
action：指定向哪个后端提交数据
1. 什么都不写，默认提交到当前地址
2. 全写，http://127.0.0.1:5000/index/
3. /index/
ip:port/index/
# 上传文件必须满足两个条件：
1. 请求方式必须是post
2. 编码方式必须改为：enctype='multipart/form-data'
# 编码方式：
1. urlencoded
2. form-data
3. json
标签的两个重要属性
# id，不能重复
<label for="d1">用户名： </label>
# class：可以重复
<input type="text" id="d1" class="c1 c2 c3">
# 自定义属性
<input type="text" username="egon">