前端的开始
一，HTML介绍
web服务的本质
浏览器作为客户端，发出请求，--http协议，---服务端接收信息，---服务端回应----
服务端把html文件内容一bytes形式发送给浏览器，------浏览器开始渲染页面
import socket sk=socket.socket() sk.bind(('127.0.0.1',8090)) sk.listen() while 1: conn,add=sk.accept() conn.recv(1024) conn.send(b'http/1.1 40 ok\r\n\r\n') conn.send(b'hello') conn.close()
HTML：html就是超文本标记语言，是一种用于创建网页的标记语言
本质上是浏览器可以识别的规则，我们呢就按照规定的规则别写网页，对于不同的浏览器同一个
标签可能会有不同的解释，这就涉及到兼容性的问题了
网页的扩展名：HTML，或者htm
注意：
html只是一种标记语言并不是编程语言，它的主要作用是使用标签来描述网页的
最基本html文档的样式，对于pycharm来说，新建的时候选择html格式，就会自动弹出
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
解释：
<!DOCTYPE html>这一句是默声明为HTML5文档
<html>、</html> 是文档的开始标记和结束标记，是根本，在它们之间的是头部，head和主体，body
<head>、</head> 定义文档的开头，它们之间的内容不会在浏览器窗口显示，包含了文档的元（meta数据
）
<title>、</title> 定义网页标题，在浏览器标题栏显示
<body>、</body>一般写的就是文本的主要内容
注意：对于中文网页需要使用<meta charset=‘utf-8’>来声明，不然的话会乱码
HTML标签一般都是成对出现的。<div>开始 </div>结束
也有些是单个出现的：
<br/>换行
<hr/>
<img src=/>等
标签里可以有属性，也可以没有
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
在HTML里的注释还是control加？
title标签
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>dajiahao</title> </head> <body> </body> </html>
meta标签
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--指定编码类型--> <meta charset="UTF-8"> <!--设置关键字--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="百度"> <!--设置标题--> <title>dajiahao</title> <!--设置时间后自动跳转到指定页面--> <meta http-equiv="refresh" content="3;URL=http://www.iqiyi.com" > <!--gaosu IE以最高等级渲染页面--> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head> <body> </body>
h1标签
<h1>hello s9!</h1> <h2>hello s9!</h2> <h3>hello s9!</h3> <h4>hello s9!</h4> <h5>hello s9!</h5> <h6>hello s9!</h6>
style标签
<style>
a {
color: yellow;
}
</style>
<script></script>标签
提示作用，就是弹出页面
<script>alert("niyoubing")</script> 在head里
<link/> 引入外部样式表文件
<link rel="stylesheet" href="22.css">
img标签
<img
id="i1"src="1.jpg" alt="出错了" title="亲爱滴">
设置唯一id 图片路径 提示信息 当鼠标在上面显示
a标签超链接
<a href="http://www.duba.com/xiaoshuowz.html?f=dh_ksrk" target="_blank">贱人</a> 设置在新的窗口打开 设置新的连接名
本页跳转
<a href="#a2">kk</a> <div style="height:1000px;background-color: red"></div> <a href="" id="a2"></a>
<b>天王盖地虎</b>加粗 <i>天王盖地虎</i>倾斜 <u>天王盖地虎</u>下划线 <s>天王盖地虎</s>删除 <p>天王盖地虎</p>段落标签
<p>好吧VB不不不不不<br>不不不不不不<hr/>不过不不扩军不vsdvbmxcnmxn,不是</p>
br换行
hr水平线
如果在文本直接打空格那么无论你打几个，最后显示的都是一个，所以如果需要空格
那么我们就用 ；来代替，需要注意的是，不加尖括号
左右括号
1<a>
<左括号 >右括号 & & ¥ $ © 版权 ® 注册
div标签---块级标签
span标签 内联标签
标签分类
块儿级标签 h1~h6 div p hr
默认占浏览器宽度
能设置长和宽
内联标签(行内标签) a img u s i b span
根据内容决定长度
不能设置长和宽
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签。
列表
无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
<table border="" > <thead> <tr> <th> 序号 </th> <th> 姓名 </th> <th> 性别 </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> 二狗 </td> <td> 女 </td> </tr> </tbody> </table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
form表单
功能：
表单用于向服务器传输数据，从而实现用户与web服务器的交互
表单能够包含input系列标签，比如文本字段，复选框，单选框，提交按钮等等
表单还可以包含textarea，select，fieldest和label标签
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单的属性
action：规定向何处提交后面跟地址
注意：如果提交里的有文件那么 格式应该为：
<form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data"
method当提交数据里包含文件的话就要用post，enctype：是规范提交文件的格式
name：规定识别表单的名称
input 里的type的属性
text：单行输入文本
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>form实例</title> </head> <body> <form action=""> <p>用户名：<input name="name" type="text"> </p> </form> </body> </html>
password:密码输入框
date：日期输入框
checkbox：复选框
radio：单选框
submit：提交
reset：重置按钮，就是同一个页面，填到一半的时候，想要重新写入，一键清除
button 普通按钮
hidden:隐藏输入框
file：文本选择框
<p> 密 码：<input nanme="npass"type="password"> </p> <p> 生 日：<input name="date"type="date"> </p> <p> 性 别：<input name="sex"type="radio">男 <input name="sex"type="radio">女 </p> <p> 爱 好： <input name="hobby"type="checkbox">女人 <input name="hobby"type="checkbox">男人 <input name="hobby"type="checkbox">篮球 </p> <p> 上传头像： <input name="file"type="file"> </p> <p> <input name="submit" type="submit" value="提交"> </p> <p> <input name="reset" type="reset" value="重置"> </p> <p> <input type="button" value="普通按钮"> </p> <p> <input type="hidden"> </p> <p> 邮 箱：<input type="email"> </p>
属性需注意：
name：表单提交时的键和id是有区别的，
value：表单提交时，对应项的值
checked标签的应用：
用来设置，单选框，复选框的默认值
<p> 性 别： <input checked input name="sex"type="radio">男 <input name="sex"type="radio">女 </p> <p> 爱 好： <input checked name="hobby"type="checkbox">女人 <input name="hobby"type="checkbox">男人 <input checked name="hobby"type="checkbox">篮球 </p>
readonly：text和password设置只读
<p> 密 码：<input readonly nanme="npass"type="password"> </p>
disabled标签，将所有input都变成灰色的，且禁止只读
<p> 密 码：<input disabled nanme="npass"type="password"> </p>
文本框：textarea标签
<p>
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
slect标签：
设置地址：
地址： <select name="from" id="f1"> <option value="bj">北京</option> <option value="sh">上海</option> </select> 横向 地址： <select name="from" id="f2" multiple>#multiple纵向 <option value="bj">北京</option> <option value="sh">上海</option> </select>
三级菜单
<select name="from1" id="f3"> <optgroup label="北京"> <option value="cc">昌平</option> <option value="cc">该店</option> </optgroup> </select>
selectedmoren值在select里
<select name="from" id="f1"> <option value="bj">北京</option> <option selected value="sh">上海</option> </select>
label标签
定义：label标签为input元素定义标注（标记）
1，label元素不会显示任何特殊效果
2，label标签的for属性值应当与相关元素的id相等
<label for="l1"></label> <input id="l1" checked name="hobby"type="checkbox">女人 <input name="hobby"type="checkbox">男人 <input checked name="hobby"type="checkbox">篮球
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 。。。。。。。。。 </textarea>
name：名称
rows：行数
cols：列数
设置用户输入框里的灰色字 placeholder
<p>用户名：<input name="name" type="text" placeholder="二狗"> </p>
去掉输入框里的提示autocomplete
<form action="" autocomplete="off">
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库