前端
什么是前端
任何与用户直接打交道的操作界面，都是可以称之为前端
eg:电脑界面 手机界面 平板界面
什么是后端
真正的幕后操作者
为什么要学前端
1.技多不压身
2.全栈工程师（前后端都得会）
web服务的本质
请求 响应
浏览器输入网址 回车会发生什么事情
1.朝着指定的服务器地址发送请求
2.服务端接收请求 并处理
3.返回相应的响应
4.浏览器接收并渲染出好看的页面给用户看
请求方式：
1.get请求
朝服务器要资源 eg：输入www.baidu.com
2.post请求
朝服务端提交数据 eg：登录功能
HTTP协议
什么是HTTP协议
超文本传输协议
什么用
规定了服务端与浏览器数据传输的数据格式
四大特性
1.基于TCP/IP作用于应用层之上的协议
2.基于请求响应
请求对应响应
3.无状态
不保存客户端状态，无论来多少次都当初见
4.无连接
对应的一种是长连接 用websocket 做聊天室的时候会用得到
数据格式
请求格式：
请求首行（请求方式 协议版本）
请求头（一大堆k:v键值对）
/r/n
请求体（敏感信息 密码 身份证号）
响应格式：
响应首行（响应方式 协议版本）
响应头（一大堆k:v键值对）
/r/n
响应体（给用户看的数据）
响应状态码
用数字表达一串文字的要表达的意思
1xx:服务端已经成功接收到了你的请求，正在处理，你可以继续提交其他的数据
2xx:服务端成功响应了相应数据
3xx:重定向
4xx:(404请求资源不存在)（403当前不符合某些条件 无法正常访问）
5xx:服务器内部错误（500）
HTML
什么是HTML
超文本标记语言
文件的后缀名：
文件的后缀名是给人看的，对于计算机来说 全都是二进制，之所以不同的后缀名有不同的功能，那是我们程序员认为制定的
HTML的注释
我们在搭建页面的时候，通常会利用注释来划分区域
HTML的文档结构
<html>
<head></head> #不是给人看的 是给浏览器看的
<body></body> #body内的代码才是给人看的
</html>
标签的分类1：
1.双标签（h1,a)
2.自闭合标签（img)
<h1>hello</h1>
<a href='https://wwww.baidu.com'>click me</a>
<img src='http://img5.imgtn.bdimg.com/it/u=268421633,928848426&fm=26&gp=0.jpg'>
head内常用标签
title 定义网页标题
style 内部支持写css代码
link 引入外部CSS样式文件
script 内部可以直接写js代码也可以引入外部js文件
meta 定义网页原信息
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端第一天</title>
<style>
h1 {
color: aqua;
}
</style>
<link rel="stylesheet" href="diyigecsswenjian.css">
<script>
alert('hello baby)
</script>
<!--<stript src="第一个js.js"></stript>-->
</head>
<body>
<h1>
旦夕之间，情知对于生命的千般流转，尽须付与无尽的忍爱。深情即是一桩悲剧，必得以死来句读。你真是一个今人欢喜的人，你的杯不应该为我而空。
</h1>
<h2>书里说 生命中许多事情 沉重婉转至不可说 </h2>
</body>
</html>
body内常用标签
h1~h6 标题标签
p 段落标签 一个p就是一行内容
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是H1</h1>
<h2>我是H2</h2>
<h3>我是H3</h3>
<h4>我是H4</h4>
<h5>我是H5</h5>
<h6>我是H6</h6>
我是正常文本
<p>段落标签 一个p就是一行内容</p>
<s>删除线</s>
<b>加粗</b>
<u>下划线</u>
<i>斜体</i>
<br>
<hr>
</body>
</html>
body内特殊符号
  空格
& &
¥ ￥
> >
< <
© ©
® ®
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>一二三四 二二三四</p>
<p>一二三四&二二三四</p>
<p>一二三四¥二二三四</p>
<p>一二三四>二二三四</p>
<p>一二三四<二二三四</p>
<p>一二三四©二二三四</p>
<p>一二三四®二二三四</p>
</body>
</html>
标签的分类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和span都是前期构建网页的基本骨架
a 链接标签
1.跳转功能 href参数控制跳转的地址
这个地址如果在你的机器上没有点击过默认是蓝色，只要点击过一次后就会变成紫色
a标签默认是当前窗口跳转，可以指定新建窗口打开
target='_self' #当前窗口跳转
target='_blank' #新建窗口打开
2.锚点功能
给a标签设置id值，然后另一个a标签在href中书写对应的a标签Id值，点击即可跳转到对应的位置
img 图片标签
src
1.图片地址，网上的地址也可以是你的本地图片地址
2.url(网址) 自动朝该地址发送get请求，获取图片资源
alt
当前图片加载不出来的时候，展示的提示信息
title
鼠标悬浮上去之后展示的提示信息
width和height
这两个参数，只需要设置一个就可以，默认是等比例缩放，两个都调整的话图片就会失真
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<div>div
<div>div
<div>
div
</div>
</div>
</div>
<a href="https://www.sogo.com" target="_blank">点我点我</a>
<a href="" id="a1">文章开头</a>
<div style="background-color: aqua;height: 1000px"></div>
<a href="#a1">回到文章开头</a>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=769339638,2645864133&fm=26&gp=0.jpg" alt="加载不出来" title="崩三图片" width="500">
</body>
</html>
列表标签
无序列表
ul
li
type参数
disc(实现圆点，默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
有序列表（了解）
ol
li
type参数
1 数字列表，默认值
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
标题列表（了解）
dl
dt 小标题
dd 小章节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="none">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol type="A">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
</body>
</html>
表格标签
展示数据 一般都用到表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is_delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
<tr>
<td>jason</td>
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>