• 前端

  • 什么是前端
  • 前端核心
• 超文本传输协议前戏
• HTTP超文本传输协议
  • 什么是超文本传输协议
  • HTTP传输协议四大特性
  • 数据格式
  • 响应状态码
• html简介
• head内常见的标签
• body内基本标签
• body内基本符号
• body内常见标签
• 块级元素和行内元素
• 标签的两大重要属性
• 列表标签
  • 无序列表
  • 有序列表
  • 标题列表
• 表格标签
• 表单标签
  • input中type的重要属性

前端

什么是前端

前端核心

超文本传输协议前戏

1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件 为了实现无障碍沟通交流 有了一些协议
    HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题 因为别人早就封装好了 
    问题出在我们自己写的服务端的响应数据格式

超文本传输协议

什么是超文本传输协议

  HTTP协议定义了浏览器（即万维网客户进程）怎样向万维网服务器轻请求万维网文档，以及服务器怎样把文档传送给浏览器。简单来说，就是客户端和服务器进行数据传输的一种规则。

HTTP超文本传输协议四大特性

  1.基于请求响应（客户端先主动请求，服务端才会给出响应）

  2.基于tcp/ip之上作用于应用层的协议

  3.无状态（服务端不记住客户端，服务端发送一次请求，客户端执行结束后直接忘记）

  4.无/短链接（服务端不单单会忘记客户端，而且也会断开链接）

数据格式

请求首行
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
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "Windows"\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/104.0.0.0 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,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-Language: zh-CN,zh;q=0.9\r\n
Accept-Encoding: gzip, deflate\r\n
换行
\r\n
请求体
GET请求没有请求体 所以这里是空

响应状态码

  利用数字来表示一些复杂的情况说明(类似于暗号)

  我们在公司中还会自己定义更多的状态码 
        一般情况下从10000开始

HTML简介

超文本标记语言

  是 网页制作必备的标记语言 “超文本”就是指页面内可以包含多种元素图片、链接，甚至音乐、程序等非文字元素。

head内常见的标签

body内基本标签

body内基本符号

body内常见标签

块级标签和行内标签

  块级标签独占一行

  行内标签可以并排

  注意：

  1.块级标签可以通过css嵌套块级标签或者行内标签(p标签不能嵌套任何块级标签)

  2.行内标签只能嵌套行内标签

标签两大重要属性

列表标签

无序列表(ul)    

• disc（实心圆点，默认值）
• circle（空心圆圈）
• square（实心方块）
• none（无样式）

<ul>
        <li>python</li>
        <li>golang</li>
        <li>linux</li>
    </ul>

有序列表(ol)

• 1 数字列表，默认值
• A 大写字母
• a 小写字母
• Ⅰ大写罗马
• ⅰ小写罗马

<ol type="I" start="10">
          <li>第一项</li>
          <li>第二项</li>
          <li>第二项</li>
    </ol>

标题列表(dt,dd)

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

表格标签（table,thead,tbody）

<table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
            </tr>
        </tbody>
</table>

表单标签(form,input)

能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器

input的type属性主要类型

<form action="" method=""></form>
    action属性
        用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
    method属性
        用于控制请求的方式(get\post)

<form action="" method="post">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">双色球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="">北京</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>GF:
            <select name="" id="" multiple>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小冲</option>
                <option value="">小黄</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button" value="普通按钮">
    </form>