前端一
前端简介
1.前端与后端
前端
与用户直接打交道的操作界面都可以称之为是前端
后端(幕后工作者)
不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
2.前端的学习
真正的前端工程师也需要学习很长时间 我们作为后端工程师对前端目前只做最核心的了解大致七天的学习
3.前端核心基础
HTML
网页的骨架
CSS
网页的样式
JS
网页的动态
超文本传输协议前戏
1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件 为了实现无障碍沟通交流 有了一些协议
HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题 因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式
HTTP超文本传输协议
1.四大特性
1.基于请求响应
2.基于TCP/IP之上作用于应用层的协议
3.无状态
4.无/短连接
2.数据格式
请求数据格式
1.请求首行(请求方式:有很多种 协议名称及版本)
2.请求头(一大堆K:V键值对)
3.换行
4.请求体(携带一些敏感的数据 不是所有的请求都有请求体)
响应数据格式
1.响应首行(响应状态码)
2.响应头(一大堆K:V键值对)
3.换行
4.响应体(一般情况下就是浏览器要展示给用户看的数据)
3.响应状态码
利用数字来表示一些复杂的情况说明(类似于暗号)
1XX:服务端已经接收到你的请求正在处理 你可以继续提交或者等待
2XX:200 OK服务端给出了相应响应
3XX:重定向
4XX:403请求不符合条件 404请求资源不存在
5XX:服务端内部错误
我们在公司中还会自己定义更多的状态码
一般情况下从10000开始
HTML简介
超文本标记语言
是所有浏览器展示的页面必备的!!!
浏览器展示的界面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html
HTML没有任何的逻辑 所见即所得
HTML注释语法
<!--注释内容-->
HTML文件结构
<html> 所有的代码都必须写在html标签内部
<head></head> head内的数据一般都不是给用户看的
<body></body> body内的数据就是浏览器展示给用户看的
</html>
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值
列表标签
无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
标题列表
<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>
表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
method属性
用于控制请求的方式(get\post)
<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">女
<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>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</form>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="get">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>生日：<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>
爱好<input type="checkbox" name="爱好">少女
<input type="checkbox" name="爱好">少妇
<input type="checkbox" name="爱好">寡妇
</p>
<p>
file:<input type="file">
</p>
<p>files:<input type="file" multiple></p>
<input type='submit' value="用户注册">
<input type="reset" value="重置">
<input type="button" value="请勿点击">
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">东京</option>
</select>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
</form>
</body>
浙公网安备 33010602011771号