前端介绍、HTTP 协议、HTML 常用的标签、标签的分类
1 什么是前端
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面 手机界面 平板界面什么是后端
后端类似于幕后操作者(一堆让人头皮发麻的代码)
不直接跟用户打交道
2 前端的学习历程
HTML:网页的骨架 没有任何的样式
CSS:给骨架添加各种样式 变得好看
JS:控制网页的动态效果前端框架:BOOTSTRAP、JQuery、Vue
提前给你封装好了很多操作 你只需要按照固定的语法调用即可
3 web服务本质
浏览器窗口输入网址回车发生几件事(宏观)
1、浏览器朝服务端发送请求；
2、服务端接受请求；
3、服务端返回相应的响应(eg:返回一个百度首页)；
4、浏览器接受响应，根据特定的规则渲染页面给用户看
如何做到浏览器能够跟多个不同的客户端进行数据交互
思想：统一
制定一个统一的标准，让程序员写的服务端与浏览器能够进行正常的数据交互(浏览器能够正常的响应)
该标准就是HTTP协议
4 HTTP协议
超文本传输协议，用来规定服务端和浏览器之间的数据交互的格式…
注意：
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就下载你专门的app即可
HTTP协议的4个特性
1、给予请求响应
2、给予TCP/IP作用于应用层之上的协议
3、无状态 : 不保存用户的信息
eg : 一个人来了一千次，你都记不住，每次都当他如初见
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token…
4、无/短链接
请求来一次我响应一次 之后我们两个就没有任何链接和关系了拓展：长链接：双方建立链接之后默认不断开 (聊天)–websocket
HTTP协议规定请求和响应数据的格式
请求格式====
请求首行 ：标识 HTTP 协议版本，当前请求方式
请求头 ：一大堆k,v键值对
\r\n ：换行
请求体 ：并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据
请求格式====
响应格式====
响应首行 ：标识 HTTP 协议版本，响应状态码
响应头 ：一大堆k,v键值对
\r\n ：换行
响应体 ：并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据
响应格式====
请求方式
1、get：朝服务端要数据
eg:输入网址获取对应的内容
2、post：朝服务端提交数据
eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验
响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息 404:请求资源不存在
1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK 请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
4XX:请求错误 404:请求资源不存在 403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)
URL
统一资源定位符(网址)
5 HTML简介
HTML就是书写网页的一套标准
超文本标记语言
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
HTML 文档结构
<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
HTML 文件打开方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
标签的分类
双标签、单标签(自闭和标签)
块级标签(独占一行)、行内标签(自身文本多大就占多大)
标签具有的两个重要的属性
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签内容的书写
标签内可以再次嵌套标签
可以直接书写标签的内容
拓展：标签既可以有默认的书写 (按照标签自带的属性书写)
也可以有自定义的书写 (字段不在原标签所自带的属性中，但是不会显示，不会报错)
6 head 内常用的标签
<!--
title标签
网页标题
-->
<title>Title</title>
<!--
style标签
内部用来书写css代码
-->
<style>
h1 {
color: greenyellow;
}
</style>
<!--
script标签
内部用来书写js代码
还可以引入外部js文件
-->
<script>
alert(123)
</script>
<script src="myjs.js"></script>
<!--
link标签
引入外部css文件
-->
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<!--
meta标签
keyword、keywords
当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
description
网页的描述性信息
-->
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
7 body 内常用的标签
基本标签
<h1>我是h1</h1> 标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br> 换行
<hr> 水平分割线
特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© © 版权
® ® 商标
常用标签
div 块级标签
<!--div 块级标签-->
可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
span 行内标签
<!--span 行内标签-->
普通的文本先用span标签
页面布局一般先用 div 和 span 占位之后再去调整样式 尤其是div使用非常的频繁
img 图片标签
<!--img 图片标签-->
<img src="" alt="" title="" height="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a 链接标签
<!--a 链接标签-->
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
<a href="" target="" ></a>
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
a标签的锚点功能
eg:点击一个文本标题 页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<h1 id="d3">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="#d3">回到hello world</a>
列表标签
-
无序列表(较多)
<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>
简写方式：
ol>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ol>li{$}*3
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
8 块级标签与行内标签
块级标签
块儿级标签:独占一行
h1~h6 p div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签 如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
行内标签
行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签 可以嵌套行内标签