前端基础之html ⼀、什么是 web 应⽤程序？
B/S 架构，⽤户必须通过具体的浏览器客户端来访问服务器，从⽽获得具体内容浏览器 和 服务器 实现交互通信，必须遵守 http 协议机制
⼆、HTTP协议浅谈
超⽂本传输协议，⽤来规定服务端和浏览器之间的数据交互的格式
2.1 四⼤特性
基于请求响应
基于TCP/IP作⽤于应⽤层之上的协议
⽆状态
不保存⽤户的信息
⼀个⼈来了⼀千次，也不会记住，每次都待他如初见
由于HTTP协议是⽆状态的，所以后续出现了⼀些专门⽤来记录⽤户状态的技术cookie、seesion、token…
⽆/短链接
请求来⼀次，我响应⼀次，之后我们两个就没有任何链接和关系了
长链接：双⽅建⽴之后默认不断开 websocket
2.2 请求数据格式
请求⾸⾏（标识HTTP协议版本，当前请求⽅式）
请求头（⼀⼤堆 k,v 键值对）
（这⾥是 \r\n ，并且不能省略）
请求体（并不是所有的请求⽅式都有get没有post，存放的是post请求提交的敏感数据）
常⽤的请求⽅式：get 、post
发卡网源码哪个好
# 请求⽅式
1、get 请求
朝服务端要数据
eg：输⼊⽹址获取对应的内容
2、post 请求
朝服务端提交数据
eg:⽤户登录，输⼊⽤户名和密码之后，提交到后端做⾝份校验
b'GET /favicon.ico HTTP/1.1\r\n    请求⾸⾏
Host:127.0.0.1:8899\r\n            请求头
Connection: keep-alive\r\n
User-Agent: Mozilla/5.0(Windows NT 10.0; Win64; x64) AppleWebKit/537.36(KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36\r\n Accept: image/webp,image/apng,image/*,*/*;q=0.8\r\n
浏览器应用程序中的服务器错误怎么解决Sec-Fetch-Site: same-origin\r\n
Sec-Fetch-Mode: no-cors\r\n
Sec-Fetch-Dest: image\r\n
Referer: 127.0.0.1:8899/?username=yuan&password=&hobby=basketball&gender=male&province=tianjin\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n'
请求体
2.3 响应数据格式
响应⾸⾏（标识HTTP协议版本，响应状态码）
请求头（⼀⼤堆 k,v 键值对）十大高蛋白食物排行榜
（这⾥是 \r\n ，并且不能省略）
请求体（返回给浏览器展⽰给⽤户看的数据）
响应状态码：
⽤⼀串简单的数字来表⽰⼀些复杂的状态或者描述性信息
1XX：服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX：服务端成功响应了你想要的数据（200 请求成功）
3XX：重定向（301永久重定向、302临时重定向，例如访问⼀个需要登录之后才能看的页⾯，则会⾃动跳转到登录页⾯）
4XX：请求错误
403：当前请求不合法或者不符合访问资源的条件（权限、配置等）
404：请求资源不存在
5XX：服务器内部错误
500：服务端代码内部错误
502：服务器挂了
2.4 url 是个啥？
统⼀资源定位符（⼤⽩话：⽹址）
什么是URL？
URL是统⼀资源定位器(Uniform Resource Locator)的缩写，也被称为⽹页地址，是因特⽹上标准的资源的地址。
URL举例
www.sohu/stu/intro.html
222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页⾯在站点中的⽬录：stu
微擎商城
第4部分：为页⾯名称，例如 index.html
各部分之间⽤“/”符号隔开。
三、HTML
3.1 html是什么？
浏览器看到的页⾯，本质上都是html代码数据
超⽂本标记语⾔（Hypertext Markup Language，HTML）通过标签语⾔来标记要显⽰的⽹页中的各个部分。⼀套规则，浏览器认识的规则
浏览器按顺序渲染⽹页⽂件，然后根据标记符解释和显⽰内容。但需要注意的是，对于不同的浏览器，对同⼀标签可能会有不完全相同的解释（兼容性）
静态⽹页⽂件扩展名：.html 或 .htm
3.2 html不是什么？
HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔ (markup language)
HTML 使⽤标记标签来描述⽹页
3.3 html 代码注释
3.3.1 注释
单/多⾏注释
注释： 注释是代码之母
<!--单⾏注释-->
<!--
多⾏注释1
多⾏注释2
多⾏注释3
-
->
划分区域
由于HTML代码⾮常的杂乱⽆章并且很多，所以我们习惯的⽤注释来划分区域⽅便后续的查
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->
3.3.2 快捷键(pycharm)注释
- 单⾏注释 ctrl + /
-
单⾏注释取消  ctrl + /
html个人网页完整代码顺序-  多⾏注释  ctrl + ？
<!--<div>
舞蹈视频教学ds
</div>-->
- ⽂本内容的旁边添加注释内容  ctrl + shift + /
3.3.3 快捷键(pycharm)补齐
html 快捷键补齐（ tab 键）
html  快捷键补齐（ tab 键）  a  --tab--> <a></a>
确认是否已经安装Emmet插件，进⼊设置窗⼝之后，
到“Editor”（编辑），然后在编辑选项下⾯到“Emmet”，
进⼊“Emmet”窗⼝之后，点击“Emmet”的下⽅箭头，
将“emmet”选项⾥⾯包含的⼩选项展⽰出来，并到“HTML”，
勾选“Enble addreviation preview”，勾选之后，点击OK，然后关闭该窗⼝
3.4 html ⽂档结构
<html>
<head></head>: head内的标签不是给⽤户看的，⽽是定义⼀些配置主要是给浏览器看的，例如编码格式
<body></body>：body内的标签，写啥渲染啥，⽤户就能看到啥
</html>
PS：⽂件的后缀名其实是给⽤户看的，⽤于区分各类⽂件，只不过对应不同的⽂件后缀名有不同的软件来处理并添加很多功能
<!DOCTYPE html>声明html
<html lang="en">声明语⾔
<head>
<meta charset="UTF-8">声明编码
<title>Title</title>⽹页标题
</head>
<body>
</body>
</html>
- <!DOCTYPE html>告诉浏览器使⽤什么样的html或者xhtml来解析html⽂档
- <html></html>是⽂档的开始标记和结束标记。此元素告诉浏览器其⾃⾝是⼀个 HTML ⽂档，在它们之间是⽂档的头部<head>和主体<body>。
- <head></head>元素出现在⽂档的开头部分。<head>与- - </head>之间的内容不会在浏览器的⽂档窗⼝显⽰，但是其间的元素有特殊重要的意义。
- <title></title>定义⽹页标题，在浏览器标题栏显⽰。
- <body></body>之间的⽂本是可见的⽹页主体内容
3.5 html 标签格式
html 标签是由尖括号包围的关键词，⽐如 <html>
html 标签通常是成对出现的（双标记），⽐如 <div> 和 </div>
标签不区分⼤⼩写：开始标签<a>和结束标签<a>两个标签之间的部分，我们称之为标签体。有些标签功能⽐较简单，使⽤⼀个标签即可，这种称之为 ⾃闭合标签，例如：<br/>、<hr/>、<input/>、<img/>
3.6 标签的分类
闭合标签，双标签 （闭合标签，有头有尾的）
⾃闭合标签，单标签（⾃闭合标签）
<h1></h1>
<a href="www.baidu"></a>
<img/>
3.7 标签的语法：
闭合标签
<；标签名 属性1=“属性值1” 属性2=“属性值2” …>内容部分</标签名>
⾃闭合标签
<；标签名 属性1=“”属性值1” 属性2=“属性值2” … />
四、常⽤标签
4.1 <!DOCTYPE>标签
<!DOCTYPE> 声明位于⽂档中的最前⾯的位置，处于 <html> 标签之前。此标签可告知浏览器⽂档使⽤哪种 HTML 或 XHTML 规范。
作⽤：声明⽂档的解析类型(documentpatMode)，避免浏览器的怪异模式。
documentpatMode：
BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染页⾯。
CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染页⾯。
这个属性会被浏览器识别并使⽤，但是如果你的页⾯没有DOCTYPE的声明，那么compatMode默认就是BackCompat
4.2 <head>内常⽤标签
4.2.1 <meta>标签
<meta>元素可提供有关页⾯的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于⽂档的头部，不包含任何内容。
<meta>提供的信息是⽤户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性⼜有不同的参数值，这些不同的参数值就实现了不同的⽹页功能。
name属性: 主要⽤于描述⽹页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器⼈查信息和分类信息⽤的。 关键词搜索、⽹页描述语。
<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">
<meta name="description"content="前端基础html详解">
http-equiv属性：相当于http的⽂件头作⽤，它可以向浏览器传回⼀些有⽤的信息，以帮助正确地显⽰⽹页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh"content="2;URL=www.oldboy"> //(注意后⾯的引号，分别在秒数的前⾯和⽹址的后⾯)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
4.2.2 ⾮meta标签
<title>redhat</title>
<link rel="icon"href="www.jd/favicon.ico">
<link rel="stylesheet"href="css.css">
<script src="hello.js"></script>
4.3 <body>内常⽤标签
4.3.1 基本标签（块级标签和内联标签）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。