标签：str 超文本标记语言 菜单 提示信息 补全 适用于 完成 字体颜色 code
什么是前端
任何于用户直接打交道的页面都可以称之为前端，比如电脑界面，手机界面，网页
什么是后端
幕后操作者，不直接与用户打交道
1. 浏览器朝服务端发送请求 2. 服务端接收请求 3. 服务端返回响应的响应，返回网站 4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看 浏览器可以充当很多服务端的客户端，浏览器有一个，服务端有很多个，想要一个客户端与多个服务端交互： 1. 浏览器能够自动识别服务端做不同处理 2. 制定一个同一标准，所有服务端都要遵循一些规则：http协议
超文本传输协议，用来规定服务端与浏览器之间的数据交互格式，这样浏览器就能正常渲染服务端发送的内容
不用http协议也可以，只是就不能用浏览器，需要写一个app
以下的内容要求滚瓜烂熟
基于请求响应
基于TCP / IP作用于应用层之上的协议：协议上面的协议
无状态，不保存用户的信息，由于http这个特性，后来出现了一些专门用来技术用户状态的技术：cookie，session，token
无链接 / 短链接，请求来一次响应一次，之后没有任何联系
长链接：双方建立链接之后默认不断开：websocket
请求方式
get请求：朝服务端要数据
例：输入网址获取对应的内容
post请求：朝服务端提交数据
例：用户登陆，输入用户名和密码之后，提交到服务端做身份校验
请求首行，请求头，/r/n，请求体
1. 请求首行：标识http版本，档期啊请求方式（get/post） 2. 请求头：一堆k:v键值对 3. 回车：/r/n 4. 请求体：get没有请求体，post请求体里面放敏感数据
响应首行，响应头，/r/n，响应体
1. 响应首行（标识http协议版本，响应状态码） 2. 响应头 3. /r/n 4. 响应体 响应状态码：用一串数字标识一些复杂的状态或描述性信息，如200，500，404 主要有几类： 1xx：服务端已经顺利接收了你的数据，正在处理，可以继续提交额外数据 2xx：服务端成功响应了你的数据，200 request ok 3xx：重定向：当你在访问一个需要登陆之后才能看的页面，页面会重定向到登陆页面 4xx：请求错误：404：请求资源不存在，403：当前请求不合法或不符合访问资源的条件 5xx：服务器内部错误，500：internal server error
url：统一资源定位符，标识资源的位置，也就是网址
让我们在python上写的服务端返回的数据能被浏览器识别：
conn.send(b‘HTTP/11 200 OK \r\n\r\n‘) conn.send(b‘hello‘) # 此时，在conn里可以发送html代码或文件，可以被浏览器识别
超文本标记语言，不是编程语言。能够让浏览器渲染页面，我们现在看到的所有网站都是html代码
注释
<!--单行注释--> <!-- 多行注释 多行注释 --> 由于html比较杂乱，所以我们习惯性地用注释来划定区域方便后续的查找 <!--左侧菜单栏开始--> ... <!--左侧菜单栏结束--> <!--顶端导航栏开始--> <!--顶端导航栏结束-->
<html>
<head></head> head标签里的代码页面上显示不出来，是定义一些配置给浏览器看的
<body>
hello：用户能够看到的内容，给浏览器渲染
</body>
</html>
文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加功能
新建html文件，会自动帮你生成一些标签；html没有任何格式，可以全部写在一行里面，只不过我们习惯了缩进来显示代码
两种打开html文件的方式
标签的分类
1. 双标签：<h1></h1> 2. 单标签，自闭合标签：<image>
在书写html代码的时候，只需要写标签名，table键能自动补全
title，style，script，meta，link等等
<head>
<title>标签名字</title>
<style>
h1{
color:yellow,
}
写css代码
</style>
<script src=‘myjs.js‘>
写js代码或引入js文件
</script>
<link>
用来引入外部css文件
</link>
<meta>
告诉浏览器干什么活
meta name，meta keyword。。。
</meta>
</head>
基本标签：
<body>
<h1>
一级标签
</h1>
<h2>
二级标签
</h2>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>
文本标签，单独占一行
</p>
<br> 换行
<hr> 水平分割线
</body>
前端基本不会报错，只是显示的效果会有错误
> 小于号 < 写作 <&¥©
® ®
标签的两个重要书写
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
# 标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
常用标签
div 块儿级标签 span 行内标签 上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁 div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域 之后往该区域内部填写内容即可 而普通的文本先用span标签
img标签
# 图片标签 <img src="" > src="url" 1.图片的路径可以是本地的也可以是网上的 2、url 自动朝该url发送get请求获取数据 alt="当图片加载不出来的时候 给图片的描述性信息" title="当鼠标悬浮到图片上之后 自动展示的提示信息" # 若只指定一个宽或者高则等比缩放，若两个都指定且不考虑比例，图片则失真 height="300px" width=""
a标签
# 文本链接(超链接)
<a href=""></a>
‘‘‘
默认字体颜色为蓝色，当用户点击后字体颜色就会变成紫色(浏览器会记忆用户的操作)
‘‘‘
href="url" 用户就会跳到对应的url页面
href="#other_id" 放其他标签的id值就会跳到对应标签位置（锚点链接）
target 默认在当前页面完成跳转 _self
在新窗口打开页面 _blank
# a标签的锚点功能
<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>
列表标签
# 无序列表（常用）
<ul type="none">
<li>第一项<li>
<li>第二项<li>
</ul>
type="none"去除列表前的点
适用于多行数据的排版
# 有序列表（了解）
<ol type="1" start="5">
<li>第一项</li>
<li>第二项</li>
</ol>
start="5" 表示列表的序号从5开始
# 标题列表(了解)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
# 1 块级标签:独占一行
‘‘‘
h1~h6 p div
1) 块级标签可以修改长宽 行内标签不可以 修改了也不会变化
2) 块级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签
如果强行嵌套，也不会报错，浏览器会自动帮你解开，一般情况下浏览器不会轻易报错
即使报错，用户一般也感觉不出来
‘‘‘
总结:
块级标签可以嵌套任意的块级标签跟行内标签
p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块级标签 可以嵌套行内标签
标签：str 超文本标记语言 菜单 提示信息 补全 适用于 完成 字体颜色 code
原文地址：https://www.cnblogs.com/Tornadoes-Destroy-Parking-Lots/p/12870604.html
