前端简介
1.前端与后端
前端：与用户直接打交道的操作界面都可以称之为前端
后端：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
2.前端核心基础
HTML：网页的骨架
CSS：网页的样式
JS：网页的动态效果
HTTP简介
1.什么是HTTP：超文本传输协议
2.四大特性
1.基于请求响应
2.基于TCP/IP之上作用于应用层的协议
3.无状态
4.无/短连接
3.数据格式
请求数据格式：
1.请求首行(请求方式:GET/POST等 协议名称及版本)
2.请求头(一大堆K:V键值对)
3.换行 (不能省略)
4.请求体(携带一些敏感数据如密码 不是所用的请求都有请求体)
响应数据格式
1.响应首行(响应状态码)
2.响应头(一大堆K:V键值对)
3.换行 (不能省略)
4.响应体(一般情况下就是浏览器要展示给用户看的数据)
4.响应状态码
概念：利用数字来表示一些复杂的情况说明(类似于暗号)
1XX：服务端已经接收到你的请求正在处理，你可以继续提交或者等待
2XX：200 OK 服务端已经给出了相应响应
3XX：重定向
4XX：403 请求不符合条件 404请求资源不存在
5XX：服务端内部错误
我们在公司中还会自己定义更多的状态码，一般情况下从10000开始
HTML简介
1.概念：超文本标记语言。是所有浏览器展示页面必备的。
2.浏览器展示的页面我们也称之为HTML页面 存储HTML语言文件的后缀一般是.HTML
3.HTML注释语法:
4.HTML文件结构
<html> 所有的代码都必须写在html标签内部
<head>
head内的数据一般都不是给用户看的
</head>
<body>
body内的数据就是浏览器展示给用户看的
</body>
</html>
HTML标签分类
1.按闭合特征分类
单标签(自闭合标签)
<img/>
双标签
<a></a>
2.按是否换行分类
块级标签:块级元素是值本身属性为display：block的元素(一个标签占一行)
常见标签：u i s b
行内标签:行内元素是指本身属性为display：inline的元素，其宽度随着元素的内容而变化。也叫内联元素。(内部元素多大，本身就多大)
常见标签：h1-h6 p hr br
块级元素的特点：
1.每一个块级元素独占一行，从上到下排布
2.块级元素可以直接控制宽度高度等盒子模型相关的CSS属性
3.不设宽度的情况下，块级元素的宽度是其父级元素内容的宽度
4.不设高度的情况下，块级元素的高度是他本身内容的高度
行内元素的特点：
1.行内元素会和其他元素从左到右的显示在一行中
2.行内元素的宽高是由其内容本身的大小决定的
3.行内元素只能容纳文本或者其他行内元素，不允许在行内元素中嵌套块级元素
标签两大属性
1.id属性(一对一管理)
类似于身份证号，在同一个html页面上 id不能重复
2.class属性(批量管理)
类似于分组，多个标签可以拥有相同的class值
head内常见标签
tittle: 控制标签小标题
style: 内部支持编写CSS
link: 引入外部css文件
script: 内部支持编写js代码 也可以通过src属性引入外部js文件
meta: 通过内部属性的不同可以有很多功能
<meta charset="UTF-8" name="keywords" content="填写一些关键字 提升网页被检索到的概率">
body内常见标签
h1~h6 标题标签
p 段落标签
hr 水平分割线
br 换行符
u 下换线
i 斜体
s 删除线
b 加粗
注意:有很多样式 可能存在多种标签可以实现
body内基本符号
 
>
<
&
¥
®
©
注意：为什么不写'>' '<'而用'>'，目的是为了防止与标签中的括号冲突，其他基本符号同理。
body内布局标签
div：块级标签
span：行内标签
1.块级标签可以通过调整css设置为不独占一行
2.标签之间很多都可以嵌套
块级标签可以嵌套块级标签和行内标签
ps：p标签除外
行内标签只能嵌套行内标签
body内常见标签
1.a标签：链接标签
常用属性：
href：可以填写网址，点击即可跳转。href还可以填写其他标签的id值，实现锚点功能。
target：可以控制是否新建页面跳转
_self _blank
2.img标签：图片标签
常用属性：
src：填写图片地址
tittle:鼠标悬浮在图片上的提示信息
alt:图片加载失败的提示信息
height:调整图片的高度
weight:调整图片的宽度(宽高属性只需调整一个另一个等比缩放)
列表
1.无序列表
<ul>
<li>python</li>
<li>go</li>
<li>c</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
2.有序列表
<ol type="1" start="1">
<li>第一项</li>
<li>第二项</li>
</ol>
type表示序号类型：大小写字母、阿拉伯数字等
start表示起始位置
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dd>内容3</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>
thead相当于表头，一条数据就是一个tr，一个格子就是一个th
tbody相当于表数据，一条数据就是一个tr，一个格子就是一个td
th比td的颜色更深(表头的th可以用td代替)
表单
能够获取用户信息(输入、选择、上传)的数据并发送给后端服务器
<form action="" method="post">
<p>username: <input type="text"></p>
<p>password: <input type="password"></p>
<p>birthday: <input type="date"></p>
<p>email: <input type="email"></p>
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
<p>bobby:
<input type="checkbox" name="hobby">唱跳
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">篮球
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>grilfriend:
<select name="" id="" multiple>
<option value="">迪丽热巴</option>
<option value="">泰勒斯</option>
<option value="">关晓彤</option>
</select>
</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>
