• 前端之HTML超文本标记语言，http协议

    一：了解前端和后端

    1.前端：直接和用户打交道的界面

    2.后端：不能直接和用户打交道的写在内部的真正执行功能的代码

    3.前端的学习历程：

    • 1.html 相当于是网站的骨架
    • 2.css 给网站装修，加样式
    • 3.Javascript 让网站动起来

    二：http超文本传输协议前戏

    1.先写一个服务端

    import socket

server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)


sock, addr = server.accept()
    sock.send(b'HTTP/1.1 200 OK \r\n\r\n hello world')
    data = sock.recv(1024)
    print(data)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2.让浏览器充当客户端，在浏览器输入ip和端口的组合，访问我们写的服务端:127.0.0.1:8080

    3.浏览器客户端接收到的数据必须符合浏览器端制定的协议：http,ftp,https等

    三：http协议

    1.http的4大特征
    • 1.基于请求响应
    • 2.基于tcp/ip协议之上的应用层协议
    • 3.无状态 即：不保存用户状态
    • 4.短/无链接 请求一次，响应一次，之后两者没有任何关系
    2.请求数据格式
    • 1.请求首行（请求方式有好多种 协议名称及版本号）
    • 2.请求头（一大堆K:V键值对)
    • 3.换行 \r\n
    • 4.请求体(携带一些敏感的数据 不是所有的请求都有请求体)
    3.响应数据格式
    • 1.响应首行（响应状态码）
    • 2.响应头（一大堆K:V键值对)
    • 3.换行 \r\n
    • 4.响应体（一般情况下就是浏览器要展示给用户看的数据)
    4.响应状态码
    • 1xx 向后端提交数据成功，还可以继续提交数据或者等待
    • 2xx 请求数据成功
    • 3xx 重定向，即：如果账号未登录，自动跳转到登录界面
    • 4xx 资源不存在
    • 5xx 服务器内部错误
    • 自定义状态码：一般情况下从10000开始

    四：html超文本标记语言

    所有浏览器展示的页面必备的

    1.文件结构
    DOCTYPE html>
<html lang="en">
<head>  
    <meta charset="UTF-8">
    <title>Titletitle>

head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • head标签：给浏览器看的
    • body标签：给用户看的
    2.注释
    

    • 1
    3.html标签分类
    • 1.单标签
    • 2.双标签
    4.head中的基本标签：
    • script标签：里面写js代码 也可以通过src属性引入外部js文件
    • link标签：里面引入css文件
    • style标签：里面写css代码
    • title标签：网页的小标题
    5.body中的基本标签
    • h1~h6 标题
    • p 段落
    • hr 水平分割线
    • br 换行符
    • u 下划线
    • i 斜体
    • s 删除线
    • b 加粗
    • 注意：很多样式的实现可能有多种标签形式
    6.块儿级标签和行内标签
    • 1.块而级标签：一个标签独占一行 h, p, hr. br
      • 块儿级标签也可以通过css调整为不独占一行
      • 块儿级标签可以嵌套任何类型的标签
      • 特例：p标签虽然是块儿级标签，但是不能嵌套块儿级标签
    • 行内标签： 内部文件有多大就占多大 span
      • 行内标签只能嵌套行内标签
    7.body内布局标签
    • 1.div：具有网页布局的功能
    • 2.span：主要用于文字
    8.body内基本符号
        空格
>     大于号
<     小于号
&     &
¥     ￥
®     注册符号
©    版权符号

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    9.body内常用标签
    • a标签 链接标签
      • href 可以写网址，也可以写其他标签的id值
      • target 可以控制是否跳转到新建的页面中去 _self 还是当前页面 _blank 跳转到新页面
    • img标签 图片标签
      • src 填写图片的网络地址，本地地址
      • title 鼠标悬浮在图片上就会显示提示信息
      • alt 图片加载失败后的提示信息
      • hetght 调整图片的高度，宽度width也会等比例调整，单位是：px 像素
    10.标签的两大重要属性
    • id属性： 相当于是标签的身份证，同一个html页面上id值是唯一的 （一对一管理）
    • class属性： 类似于分组管理，多个标签可以拥有相同的class值
    11.列表标签

    1无序列表

    <ul>
    <li>选择1li>
    <li>选择2li>
    <li>选择3li>
ul>

    • 1
    • 2
    • 3
    • 4
    • 5

    2.有序列表

    <ol type="I" start='3'>
	<li>选择1li>
	<li>选择2li>
	<li>选择3li>
ol>

    • 1
    • 2
    • 3
    • 4
    • 5

    3.标题列表

    <dl>
    <dt>标题1dt>
    	<dd>内容1dd>
    	<dd>内容2dd>
dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    12.表格标签
    <table>
    <thead>
    	<th>IDth>
        <th>usernameth>
        <th>passwordth>
    thead>

    <tbody>
        <tr>
            <td>1td>
            <td>jasontd>
            <td>111td>
        tr>
         <tr>
            <td>2td>
            <td>xietd>
            <td>222td>
        tr>
    tbody>
table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    13.表单标签
    <body>
<form action="" method="">

    <P>username:<input type="text">P>

    <P>password:<input type="password">P>

    <P>datetime:<input type="date">P>

    <p>gender:
        <input type="radio" name="gender" checked>male
        <input type="radio" name="gender">female
        <input type="radio" name="gender">others
    p>

    <P>hobby:
    <input type="checkbox" name="hobby" checked>唱
    <input type="checkbox" name="hobby">跳
    <input type="checkbox" name="hobby">rap
    <input type="checkbox" name="hobby">篮球
    P>

    <P>email:<input type="email">P>

    <P>file:<input type="file">P>

    <P>files:<input type="file" multiple>P>

    <p>province:
        <select name="" id="" multiple>
            <option value="" selected>北京option>
            <option value="">上海option>
            <option value="">南京option>
        select>
    p>

    <p>
        <textarea name="" id="" cols="30" rows="10">textarea>
    p>

    <P><input type="submit" value="登录">P>
    <P><input type="reset" value="重置">P>
    <P><input type="button" value="普通按钮">P>

form>

body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
  • 相关阅读:
    文件操作及IO
    【Django-GAGA系统】添加用户时自动追加权限-20220801
    Cy3/Cy5/Cy5.5/Cy7荧光标记抗体/蛋白试剂盒（10~100mg标记量）
    Cosmos 生态：构建可互操作的多链未来
    clickhouse安装与远程访问
    中国芯片金字塔成形，商业化拐点将至
    制药企业纯化水设备的应用及维护：设备健康管理软件的关键作用
    goadmin 学习笔记
    计算机专业突然不香了？会成为下一个土木工程吗？
    Jmeter是什么
  • 原文地址：https://blog.csdn.net/Yydsaoligei/article/details/126469272