[Node.js] 07 - Html and Http

时间  2019-11-07
标签 node.js node html http 栏目 Node.js 繁體版
原文   原文链接

前言

 

1、本来的计划

　　到此，有必要复习下http章节php

下一篇可考虑下netty与nodejs的对比。css

 

2、HTTP中的 URL、GET/POST 参数

路由须要，故从HTTP中提取出请求的 URL 以及 GET/POST 参数。html

这一功能应当属于路由仍是服务器（甚至做为一个模块自身的功能）确实值得探讨，但这里暂定其为咱们的HTTP服务器的功能。node

咱们须要的全部数据都会包含在 request 对象中，该对象做为 onRequest() 回调函数的第一个参数传递。可是为了解析这些数据，咱们须要额外的 Node.JS 模块，它们分别是 url 和 querystring 模块。web

var http = require("http");
var url  = require("url");
 
function start() {
  function onRequest(request, response) {

    var pathname = url.parse(request.url).pathname;
    console.log("Request for " + pathname + " received.");
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("Hello World");
    response.end();

  }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

 

 

HTTP: 协议数据库

HTML: 协议载体 express

 

 

 

HTML

Ref: HTML 教程- (HTML5 标准)编程

 

1、仨个在线工具连接

  • HTML 实例

在 HTML 手册中包含了数百个在线实例，您能够在线编辑并查看运行结果。api

查看 HTML 实例！浏览器

  • HTML 参考手册

在菜鸟教程中，咱们提供了完整的 HTML 参考手册，其中包括标签、属性、颜色、实体等等。

HTML 标签参考手册

  • HTML/CSS/JS 在线工具

HTML/CSS/JS 在线工具能够在线编辑 HTML、CSS、JS 代码，并实时查看效果：

https://c.runoob.com/front-end/61

 

两个疑点：

<!DOCTYPE html> 声明为 HTML5 文档

<head> 元素包含了文档的元（meta）数据　　　// ---->　如下都是head惹的祸！

 

 

2、head 和 meta

Ref: html之文档的头部和元数据定义(上)

元数据(meta data)——“data about data” 关于数据的数据，通常是结构化数据（如存储在数据库里的数据，规定了字段的长度、类型等）。
元数据是指从信息资源中抽取出来的用于说明其特征、内容的结构化的数据(如题名,版本、出版数据、相关说明,包括检索点等)，用于组织、描述、检索、保存、管理信息和知识资源。

  • 标签- 使用
<head>  
　　<meta name="Author"      content="dreamzuora" lang="US-en" dir="LTR">  
　　<meta name="keywords"    content="HTML, CSS, XML, XHTML, JavaScript">
　　<meta name="description" content="免费 Web & 编程 教程">
　　<meta name="author"      content="Runoob">
</head>

 

  • meta中定义字符格式，确保支持中文。 
<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>页面标题</title>
　　</head>
　　<body>
　　　　<h1>个人第一个标题</h1>
　　　　<p>个人第一个段落。</p>
　　</body>
</html>

 

  • 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

 

  • 连接网页和样式表
-----------------------------------------------------------------
页面连接标签的默认连接地址
<head>
　　<base href="http://www.runoob.com/images/" target="_blank">
</head>

-----------------------------------------------------------------
样式标签link: 一个文档和外部资源之间的关系
<head>
　　<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

-----------------------------------------------------------------
样式标签style: HTML文档的样式文件
<head>
　　<style type="text/css">
　　　　body {background-color:yellow}
　　　　p {color:blue}
　　</style>
</head>

 

  • 嵌入样式

直接在html标签元素内嵌入css样式 

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
　　<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
　　<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
　　　　<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
　　　　<h3>Look! Styles and colors</h3>
　　　　<div style="letter-spacing:12px;">Manipulate Text</div>
　　　　<div style="color:#40B3DF;">Colors
　　　　　　<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
　　　　</div>
　　　　<div style="color:#000000;">and more...</div>
　　</div>
</body>
</html>

效果图：

 

  • 内部样式表

添加到 <head> 部分的样式信息，对 HTML 进行格式化。

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title>

　　// Jeff: 在<head> 部分经过 <style>标签订义内部样式表:
　　<style type="text/css">
　　　　h1 {color:red;}
　　　　p {color:blue;}
　　</style>
</head>

<body>
　　<h1>这是一个标题</h1>
　　<p>这是一个段落。</p>
</body>

</html>

 

  • 外部样式表

使用外部样式文件格式化文本。

使用外部样式表，你就能够经过更改一个文件来改变整个站点的外观。

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 
　　<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
　　<h1>我使用了外部样式文件来格式化文本 </h1>
　　<p>我也是!</p>
</body>

</html>

 

  • 倾向于style替代传统老旧方法

如今一般使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。 

<h1 style="font-family:verdana;">一个标题</h1>
<p  style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

 文本对齐属性 text-align取代了旧标签 <center> 。

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

 

 

图像，表格，列表，区块，颜色　参见原连接：http://www.runoob.com/html

布局的话，有必要在此停留片刻。

 

效果图

 

  • HTML 布局 - 使用<div> 元素
<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

　　<div id="container" style="width:500px">

　　　　<div id="header" style="background-color:#FFA500;">
　　　　<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

　　　　<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
　　　　　　<b>菜单</b><br>
　　　　　　HTML<br>
　　　　　　CSS<br>
　　　　JavaScript</div>

　　　　<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
　　　　内容在这里</div>

　　　　<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
　　　　版权 © runoob.com</div>

　　</div>
 
</body>
</html>

 

  • HTML 布局 - 使用表格
<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
　　<table width="500" border="0">
　　　　<tr>
　　　　　　<td colspan="2" style="background-color:#FFA500;">
　　　　　　　　<h1>主要的网页标题</h1>
　　　　　　</td>
　　　　</tr>
 
　　　　<tr>
　　　　　　<td style="background-color:#FFD700;width:100px;">
　　　　　　　　<b>菜单</b><br>
　　　　　　　　HTML<br>
　　　　　　　　CSS<br>
　　　　　　　　JavaScript
　　　　　　</td>
　　　　　　<td style="background-color:#eeeeee;height:200px;width:400px;">
　　　　　　内容在这里</td>
　　　　</tr>
 
　　　　<tr>
　　　　　　<td colspan="2" style="background-color:#FFA500;text-align:center;">
　　　　　　版权 © runoob.com</td>
　　　　</tr>
　　</table>
 
</body>
</html>

 

  • HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，若是把 CSS 代码存放到外部样式表中，那么站点会更易于维护。经过编辑单一的文件，就能够改变全部页面的布局。

Tip: 因为建立高级的布局很是耗时，使用模板是一个快速的选项。经过搜索引擎能够找到不少免费的网站模板（您可使用这些预先构建好的网站布局，并优化它们）。

 

  • HTML 框架

在同一个浏览器窗口中显示不止一个页面。 

 示例：点击后小窗口填充页面完整信息，并展现。

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

　　<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
　　<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>　　　　// <---- click here, fill with iframe_a.

　　<p><b>注意：</b> 由于 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，因此在点击连接时页面会显示在 iframe框架中。</p>

</body>
</html>

效果图：

 

 

3、Form 表单提交

  • 用户交互
  1. HTML 表单和输入
  2. HTML 脚本 

 

  • 传统的 button
<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>
　　<button　type="button" onclick="alert('你好，世界!')">点我!</button>
</body>
</html>

 

  • 表单的 button

点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

　　<form action="demo-form.php">
　　　　First name: <input type="text" name="FirstName" value="Mickey"><br>
　　　　Last name:  <input type="text" name="LastName" value="Mouse"><br>
　　<input type="submit" value="提交">
　　</form>

　　<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

效果图：

 

 

4、HTML 脚本

JavaScript 使 HTML 页面具备更强的动态和交互性。

  • <noscript>

<noscript> 标签提供没法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中可以找到的全部元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script>
document.write("Hello World!")
</script>

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
  • <script>

点击按钮，触发时间，改变label属性。

<p id="demo">
JavaScript 能够触发事件，就像按钮点击。</p>

<script>
　　function myFunction()
　　{
　　    document.getElementById("demo").innerHTML="Hello JavaScript!";
　　    x=document.getElementById("demo") // 找到元素
　　    x.style.color="#ff00ff"; // 改变样式
　　}
</script>

<button type="button" onclick="myFunction()">点我</button>

 

 

5、Dom 操做

  • 查看API
document.getElementById(...)

document.getElementsByTagName(...)

document.querySelectorAll(...)

document.querySelector(...)

示范： 

 

 

pageTitle.parentNode

pageTitle.previousElementSibling

pageTitle.nextElementSibling

pageTitle.nextElementSibling.innerText

/* 子节点 */
var artistList = document.querySelector(...)
artistList.childNodes
artistList.childElementCount
artistList.firstElementChild
artistList.childNodes

 

  • 建立并插入
var newMember     = document.createElement('li')
var newMemberText = document.createTextNode('张三');
newMember.appendChild(newMemberText)

效果：多出一个‘张三’。

 

  • 自定义插入位置
// 自定义插入位置
document.querySelector('.artist-list').removeChild(newMember);
artistList.insertBefore(newMember, artistList.firstChild)


var bandMember = document.createElement('h3');
bandMember.innerText = '乐队成员'
artistList.parentNode.insertBefore(bandMember, artistList.previousSibling);

效果图： 

 

  • 事件  

程序代码 和 html代码应该分离开：也就是把onclick单独写在script.js中。

window.onload(...)：保证当文档内容彻底加载完成会触发该事件。

点击按钮，触发函数：

window.onload = function () {
　　var btn = document.querySelector('.btn');

　　function showMessage(event) {
　　　　console.log(event);
　　}
　　btn.addEventListener('click', showMessage, false);

  

  • 事件的传播 

事件的传播是向上的（冒泡的方式），直到找到onclick事件。

　　凡是事件，都会触发，触发的顺序（事件的捕获方式）与第三个参数有关。

　　- false: 由下向上 

　　- true: 由上到下

event.stopPropagation();

潜规则：存在一些默认的行为，好比点击连接就会自动打开连接所指网页。

 

 

 

Goto: HTML 速查列表

你已经完成了 HTML 的学习，下一步该学习什么呢？

HTTP：http://www.runoob.com/http/http-tutorial.html

 

 

 

HTTP

1、HTTP 工做原理

  • 基础概念

[1] 基本过程

1). Web服务器根据接收到的请求后，

2). 向客户端发送响应信息。

HTTP默认端口号为80，可是你也能够改成8080或者其余端口。

 

[2] HTTP三点注意事项：

    • HTTP是无链接       ：无链接的含义是限制每次链接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开链接。采用这种方式能够节省传输时间。
    • HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据均可以经过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
    • HTTP是无状态       ：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺乏状态意味着若是后续处理须要前面的信息，则它必须重传，这样可能致使每次链接传送的数据量增大。另外一方面，在服务器不须要先前信息时它的应答就较快。

 

[3] HTTP协议通讯流程：

cgiarch

 

 

2、GET 对比 POST

  • HTTP 方法

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据

 

其余一些 HTTP 请求方法：

方法

描述
HEAD 与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT 上传指定的 URI 表示。
DELETE 删除指定资源。
OPTIONS 返回服务器支持的 HTTP 方法。
CONNECT 把请求链接转换到透明的 TCP/IP 通道。

 

  • GET 对比 POST

Ref: HTTP 方法：GET 对比 POST

 

GET 方法】

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.asp?name1=value1&name2=value2

有关 GET 请求的其余一些注释：

      • GET 请求可被缓存
      • GET 请求保留在浏览器历史记录中
      • GET 请求可被收藏为书签
      • GET 请求不该在处理敏感数据时使用
      • GET 请求有长度限制
      • GET 请求只应当用于取回数据


# 客户端请求：使用 GET 来传递数据的实例。

GET /hello.txt HTTP/1.1
User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3
Host: www.example.com
Accept-Language: en, mi

 

POST 方法】

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

有关 POST 请求的其余一些注释：

      • POST 请求不会被缓存
      • POST 请求不会保留在浏览器历史记录中
      • POST 不能被收藏为书签
      • POST 请求对数据长度没有要求

 

 

# 客户端请求：使用 POST 来传递数据的实例。

常见的HTTP请求报文头属性，参见：https://blog.csdn.net/u010256388/article/details/68491509 

 

  • 服务器响应消息

服务端响应:

HTTP/1.1 200 OK　　// 相应状态码
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
ETag: "34aa387-d-1568eb00"
Accept-Ranges: bytes
Content-Length: 51
Vary: Accept-Encoding
Content-Type: text/plain

输出结果：

Hello World! My payload includes a trailing CRLF.

 

响应状态码 

Ref: http://www.runoob.com/http/http-status-codes.html

和请求报文相比，响应报文多了一个“响应状态码”，它以“清晰明确”的语言告诉客户端本次请求的处理结果。 
HTTP的响应状态码由5段组成： 

      • 1xx 消息，通常是告诉客户端，请求已经收到了，正在处理，别急...
      • 2xx 处理成功，通常表示：请求收悉、我明白你要的、请求已受理、已经处理完成等信息.
      • 3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。
      • 4xx 处理发生错误，责任在客户端，如客户端的请求一个不存在的资源，客户端未被受权，禁止访问等。
      • 5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错，HTTP版本不支持等。

HTTP 响应头信息(第二部分之消息报头), goto: http://www.runoob.com/http/http-header-fields.html

 

 

3、HTTP content-type

请求和响应中都有。

Content-Type，内容类型，通常是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是常常看到一些Asp网页点击的结果倒是下载到的一个文件或一张图片的缘由。

Goto: http://www.runoob.com/http/http-content-type.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程