'''
任何于用户直接打交道的操作界面都可以称之为前端
手机 电脑等
后端——幕后的操作者
'''
前端学习的三个步骤
'''
HTML:网页的骨架 没有任何的样式
CSS:给骨架添加各种样式 变好看
JS:控制网页的动态效果
前端框架：BOOTSTARP、JQuery、Vue
'''
浏览器输入网址发生的四件事
'''
1 浏览器向服务端发起请求
2 服务端接收请求
3 服务端返回响应
4 浏览器接收响应 渲染页面并展示
'''
ps：浏览器可以充当许多应用程序的客户端（百度，优酷视频。。。）
HTTP协议
PS：我们为了让我们写的客户端可以与浏览器正常数据交互，所以要使用HTTP
'''
超文本传输协议——规定了服务端和浏览器之间的数据交互的格式。
自己开发APP则无需使用HTTP协议
'''
HTTP协议的四大特性
1 基于请求响应
2 基于TCP/IP作用于应用层之上的协议
3 无状态（不保存用户的信息——由于这个特性所以出现了专门记录用户状态的技术
cookie、session、token）
4 无/短链接 一次请求一次响应 之后就没有链接关系
ps：长链接——双方建立链接之后默认不断开（websocket）
# 请求数据格式
请求首行（标识HTTP协议版本，当前请求方式）
请求头（一大堆K，V键值对）
# 响应数据格式
响应首行（标识HTTP协议版本，响应状态码）
响应头（一大堆K，V键值对）
响应体（返回给浏览器并展示的数据）
# 响应状态码
标识一些复杂的状态的描述性信息
404：请求的资源不存在
1XX：服务端已经成功接收到了你的数据，正在处理，你可以继续提交数据
2XX：服务端成功响应你想要的数据（200 OK请求成功）
3XX：重定向（在访问一个登录之后才能看到的页面——自动跳转页面）
4XX：请求错误
403：当前请求不合法，或者不符合访问资源的条件
5XX：服务器内部错误（500）
# 请求方式
1 get请求
向服务器要数据——输入网址获取内容
2 post请求
向服务器提交数据
用户登录 输入密码后提交到服务端
# url：统一资源定位符（网址...）
HTML的标准
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
HTMT的文档结构
<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
PS：文件的后缀名只是给用户看的，对应不同的文件后缀有不同的软件来处理并添加功能。
注意：HTML代码是没有格式的，可以写在一行
打开HTML的文件方式
1 找到文件 右键选择浏览器打开
2 直接在pycharm内打开 社区版的没有
标签的分类
<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img/>
1 双标签
2 单标签(自闭和标签)
head内的常用标签
ps : 书写HTML代码 只需要写标签名 tab自动补齐
<title>Title</title> 网页标题
<style>
h1 {
color: greenyellow;
}
</style> 内部用来书写css代码
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
# 网页的描述信息
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训"> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
body内的常用标签
基本标签
<h1>我是h1</h1> 标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br> 换行
<hr> 水平分割线
标签分类2
# 1 块级标签：独占一行
h1~h6 p div
1 块级标签可以修改长和宽 型内标签不可以——修改无效
2 块级标签内部可以镶嵌块级标签和行内标签
但是行内标签不可以套块级标签 只能套行内标签
# 2 行内标签：自身文本多大就占多大
i u s b span
特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
商标® ®
常用标签
div 块级标签
span 行内标签
这两个标签是在构造页面初期最常使用的 页面的布局一般线用div和span占位，再去调整样式 尤其是div使用的很频繁
div可以将他看成一块区域——可以用div来提前规划所有的区域
普通文本用span
img标签
# 图片标签
# 图片标签
<img src="" alt="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
标签具有的两个重要书写
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
列表标签
-
无序列表(较多)
<ul> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> </ul> 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签 -
有序列表(了解)
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol> 1 A I a ... 参考博客了机即可 -
标题列表(了解)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>