前端之HTML
前端与后端的概念
前端
与用户直接打交道的界面
后端
不直接与用户打交道，主要负责内部的业务逻辑的执行
前端三剑客
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态
HTTP协议
又称为超文本传输协议
1.四大特性
1.基于请求响应
客户端发送请求，服务端响应请求
2.基于TCP、IP作用于应用层之上的协议
该协议属于应用层
3.无状态
服务端不会保存客户端的状态
4.无\短连接
客户端与服务端不会一直保持连接
2.数据格式
1.请求格式
请求首行(请求方式根据协议版本有多种)
请求头(一堆的k:v键值对)
换行
请求体(存放敏感信息，不是所有的请求方式都有请求体)
2.相应格式
响应首行(状态码 协议版本)
响应头(一堆k:v键值对)
换行
响应体(存放给浏览器展示的数据)
3.响应状态码
用数字来表示一些意思
1xx:服务端已经接收到了你的请求正在处理，客户端可以继续发送或等待
2xx:200 请求成功，服务端发送了对应的响应
3xx:302(临时) 304(永久) 重定向(想访问一个网页但是自动调到了另一个网页)
4xx:403 访问权限不够 404 请求资源不存在
5xx:服务端内部错误
我们还可以自己定义更多的响应状态码，通常以10000起步
HTML
概览
1.HTML注释语法
<!--注释内容-->
2.HTML文档结构
<html> 固定格式 html包裹
<head>主要放跟浏览器交互的配置</head>
<body>主要放给用户查看的花里胡哨的内容</body>
</html>
3.HTML标签分类
单标签(自闭和标签)
<img/>
双标签
<h1></h1>
预备知识
1.网页数据一般也会存放于文件中
.html
2.pycharm支持前端所有类型文件的编写
pycharm内置有自动补全功能，我们只需要专注于标签名的编写即可
3.html文件的打开
内置有自动调用浏览器的功能
head内常见标签
1.title 网页小标题
2.meta 定义网页源信息(配置较多)
<meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
3.style 内部支持编写css代码
<style>
h1{
color:rebeccapurple;
}
</style>
4.link 引入外部css文件
<link rel="stylesheet" href="mycss.css">
5.script 支持内部编写js代码也可以引入外部js文件
<script>
prompt('good good study','day day up')
</script>
<script src="myjs.js"></script>
body
基本标签
1.标题系列标签
h1-h6
2.段落标签
p
3.其他标签
u 下划线
i 斜体
s 删除线
b 加粗
# 相同的效果可能是由不同的标签实现的，标签的功能不是独一无二的
4.换行与分割线
br 换行
hr 分割线
'''
标签分类
行内标签 u i s b
内部文本有多大就占多大(紧挨着的都在一行)
块儿级标签 h系列 p
独占一行
'''
常见符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ￥
6.© ©
7.® ®
布局标签
div
块儿级标签
span
行内标签
"""
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
"""
常用标签
"""
标签括号内填写的 什么=什么 称之为的标签的属性
1.默认属性
标签自带的 编写的时候有自动提示
2.自定义属性
用户自定义 编写不会有提示甚至会飘颜色
"""
a 标签 链接标签
href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
target
默认_self原网页跳转
_blank新建网页跳转
img 标签 图片标签
src
1.填写图片地址
2.其他特性
title
鼠标悬浮在图片上自动展示的文本
alt
图片加载失败提示的信息
width\height
图片的尺寸，两个调整一个即可，等比例缩放
列表标签
无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
网页上所有有规则排列的横向或者竖向的数据一般用的都是无序列表
有序列表
<ol type="I">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
标题列表
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据
<td>jason</td>
<td>18</td>
</tr>
完整写法
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
表单标签
可以获取到用户的数据并发送给服务端
form标签
action 控制数据提交的地址
method 控制数据提交的方法
input标签 用户输入
type属性
text 普通文本
password 密文展示
date 日期选项
email 邮箱格式
radio 单选
checkbox 多选
file 文件
submit 触发提交动作
reset 重置表单内容
select标签 下拉框
option标签 一个个的选项
textarea标签 获取大段文本
input标签应该有name属性
name属性相当于字典的键，input标签获取到的用户输入的数据相当于字典的值，点击发送会组织成字典的形式发送给服务端
表单标签的补充说明
基于form表单发送数据
1.获取的用户数据应该以k:v健值对的形式发送
用于获取用户数据的标签至少应该含有name属性，就相当于字典的键
用户输入的数据保存到标签的value属性中，相当于字典的值
2.如果获取的用户数据不是填写而是选择，那么我们需要自己填写value
<input type="radio" name="gender" value="male">
# 没有name属性的标签form表单会直接忽略不会发送
3.针对input标签理论上应该配一个label标签绑定，但是也可以不写
在这里label的作用就是使鼠标在点击username的时候能够直接聚焦到输入框
写法一：
<label for="d1">username:
<input type="text" id="d1">
</label>
写法二：
<label for="d1">username:</label>
<input type="text" id="d1">
4.标签的属性如果和属性值相等那么可以简写
完整写法
<input type="file" multiple="multiple">
简写
<input type="file" multiple>
5.针对选择类型的标签可以提前设置默认选项
单选与多选使用checked,下拉框使用selected
<input type="radio" name="gender" checked="checked">
<input type="checkbox" name="football" checked>
下拉框
<option value="" selected>222</option>
6.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
浙公网安备 33010602011771号