前端基础

前端的简介

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

不直接与用户打交道的用于执行真正业务逻辑的代码，称之为后端。eg：python代码、java代码、c++代码。

广义上：用户能看见并且交互的展示界面。

狭义：运行在浏览器上的页面。

理论知识：

HTML（相当于网页的骨架，没有任何的样式）、CSS（给骨架添加各种样式）、JavaScript（给网页添加动态效果）和jQuery(框架)、Bootstrap(框架)、vue(框架)。

HTTP超文本传输协议

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

如果服务端遵循HTTP协议；就可以被浏览器正常访问并展示内容。如果服务端不遵循HTTP协议；浏览器就不会正常访问和展示，但是不影响服务端。
若不遵循HTTP协议，则需要自己编写客户端，即APP。

HTTP协议的四大特性：

基于请求-到-响应>>>：服务端永远不会主动给客户端发消息,必须是客户端先请求服务端被动响应。
基于TCP/IP作用于应用层的协议>>>：应用层协议：HTTP、HTTPS、FTP。
无状态>>>：服务端不会保存客户端状态。始终当作第一次的状态。【由于HTTP协议是无状态的，后续出现了一些专门记录用户状态的技术：cookie、session、token....】
短连接>>>：不保持客户端与服务端之间的链接导通。补充：websocket是应用层协议，可以建立双方永久连接，比如即时通讯聊天软件。

HTTP协议的数据格式：

请求格式：客户端给服务端发送消息应该遵循的数据格式

请求首行：【标识HTTP协议版本和当前的请求方式】

请求头：【一大堆k，v键值对】

此处为换行符 /r， /n

请求体：【】

响应格式：服务端给客户端发送消息应该遵循的数据格式

响应首行：【标识HTTP协议版本和响应状态码】

响应头：【一大堆k，v键值对】

此处为换行符 /r，/n

响应体：【返回给浏览器展示给用户的数据，就是一个页面】

请求方式：get请求：向服务端要数据【eg：输入网址获取内容】post请求：向服务端提交数据【eg：提交用户名和密码用于后端校验】

HTTP协议的响应状态码：

响应状态码：即用数字来表示一串复杂的中文意思。自定义状态码一般都是从10000开始。

eg：

1XX：服务端成功接收到了你的数据正在处理，你可以等待或者继续发送
2XX：200 OK 表示请求成功，服务端给出了响应
3XX：301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX：403请求不合法(权限不够)；404请求资源不存在
5XX：都是服务端错误，与客户端无关(代码bug、机房炸了...)

HTML简介

HTML即超文本标记语言。

HTML是一种标记语言（markup language），它不是一种编程语言。HTML使用标签来描述网页。

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

<!--上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)-->
<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>

note：

存放HTML代码的文件后缀名一般都是.html

HTML：是超文本标记语言，它没有任何的逻辑，是固定搭配
HTML文档结构：

<html>
      <head>给浏览器看的数据</head>
      <body>给用户看的数据</body>
  </html>

<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。

HTML标签的分类：

双标签：有头有尾，内容写在中间>>>：<h1></h1> <html></html>
自闭合标签：单标签>>>：<img/> 一般有特殊功能

HTML注释语法：

<!--单行注释-->
  <!--
  多行注释
  -->

学习HTML的目的：完成页面结构的搭建（什么时候用什么标签）
HTML属于标记语言：标记语言为非编程语言，不具备编程语言具备的程序逻辑

HTML三大组成：
标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记
    eg：系统标签，自定义标签
指令：被尖括号包裹，由！开头的标记。
    eg:<!doctype html> <!-- -->
转义字符：被&与;包裹的特殊字母组合或#开头的的十进制数。
    eg:&#60; &#62; &nbsp;

ps：

HTML标签

标签的概念：被<>包裹由字母开头，可以结合合法字符，能被浏览器解析的特殊符号。

HTML标签的格式：

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。

HTML标签的属性：

id：定义标签的唯一ID，HTML文档树中唯一,用于精确查找某个标签。
class：为html元素定义一个或多个类名（classname）(CSS样式类名)。
style：规定元素的行内样式（内部编写css代码实现）。
script：内部用来书写js代码或者引入外部的js文件。
title：显示网页标题。
link：内部用来书写css代码或者引入外部的css文件。

HTML的<body>内的常见标签：

目的：使用标签的语义与功能 | 完成页面架构的搭建（div）
1.布局标签>>>:div【块级标签】：“三无”，无语义，无功能，无样式，完成页面架构的搭建，可以看成一块区域，在区域内进行样式修改；span【行内标签】，普通的文本标签用span标签来使用
2.标题系列标签>>>：h1~h6：页面总标题，代表页面“整体含义”，出现一次即可
3.字体系列标签>>>:<i>斜体</i>,<b>加粗</b>,<u>下划线</u>,<s>删除线</s>
4.列表：

   无序列表是使用频率最高的列表标签
5.p:段落标签>>>:<p></p>
6.图片标签>>>:img【行内标签】：图片标签，src（数据源），alt（资源加载失败的文本提示），title （鼠标悬浮自动展示提示信息）,height (自定义图片高度),width (自定义图片宽度)
7.链接标签>>>:a【行内标签】：超链接标签，href（超链接地址），target（跳转方式_self | _blank:_self是在本页面跳转，_blank是跳转打开新页面），锚点
8.常用的文本类标签【行内标签】：span ,i (斜体), b （加粗） ,hr (水平分割线),br (换行符)
note：块级标签内部可以嵌套任何块级标签和行内标签，但是p标签除外，p标签只能嵌套行内标签。行内标签可以嵌套行内标签，但是不能嵌套块级标签。

特殊符号：空格：&nbsp 、 > : &gt 、 < : &lt 、&：&amp、

ps：表格标签

<table >
    <thead>
        <tr>  <!--tr表示一行-->
            <th>编号</th>  <!--th加粗文本-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>  <!--表头字段-->
    <tbody>
        <tr>
            <td>1</td>  <!--td普通文本-->
            <td>jason</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>tony</td>
            <td>28</td>
        </tr>
        <tr>
            <td>3</td>
            <td>kevin</td>
            <td>38</td>
        </tr>
    </tbody>  <!--表单数据-->
</table>

HTML之form表单

form表单功能：

获取前端用户数据并发送给后端服务器。

<form action=""></form> >>>：需要在form标签内部编写获取用户数据标签。

表单用于向服务器传输数据，从而实现用户与Web服务器的交互。

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

form表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

属性action

控制数据的提交地址。

方式1:写全路径

action="http://www.aa7a.cn/user.php"

方式2:写后缀(自动补全IP和PORT)

action="user.php"

方式3:不写(朝网页所在的地址提交)

action=""

URL：统一资源定位符(网址)。

input标签

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

<input> 元素会根据不同的 type 属性，变化为多种形态。

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

textarea标签

获取大段文本内容。
<textarea name="desc"></textarea>

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

lable标签

定义：<label> 标签为 input 元素定义标注。专门给input标签配文字说明。

label 元素不会向用户呈现任何特殊效果。<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

方式1
        <label for="d1">用户名:</label>
        <input type="text" id="d1">
方式2
        <label>用户名:
        <input type="text">
      </label>

posted @ 2022-04-23 06:00 *sunflower* 阅读(122) 评论(0) 收藏举报

刷新页面返回顶部

*sunflower*