前端day01
今日内容总结
- 前后端概念
1.前端(用户接待员)
直接与用户打交道的操作界面都可以称之为前端
2.后端(幕后工作者)
不直接与用户打交道主要负责核心业务逻辑执行
"""
全栈:前后端一个人写
"""- HTTP协议
1.四大特性
①基于请求响应
②基于TCP、IP作用于应用层之上
③无状态
④无连接
2.数据格式
(1)请求格式
①请求首行
②请求头
③换行
④请求体
(2)响应格式
①响应首行
②响应头
③换行
④响应体
3.响应状态码
1XX:
2XX:200 OK
3XX:302 304
4XX:403 404
5XX:500
- HTML标签
1.注释语法
2.语法结构
3.标签分类
4.head内常见标签
title style link script meta
5.body内基本标签
h1~h6 p u i s b hr br
6.body内常见符号
& > < ® © ¥
7.body内布局标签
div span
8.body内常见标签
a
href
target
-self
-blank
img
src
alt
title
height
width
9.列表标签
无序列表
ul
li
有序列表
ol
li
10.表格标签明书
table
thread
tr
th/td
tbody
tr
td
tr
td
11.表单标签
form
action属性
method属性
input
type属性
text 普通文本
password 密文展示
email 邮箱格式
date 日期格式
radio 单选
checkbox 多选
file 文件
submit 触达表单提交数据的动作
reset 重置表达内容
button 普通按钮
select
option
textarea 大段文本
"""
标签的分类
行内、块儿级
标签的两大重要属性
id class
"""
今日内容详细
一、前端简介
1.前端与后端
前端： 与用户直接打交道的操作界面都可以称之为是前端
后端(幕后工作者)：不直接与用户打交道的，内部真正执行核心业务逻辑的代码程序
2.前端的学习
真正的前端工程师也需要学习很长时间，我们作为后端工程师对前端目前只做最核心的了解
3.前端核心基础
HTML ---> 网页的骨架
CSS ---> 网页的样式
JS ---> 网页的动态
二、超文本传输协议前戏
1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件，为了实现无障碍沟通交流，有了一些协议
HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题，因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式
三、HTTP超文本传输协议
1.四大特性
①基于请求响应
②基于TCP/IP之上作用于应用层的协议
③无状态
④无连接
四、HTML简介
1.超文本标记语言
是所有浏览器展示的页面必备的！！！
2.浏览器展示的页面我们也称之为HTML页面，存储HTML语言的文件后缀一般是.html
3.HTML没有任何的逻辑，所见即所得
4.HTML注释语法
<!--注释内容-->
5.HTML文件结构
<html> 所有的代码都必须写在html标签内部
<head></head> head内的数据一般都不是给用户看的
<body></body> body内的数据就是浏览器展示给用户看的
</html>
6.HTML标签的分类
1.单标签(自闭和标签)
<img/>
2.双标签
<a></a>
"""HTML代码是不讲究缩进的，我们只是习惯了python的缩进语法"""
五、head内常见标签
| title | 控制标签页小标题 |
| style | 内部支持编写CSS |
| link | 引入外部CSS文件 |
| script | 内部支持编写JS代码，还可以通过src属性引入外部JS文件 |
| meta | 通过内部属性的不同可以有很多功能 |
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
六、body内基本标签
| h1~h6 | 标题标签 |
| p | 段落标签 |
| hr | 水平分割线 |
| br | 换行符 |
| u | 下划线 |
| i | 斜体 |
| s | 删除线 |
| b | 加粗 |
注意：有很样式，可能存在多种标签可以实现
七、块儿级标签与行内标签
1.块儿级标签 h1~h6 p hr br
一个标签独占一行
2.行内标签 u i s b
内部文本多大自身就占多大
八、body内基本符号
|   | 空格 |
| > | 大于号 |
| < | 小于号 |
| & | & |
| ¥ | ￥ |
| ® | 注册 |
| © | 版权 |
九、body内布局标签
div
块儿级标签
span
行内标签
1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候可以嵌套
块儿级可以嵌套任何类型的标签
p标签虽然是块儿级标签，但是不能块儿级标签
行内标签只能嵌套行内标签
十、body内常见标签
1. a标签
链接标签
href 可以填写网址，点击自动跳转
href还可以填写其他标签的id值，实现锚点功能
target 可以控制是否新建页面跳转
_self
_blank
2.img标签
图片标签
src 填写图片地址( 网络地址 本地地址 )
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片的宽度
上述两个调整一个，另外一个等比例缩放
十一、标签两大重要属性
下面的两个属性都是用来快速定位需要操作的标签
1. id属性(一对一管理)
类似于身份证号，在同一个html页面上，id值不能重复
2. class属性(批量管理)
类似于分组，多个标签可以拥有相同的class值
十二、列表标签
1.无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
2.有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>3.标题列表
<dl>
<dt标题一></dt>
<dd>内容一</dd>
<dt>标题二</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>十三、表格标签
<table>
<thread>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123<td>
</tr>
</tbody>
</table>
十四、表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action 属性
用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交
method 属性
用于控制请求的方式(get\post)
<form ation="" method="post">
<p>username:<input type="test"></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">女
<input type="radio" name="gender">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<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>GF:
<select name="" id="" multiple>
<option value="">小明</option>
<option value="">小妹</option>
<option value="">小李</option>
<option value="">小锅</option>
<select>
</p>
<p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</p>
</form>
浙公网安备 33010602011771号