前端学习笔记

今日内容概要

  • 前端简介
  • HTTP超文本传输协议
  • HTML简介
  • head内常见标签
  • body内标签

今日内容详细

前端简介

前端与后端

前端：任何与用户直接打交道的操作界面都可以称之为是前端。eg:淘宝页面，游戏页面，操作页面。

后端：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序。eg:python代码，java代码，c++代码。

前端核心基础

知识点： HTML CSS JavaScript jQuery(框架) Bootstrap(框架)
主要学习：HTML CSS JavaScript
HTML:网页的骨架
CSS:网页的样式
JS:网页的动态效果

HTTP超文本传输协议

我们自己写的TCP服务端与浏览器之间通信了，但是浏览器不识别服务端数据。不同的服务端数据的组织策略千差万别，但是浏览器却需要做到能够统一处理，最佳的解决措施是统一规定一个标准“HTTP协议”。还有一些别的协议FTP协议、HTTPS协议等。

HTTP协议规定了服务端与浏览器之间的数据交互格式及其他事项。

四大特性

特性 说明
基于请求响应 服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应
基于TCP/IP之上作用于应用层的协议 应用层协议：HTTP,HTTPS,FTP...
无状态 服务端不保存客户端状态(纵使见它千百遍，我都当它如初见)
无/短连接 不保持客户端与服务端之间的连接通道，补充：websocket(长连接)，主要用于加好友聊天等业务

数据格式

请求数据格式

1.请求首行(请求方式：有很多种，协议名称及版本)
2.请求头(一大堆k:v键值对)
3.换行(不能省略)
4.请求体(携带一些敏感的数据，不是所有的请求都有请求体)

响应数据格式

1.响应首行(响应状态码)
2.响应头(一大堆k:v键值对)
3.换行(不能省略)
4.响应体(一般情况下就是浏览器要展示给用户看的数据)

响应状态码

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

状态码 说明
1xx 服务端已经接收到你的请求正在处理，你可以继续提交或者等待
2xx 200 ok 服务端给出了相应响应，表示访问成功
3xx 302 Move temporarily 重定向，用于实现登陆成功后自动跳转到主页
4xx 403 Forbidden 请求不符合条件，404 Not Found 请求资源不存在
5xx 服务端内部错误

我们在工作中还会自定义状态码(因为默认的不够),自定义状态码一般都是从10000开始

HTML简介

HTML：超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言，不是一种编程语言，HTML使用标签来描述网页。

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

浏览器展示的界面我们也称之为HTML页面，存储HTML语言的文件后缀一般是.html

HTML注释语法

<!--单行注释-->
<!--
  多行注释
-->
'''html由于标签非常的多 所以可以通过注释区分页面区域'''

HTML文件结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>css样式优先级</title>
  </head>
  <body>

  </body>
</html>
  1. <!DOCTYPE html>声明为HTML文档。
  2. <html>、</html>是文档的开始标记和结束的标记，所有的代码都必须写在html标签内部。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body)
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示，一般都不是给用户看的。包含了文档的元（meta）数据,给浏览器看的数据
  4. <title>、</title>定义了网页标题，在浏览器标题栏显示
  5. <body>、</body>之间的文本是可见的网页主体内容，是浏览器展示给用户看的

HTML标签的分类

  1. 双标签：有头有尾，内容写在中间

    <h1>内容</h1>
<p>内容</p>

  2. 自闭合标签:单标签

    <img/>
<link />
<br />

补充知识：在pycharm中编写html

1.在pycharm中的html文件内，标签只需要写表名称，然后按Tab自动补全即可
2.在pycharm中的html文件里，注释的快捷键也是ctrl+？
3.html标签其实没有缩进的概念，因为我们写python缩进习惯了，可以让代码更加美观
4.如何打开html标签，右键选择打开方式，在pycharm中html文件右上角有浏览器图标快捷方式点击即可（前提是安装了该浏览器）

标签两大重要属性

下面的两个属性都是用来快速定位需要操作的标签

属性 说明
id属性(一对一管理) 类似于身份证号，在同一个html页面上id值不能重复，用于精确查找某个标签
class属性(批量管理) 类似于分组，多个标签可以拥有相同的class值，用于范围查找一次性多个标签

head内常见标签

head标签内编写的标签一般都是给浏览器看的，用户看不到。

标签 说明
title 控制标签页小标题
style 内部支持编写css
link 引入外部css文件
script 内部支持编写JS代码，还可以通过src属性引入外部JS文件
meta 通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">

body内标签

body内基本标签

标签 说明
h1~h6 标题标签
<p></p> 段落标签
hr 水平分割线
br 换行符
<u></u> 下划线
<i></i> 斜体
<s></s> 删除线
<b></b> 加粗

body内基本符号

代码 对应符号
&nbsp; 空格
&gt; 大于号
&lt; 小于号
&amp; &
&yen; ¥
&reg; 注册
&copy; 版权

body内常见标签

标签的类别：块儿级标签，行内标签。

块儿级标签:h1~h6 p hr br div
    一个标签默认独占浏览器一行
行内标签:s i u b span
    内部文本多大自身就占多大
标签之间支持嵌套(最好是布局类相关标签参与),块儿级标签可以嵌套任意标签,行内标签只能嵌套行内标签(<p>标签虽然是块儿级标签但是它不能嵌套块儿级标签).
body内布局标签
div：块儿级标签，用来定义一个块级元素，并无实际意义
span：行内标签，用来定义行内元素，并无实际意义

1.块儿级标签是可以通过CSS调整为不独占一行
2.页面的编写首先就是先用布局标签占位,之后填充内容即可.
body内链接标签
<a href="https://www.baidu.com" target="_self">click me</a>
属性 说明
a 链接标签
href 可以填写网址，点击自动跳转，也可以写标签的id值，实现锚点功能
target 可以控制是否新建页面跳转，默认_self当前页，设置_blank新建页
body内图片标签
<img src='111.jpg' title='美女图片' alt='这是一直美女图片' height='200px' width='200px'/>
属性 说明
img 图片标签
src 填写图片地址(网络地址 本地地址)
title 鼠标悬浮在图片上自动展示提示信息
alt 图片加载失败提示的信息
height 自定义图片高度
width 自定义图片宽度

ps: height和width调整一个另外一个等比例缩放,单位是px(像素).

列表标签

无序列表

无序列表是使用频率最高的列表标签，页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表

<ul type="disc">
  <li>python</li>
  <li>golang</li>
  <li>linux</li>
</ul>

type属性：

属性 说明
disc 实心圆点，默认值
circle 空心圆圈
square 实心方块
none 无样式

有序列表

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

type可以是数字，罗马数字，大小写字母
start控制从第几个开始

标题列表

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

<!--
<dt>中间写标题</dt>
<dd>中间写内容</dd>
-->
表格标签

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格的基本结构:

<table>
        <thead>
            <tr>   <!--tr表示一行-->
                <th>序号</th>   <!--th加粗文本-->
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>   <!--表头字段-->
        <tbody>
            <tr>
                <td>1</td>   <!--td普通文本-->
                <td>jason</td>
                <td>123</td>
            </tr>
        </tbody>   <!--表单数据-->
</table>

属性：

属性 说明
border 表格边框
cellpadding 内边距
cellspacing 外边距
width 像素 百分比.（最好通过css来设置长宽）
rowspan 单元格竖跨多少行
colspan 单元格横跨多少列（即合并单元格）
表单标签

form表单

form作用：获取前端用户输入(输入、选择、上传)的数据并发送给后端服务器。

<form action="" method=""></form> <!--需要在form标签内部编写获取用户数据标签-->
属性 说明
action 用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交
method 用于控制请求的方式(get\post)

1.input标签

作用：获取用户各中类型数据的标签

type属性 说明
text 正常展示的普通文本框
password 密文展示框
date 日历展示框
radio 单选框
checkbox 多选框
email 邮箱格式数据
file 文件数据。可以通过添加multiple属性控制获取单个还是多个文件
submit 提交按钮，触发form表单提交数据的动作
reset 重置按钮，重置页面填写的数据
button 普通按钮，普通按钮默认没有任何的功能，意味着以后可以给它添加任意的功能 
<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>

2.select标签

作用：网页中下拉框。

<select name="province" id="">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">深圳</option>
</select>
一个个的下拉选项是一个个option标签。
默认是单选，也可以添加multiple变成多选。

img

3.textarea标签

作用：获取大段文本内容，可以用于发表见解评论啥的。

<textarea name="desc" id="" cols="30" rows="10"></textarea>
cols属性控制文本域的列数，rows属性控制文本域的行数

img

网络请求方式

最常见的网络请求方式有两种:get请求(朝服务端索要数据);post请求(朝服务端提交数据)。

两种请求都可以携带数据。

get请求是在url后面通过?组织数据
    url?name=jason&pwd=123&email=123@qq.com
post请求是在请求体中组织数据
    HTTP协议请求数据格式

get请求虽然可以携带数据，但是一般只用于不重要的数据携带。并且get请求携带数据的大小有限制，最多只能携带2KB左右。

form表单中有一个method属性，用于控制提交的方式，有两个选项，默认是get请求。

posted @   空白o  阅读(66)  评论(0)  编辑  收藏  举报
相关博文：
· 第十一周学习笔记总结
· 前端学习笔记
· 前端简介、HTTP、 HTML
· 今日内容回顾
· 【前端】第1回 前端基础
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示