前端简介，head内标签
目录
前端简介
什么是前端？
任何直接能够跟用户打交道的交互页面都可以称之为前端
软件开发架构
c/s架构
b/s架构
本质上b/s也是c/s架构
浏览器输入网址发生了几件事？
1、输入网址
2、朝服务端发送请求
3、服务端接受请求并查询浏览器想要的数据返回给浏览器
4、浏览器拿到数据展示页面
服务端python代码
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024) # 拿到请求信息
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') # 与浏览器的通讯，要遵循HTTP协议去发送请求数据，浏览器也会按这种协议惊醒解析；200是显示状态码
conn.send(b'hello world')
conn.close()
HTTP协议
超文本传输协议
客户端|服务端 在数据交互的时候都必须遵循这套协议
b'HTTP/1.1 200 OK /r/n/r/n'
文件的后缀名并不是给计算机看的，而是给用户看的
HTML标签
超文本标记语言
对文本进行标记，从而标识文本的 类型|作用
服务端
客户端
文件(html页面)
HTML文档结构
<!DOCTYPE html>
<html lang="en">
<!--一个html文档分为 head（头部） 和 body（身体部）-->
<head>
<meta charset='utf-8'>
<title>这是定义网页标题的</title>
<!--head存放的内容用户是看不到的， 主要是给浏览器和搜索引擎看的-->
</head>
<body>
<!--用户能看见的都在body中-->
</body>
<!--这是单行注释-->
<!--这
是
多
行
注
释-->
</html>
html文件打开方式
方式1：找到改文件选择浏览器打开
方式2：pycharm内自动打开
head内常用标签
head内常用标签表
| 标签 | 意义 |
|---|---|
| 定义网页标题 | |
| 定义内部样式表 | |
| 定义JS代码或引入外部JS文件 | |
| 引入外部样式表文件或网站图标 | |
| 定义网页原信息 |
title标签演示 （定义网页标题）
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>输诚</title> <!--这是用来定义网页标题的-->
</head>
<body>
</body>
</html>
style标签演示 （定义内部样式表）
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!--将h1的字体颜色换为绿色(green)-->
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>
<!--创建h1类型字段，内容为 你是无意穿堂风，偏偏孤踞引山洪 -->
你是无意穿堂风，偏偏孤踞引山洪
</h1>
</body>
</html>
script （定义JS代码或引入外部JS代码）
1、在sript中定义JS代码
<!--定义JS代码-->
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>输诚</title>
<script>
alert('hello world')
</script>
<style>
h1 {
color:red;
}
</style>
</head>
<body>
<h1>
你是无意穿堂风，偏偏孤踞引山洪
</h1>
</body>
</html>
2、在sript中引用外部JS代码
<!--外部JS文件-->
<!--外部JS文件名： 1 11myjs.js -->
<!--外部JS文件中的JS代码-->
alert('hello world')
<!--引入外部JS代码-->
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='UTF_8'>
<title>输诚</title>
<scirpt src='1%2011myjs.js'></scirpt> <!--文件名的空格部分会自动用%20补全-->
</head>
<body>
</body>
</html>
link标签 （引入外部样式表文件或网站图标）
<!--外部样式表(css)-->
<!--外部样式表(css)名： mycss.css -->
<!--外部样式表(css)文件中的css代码-->
h1 {
color:pink
}
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='UTF_8'>
<title>输诚</title>
<link rel="stylesheet" href='mycss.css'>
</head>
<body>
<h1>
你是无意穿堂风，偏偏孤踞引山洪
</h1>
</body>
</html>
meta标签 （定义网页原信息）
meta标签介绍
1、<meta>元素可提供有关页面的原信息(meta_information),针对搜索引擎和更新频度的描述和关键词
2、<meta>标签位于文件的头部，不包含任何内容
3、<meta>提供的信息用户是不可见的
<meta>标签的组成：meta共有两个属性， http_equiv | name , 不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能
1、http_equiv 属性
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确的显示网页的内容，预支对应的属性值为content，content中的内容其实就是各个参数的变量值
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset="UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2、name 属性
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="新剑网3,剑侠情缘3,剑网3,剑侠3,剑3,攻略,纯武侠网游,经脉加点,资料库,新手指南,天策,万花,七秀,纯阳,少林,藏剑,五毒,游戏心得,下载,客户端,更新包,官网,剑网3官网,金山">
<!--百度搜索显示的简介就是Description的content中的参数值
<meta name="Description" content="《剑网3》全新资料片“怒海争锋”震撼来袭，全新赛季开幕，全端优化更流畅，鲲鹏岛携海量新玩法同步登场！吃鸡远征绝境孤岛！">
