50、前端标签
一、前端的学习过程
1.HTML：网页的骨架，没有任何的样式
2.CSS：给骨架添加各种的样式
3.JS：控制网页的动态效果
4.前端框架：bootstrap、jQuery、Vue
二、HTTP协议
超文本传输协议，用来规定客户端与浏览器之间的格式
2.1、HTTP协议的四大特性
1.基于请求响应
2.基于tcp\ip作用于应用层之上的协议
3.无状态：不保存信息，接收到什么信息就执行什么信息
4短链接：链接后，就会直接断开
补充：长链接：链接后不会断开
2.2、请求数据格式
请求首行：（识别HTTP的协议版本，当前请求方式）
请求头：（一大堆k，v键值）
/r/n
请求体：（存放post请求提交的数据）
2.3、相应数据格式
响应首行：（识别HTTP的协议版本，当前请求方式）
请求头：（一大堆k，v键值）
/r/n
响应体：（返回个浏览器展示给用户看的数据）
2.4、响应状态码
用数据来标识复杂的信息或者状态
1xx：服务端已经接收到数据，可以继续提交数据
2xx：服务端成功响应了数据
3xx：重定向：网页被强迫跳转其他页面
4xx：请求错误
403：请求不合法或者不符合访问资料的条件
404：请求资料不存在
5xx：服务端错误
2.5、请求方式
1.get请求
向服务器要数据
操作：输入网址得到相对应内容
2.post请求
向服务器传送数据
操作：向服务端发送身份验证信息
三、HTML
HTML：超文本标记的语言，所有网站都是使用HTML代码写的
<h1>hello big baby~</h1> <a href="https://www.mzitu.com/">click me！give you some color to see see！</a> <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
3.1、HTML的注释
在pycharm中可是直接使用Ctrl+？注释
<!--单行注释-->
<!--
多行注释1
-->
3.2、HTML文档结构
<head> </head>：head内的标签是给浏览器看的
<body> </body>：body内的标签是给用户看的
3.3、打开HTML的方法
1.将为文件使用浏览器打开
2.pycharm中邮件选择已安装好的浏览器打开
3.4、单标签与双标签
单标签：自闭和标签<>
双标签：<> </>
3.5、head中的常用标签
<title> </title>：网页标题
<style> </style>：内部书写CSS代码
<link rel="stylesheet" href="a.css">：引入外部的css代码
<script> </script>：内部书写js代码
<script src="stylesheet" href="b.js">：引入外部的js代码
<meta name="keywords" content="老男孩教育,IT培训"> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户 <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台"> 网页的描述性信息
四、body常用标签
4.1、常用标签
<h1~h6> </h1~h6>：标题
<b> </b>：加粗
<u> </u>：下划线
<s> </s>：删除线
<i> </i>：斜体
<p> </p>：段落
<br>：换行
<hr>：水平分割线
4.2、特殊符号
 ；：空格
gt；：大于号
lt；：小于号
&；：&
¥；：￥
©；：@
®；：®
4.3、常用标签
<div> </div>：块级标签
<span> </span>:行内标签
在页面布局时，通常使用<div>块级标签和<span>行内标签进行站位，之后再调整样式
4.4、标签的分类
块级标签：独占一行
分布：<h>、<p>、<div>
特点：可以修改长宽，除了<h>以外都能任意嵌套块级标签或者行内标签，<h>只能镶嵌行内标签
行内标签：全部文本
分布：<i>、<u>、<s>、<b>、<span>
特点：不可以修改长宽，只能镶嵌行内标签
4.5、img标签：图片标签
<img src=" " alt=" ">
src :存放本地路径或者URL，通过get获取网上数据
slt：存放图片无法加载时的描述信息
title：存放鼠标移到图片上时显示的信息
height：“800px”：设置宽度的像素
width：设置高度的像素
当值设定一个像素值时，会自动按比例调整
4.6、a标签：跳转
<a herf =" ">描述信息</a>
herf：存放URL，点击后跳转到URL界面
存放id值时，点击后跳到对应的标签位置
target：_self（默认）：在当前页面跳转
_blank：跳转到新建页面
4.7、标签的书写
1.id值：要求具备唯一性
2.class值：一个标签可以继承多个class值
标签既可以有默认的书写，也可以自定义书写
<p id="d1" class="c1" username="jason" password="123"></p>
4.8、列表标签
4.8.1、无序标签
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
4.8.2、有序标签
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol> 1 A I a ... 参考博客了机即可
4.8.3、标题标签
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
