今日内容回顾

今日内容回顾

前端

前端简介

  • 什么是前端

    任何与用户直接打交道的操作界面都可以称之为前端。

  • 什么是后端

    后端类似于幕后操作者，不直接跟用户打交道的内部真正执行核心业务逻辑的代码程序。

前端的学习

真正的前端工程师也需要学习很长时间，我们作为后端工程师对前端目前只做最核心的了解即可

前端核心基础

Html：网页的骨架，没有任何的样式

CSS：给骨架添加各种样式，变得好看。

JS： 控制网页的动态效果。

HTTP超文本传输协议

四大特性

  • 基于请求响应

  • 基于Tcp/IP之上作用于应用层的协议

  • 无状态

    不保存用户的信息

    由于HTTP协议是无状态的，所以后续出现了一些专门用于记录用户状态的技术。

    如：cookie、session、token......

  • 无/短链接

    请求一次响应一次，之后就断开链接没有任何联系了。

数据格式
请求数据格式
  • 请求首行（请求方式：有很多种，协议名称及版本）
  • 请求头（一大堆kv键值对）
  • 换行符，/r/n
  • 请求体（携带一些敏感的数据，不是所有的请求都有请求体）
响应数据格式
  • 响应首行（响应状态码）
  • 响应头（一大堆kv键值对）
  • 换行符，/r/n
  • 响应体（一般情况下就是浏览器要展示给用户看到数据）
响应状态码

用一串简单的数字来标识一些复杂的状态或者描述性信息。
1xx 服务端已经收到你的请求正在处理，你可以继续提交或者等待
2xx 服务端给出了相应的响应，比如常见的 200 OK
3xx 通过各种方法将各种网络请求重新定个方向转到其它位置
4xx 如：403请求不符合条件、404请求资源不存在
5xx 服务端内部出现问题。

在实际项目中，可能需要个更多的响应码，上述是远远不够使用的，

需要我们自己定义响应码，一般情况下从10000开始。

请求方式

  1. get请求

    朝服务端要数据

    列如：输入网址获取对应的内容

  2. post请求

    朝服务端提交数据

    例如：用户登录，输入用户名和密码之后，提交到服务端后端做身份校验。

HTML简介

超文本标记语言，是所有浏览器展示的页面必备。

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

HTML 没有任何的逻辑，所见即所得。

  • HTML注释语法

  • HTML文件结构

    所有的代码都必须写在html标签内部 <head> </head> head内的数据一般都不是给用户看的 <body></body> body内的数据就是浏览器展示给用户看的

  • HTML标签的分类

    单标签（自闭合标签）：

    双标签：

head内常见标签

title 控制标签页小标题

style 内部支持编写css

link 引入外部css文件

script 内部支持编写js代码，还可以通过src属性引入外部js文件

meta 通过内部属性的不同可以有很多功能

	<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
	<meta name="description" content="填写一些网页的简介">

body内基本标签

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

块儿级标签与行内标签

块级标签是占满一行，行内标签可以多个在一行，一行放不下才会换行

  • 块儿级标签

    块儿级标签表示一个标签独占一行，如：h1~h6、p、hr、br

  • 行内标签

    行内标签标识内部文本多大自身就占多大，如： u、i、s、b

body内基本符号

符号 作用
&nbsp； 空格
&gt； 大于号
&lt； 小于号
&amp； &
&yen； ￥
&reg； 注册
&copy； 版权

body内布局标签

div 块儿级标签

span 行内标签

  1. 块儿级标签是可以通过css调整为不独占一行

  2. 标签之间很多时候可以嵌套

    块儿级可以嵌套任何类型的标签

    p标签虽然是块儿级标签，但是不能块儿级标签行内标签只能嵌套行内标签

body内常见标签

  • a标签

    链接标签

    href 可以填写网址，点击自动跳转

    href还可以填写其他标签的id值，实现锚点功能

    target 可以控制是否新建页面跳转

    _self、 _blank

  • img标签

    图片标签

    src 填写图片地址（网络地址、本地地址）

    title 鼠标悬浮在图片上就会有提示信息

    alt 图片加载失败提示的信息

    height 调整图片的高度

    width 调整图片的宽度

    上述俩个调整一个另一个等比例缩放

标签俩大重要属性

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

  1. id 属性（一对一管理）

    类似于身份证号，在同一个html页面上，id不能重复

  2. class属性（批量管理）

    类似于分组，读个标签可以拥有相同的class值

列表标签

  • 无需列表

    <ul>
    <li>python<li>
    <li>liunx<li>
    <li>java<li>
<ul>
    
   页面上有规则排列的横向或者书香的多个元素几乎使用的都是无序列表

  • 有序列表

    <ol tupe='I' start='10'>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

  • 标题列表

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

表格标签

只要是展示数据，一般都可以使用表格标签

tr 一个tr就表示一行

<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>


<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

表单标签

能够获取用户输入（输入、选择、上传）的数据并发送给后端服务器
<form action="" method=""></form>
	action属性
		用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交method属性 
	method属性
		用于控制请求的方式（get\post）
<form action="" method="post">
    input属于行内标签，通过type来增加属性
    text:普通文本
    <p>username:<input type="twxt"></p>
    password:密文
    <p>password:<input type="password"></p>
    date:日期	
    <p>birthday:<input type="date"></p>
    email：邮箱
    <p>email:<input type="email"></p>
    
    
    # 所有获取用户输入的标签 都应该有name属性
	name就类似于字典的key
  用户的数据就类似于字典的value
    <p>gender:
         radio:单选
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
    </p>
    <p>hobby：
        checkbox:多选
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">羽毛球
    </p>
    <p>province:
        select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
        <select name="" id="">
            <option value="">上海</option>
            <option value="">北京</option>
            <option value="">深圳</option>
            <option value="">天津</option>
        </select>
    </p>
    <p>GF:
        <select name="" id="">
            <option value="">小明</option>
            <option value="">小黑</option>
            <option value="">小白</option>
            <option value="">小暗</option>
        </select>
    </p>
    <p>info:
        file:获取文件  也可以一次性获取多个
    	<input type="file" multiple>
        textarea标签  获取大段文本
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    	submit:用来触发form表单提交数据的动作
		<input type="submit" value="提交">
    	reset:重置内容
    	<input type="reset" value="重置">
    	button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
     	<input type="button" value="普通按钮">
</form>
posted @   瓮小辉  阅读(20)  评论(0)  编辑  收藏  举报
相关博文：
·  后端开发简介
·  今日内容回顾
·  【前端】第1回 前端基础
·  前端学习笔记
·  前端（一）
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae