前端简介
- 前端： 与用户直接打交道的操作界面都可以叫前端
- 后端： 真正内部执行核心业务逻辑的代码程序叫做后端，不与用户直接打交道
- 前端的核心基础
HTML 网页的架子 CSS 网页的美化，样式 JAVAScript 实现网页的动态化
HTTP超文本传输协议
```
浏览器的一些协议: HTTP协议、FTP协议、HTTPS协议
```
-
http超文本传输协议，通过浏览器和服务器进行交互bs，进行超文本传输的规定。规定了超文本传输要遵守的规则
-
- 四大特性
1.基于请求响应 2.基于TCP/IP之上作用于应用层的协议 3.无状态 4.无连接/短连接 -
- 数据格式
- 请求数据格式
1. 请求首行 (请求方式有很多种,协议名称及版本) 2. 请求头 (一大堆K:V键值对) 3. 换行 4. 请求体 (携带一些敏感的数据,不是所有请求都有) - 响应数据格式
1. 响应首行 (响应状态码) 2. 响应头 (一大堆K:V键值对) 3. 换行 4. 响应体 (一般情况下就是浏览器要展示给用户看的数据)
-
3.响应状态码
利用返回的一些数字来表示一些复杂的情况说明 1XX 服务端接收到用户请求正在处理，可以继续提交或者等待 2XX 常见的: 200 OK 表示服务端给出了相应的响应 3XX 重定向 4XX 常见的: 403 请求不符合条件 404 请求资源不存在 5XX 服务端内部错误 公司内部自定义的状态码一般从10000开始
HTML简介
- HTML(超文本标记语言)是所有浏览器展示页面必备的
- 浏览器展示的界面一般称为HTML页面,存储HTML语言的文件后缀名一般是.html
- HTML没有逻辑,也不讲究缩进
- HTML的注释语法
<!--注释内容--> - HTML的文件结构
<html> # 所有的html代码都必须在html标签内部 <head></head> # head内的数据一般都是配置文件,不给用户展示 <body></body> # body内的数据就是浏览器展示给用户看的 </html> -
- HTML标签的第一种分类主要分为单标签和双标签
例如：插入图片的</img>就是单标签，而插入标题的<h1></h1>就是双标签 -
- HTML标签的第二种分类主要分为块儿级标签和行内标签
1.块儿级标签 h1~h6 p hr br 一个标签独占一行 2.行内标签 u i s b 内部文本多大自身就占多大
常见的标签
head内常见的基本标签
<title>Title</title> <!--控制标签页小标题-->
<style></style> <!--内部支持编写css-->
<link rel="stylesheet" href=""> <!--引入外部css文件-->
<script></script> <!--内部支持编写js代码，还能通过src属性引入外部JS文件-->
<meta charset="UTF-8"> <!--通过内部属性的不同可以有很多功能-->
<!--<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">-->
<!--<meta name="description" content="填写一些网页的简介">-->
body内的基本标签
<h1></h1> <!--标题标签h后面是1-6的数，是几就是几级标题-->
<p></p> <!--段落标签-->
<hr> <!--水平分割线-->
<br> <!--换行符-->
<u></u> <!--下划线-->
<i></i> <!--斜体-->
<s></s> <!--删除线-->
<b></b> <!--加粗-->
<!--body内有很多样式,可能存在多种标签可以实现-->
body内的基本字符
| 内容 | 对应代码 |
|---|---|
| 空格 |   |
| 大于号 | > |
| 小于号 | &it |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
- 特殊字符后面要加 ;
body内布局标签
<div></div> <!--块儿级标签-->
<span></span> <!--行内标签-->
<!--
1.块儿级标签可以通过css调整为不独占一行
2.标签之间也可以嵌套，p标签除外，注意(行内标签不能嵌套块儿级标签使用)
3.p标签虽然是块儿级标签，但是不能嵌套p标签和块级标签
-->
body内常见标签
1.a标签
链接标签: href 填写网址自动跳转
href还可以填写其他标签的id值 实现锚点功能
target 可以控制是否新建页面跳转
_self 当前页面跳转
_blank 新建一个页面跳转
2.img标签
图片标签: src 填写图片的地址
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片的宽度 宽和高调整一个另外一个等比例缩放
标签的两大重要属性
1. id属性(一对一管理)
类似于身份证号，id值不能重复
2. class属性(批量管理)
类似于分组，多个class可以有相同的值
列表标签
-
- 无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
-
- 有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
-
- 标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<!--thead内放的是表头-->
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
<!--tbody内放的是表单-->
</table>
表单标签
- 表单标签可以获取用户输入(输入、选择、上传)的数据并发送给后端服务器
- 表单数据的编写
<form action="" method="">表单数据</form>- action属性
- 用于控制数据的提交地址,不写默认朝当前页面所在地址提交
- method属性
- 用于控制请求的方式(get\post)
- action属性
- 表单的标签
<form action="" method="post">
<p>username:<input type="text"></p> <!--text普通文本-->
<p>password:<input type="password"></p> <!--password不可见文本-->
<p>birthday:<input type="date"></p> <!--date时间文本，生成一个日历-->
<p>email:<input type="email"></p> <!--email邮箱文本，规定了必须要有@-->
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p> <!--radio生成单选选项-->
<p>hobby:
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球
</p> <!--checkbox生成多选选项-->
<p>file:
<input type="file">
</p> <!--file可以上传单个文件-->
<p>files:
<input type="file" multiple>
</p> <!--files可以上传多个文件-->
<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> <!--该标签加了multiple可以生成供选择的滑轮选项多选-->
</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>
- 1.获取用户输入的标签两大重要的属性
- name属性：类似于字典键
- value属性：类似于字典的值
from表单在往后端发送数据的时候，标签必需要有name，否则不会发送该标签的值 - 2.获取用户输入的input标签理论上需要和label配合使用
<label for="某个input标签的id值"><label> - 3.获取用户输入的input标签可以添加背景提示
<input type="text" name="password" placeholder="密码">- 结果
- 结果
- 4.获取用户输入的标签是选择值的，则需要自己写value值
<input type="radio" name="gender" value="male">男 <input type="checkbox" name="hobby" value="basketball">篮球 <select name="province" id=""> <option value="shanghai">上海</option> </select> <!--结果提交时传出去的值，传出去的值就是我们选择的选项对应的value值--> - 5.默认选中，针对单选radio和多选checkbox
<input type="radio" name="gender" value="male" checked="checked">男 <input type="radio" name="gender" value="female" >女 <!--以单选为例，如果属性名和属性值相同，checked="checked，也可以直接简写为checked-->- 结果
- 结果
- 6.默认选中，针对于下拉框option
<select name="province" id=""> <option value="shanghai" >上海</option> <option value="guangzhou" selected="selected">广州</option> </select> <!--selected="selected" 简写为 selected-->- 结果
- 结果
