今日内容
前端简介
一、前端与后端
1.前端
与用户直接打交道的操作界面都可以称之为是前端
2.后端(幕后的工作者)
不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
二、前端的学习
真正的前端工程师也需要学习很长时间 我们作为后端工程师对前端目前只做最核心的了解大致七天的学习
三、前端核心基础
1.HTML
网页的骨架
2.CSS
网页的样式
3.JS(JavaScript)
网页的动态
超文本传输协议前戏
1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件 为了实现无障碍沟通交流 有了一些协议
HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题 因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式
HTTP超文本传输协议
一、四大特性
1.基于请求响应
2.基于TCP/I之上作用于应用层的协议
3.无状态
4.无/短连接
二、数据格式
1.请求数据格式
1.请求首行(请求方式:有很多种 协议名称及版本)
2.请求头(一大堆K:V键值对)
3.换行
4.请求体(携带一些敏感的数据 不是所有的请求都有请求体)
2.响应数据格式
1.响应首行(响应状态码)
2.响应头(一大堆K:V键值对)
3.换行
4.响应体(一般情况下就是浏览器要展示给用户看的数据)
三、响应状态码
利用数字来表示一些复杂的情况说明(类似于暗号)
1XX:服务端已经接收到你的请求正在处理 你可以继续提交或者等待
2XX:200 OK服务端给出了相应响应
3XX:重定向
4XX:403请求不符合条件 404请求资源不存在
5XX:服务端内部错误
我们在公司中还会自己定义更多的状态码
一般情况下从10000开始
HTTP简介
超文本标记语言 是所有浏览器展示的页面必备的
浏览器展示的界面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html
HTML没有任何的逻辑 所见即所得
1.HTML注释语法
<!--注释内容-->
2.HTML文件结构
<html> 所有的代码都必须写在html标签内部
<head></head> head内的数据一般都不是给用户看的
<body></body> body内的数据就是浏览器展示给用户看的
</html>
3.HTML标签的分类
3.1.单标签(自闭和标签)
<img/>
3.2.双标签
<a></a>
"""HTML代码是不讲究缩进的 我们只是习惯了python的缩进语法"""
head内常见标签
1.控制标签页小标题
title
2.内部支持编写CSS
style
3.引用外部CSS文件
link
4.内部支持编写JS(JAVA)代码 还可以通过src属性引入外部JS文件
script
5.通过内部属性的不同可以有很多功能
meta
5.1.<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
5.2.<meta name="description" content="填写一些网页的简介">
body内基本标签
| 序号 | 基本标签 | 作用 |
|---|---|---|
| 1. | h1~h6 | 标题标签 |
| 2. | p | 段落标签 |
| 3. | hr | 水平分割线 |
| 4. | br | 换行符 |
| 5. | u | 下划线 |
| 6. | i | 斜体 |
| 7. | s | 删除线 |
| 8. | b | 加粗 |
注意:有很多样式 可能存在多种标签可以实现
块儿级标签与行内标签
1.块儿标签 一个标签独占一行
h1~h6、p、hr、br
2.行内标签 内部文件多大自身就占多大
u、i、s、b
body内基本符号
| 序号 | 基本符号必须是英文下的分号（;） | 作用 |
|---|---|---|
| 1. |  ； | 空格 |
| 2. | >； | 大于号> |
| 3 | <； | 小于号< |
| 4. | &； | &符 |
| 5. | ¥； | 羊角符¥ |
| 6. | ®； | 注册® |
| 7. | ©； | 版权© |
body内布局标签
div 块儿级标签
span 行内标签
1.块儿级标签是可以通过CSS调整为不独占一行
2.标签内很多时候可以嵌套使用
2.1.块儿级可以嵌套任何类型的标签
2.2.p标签虽然是块儿级标签 但是不能嵌套块儿级标签
2.3.行内标签只能嵌套行内标签
body内常见标签
一、a标签
链接标签 href、target
1.href
可以填写网址 点击自动跳转
还可以填写其他标签的id值 实现锚点功能(点击对应的目录就会跳到所对应的内容)
2.target
可以控制是否新建页面跳转
_self默认当前页面跳转
_blank新建页面跳转
eg:
<a href="https://www.baidu.com/" target="_blank">点我去百度</a>
二、img标签
图片标签 src、title、alt、height、width
1.src
填写图片地址(可以填写网络地址 本地地址)
2.title
鼠标悬浮在图片上就会有提示信息
3.alt
图片加载失败提示的信息
4.height
调整图片的高度
5.width
调整图片的宽度
ps:height和winth不能同时调整 不然会失真
标签的两大重要性
下面的两个属性都是用来快速定位需要操作的标签
1.id属性(一对一管理)
类似于身份证号 在同一个html页面上 id不能重复
2.class属性(批量管理)
类似于类 多个标签可以拥有相同class值
列表标签
一、无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
"""
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
"""
type属性:
1.disc(实心圆点 默认值)
2.circle(空心圆点)
3.square(实心方块)
4.none(无样式)
eg:
<ul type="circle">
<li>python</li>
<li>golang</li>
<li>java</li>
</ul>
二、有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
type属性:
1.1数字列表 默认值
2.A大写字母
3.a小写字母
4.I大写罗马
5.i小写罗马
eg:
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
'start是起始位'
三、标题列表
<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>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
属性:
1.border(表格边框)
2.cellpadding(内边框)
3.cellspacing(外边框)
4.width(像素 百分比)
5.rowspan(单元格竖跨多少行)
6.colspan(单元格横跨多少行)
eg:
<table>
<thead border="1">
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
method属性
用于控制请求的方式(get\post)
<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"checked>男 # checked 默认选项
<input type="radio" name="gender">女
<input type="radio" name="gender">其他 # radio 单选
</p>
<p>hobby:
<input type="checkbox" name="hobby" checked>篮球 # checked 默认选项
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球 # checkbox 多选
</p>
<p>file:
<input type="file"> # file 获取文件
</p>
<p>files:
<input type="file" multiple> # 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> # 加multiple参数变多选，默认选中selected
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea> # 文本域
</p>
# 能够触发form表单提交数据的按钮
<input type="submit" value="用户注册"> # submit 提交按钮 value:按钮上显示的文字
<input type="reset" value="重置内容"> # reset 重置按钮 value:按钮上显示的文字
<input type="button" value="普通按钮"> # button 普通按钮 value:按钮上显示的文字
</form>