文章目录
Web基础与HTTP协议
前言:
-
前端:(玩的是框架)
HTML (超文本标记语言) CSS (层叠样式表) JavaScript js (动态语言交互)JSP(与Java有关,前端未必接触) JavaScriptPage
VUE(前后端分离) ECHARTS
bootstrap——简洁、直观、强悍的前端开发框架,让web开发更迅速、简单
一: Web基础
1.1: 域名的概念
- IP地址不易记忆
- 早期使用Hosts文件解析域名
主机名称重复
主机维护困难 - DNS (Domain Name System域名系统)
分布式
层次性
1.2: hosts文件
hosts文件的主要功能是配置域名和IP的映射关系的,以便于提高域名解析速度。
1.Windows中的host文件路径位置:C:\Windows\System32\drivers\etc\host
其内容如下:
# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#102.54.94.97 rhino.acme.com #source server
#38.25.63.10 x.acme.com #x client host
# localhost name resolution is handled within DNS itself.
#127.0.0.1 localhost
# ::1 localhost
127.0.0.1 activation.cloud.techsmith.com
127.0.0.1 oscount.techsmith.com
2.Linux下的hosts文件路径:一般在/etc/hosts
其内容是:
[root@localhost ~]# cat /etc/hosts
127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4
::1 localhost localhost.localdomain localhost6 localhost6.localdomain6
1.3: 域名空间结构
- 根域
- 顶级域:组织域、国家/地区域名
- 二级域名
- FQDN=主机名.DNS后缀
https://www.baidu.com/
协议://主机名.二级域名.顶级域/虚拟目录
1.4: 域名注册
- 域名注册是Internet中用于解决地址对应问题的-种方法
遵循先申请先注册原则 - 域名注册步骤
准备申请 --> 寻找域名 --> 查询域名–>正式申请–>申请成功
1.5: 网页的概念
- 网页
纯文本格式文件
编写语言为HTML
在用户的浏览器中被“翻译”成网页形式显示出来 - 网站
由一个一个页面构成的,是多个网页的结合体 - 主页
打开网站后出现的第一个网页称为网站主页 (或首页) - 域名:浏览网页时输入的网址
- HTTP:用来传输网页的通信协议
- URL:是一种万维网寻址系统HTML
- HTML:用来编写网页的超文本标记语言
- 超链接:超链接是将网站中不同网页链接起来的功能
- 发布:(千万不要用绝对路径)将制作好的网页上传到服务器供用户访问的过程
1.6: HTML 概述
- HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。
1.7: HTML基本标签
1.7.1HTML语法规则
- HTML标签采用双标记符的形式,前后标记符对应,分别表示标记开始和结束,标记符之间的内容被标签描述。前标记符由“”表示,结尾标记符多了一个“/”,由“”表示。
1.7.2HTML文件结构
- 一个HTML文件是有自己固定的结构的。其基本的HTML文件结构如下:
分别是并列的头标签和内容标签。
- HTML网页包括: 头部部分,标题部分,主题部分,网页内容(包括文本,图像)
<html>
<head> 网页的内容描述信息 </head>
<title> 我的第一个网页 </title>
<body> 网页显示的内容</body>
</html>
-
< IDOCTYPE html> <html> <head> <meta charset= "utf-8"> <title>第一个网页</title> </head> <body> <h1>云计算</h1> <h2 style="color: blue;">静夜思</h2> <h3>床前明月光</h3> <h3>疑是地_上霜</h3> </body> </html>
-
网页摘要信息的作用
有利于浏览器解析
有利于搜索引擎搜索
<title> 标签 <meta> 标签 示例: <head> <meta name="keywords" content="山东蓝翔,挖机培训"/> </head>
-
1.标题标签:双标签:
<h1>~<h6>
2.段落标签:双标签:
<p></p>
3.属性标签: 标签用于对文档中的行内元素进行组合。
<span> </span>
3.换行标签:单标签:
<br/>
4.水平线标签:单标签:
<hr/>
5.字体加粗标签:双标签:
<strong></strong>
6.斜体字标签:双标签:
<em></em>
7.图像标签:单标签:
<img/>
8.链接标签:双标签:
<a></a>
9.特殊符号:
"©>
<静夜思html> <html> <head> <meta name="学挖掘机,找山东蓝翔"> <title>第一个网页</title> </head> <body> <h1>李白</h1> <h2 style="color: blue; font-style:italic;">静夜思</h2> <p>窗前明月光</p> <p style="background: blue;">疑是地上霜</p> <span>举头望明月</span><br /> 低头思故乡<br /> <a href="demo02.html" target="_self"><img src="peiqi.jpg" width="250x" width="300px" </a> </body> </html>
-
HTML超文本标记语言
Hyper Text Markup Language
网页的“源码’’ -
浏览器: 解释和执行 HTML源码的工具
1.8: Web概述
-
Web (World Wide Web)即全球广域网,也称为万维网
一种分布式图形信息系统
建立在Internet_上的一种网络服务 -
Web1.0
以编辑为特征,网站提供给用户的内容是编辑处理后提供的,然后
用户阅读网站提供的内容。这个过程是网站到用户的单向行为
Web2.0
更注重用户的交互作用,用户既是网站内容的消费者(浏览者)也是网站内容的制造者加强了网站与用户之间的互动,网站内容基于用户提供,网站的诸多功能也由用户参与建设,实现了网站与用户双向的交流与参与 -
静态网页:
-
静态网页是标准的HTML文件
扩展名是.htm、.html
文本、图像、声音、FLASH动画、 客户端脚本和ActiveX控件及JAVA小程序等
静态网页是网站建设的基础,早期网站- -般都由静态网页制作的;没有后台数据库、不含程序和不可交互的网页
相对更新起来比较麻烦,适用于- -般更新较少的展示型网站 -
每个静态网页都有一个固定的URL,且URL以.htm、.html、 .shtml等常见形式为后缀,而不含有“?”;网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页都是保存在网站服务器.上的,也就是说,静态网页是实实在在保存在服务器.上的文件,每个网页都是一个独立的文件;静态网页的内容相对稳定,因此容易被搜索引擎检索。
-
静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难静态网页的交互性较差,在功能方面有较大的限制页面浏览速度迅速,过程无需连接数据库,开启页面速度快于动态页面。
-
-
动态网页:
- 网页URL不固定,能通过后台与用户交互
- 在动态网页网址中有一个标志性的符号一 “?’
- 常用的语言有ASP,PHP,JSP, Python等
-
动态网页特点
- 交互性
网页会根据用户的要求和选择而动态改变和响应,将浏览器
作为客户端界面,这将是今后WEB发展的大势所趋 - 自动更新
无须手动地更新HTML文档,便会自动生成新的页面,可以
大大节省工作量 - 因时因人而变
当不同的时间,不同的人访问同- -网址时会产生不同的页面
- 交互性
二: HTTP协议
2.1: HTTP协议概述
-
HTTP协议是互联网上应用最为广泛的一种网络协议,设计这个协议的目的是为了发布和接收Web服务器上的HTML页面
-
HTTP协议的版本
HTTP 0.9; HTTP 1.0; HTTP 1.1; HTTP 2.0
2.2: HTTP 方法
-
HTTP 支持几种不同的请求命令,这些命令被称为HTTP方法
-
每条HTTP请求报文都包含一个方法,告诉服务器要执行什么动作
获取一个Web页面
运行一个网关程序
删除一个文件
-
HTTP方法 描述 GET 请求获取Request-URI所标识的资源 PUT 请求服务器存储一个人资源,并用Request-URI作为其标识 DELETE 请求服务器删除Request-URI所标识的资源 POST 在Request-URI所标识的资源后附加新的数据 HEAD 请求获取有Request-URI所标识的资源的响应消息报头
2.3: HTTP协议获取Web资源的常用方法 get和post
GET方法:从指定的服务器,上获得数据
- GET请求能被缓存
- GET请求会保存在浏览器的浏览纪录里
- GET请求有长度的限制
- 主要用于获取数据
- 查询的字符串会,显示在URL中,不安全
POST方法:提交数据给指定服务器处理
- POST请求不能被缓存
- POST请求不会保存在浏览器的浏览纪录里
- POST请求没有长度长度限制
- 查询的字符串不会显示在URL中,比较安全
2.4: HTTP状态码
- 当使用浏览器访问某一个URL, 会根据请求URL返回状态码
- 通常正常的状态码为2xx,3xx (如200)
- 如果出现异常会返回4xx,5xx (如404)
其中我们需要注意的是400-415表示客户端异常问题、500-505表示服务器异常问题
状态码首位 | 已定义范围 | 分类 |
---|---|---|
1xx | 100-101 | 信息提示 |
2xx | 200-206 | 成功 |
3xx | 300-305 | 重定向 |
4xx | 400-415 | 客户端错误 |
5xx | 500-505 | 服务器错误 |
生产常见的HTTP状态码
消息 | 描述 |
---|---|
200 OK | 请求成功 (其后是对GET和POST请求的应答文档) |
301 Moved Permanently | 请求的永久页面跳转 |
403 Forbidden | 禁止访问该页面 |
404 Not Found | 服务器无法找到被请求的页面 |
500 Internal Server Error | 内部服务器错误 |
502 Bad Gateway | 无效网关 |
503 Service Unavailable | 当前服务不可用 |
504 Gateway Timeout | 网关请求超时 |
2.5: HTTP请求消息报文格式
-
HTTP请求消息报文格式包括: 请求行、请求头、请求体
1 Get /mattmarg/ HTTP/1.1请求目录 2 User-Agent: Mozilla/2.0 (Macintosh; |; PPC)浏览器标识 3 Accept: texthtml; */* 4 Cookie: name = value 5 Referer: http://www.XXX.com/a.html
2.6: HTTP 响应消息报文格式
- HTTP 响应消息报文格式包括: 状态行, 响应头, 响应体
01 HTTP/1.1 200 OK,
02 Server: Microsoft-IlS/5.1
......
06 Accept-Ranges: bytes
07 Last-Modified: Wed, 02 Jul 2008 01:01:26 GMT
08 ETag: "0f7 1527dfdbc81:ade'
09 Content-L ength: 46
10
11 <html> <head> </head> <body>adfasfa</body> </html>