2022.4.22前端之html
2022.4.22前端之html
- 前端简介
- HTTP简介
- HTTP协议
- HTML简介（以下内容都是）
- head内常见标签(html)
- body内基本标签(html)
- body内特殊符号(html)
- body内常见标签(html)
- 标签的两大重要参数(html)
- 列表标签(html)
- 表格标签(html)
一、前端简介
1、前端、后端
前端：任何和用户打交道的界面都可以称之为前端
eg：淘宝页面、游戏页面、操作页面等
后端：不直接与用户打交道的用于执行真正业务逻辑的代码
eg：python代码、java代码、c++代码等
2、前端学习路径
目前我们只学习核心知识，后面自己钻研
知识脉络：HTML、CSS、JavaScript、jQuery（框架）、Bootstrap（框架）
前端三剑客：HTML、CSS、JavaScript（目前学习内容）
类比说明：
HTML：网页的骨架
CSS：网页的样式
JavaScript：网页的动态效果
二、HTTP简介
引入：可以充当客户端的有哪些？
（1）自己写的python代码（TCP客户端）
（2）别人写的浏览器（cs架构与bs架构：bs本质也是cs）
问题：目前写的TCP服务端浏览器不识别数据
解决：统一标准>>>HTTP协议
HTTP协议：
规定了服务器与浏览器之间的数据交互格式及其他事项
（1）如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容
（2）如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示，但是不影响服务端
（3）如果这个应用特别火爆，那么完全可以让用户下载专属的客户端（app）
三、HTTP协议
1、四大特性
（1）基于请求、响应
服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应
（2）基于TCP/IP作用于应用层之上的协议
应用层协议：HTTP、HTTPS、FTP...
（3）无状态
服务端不保存客户端状态（纵使见她千百遍，仍然当她如初见）
（4）短链接
不保持客户端于服务端之间的链接导通
补充：websocket（长连接），主要用于加好友聊天等业务
2、数据格式
请求格式：
即客户端给服务端发送消息应该遵循的数据格式
（1）请求首行（请求方法，协议版本）
（2）请求头（一大堆k：v键值对）
（3）换行，不能省略
（4）请求体（携带敏感数据：密码、身份证号...），不是一致都有
"""
b'GET / HTTP/1.1\r\n 请求首行
Host: 127.0.0.1:8080\r\n 请求头
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "macOS"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n 换行
请求体
'
"""
响应格式：
即服务端给客户发消息应该遵循的数据格式
（1）响应首行（响应状态码，协议版本）
（2）响应头（一大堆k：v键值对）
（3）换行，不能省略
（4）响应体（给浏览器展示给用户看的页面内容）
3、响应状态码
就是使用数字来表示某种含义
1XX: 服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX: 200 OK 表示请求成功 服务端给出了响应
3XX: 301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX: 403请求不合法(权限不够) 404请求资源不存在
5XX: 都是服务端错误 与客户端无关(代码bug、机房炸了...)
一般在工作中还会自定义状态码，因为默认的可能不够用，自定义状态码一般是从10000开始。
ps：在公司写后端也需要给前端提供一个手册（eg：聚合数据）
四、HTML简介
先看一段HTML语法的代码：
hello big baby
click me
# 上述语法就是HTML，用于构建网业的骨架（所有网页都是由HTML组成）
1、存放HTML代码的文件后缀名
一般都是.html
2、HTML：超文本标记语言
没有任何逻辑，固定搭配。所见即所得
3、HTML文档结构
给浏览器看的数据
给用户看的数据
4、HTML标签的分类
# 双标签：有头有尾，内容写在中间
...
...
# 自闭和标签：单标签
![]()
# 一般都有特殊功能
5、HTML注释语法
# html由于标签非常多，所以可以通过注释区分页面区域
6、补充
1.如何打开html标签
（1）查找并右键选择打开方式：html文件内右键>>Open in>>Browser>>...
（2）pycharm快捷方式（重要）：html文件内容区右上方浏览器图标
2.html标签没有缩进概念
之所以缩进是习惯了，更加美观而已
3.在pycharm中的html文件内编写标签快捷方法
只需要写表名名称即可，按tab键自动补全
4.在pycharm中的html文件内注释的快捷键
也是: ctrl + ?
五、head内常见标签（html）
head标签内编写的标签一般都是给浏览器识别的
# title标签 控制网页小标题
最大线上赌场
# style标签 内部支持编写css代码
# link标签 引入外部css文件
# script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
# meta标签 功能非常多
# keywords:搜索引擎查询关键字
# description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""
六、body内基本标签（html）
# 1.标题系列: h1~h6(1到6级标题)
111
111
111
111
111
111
# 2.字体系列
斜体
加粗
下划线
删除线
# 3.文本段落：
何处望神州 满眼风光北固楼
# 4.其他
hr 水平分割线
br 换行符
七、body内特殊符号（html）
空格
> 大于号
< 小于号
& &符号(and)
¥ 羊角符(￥)
© 版权
® 商标(?)
八、body内常见标签（html）
标签类别：
块级标签：h1~h6, p, div
默认独占浏览器一行内
行内标签：s, i, u, b, span
自身内部文本多大就占多大
标签嵌套原则：
标签之间支持嵌套（最好是布局类相关标签参与）
块级标签可以嵌套任意标签
不属于布局标签的块级标签不建议嵌套块级标签
行内标签只能嵌套行内标签
1、布局标签
div
span
# 页面的编写首先就是先用布局标签占位 之后填充内容即可
2、图片标签
img
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度
# height和width调整一个另外一个自适应调节 单位是px(像素)
3、链接标签
a
# href可以写网址：'点我跳转'
eg: click me
# href也可写标签id值：
'点我跳转'
# target： 控制是否当前页跳转
eg: 点我跳转 # 默认_self当前页，_blank新建页
九、标签的两大重要参数（html）
1.id
应用：类似于身份证号，同一个html页面上标签的id值不允许重复
作用：用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
应用：类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)
十、列表标签（html）
# 无序列表
- 001
- 002
- 003
- 004
- 005
"""
无序列表是使用频率最高的列表标签
页面上只有是有规则排列的横向或者竖向内容,几乎使用的都是无序列表
"""
用户展示层效果模拟：
* 001
* 002
* 003
* 004
* 005
十一、表格标签（html）
关键字：table
编号
姓名
年龄
1
jason
18
2
tony
28
3
kevin
38