Python web模版Django-01了解html,http,css,Javascript的概念

最新推荐文章于 2021-12-25 12:45:27 发布

Pansc2004

最新推荐文章于 2021-12-25 12:45:27 发布

阅读量486

点赞数

本文链接：https://blog.csdn.net/Pansc2004/article/details/80268743

版权

Django 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

作为未接触过web开发的小白，了解一下关于html,http,css,JS的概念是有必要。我拜读了廖雪峰写的几篇文章，做了下面的读书笔记：

什么是HTTP协议：

HTML：用来定义网页的文本
HTTP：用于网络上传输HTML的协议，用于浏览器和服务器之间通信

　用Chrome　Developer Tools可以方便的查看浏览器与服务器之间的通信，选择Network，并确保工具上的红点是点亮的，在浏览器中输入 www.baidu.com后，选择其中一条Name,相关的Responese, Request信息就在工具右侧展现出来。

Request Headers

GET / HTTP/1.1 : GET是读取请求　; / 是URL路径，表示首页 ;　HTTP/1.1 表示采用的HTTP协议版本是1.1

Host: www.baidu.com 　　　表示请求的服务器

Response Headers

HTTP/1.1 200 OK : 200表示成功响应，　类似的还有 3xx表示重定向 4xx表示客户端发送请求有错 5xx表示服务器端出来有错

Content-Encoding: gzip 表示用的zip压缩，减少Body的大小，加快传输

Content-Type: text/html; charset=uft-8 text/html表示是HTML网页，是响应类型　　uft-8编码方式

*************************摘自廖神的文章：

HTTP请求的步骤：

跟踪了新浪的首页，我们来总结一下HTTP请求的流程：

步骤1：浏览器首先向服务器发送HTTP请求，请求包括：

方法：GET还是POST，GET仅请求资源，POST会附带用户数据；

路径：/full/url/path；

域名：由Host头指定：Host: www.sina.com.cn

以及其他相关的Header；

如果是POST，那么请求还包括一个Body，包含用户数据。

步骤2：服务器向浏览器返回HTTP响应，响应包括：

响应代码：200表示成功，3xx表示重定向，4xx表示客户端发送的请求有错误，5xx表示服务器端处理时发生了错误；

响应类型：由Content-Type指定；

以及其他相关的Header；

通常服务器的HTTP响应会携带内容，也就是有一个Body，包含响应的内容，网页的HTML源码就在Body中。

步骤3：如果浏览器还需要继续向服务器请求其他资源，比如图片，就再次发出HTTP请求，重复步骤1、2。

Web采用的HTTP协议采用了非常简单的请求-响应模式，从而大大简化了开发。当我们编写一个页面时，我们只需要在HTTP请求中把HTML发送出去，不需要考虑如何附带图片、视频等，浏览器如果需要请求图片和视频，它会发送另一个HTTP请求，因此，一个HTTP请求只处理一个资源。

HTTP协议同时具备极强的扩展性，例如，浏览器请求的是http://www.sina.com.cn/的首页，但是新浪在HTML中可以链入其他服务器的资源，比如<img src="http://i1.sinaimg.cn/home/2013/1008/U8455P30DT20131008135420.png">，从而将请求压力分散到各个服务器上，并且，一个站点可以链接到其他站点，无数个站点互相链接起来，就形成了World Wide Web，简称WWW。

******************************

什么是CSS:

css用来控制HTML里的元素如何展现。

为什么要CSS呢？　它解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

什么是Javascript:

JavaScript是为了让HTML具有交互性而作为脚本语言添加的，JavaScript既可以内嵌到HTML中，也可以从外部链接到HTML中。

练习写一个含CSS, Javascript的HTML

Step1: 在notepad++中选择写HTML语言，然后编写如下一个HTML并保存，用浏览器打开。

<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

step2: 加入css代码，让其更漂亮点

<html>
<head>
<title>Hello</title>
<style>
h1{
color: #333333;
font-size: 48px;
text-shadow: 3px 3px 3px #666666;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

Step3: 加入对鼠标点击反馈的Javascript,点击后字体变红

<html>
<head>
<title>Hello</title>
<style>
h1{
color: #333333;
font-size: 48px;
text-shadow: 3px 3px 3px #666666;
}
</style>
<script>
function change() {
document.getElementsByTagName('h1')[0].style.color = '#ff0000';
}
</script>
</head>
<body>
<h1 οnclick="change()">Hello, world!</h1>
</body>
</html>