前端HTML
前端
前端与后端的概念
前端的概念
与用户打交道的界面
后端的概念
不直接与用户打交道，负责内部的业务逻辑的执行
学习内容
前端三剑客
HTML
CSS
JavaScript JQuery(框架)
# 比喻说明
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态效果
HTTP协议
规定了浏览器与服务端之间数据交互的格式
四大特性
1. 基于请求响应
客户端发送请求，服务端回应响应
2. 基于TCP .IP 作用于应用层之上的协议
应用层的协议: HTTP HTTPS FTP ...
3. 无状态
服务端不会保存客户端的状态
4. 无短链接
客户端与服务端不会保持持久链接
# websocket(长链接)， 主要是聊天业务
数据格式
1.请求格式
请求首行(请求方法，协议版本)
请求头(K:V形式键值对)
换行(不能省略)
请求体(存放敏感信息) 不是所有方法都有请求体
2.响应格式
响应首行(状态码 协议版本)
响应头(K;V形式键值对)
换行
响应体(存放给B展示的数据) # B浏览器
# 常见响应状态码
1xx: 服务端成功接收到数据,正在处理
2xx; 200 ok 表示请求成功 服务端发送了响应
3xx: 302(临时) 304(永久) 表示重定向(想访问1网页但是自动跳转到了2网页)
4xx: 403 访问权限不足 404 请求资源不存在
5xx; 服务端内部错误
# 以后工作还可以自定义状态码、自定义状态码一般从10000开始
eg: 聚合数据
HTML简介
超文本标记语言
所见即所得(没有任何逻辑 是什么就是什么)
HTML概览
HTML 的注释语法
<!--注释内容-->
HTML 文档结构
<html> 固定格式 html包裹
<head> 存放跟浏览器交互的配 </head>
<body> 给用户查看的内容 </body>
</html>
HTML标签分类
单标签(自闭和标签)
<img/>
双标签
<h1> 内容 </h1>
HTML补充
1.pycharm如何打开html标签
1.1.新建文件里面有
1.2.pycharm快捷方式(重要)
html文件内容区右上方浏览器图标
2.html标签其实没有缩进的概念
3.在pycharm中的html文件内
编写标签只需要写表名名称即可 按tab键自动补全
4.在pycharm中的html文件内
注释的快捷键也是ctrl+?
head内常见标签
# title 网页的标题
<title>性感美女在线发牌</title>
# meta定义网页源信息 功能非常多
keywords:搜索引擎查询关键字
<meta name ="keywords" content="查询的关键字">
description:用于展示页面搜索结果的文本描述
<meta name =“description” content="网页的描述简介">
# style 内部支持编写css代码
<style>h1{color: hotpink}</style>
# link 引入外部的css文件
<link rel="stylesheet" href=""> 在herf后面写
# script 支持内部编写js代码也可以引入外部js文件
<script> prompt('prompt就是html的print') </script>
<script src = “外部js文件路径”></script>
"""正常的业务逻辑 HTML CSS JS都会分不同的文件存储"""
body内基本标签
1.标题系列
h1~h6 一级标题-六级标题
<h1> 你好啊，勇士 </h1>
2.段落标签
<p>段落内容</p>
3.其他标签
u 下划线 i 斜体 s 删除线 b 加粗
'也有别的标签可以实现这些效果'
4. 换行与分割线
br 换行 hr 分割线
# 标签的分类
行内标签 ' u i s b'
文本多大就站多大
块儿级标签 'h系列 p'
独占一行
常见符号
 ； 空格
>； 大于
<； 小于
& &符号
¥ ¥
© © 版权
® ® 商标
body内 布局标签
div -- 块儿级标签
span -- 行内标签
"""
标签之间支持嵌套
块儿级标签可以嵌套任意标签
不属于布局标签的块儿级标签不建议嵌套块儿级标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签只能嵌套行内标签
"""
body内 常用标签
"标签括号内 href = '' 称之为标签的属性"
标签的属性有两种:
1.默认属性 标签自带的
2.自定义属性 编写不会提示会飘黄
a标签 # 链接标签
1. 填写网址 点击跳转
<a href="https://www.baidu.com/">点我啊 </a>
使用target 设置
_blank 新建网页跳转
_self 原网页跳转
<a href="http://www.qyle2.com/" target="_self">点我啊 </a>
2. 填写其他标签的id值 具备锚点功能
<a href="" id = 'd1'> 赛利亚房间</a> # 设置一个锚点
<div style="background-color: hotpink; height: 1000px; widows: 100%"></div>
<a href="" id = 'd2'> 哥布林森林</a>
<div style="background-color: hotpink; height: 1000px; widows: 100%"></div>
<a href="#d1"> 回到赛利亚房间 </a> # 点击文字跳转到 ID = d1 的锚点
<a href="#d2"> 回到哥布林森林</a>
img标签 # 图片标签
src 填写图片地址
title 鼠标悬浮图片上自动展示的文本
alt 图片加载失败提示的信息
width\height (px单位)图片的尺寸
<img src="https://img0.baidu.com/it/u=3586850093,1666138624&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" alt="" width="300px" height="400px">
列表标签
# 无序列表
<ul> # ul包起来
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
# 有序列表
<ol type="1"> # ol包起来并用属性type设置 序号类型
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
# 标题列表
<dl>
<dt>地下城与勇士</dt>
<dd>鬼剑士</dd>
<dd>神枪手</dd>
</dl>
"其实就是用缩进来表示大标题与小标题"
表格标签
1.需要提前写好骨架
<talbe>
<thead></thead>
<tbody></tbody>
</table>
2.在写表头字段与数据
<table> # 添加border 属性设置边框数字越大边框越粗 基本不用，用CSS
<thead>
<tr> # tr表示一行 就是下列数据在一行
<th>职业</th> # th 用于表头字段
<th>武器</th>
<th>性别</th>
</tr>
</thead>
<tboday>
<tr>
<td>圣骑士</td> # tb 用于数据
<td>奶杖</td>
<td>男</td>
</tr>
"可以添加多条数据 "
<tr>
<td>战士</td> # tb 用于数据
<td>风剑</td>
<td>男</td>
</tr>
</tboday>
</table>
from表单标签
可以获取到用户输入的数据并发给服务端
form标签
action 控制数据提交的地址
method 控制数据的提交方法
input标签
input标签 与python 中一样 用于获取用户数据
type属性
text 普通文本
password 密文
date 日期选项
email 邮箱格式
radio 单选 # 可以通过添加checked="checked"设置默认值
checkbox 多选
file 文件
submit 提交动作
reset 重置表单
button 空功能可以自定义
"""input标签应当有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
"""
用户名:
<input type="text" >
<br>
密码:
<input type="password">
<br>
出生年月:
<input type="date">
<br>
邮箱:
<input type="email">
<br>
性别:
<input type="radio" name="性别" value="male">男 # 想要单选必须+上name属性
<input type="radio" name="性别" value="female">女
<br>
爱好：
<input type="checkbox"> 篮球
<input type="checkbox"> 足球
<input type="checkbox"> 乒乓球
<br>
身份证文件：
<input type="file">
<br>
<p>关于我们的建议：</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
您来自哪里:
<select name="province" id="" >
<option value="">北京</option>
<option value="">安徽</option>
<option value="">江苏</option>
</select>
<br>
<input type="submit"> <input type="reset">
select标签
select标签 # 下拉框
option标签 # 选项
<select name="province" id=""> # 可以在内部 + multiple 变成多选 按住Ctrl
<option value="">北京</option>
<option value="">安徽</option>
<option value="">江苏</option>
</select>
textarea标签
获取大段文本 文本框可 拉
eg： 发表贴吧 发表微博 发表评论
<p>关于我们的建议：</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
表单标签补充
name与value属性
- 基于form表达发送数据，用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
获取到的用户输入数据会保存到标签的value 属性
value属性相当于字典的
- 但是也有几种特殊情况，比如我们在使用input 获取性别的时候 只需要选择，这种情况就需要我们自己手动输入value
<input type="radio" name="gender" value="male">男
注意： 没有name属性的标签 form 默认不会发送。
label标签
- 针对input标签应该配上一个label标签绑定，起作用就是给该标签标配文字说明。
方法1
<label for = "d1">username:
<input type="text" id="d1">
</lable>
方法2
<label for="d1">username:</lable>
<input type="text" id="d1">
虽然提供了label标签，但是我们也可以不写
multiple属性与option标签
该属性可以设置多选。在下拉框中配合option标签使用
# 文件多选
<input type="file" multiple="multiple">
# 也可简写
<input type="file" multiple>
# select 下拉框多选
<select name="province" id="">
<option value="">北京</option>
<option value="">安徽</option>
<option value="">江苏</option>
</select>
checked默认选项
针对如性别之类的选择标签 可以提前设置好默认值
<input type="radio" name="性别" checked="checked">男
当然也可以简写 checked
<input type="radio" name="性别">女
