HTML基础
HTML前戏
如何将服务端发送的数据能够正常的被浏览器识别：
import socket
sever = socket.socket()
sever.bind(('127.0.0.1',8080))
sever.listen(5)
while True:
conn,addr = sever.accept()
data = conn.recv(1024)
print(data)
# 构造出符合HTTP协议格式的数据（了解）
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
"""
HTTP(协议)/1.1(版本) 200 OK(响应状态码)-->响应首行
/r/n-->响应头(没有)
/r/n-->按照数据格式空一行
"""
conn.send(b'hello baby~') # 响应体
conn.close()
请求格式说明：
补充：人工智能换行-->/r/n
"""
请求首行：
b'GET / HTTP/1.1\r\n
请求头：
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
请求体(因为是Get请求，所以没有请求体)
'
"""
HTML简介
超文本标记语言
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
<h1>hello big baby~</h1>
<a href="https://www.mzitu.com/">click me！give you some color to see see！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
HTML就是书写网页的一套标准
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
补充:文件的后缀名其实是给用户看到的，只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能
注意:HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
两种打开HTML文件的方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 一般使用谷歌浏览器(功能强大)
HTML正式内容
第一种标签方式
<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img/>
1 双标签
2 单标签(自闭和标签)
head内常用标签
在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全
网页标题
<title>Title</title>
内部用来书写css代码
<style>
h1 {
color: greenyellow;
}
</style>
内部用来书写js代码
<script>
alert(123)
</script>
还可以引入外部js文件
<script src="myjs.js"></script>
引入外部css文件
<link rel="stylesheet" href="mycss.css">
Meta标签使用
Meta标签介绍：
-
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
-
标签位于文档的头部，不包含任何内容。
-
提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.taobao.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
body内常用标签
你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码
基本标签：
<h1>我是h1</h1> 标题标签 1～6级标题
<!--<b>加粗</b>-->
<strong>强调</strong>
<!--<u>下划线</u>-->
<ins>插入</ins>
<!--<i>倾斜</i>-->
<em>倾斜</em>
<!--<s>删除</s>-->
<del>删除</del>
<p>段落</p> 一个p就是一行
<br> 换行
<hr> 水平分割线
第二种标签方式
- 块儿级标签:独占一行
h1~h6 p div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
注意：但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签。
如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
- 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签 可以嵌套行内标签
特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
商标® ®
常用标签
div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
img标签
# 图片标签
<img src="" alt="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<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>
标签具有的两个重要书写
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
列表标签
-
无序列表(较多)
<ul> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> </ul> 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签 自动补全语法(emmet插件) ol>li{$}*4 -
有序列表(了解)
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol> 1 A I a ... 了解即可 -
标题列表(了解)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>
表格标签
| 标签代码 | 标签注释 |
|---|---|
| < table>< /table> | 创建一个表格 |
| < thead>< /thead> | 创建一个表头(字段信息) |
| < tr>< /tr> | 一个tr代表一行 |
| < th>< /th> | 加粗文本 |
| < td>< /td> | 正常文本 |
| < tbody>< /tbody> | 表单(数据信息) |
结构框架：
<table>
<thead>
<tr> 一个tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead> 表头(字段信息)
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tr>
</tbody> 表单(数据信息)
</table>
补充:
<!--table参数-->
<table border="1" cellpadding="5" cellspacing="5">
border添加表格样式(添加外边框)
cellpadding内边距(文字到内边框的距离)
cellspacing内外边框的距离
<!--td参数-->
<td colspan="2">111</td> 水平方向占多行
<td rowspan="2">222</td> 垂直方向占多行
原生的表格标签很丑，但是后续我们一般都是使用框架封装好的
表单标签
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
实现一个注册功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h1>注册界面</h1>
<form action="">
<p>
<label for="d1">username:<input type="text" id="d1"></label>
</p>
<p>
<label for="d2">password:</label>
<input type="password" id="d2">
</p>
<p>
<label for="d3">birthday:<input type="date" id="d3"></label>
</p>
<p>gender:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby">read
<input type="checkbox" name="hobby">DBJ
<input type="checkbox" name="hobby">study
<input type="checkbox" name="hobby">play
</p>
<p>province:
<select name="" id="">
<option value="">北京</option>
<option value="" selected>上海</option>
<option value="">深圳</option>
</select>
</p>
<p>前女友：
<select name="" id="" multiple>
<option value="">1</option>
<option value="" selected>2</option>
<option value="" selected>3</option>
</select>
</p>
<p>province1:
<select name="" id="">
<optgroup label="上海">
<option value="">11</option>
<option value="">22</option>
<option value="">33</option>
</optgroup>
<optgroup label="北京">
<option value="">1111</option>
<option value="">2111</option>
<option value="">3111</option>
</optgroup>
<optgroup label="深圳">
<option value="">1222</option>
<option value="">2222</option>
<option value="">3222</option>
</optgroup>
</select>
</p>
<p>文件：
<input type="file" multiple>
</p>
<p>自我介绍:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<!--当你没有指定按钮的文本内容，不同的浏览器打开之后渲染的结果可能不同 -->
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我</button>
</form>
</body>
</html>
上述代码相关标签介绍：
form标签
代码块：
<form action=""></form>
在该form标签内部书写的获取用户的数据都会被form标签提交到后端
相关属性介绍
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
label标签
作用：将文字和输入框链接起来
第一种 直接讲input框写在label内
<label for="d1">
username:<input type="text" id="d1">
</label>
第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
注意：
input不跟label关联也没有问题
label 和 input都是行内标签
input标签
作用：就类似于前端的变形金刚，通过type属性变形
相关属性简介：
| type属性相关 | 作用 |
|---|---|
| text | 普通文本 |
| password | 密文 |
| date | 日期 |
| submit | 用来触发form表单提交数据的动作 |
| button | 就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能 |
| reset | 重置内容 |
| radio | 单选 |
| checkbox | 多选 |
| file | 获取文件 也可以一次性获取多个(< input type="file" multiple>) |
| hidden | 隐藏当前input框(钓鱼网站) |
| name | 所有获取用户输入的标签,都应该有name属性(name就类似于字典的key,用户的数据就类似于字典的value) |
select标签
作用：默认是单选 可以加mutiple参数变多选 默认选中selected
<select name="" id="" multiple>
<option value="">1</option>
<option value="" selected>2</option>
<option value="" selected>3</option>
</select>
textarea标签
作用：获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
补充：可以通过maxlength确定最大输入量
验证form表单提交数据
接下来的代码无需掌握，看一下效果即可：
先安装flask框架:
pip3 install Flask
form表单默认提交数据的方式，是get请求，数据是直接放在url后面的
http://127.0.0.1:5000/index/?gender=on&hobby=on
你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式，默认是urlencoded 只能够提交普通的文本数据，formdata就可以支持提交文件数据
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
针对用户选择的标签,用户不需要输入内容,但是你需要提前给这些标签添加内容value值,否则会返回on
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:
<input type="text" id="d1" name="username" value="默认值">
</label>
disable 禁用
readonly 只读
flask框架创建的服务端代码：
from flask import Flask,request
app = Flask(__name__)
"""
当前url既可以支持get请求又可以支持post请求
如果不默写只能支持get请求
原理：
装饰器当中填入的实参映射到index这个视图函数上面,
然后访问我这个网站的时候，
会执行index这个函数，然后将这个返回值返回给浏览器
"""
@app.route('/index/',methods=['get','post'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
print(request.files) # 获取form表单提交过来的文件数据
file_obj = request.files.get('myfile')
file_obj.save(file_obj.name)
return 'ok'
app.run()
遗留问题(学后补充)：
1、form标签里面的action属性不是直接加/index/ 就可以自动识别服务端的ip和端口号吗，为什么用flask框架搭好服务端如果不在action里放ip和端口号就会报错
2、flask框架里面那个装饰器第一个参数不是放的是url吗，里面放一个/index/ 他会自动补全成host:port/index/这种吗？
