目录
前端需要学习的知识
1.html:
html(HTML):是一种标记语言，用于创建网页的结构和内容。它定义了网页上的元素，如标题、段落、图像、链接等。
2.css(CSS)：
用于控制网页的外观和样式。它允许自定义字体、颜色、间距、布局等方面的规则
3.js(JS):
是一种用于网页交互和动态内容的编程语言。它能够让你为网页添加交互性，响应用户的行为，操作DOM(文档对象模型)元素，发送网络请求，以及执行各种功能。JS是前端开发中的核心语言。
4.jq(jQuery):是一个广泛使用的JavaScript库，它简化了JavaScript编程，提供了易于使用的方法和函数，以简化常见任务，如DOM操作、事件处理、动画等。
这四个知识点可以这么理解
假设一个界面是一个人
html就是它的骨架
css就是它的衣服和肉
js和jq就是它的灵魂以及动作
生成的网页类型
静态网页
静态网页就是指网页内容不会改变，就是静止的状态除非修改html。
动态网页
动态网页就是指后端的数据发生变化然后前端的显示也会变化的网页就是动态网页。
比如：轮播图
网页的架构
c/s架构
客户端、服务端
b/s架构
浏览器、服务端
浏览器的特别用法
第一种结合python来使用
首先在python定义一个客户端（需要有报头，报头以后说）
import socket
sk = socket.socket()
sk.bind(('172.17.43.223', 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(1024)
#需要有报头
conn.send(b"HTTP/1.1. 200 ok\r\n\r\n")#这就是一种报头
conn.send(b'666666')
conn.close()
然后在浏览器输入IP以及端口号就能查看了
结果如图
第二种将文件拖入浏览器里面(这就符合渲染了)
结果图
重点HTML
html超文本标记语言是一种用于创建网页的标记语言
这里可以将文件的后缀名改为html和htm来实现功能
这里推荐使用html就好了，至于htm是因为以前的电脑不支持后缀名为4位的文件。
HTML有一个标准的格式具体如图
首先!DOCTYPE html
<!DOCTYPE html><!--这个是告诉浏览器应该用什么版本的html去解析这些文件 -->
这一般情况是必须要有的，因为这是告诉浏览器应该用什么版本的html去解析下面的文件
其次就是html到/html
<html lang="en">
</html>
从html到/html这里面的所有内容才是真正的html的核心
然后html lang = "en"是声明html核心内容使用的是什么语言，就比如这里的en是英语的意思
还有就是head到/head的内部
<head><!--第一meta charset="UTF-8"这里是选择html的解码格式-->
<meta charset="UTF-8">
<title>Title</title>
</head>
第一个： meta charset="UTF-8"这里就是html选择解码的格式，也可以换成其它的解码形式，但是建议用UTF-8
第二个title到/title里面的内容就是网站页面的标题或网页名，下面提供一个格式以及图
<!DOCTYPE html><!--这个是告诉浏览器应该用什么版本的html去解析这些文件 -->
<html lang="en"><!--这里的<html>到</html>里面的所有内容才是真正的html的核心,同时这里的lang="en"是声明下面的文档主要语言是什么-->
<head><!--第一meta charset="UTF-8"这里是选择html的解码格式-->
<meta charset="UTF-8">
<title>v我50网站</title><!--这里设置网页名-->
</head>
<body>
<!--<h1>friend</h1>-->
</body>
</html>
最后就是body到/body
<body>
</body>
这里面才是真正要给用户看的东西，同时有一点要注意如果你想给客户看的内容不在这里面，浏览器会默认生成这样的格式将内容放进去
如图
这个图就说明了真正的内容就在body和/body里面
总结
1.html的注释格式
<!--这里就是注释的格式-->
2.< html >内容< /html >其实也可以称为双标签
3.< br/ >单标签
其它的标签以及用法
样式标签style
一般与css连用
格式：
<style type="text/css">
/* CSS 样式规则 */
</style>
样式标签就是可以在里面添加css的方法或css
这里将内容内添加颜色
具体代码如下
<!--这里使用样式格式也就是css里面其中的一个方法-->
<!DOCTYPE html><!--这个是告诉浏览器应该用什么版本的html去解析这些文件 -->
<html lang="en"><!--这里的<html>到</html>里面的所有内容才是真正的html的核心,同时这里的lang="en"是声明下面的文档主要语言是什么-->
<head><!--第一meta charset="UTF-8"这里是选择html的解码格式-->
<meta charset="UTF-8">
<title>5555</title><!--这里设置网页名-->
<style>
div{
background-color: aquamarine;
}
</style> <!--这里设置网页内容的颜色-->
</head>
<body>
<!--div里面是要被设置颜色的内容-->
<div>
666
</div>
</body>
</html>
结果如下
然后这个方法的用法是将需要设置颜色的标签名放进入然后选择颜色，这里提供一下代码
<!--这里使用样式格式也就是css里面其中的一个方法-->
<!DOCTYPE html><!--这个是告诉浏览器应该用什么版本的html去解析这些文件 -->
<html lang="en"><!--这里的<html>到</html>里面的所有内容才是真正的html的核心,同时这里的lang="en"是声明下面的文档主要语言是什么-->
<head><!--第一meta charset="UTF-8"这里是选择html的解码格式-->
<meta charset="UTF-8">
<title>5555</title><!--这里设置网页名-->
<style>
div{
background-color: mediumturquoise;
}
h1{
background-color: blueviolet;
}
h{
background-color: darkorange;
}
</style> <!--这里设置网页内容的颜色-->
</head>
<body>
<!--这是第一句话的内容-->
<h1>
我们把世界看错，反说它欺骗了我们。
</h1>
<!--这是第二句话的内容-->
<div>
明明就是喜欢，失去了才痛心，你在胆怯什么啊喂？
</div>
<!--这是第三句话的内容-->
<h>
好一似今朝沦落人，且回首往昔荣华日。
</h>
</body>
</html>
然后结果图如下
这里我多加了< h1>和< h>这两个用于添加内容的格式
然后我将h1这个名字放到style里面设置颜色，h也是一样
总结style主要是实现css在html的添加
嵌入客户端脚本的标签script
此标签可以实现在html文档里面实现js的代码
格式如下
<script>
// JavaScript 代码放在这里
</script>
然后这里我使用这个标签：让我在访问网页时会有弹窗提示
代码如下
<!--这里是使用script标签来实现js代码在html文档中被实现-->
<!DOCTYPE html><!--这个是告诉浏览器应该用什么版本的html去解析这些文件 -->
<html lang="en"><!--这里的<html>到</html>里面的所有内容才是真正的html的核心,同时这里的lang="en"是声明下面的文档主要语言是什么-->
<head><!--第一meta charset="UTF-8"这里是选择html的解码格式-->
<meta charset="UTF-8">
<title>空网页</title><!--这里设置网页名-->
<script>
alert('欢迎查看空的网页')/*这里是用js的方式给网页添加弹窗提示*/
</script>
</head>
<body>
</body>
</html>
这里注意一下就是像这些设置样式的标签都要在head这标签里面，这个标签就是用来设置网页的。
在script这个标签里面用js的形式alert来设置弹窗提示
结果如下
还有一种导入js文件来执行
这里把修改的格式展现出来
<script src="js文件">
</script>
就是在script后面多加一个src然后在给src这个导入文件
现在我把弹窗提示写到js文件里面
alert('你在看什么啊，退出吧')
然后现在html文件的代码如下
<!--这里使用script标签高级用法-->
<!DOCTYPE html><!--这个是告诉浏览器应该用什么版本的html去解析这些文件 -->
<html lang="en"><!--这里的<html>到</html>里面的所有内容才是真正的html的核心,同时这里的lang="en"是声明下面的文档主要语言是什么-->
<head><!--第一meta charset="UTF-8"这里是选择html的解码格式-->
<meta charset="UTF-8">
<title>空网页</title><!--这里设置网页名-->
<script src='t.js'>/*这里将js文件导入*/
</script>
</head>
<body>
</body>
</html>
结果如图
link标签
此标签用于引入外部样式表文件或网站图标，同时这个标签是 自闭合标签
这里使用标签< link>来引入css文件
格式如下
<link rel="stylesheet" type="text/css" href="styles.css">
rel属性指定了链接的关系，通常用于样式表时设置为"stylesheet"。type属性定义了链接的资源类型，通常用于样式表时设置为"text/css"。href属性包含了外部资源的 URL，这里通常是样式表文件的路径。
第一个属性rel是关系的意思:指定当前文档和链接资源之间的关系。常见的值包括:
stylesheet：用于引入外部 CSS 样式表。icon：用于引入网站图标。alternate：表示备用版本的文档。prefetch：用于预加载资源。
第二个属性href(链接位置):指定要引入的外部资源的URL地址。这个属性是必需的。
第三个属性type(类型):指定被链接资源的类型，对于css文件，通常使用text/css
具体代码
html的代码
<!--这里使用link/标签-->
<!DOCTYPE html><!--这个是告诉浏览器应该用什么版本的html去解析这些文件 -->
<html lang="en"><!--这里的<html>到</html>里面的所有内容才是真正的html的核心,同时这里的lang="en"是声明下面的文档主要语言是什么-->
<head><!--第一meta charset="UTF-8"这里是选择html的解码格式-->
<meta charset="UTF-8">
<title>空网页</title><!--这里设置网页名-->
<link rel = "stylesheet" type="text/css" href="1.css">
<!--上面的type的格式选择按照上面的就好了-->
</head>
<body>
<h>
欢迎查看空网页
</h>
</body>
</html>
然后是css文件的代码
h{
background-color: blue;
}
这里使用设置颜色的方法来测试
结果如图
meta标签
meta标签是html中用于设置元数据的标签，他通常位于HTML文档的head部分，用于提供网页的信息，如字符串、关键字、作者信息、视口设置等。
格式
<meta name='元标记' content='元标记的具体内容'>
name通常用来指定元标记的名称，而content属性则指定了元标记的内容。
常见的用法如下：
1.字符编码设置(重点):
<meta charset="UTF-8">
2.视口设置:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
这个视口设置用于移动设备网页的视口，以确保在不同屏幕尺寸上正确呈现。
name 属性的值是 "viewport"，这告诉浏览器这个 <meta> 标签是用来配置视口设置的。
而 content 属性的值是配置视口设置的具体参数。
width：指定视口的宽度。常见的值包括像素（width=320）或特殊值，如 device-width（表示设备的宽度）。
initial-scale：指定网页初始缩放级别，通常设置为 1.0。这是因为大多数网页在初始加载时应该以实际大小显示。
maximum-scale 和 minimum-scale：指定用户是否可以放大或缩小页面。通常，它们被设置为相同的值，以防止用户调整缩放级别。
user-scalable：指定用户是否可以手动缩放页面。如果将其设置为 no，则用户将无法手动缩放页面。
3.描述网页内容:
<meta name="description" content="这是一个网页的描述">
这个标签通常用于提供网页的简短描述，有助于搜索引擎了解网页内容(目前了解就够了)。
4.关键字
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
用于指定网页的关键字，以帮助搜索引擎更好地索引页面，用户看不见
5.作者
<meta name="author" content="作者的名字">
这个标签用于指定网页的作者信息，但是网页不会显示，但可以被搜索引擎等工具用来识别和处理网页内容
6.跳转到对应的网站，注意引导
<meta http-equiv="refresh" content="2;https://www.baidu.com/index.htm">
上面的标签用于在指定的时间内跳转到指定的网页，content里面的2是时间(如果没有指定时间就不会跳转)，后面的指定网站(这个代码里面的网站地址是百度)
7.告诉IE以最高级模式渲染文档（了解）
<meta http-equiv="x-ua-compatible" content="IE=edge">
这个了解就行了，目前作用不大
上面的3、4、5是用于告诉搜索引擎一些数据的用法，1、2、6比较重要，7的作用不大了解就好了。
同时3、4这两个的用法是用于被人搜索的时候搜索引擎能使其排在前面(目前了解就可以了)，这个与seo有关系。
div标签
基本格式:
<div>
<!-- 这里是包裹在<div>标签内的内容 -->
</div>
自定义情况的格式
<div id="属性值" class="属性值" 属性名="属性值">内容</div>
1.id：这个属性用于给div元素指定一个唯一的标识符，以便在css和JavaScript中引用。
<div id="属性名">内容</div>
2.class：用于指定一个或多个类名，用于为div元素定义样式。多个类名可以以空格分隔。
<div class="属性值">内容</div>
3.自定义属性：添加自定义属性来存储任意数据。这些属性的名称以data开头，后面跟着自定义的属性名。
<div data-自定义的属性名称r="属性值">内容</div>