前端
什么是前端: 任何与用户直接打交道的操作界面 都可以称之为前端
ed: 电脑界面 手机界面 平板界面
什么是后端: 真正的幕后操作者
为什么要学前端
1.技多不压身
2.全栈工程师(前后端都会)
软件开发构架
C/S
B/S (本质也是C/S)
统一接口
web服务端本质
-浏览器输入网址 回车发生了什么事
1.朝着指定的服务器地址发送请求
2.服务端接收请求 并处理
3.返回相应的的响应
4.浏览器接收并渲染出好看的页面 给用户看
请求方式
1.get请求
朝服务器要资源
eg: 敲www.baidu.com
2.post
朝服务器提交数据
eg: 登录功能
服务端
1.要有固定的IP和PORT
2.24小时不间断提供服务
3.能够支持并发
HTTP协议
: 超文本传输协议
规定了服务端与浏览器数据传输的数据格式
1.四大特性
1.基于TCP/IP作用于应用层之上的协议
2.基于请求响应
请求对应响应
3.无状态
不保存客户端状态
无论来多少次 都当你如初见
cookie session
4.无连接
长连接 wbsocket (聊天室)
2.数据格式
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆K:V键值对)
请求体(敏感信息 密码 身份证号)
响应格式
响应首行(请求方式 协议版本)
响应头(一大堆K:V键值对)
响应体(敏感信息 密码 身份证号)
3.响应状态码
用数字来表示一串文字需要表达的意思
1XX: 服务端已经接收到你的请求 正处在处理 你可以继续发送请求
2XX: 服务端成功响应了相应的数据(200)
3XX: 重定向链接地址
4XX: 404(请求资源不存在) 403(你当前不符合某些条件 无法正常访问)
5XX: 服务器内部错误(500)
注意:每个公司都可以自定义状态码,不需要完全按照上面规定来
HTML
: 超文本标记语言
文件的后缀名
文件的后缀名是给人看的,对于计算机来说都一样 全是二进制
之所以不同的后缀名有不同的功能 那时我们程序员自认为的定制
注释是代码之母
HTML的注释
单行注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
我们在搭建页面时 通常会利用注释来划分区域
<!--导航条开始-->
<!--导航条结束-->
<!--侧边栏开始-->
<!--侧边栏结束-->
HTML的文档结构
<html>
<head> 给浏览器看
</head>
<body> body内的代码给人看
</body>
</html>
<h1>hello s12~</h1>
<a href="htts://www.baidu.com">click me</a>
<img src="http://img5.imgtn.bdimg.com/it/u=268421633,928848426&fm=26&gp=0.jpg"
标签的分类1
1.双标签 (h1,a)
2.自闭合标签(img)
head内常用标签
title 定义网页标题
style 支持写css代码
link 引入外部的css样式文件
script 内部可以直接写js代码 也可以引入外部js文件
meta 定义网页源信息
<meta name="keywords" content="meta总结,heml meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育python学院>
浏览器上看到的页面 背后都是HTML代码
body内常用标签
h1~h6 标题标签
p 段落标签
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 一条分割线
body内特殊符号
空格
& &
¥ ¥
> >
< <
© ©
® ®
标签分类2
1.块级标签
h1~h6 p br hr div
独占一行
1.块级标签内可以嵌套其他块级标签和行内标签
2.注意: p标签虽然也是块级标签 但是他的内部不能嵌套任何块级标签 只能嵌套行内标签
2.行内标签
s i u b span
内部文本多大就占多大
行内不能嵌套行内和块级
标签通常应该有两个属性
id 就类似于身份证号 每个标签都应该有id值 并且同一个html文档中 标签的id不能重复
class 类属性 有点类似于面向对象的继承 class='c1 c2 c3’ 这个标签就会拥有c1 c2 c3的所有样式
body内重要的标签
div 一块区域 你可以往这块区域内填写任何内容
span 和 div 是前期构建网页的基本骨架
a 链接标签
1.跳转功能 href参数控制跳转的网页地址
只要这个网页在你的机器上没有被点击过那么就默认是蓝色
只要被点击过一次 之后的颜色都是紫色
<a href="https://www.sogo.com">搜狗</a>
2.锚点功能
给a标签设置id值
然后哦在href中书写对应的a标签id值 点击即可跳转到对应的位置
<div style="background-color: aqua;height: 1000px"></div>
<div style="background-color: chartreuse;height: 1000px"></div>
<div style="background-color: yellow;height: 1000px"></div>
<a href="" id="a2">文章中部</a>
<div style="background-color: red;height: 1000px;"></div>
<div style="background-color: blue;height: 1000px"></div>
<div style="background-color: #ff00b7;height: 1000px"></div>
<a href="#a1" >回到顶部</a>
<a href="#a2">回到中部</a>
img 图片标签
src
1.图片地址 网上的地址也可以是你的本地图片地址
2.url(网址) 自动朝该网址发送get请求 获取图片资源
alt
当图片加载不出来的时候 展示的提示信息
title
鼠标悬浮上去后展示的提示信息
width和height
这两个参数 你只需要设置一个 就可以 默认是等比例缩放
两个都调整的话 图片就会失真
列表标签
无序列表
ul
li
type参数
disc (实心圆点)
circle (空心圆圈)
square (实心方块)
none (无样式)
有序列表
ol
li
type参数
1 数字列表,默认值
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
表格标签
展示数据 一般都是用到表格标签
<table>
<thead>
<tr>
<th>username</th>
<th>passwrod</th>
<th>hobby</th>
<th>is_delete</th>
</tr> <!--一个tr就表示一行-->
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
</tbody>
</table>
属性:
- border 表格边框
- cellpadding 内边距
- cellspacing 外边距
- width 像素 百分比(最好通过css来设置长宽)
- rowspan 单元格竖跨多少行
- colspan 单元格横跨多少列(即合并单元格)