九、HTML初始
9.1、前端引子
参考：https://www.cnblogs.com/Dominic-Ji/p/10864457.html
9.1.1、学习前端的历程
- html
- 网页的骨架，没有任何样式
- css
- 给骨架添加样式，让其具有多样性
- javascript
- 控制网页的动态效果
- 前端框架：bootstrap、jquery、vue
- 提前封装好了很多复杂的操作，只需要根据固定的语法调用即可
9.1.2、浏览器与http协议
TIPS：浏览器与服务器的b / s 架构和客户端与服务端的c / s 架构本质上没有什么区别。
-
浏览器窗口输入网址回车后会发生几件事
- 浏览器朝这个网址对应的服务端发起请求
- 网址实际上就是服务器ip+端口号的映射
- 服务端接收请求
- 比如说百度接受我想访问百度主页的请求
- 服务端返回相应的响应
- 给我返回一个百度的首页
- 浏览器接受响应，通过特定的格式渲染（解析）页面展示给用户看
浏览器统一了与不同服务端的数据交互，因为浏览器自定义了一个标准（http协议）让所有想通过浏览器去与用户交互的服务端都准这个标准去写服务端代码。以一种更简单更方便的模式出现在用户面前。
如果没有浏览器，那么我们只能用对方写好的客户端来和对方的服务端进行数据交互，不同的程序参照自己的规则，要访问很多应用就需要大量的客户端，这显然是不合理的，我们只会取下载常用的客户端，而那些可以用浏览器简化的通常是在浏览器上访问。
- 浏览器朝这个网址对应的服务端发起请求
-
http协议
- 定义：超文本传输协议，用来规定服务端和浏览器之间数据交互的格式
- 四大特性
- 基于请求响应
- 基于tcp/ip作用于应用层之上的协议
- 无状态（好坏都有）
- 不报错用户信息，每次访问都是一次新的请求
- 后续出现一些保存用户状态的技术：cookies、session、token
- 短/无连接
- 请求一次返回一次数据，两则之间没有任何连接关系
- 请求数据格式
- 请求首行（表示http协议版本，当前请求方式）
- 请求头（k、v键值对）
- （重要）
- 请求体（get请求方时没有，post请求方式有，因为post请求是提交的是敏感信息）
- 响应数据格式
- 响应首行（表示http协议版本，响应状态码）
- 响应头（k、v键值对）
- （重要）
- 响应体（返回给浏览器展示给用户看的数据）
- 响应状态码：用一串数字来表示一些复杂的状态或者描述信息
- 1xx：服务端成功接收到你的数据，且正在处理，你可以继续提交额外的数据
- 2xx：服务端成功响应了你想要的数据（200 ok 请求成功）
- 3xx：重定向（你的这次访问需要先通过其他页面才可以得到，会自动跳转）
- 4xx：请求错误
- 404：资源不存在
- 405：当前请求不合法或者不符合访问条件
- 5xx：服务器内部错误
- 请求方式
- get请求
- 朝服务端要数据
- 输入网址得到对应的内容
- post请求
- 朝服务端提交数据
- 用户登录 输入账户名密码后，提交到服务端
- get请求
9.2、html入门
引子：html是一种超文本标记语言，我们所看到的所有页面内部都是html代码
9.2.1、html的注释
单行注释 ： <!--单行-->
多行注释 ：<!--
多行1
多行2
-->
# 补充：由于html页面结构比较复杂，内容比较多，不便于后期开发维护，通常在写页面的时候，习惯用注释的方式来划分代码区域
<!--顶部导航条样式开始-->
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束-->
9.2.2、html文档结构
<html>
<head></head>:head存放的内容是给浏览器去识别做相应的操作的
<body></body>:body内存放的内容是浏览器展示给用户看道德花里胡哨的页面
</html>
9.2.3、html文档打开方式
- 在pycharm自动调用浏览器打开
- 手动找到html文件路径之后右键用浏览器打开
9.2.4、标签的分类
-
双标签：两对尖括号
<h1></h1> -
单标签：一对尖括号
<img />
9.2.5、head内常用的标签
-
定义：head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
-
具体示例
<title>Title</title> 网页标题 <style> h1 {color:red;}</style> 内部用来书写css代码 <link rel="stylesheet" href="mycss.css"> 引入外部css文件 <script> alter(123)</script> 内部用来书写js代码的 <script src="myjs.js"></script> 引入外部js代码 <meta charset="utf-8"> 指定网页的编码 <meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训"> 只要在搜索引擎上搜索content里面的内容，就会向用户展示该网站 <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 在搜索时，向用户展示的网站信息
9.2.6、body内常用的标签
<h1>我是h1</h1> 标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br>换行
<hr>水平分割线
9.2.7、标签的分类
- 块级标签：独占一行
- div
- h1~h6
- p
- 行内标签：文本本身占多大所在区域就多大
- span
- i
- u
- s
- b
- 注意
- 块级标签可以修改长宽，行内标签不可以，修改了也不会有变化
- 块级标签内部可以嵌套会计标签和行内标签，但是P标签虽然是块级标签，但是他只能嵌套行内标签，如果你嵌套了，问题也不大，浏览器会自动解开
- 行内标签不能嵌套块级标签，可以嵌套行内标签
9.2.8、特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
® 商标®
9.2.9、img标签
图片标签
<img src="" alt="" title="" height="" width="">
src="xxx"
1 图片的路径 可以是被本地的绝对路径 也可以是网上的(实际上也是路径)
2 url 直接朝该url发送get请求
alt="xxx"
这是图片加载不出来的时候 给用户的提示信息
title="xxx"
当鼠标浮在图片上时，会自动显示的信息
height='200px' width="200px"
高度和宽度是两个相辅相成的数据，如果我们只改一个，另一个就会根据同等比例对图片进行放缩，如果都改且数值不一致就会导致图片失真
9.2.10、a标签
链接标签
<a href="" target=""></a>
这里的链接会自动修改颜色加下划线，如果点击过后就会在该窗口一直显示另一种颜色（浏览器的记录功能），这里的颜色和下划线可以通过css修改
href="www.baidu.com"
1 放url，用户点击就会跳转到url页面
2 放本页面中的其他标签的id值，点击跳转（锚点）
target=""
默认不写的时候a标签的点击事件是在当前野蛮跳转，默认值是：_self
如果我们要在新建的页面跳转，修改为：_blank
a标签实现锚点功能
点击一个文本 自动跳转到对应区域
在href后写#对应id号
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
9.2.11、列表标签
-
无序列表
<ul type=""> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> </ul> type里面填写的是样式 虽然ul标签很丑，但是在页面布局的时候，只要是排版一直的几行数据基本上都是用的ul标签 -
有序列表
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol> -
标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>
9.2.12、表格标签
-
定义：简单的html表格是由table元素以及一个或者多个tr、th或td元素组成
-
使用
- tr元素定义表格行
- th元素定义表头
- td元素定义表格单元格
-
表格基本结构
<table border=1> <thead> <tr> <th>username</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>alex</td> <td>123</td> <td>read</td> </tr> <tr> <td>jason</td> <td>123</td> <td>sing</td> </tr> <tr> <td>tank</td> <td>123</td> <td>swim</td> </tr> </tbody> </table> # <thead></thead>:定义表头（字段） # <tbody></tbody>:定义数据 # <tr></tr>:每一个tr就是一行 # <th></th>:加粗的文本 # <td></td>:普通的文本 -
表格属性
- 在table内添加
- boder:表格边框
- cellpadding:内边距
- cellspacing:外边
- 在th、td内添加
- 像素 百分比（最好是用css设置长宽）
- rowsapn:单元格竖垮多少行
- colspan:单元格横跨多少行
- 在table内添加
9.2.13、form表单
-
功能：表单用于向服务器传输数据，从而实现用户与web服务器的交互。表单能够包含input系列标签，比如文本字复选框、单选框、提交按钮等。表单还可以包含textarea、select、filedset和label标签
-
代码示例
""" 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器 """ # 写一个注册功能 <form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端 action:控制数据提交的后端路径(给哪个服务端提交数据) 1.什么都不写 默认就是朝当前页面所在的url提交数据 2.写全路径:https://www.baidu.com 朝百度服务端提交 3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面 host:port/index/ <label for="d1"> 第一种 直接讲input框写在label内 username:<input type="text" id="d1"> </label> 第二种 通过id链接即可 无需嵌套 <label for="d2">password:</label> <input type="text" id="d2"> ps:input不跟label关联也没有问题 """ label 和 input都是行内标签 """ input标签 就类似于前端的变形金刚 通过type属性变形 text:普通文本 password:密文 date:日期 submit:用来触发form表单提交数据的动作 button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能 reset:重置内容 radio:单选 默认选中要加checked='checked' <input type="radio" name="gender" checked='checked'>男 当标签的属性名和属性值一样的时候可以简写 <input type="radio" name="gender" checked>女 checkbox:多选 <input type="checkbox" checked>DBJ file:获取文件 也可以一次性获取多个 <input type="file" multiple> hidden:隐藏当前input框 钓鱼网站 select标签 默认是单选 可以加mutiple参数变多选 默认选中selected <select name="" id="" multiple> <option value="" selected>新垣结衣</option> <option value="" selected>斯佳丽</option> <option value="">明老师</option> </select> textarea标签 获取大段文本 <textarea name="" id="" cols="30" rows="10"></textarea> # 能够触发form表单提交数据的按钮有哪些(一定要记住) 1、<input type="submit" value="注册"> 2、<button>点我</button> # 所有获取用户输入的标签 都应该有name属性 name就类似于字典的key 用户的数据就类似于字典的value <p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </p> -
表单属性
<form action="" methed="" enctype=""></form> """ 这个form标签内供用户书写的数据会被这个表单提交给action的后端 action:控制数据提交的后端路径（服务端） 1.什么都不写，默认给当前页面的url提交数据 2.写全路径：https:www.baidu.com 朝百度服务端提交数据 3.直接写路径的后缀:/index/ 会自动拼接到当前页面ip+port---->ip+port+/index/ methed:控制请求参数 get请求（默认） 虽然能携带数据，但是数据是跟在url后面的，不安全 post请求 携带数据放在请求体里面（表单提交必须是post请求） enctype:控制数据的编码格式 默认：urlencode只能发送普通文本，文件只能接受文件名 修改为formdata可直接接收文件 """ -
表单元素
-
input：元素会根据不同的type属性，变化为多种形态
""" text:单行文本输入框 <input type="text"/> password:密码输入框 <input type="password"/> date:日期输入框 <input type="date" /> radio:单选框 <input type="radio" /> checkbox:多选框 <input type="checkbox" /> submit:提交按钮 <input type="submit" /> reset:重置按钮 <input type="reset" /> button:普通按钮 <input type="button" /> hidder:隐藏按钮 <input type="hidder" /> file:文件输入框 <input type="file" /> """ ###### 属性说明 ###### # 1 multiple:布尔属性，设置后为多选，否则默认为单选 # 2 disabled：禁用标签 # 3 selected：默认选中该项 # 4 value：定义提交时的选项值 -
label标签
-
定义：
-
说明
- label元素不会向用户呈现任何特殊效果
-
示例
# 使用方法一 <form action=""> <label>username:<input type="text"></input></label> <label>password:<input type="password"></input></label> </form> # 使用方法二 <form action=""> <label for="d1">username:</label> <input type="text" id="d1"></input> <label for="d2">password:</label> <input type="password" id="d2"></input> </form>
-
-
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea> -
select标签
-
默认单选，后啊加multiple变成多选，selected表示默认值
<select> <option value="" selected>jason</option> <option value="">tank</option> <option value="">egon</option> </select>
-
-
-
重点
# 能触发form表单数据提交的按钮 1 <input type="submit" value="注册"></input> 2 <button>点我</button> # 用户输入的数据在后端渠道的是一个kv键值对 # 所以在后端书写的时候每个用于书写的标签都要加上name 等于字典里的键 用户输入的数据就是字典里面的值
9.2.14、通过flask实现表单提交
服务端
from flask import Flask,requests
app = Flask(__name__)
@app.route('/index/' methed=['get','post'])
def index():
print(requests.form)
print(requests.files)
file_obj = requests.files.get('mytupian.jpg')
file_obj.save(file_obj.name)
return 'ok'
app.run()
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:5000/hz/" method="post" enctype="multipart/form-data">
<label for="d1">
姓名：<input type="text" id="d1" name = "姓名">
</label>
<label for="d2">密码</label>
<input type="password" id="d2" name="密码">
<!--单选 指定相同name才是一类单选-->
<p>
<input type="radio" name="sex" checked value="男">男
<input type="radio" name="sex" value="女">女
</p>
<!--多选 不用指定name -->
<p>
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
</p>
<p>
<!-- multiple表示可以多选-->
<input type="file" multiple name = 'file'>
<input type="file" >
</p>
<p>
<select name="" id="" multiple name="select">
<option value="" selected value="a">a</option>
<option value="" value="b">b</option>
<option value="" value="c">c</option>
</select>
</p>
<p>
<textarea name="" id="" cols="30" rows="5"></textarea>
</p>
<p>
<input type="date">
</p>
<p>
<input type="submit">
<input type="button" value="button">
<input type="reset">
<button></button>
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<h1>登录</h1>
<!-- 用户名-->
<p>
<label for="d1">username:
<input type="text" id="d1">
</label>
</p>
<!-- 密码-->
<p>
<label for="d2">password:
<input type="password" id="d2">
</label>
</p>
<!-- 生日-->
<p>
<label for="">birthday:
<input type="date">
</label>
</p>
<!-- 性别-->
<p>
<label for="">gender:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="radio" name="gender">其他
</label>
</p>
<!-- 爱好-->
<p>
<label for="">hobby:
<input type="checkbox" name="hobby">lasiten
<input type="checkbox" name="hobby">talk
<input type="checkbox" name="hobby" checked>read
<input type="checkbox" name="hobby" checked>writer
</label>
</p>
<!-- 住址-->
<p>address:
<select name="address" id="">
<option value="">重庆</option>
<option value="">成都</option>
<option value="" selected>武汉</option>
<option value="">天津</option>
</select>
</p>
<!-- 水果-->
<p>favorite_furit:
<select name="" id="" multiple>
<option value="">apper</option>
<option value="">pear</option>
<option value="">peach</option>
<option value="">watermale</option>
</select>
</p>
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
</form>
</body>
</html>