前端简介
- 什么是前端？
- 软件开发架构
- 浏览器输入网址发生了几件事？
- 服务端python代码
- HTTP协议
- HTML标签
- HTML文档结构
- html文件打开方式
head内常用标签
- head内常用标签表
- title标签演示（定义网页标题）
- style标签演示（定义内部样式表）
- script （定义JS代码或引入外部JS代码）
  - 1、在sript中定义JS代码
  - 2、在sript中引用外部JS代码
- link标签（引入外部样式表文件或网站图标）
- meta标签（定义网页原信息）
  - meta标签介绍
  - 1、http_equiv 属性
  - 2、name 属性

前端简介

什么是前端？

任何直接能够跟用户打交道的交互页面都可以称之为前端

软件开发架构

c/s架构
b/s架构
本质上b/s也是c/s架构

浏览器输入网址发生了几件事？

1、输入网址
2、朝服务端发送请求
3、服务端接受请求并查询浏览器想要的数据返回给浏览器
4、浏览器拿到数据展示页面

服务端python代码

import socketserver = 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》全新资料片“怒海争锋”震撼来袭，全新赛季开幕，全端优化更流畅，鲲鹏岛携海量新玩法同步登场！吃鸡远征绝境孤岛！">

转载于:https://www.cnblogs.com/shuchengyi/articles/10941090.html

前端简介，head内标签相关推荐

【前端学习】D1：HTML简介与HTML标签
文章目录前言系列文章目录 1 HTML简介 1.1 网页 1.1.1 什么是网页? 1.1.2 什么是HTML? 1.1.3 网页的形成 1.2 常用浏览器 1.2.1 常用浏览器 1.2.2 浏 ...
week9 day1 HTML简介和常用标签
week9 day1 HTML简介和常用标签一.前端内容介绍二.HTML简介 2.1 HTML简介 2.2 HTML发展史三.HTML标签与文档结构 3.1 HTML标签与文档结构 3.2 HT ...
前端简介以及开发环境搭建
前端简介 1. 网页的特点相较于传统的图形化界面,网页具有如下一些优点: 不需要安装无需更新跨平台网页中使用的语言: HTML.CSS.JavaScript 2. 网页简史蒂姆·伯纳斯·李爵 ...
第四届字节跳动前端青训营（基础班）Day1之前端简介
Day1.前端介绍解决GUI(图形界面)人机交互问题跨终端(PC/移动浏览器.客户端/小程序.VR/AR等) Web技术栈 1.前端简介 1.1前端技术栈 HTML(页面结构和内容) CSS(样式 ...
Web前端HTML5前端简介
以下内容都是自己的记录的一些笔记,笔记的来源尚硅谷前端都是自己的一些总结,可能会有一些不准确的地方,后期会做出改正. 目录前端简介 1.软件的分类 1.1系统软件 1.2应用软件 1.3游戏软件 2 ...
从零开始学前端 - 3. HTML 常用标签_2
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
web前端简介 | 什么是前端
前端简介前端de概念前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.多数后端开发人员从事于构建工作应用程序背后的实际逻辑.前后端需要相互配合,共同完成一个项目.那到底什么是 ...
前端之HTML常用标签
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.HTML常用标签 ## 学习目标 - 理解: - ...
前端简介--HTML与CSS
一. 了解前端 1. 什么是前端前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏 ...

前端简介，head内标签

前端简介

什么是前端？

软件开发架构

浏览器输入网址发生了几件事？

服务端python代码

HTTP协议

HTML标签

HTML文档结构

html文件打开方式

head内常用标签

head内常用标签表

title标签演示（定义网页标题）

style标签演示（定义内部样式表）

script （定义JS代码或引入外部JS代码）

1、在sript中定义JS代码

2、在sript中引用外部JS代码

link标签（引入外部样式表文件或网站图标）

meta标签（定义网页原信息）

meta标签介绍

1、http_equiv 属性

2、name 属性

前端简介，head内标签相关推荐

最新文章

热门文章

前端简介，head内标签

前端简介

什么是前端？

软件开发架构

浏览器输入网址发生了几件事？

服务端python代码

HTTP协议

HTML标签

HTML文档结构

html文件打开方式

head内常用标签

head内常用标签表

title标签演示 （定义网页标题）

style标签演示 （定义内部样式表）

script （定义JS代码或引入外部JS代码）

1、在sript中定义JS代码

2、在sript中引用外部JS代码

link标签 （引入外部样式表文件或网站图标）

meta标签 （定义网页原信息）

meta标签介绍

1、http_equiv 属性

2、name 属性

前端简介，head内标签相关推荐

最新文章

热门文章

title标签演示（定义网页标题）

style标签演示（定义内部样式表）

link标签（引入外部样式表文件或网站图标）

meta标签（定义网页原信息）