1.web开发

1.1、最简单的web应用程序

前面我们学习过python中的socket模块，学以致用，让我们用socket写一个最简单的web应用程序。

不了解socket的同学感兴趣可以点击下方链接了解一下，该部分可以跳过，是否会socket对于接下来的HTML意义不大。

server服务端

import socket
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('127.0.0.1', 8000))
sock.listen(5)
while True:
    conn, addr = sock.accept()
    res = conn.recv(1024)
    conn.sendall(b'HTTP/1.1 200 OK\r\n\r\nwelcome to web world!')
    conn.close()
sock.close()

这里我们不需要写client客户端，对于BS架构，我们的客户端就是浏览器，

因此浏览器搜索127.0.0.1:8000可以看到我们所返回的内容

1.2、HTTP协议

1.2.1 、简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于万维网（WWW:World Wide Web ）服务器与本地浏览器之间传输超文本的传送协议。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。

1.2.2、 http协议特性

(1) 基于TCP/IP协议

http协议是基于TCP/IP协议之上的应用层协议。

(2) 基于请求－响应模式

HTTP协议规定,请求从客户端发出,最后服务器端响应该请求并返回。换句话说,肯定是先从客户端开始建立通信的,服务器端在没有接收到请求之前不会发送响应

(3) 无状态保存

HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别,协议对于发送过的请求或响应都不做持久化处理。

使用HTTP协议,每当有新的请求发送时,就会有对应的新响应产生。协议本身并不保留之前一切的请求或响应报文的信息。这是为了更快地处理大量事务,确保协议的可伸缩性,而特意把HTTP协议设计成如此简单的。

可是,随着Web的不断发展,因无状态而导致业务处理变得棘手的情况增多了。比如,用户登录到一家购物网站,即使他跳转到该站的其他页面后,也需要能继续保持登录状态。针对这个实例,网站为了能够掌握是谁送出的请求,需要保存用户的状态。HTTP/1.1虽然是无状态协议,但为了实现期望的保持状态功能, 于是引入了Cookie技术。有了Cookie再用HTTP协议通信,就可以管理状态了。有关Cookie的详细内容稍后讲解。

(4) 无连接

无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

1.3.3、http请求协议与响应协议

http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的请求协议。用于HTTP协议交互的信被为HTTP报文。请求端(客户端)的HTTP报文做请求报文,响应端(服务器端)的做响应报文。HTTP报文本身是由多行数据构成的字文本。

(1) 请求协议

请求方式: get与post请求

GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditBook?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的请求体中.

GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制

(2) 响应协议

响应状态码：状态码的职责是当客户端向服务器端发送请求时, 返回的请求结果。借助状态码,用户可以知道服务器端是正常理了请求,还是出现了错误。

2.HTML概述

了解了web相关基本概念以后，我们开始正式接触网页开发，网页开发的基础是HTML，所以，本章内容主要分两部分，一是介绍HTML的相关概念、发展历史，二是创建HTML网页文档和认识HTML的基本结构。我们学会如何新建一个 HTML 页面和熟记HTML文档的基本结构和主要标签。

HTML，即超文本标记语言（HyperText Markup Language ]），由SGML (标准通用标记语言) 发展而来，也叫web页面。扩展名是 .html 或是 .htm 。

HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。

HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。

自1990年以来HTML就一直被用作WWW（World Wide Web的缩写，也可简写WEB，中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过网页浏览器显示出效果。用户在访问网页时，是把服务器的HTML文档下载到本地客户设备中，然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。

网页本身是一种文本文件，通过在文本文件中添加各种各样的标记标签，可以告诉浏览器如何显示标记中的代表的内容，如：HTML中有的标签可以告诉浏览器要把字体放大，就像word一样，也有的标签可以告诉浏览器显示指定的图片，还有的标签可以告诉浏览器把内容居中或者倾斜等等。

每一个HTML标签代表的意义都不一样。同样，他们在浏览器中表现出来的外观也是不一样的。

3.HTML标准结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

1、<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档

2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML文档，在它们之间是文档的头部<head>和主体<body>。

3、<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

4、<title></title>定义网页标题，在浏览器标题栏显示。

5、<body></body>之间的文本是可见的网页主体内容

6、<meta charset="UTF-8"> 声明编码方式用utf

4.标签的语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

1、HTML标签是由尖括号包围的特定关键词

2、标签分为闭合和自闭合两种标签

3、HTML不区分大小写

4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性

5、标签可以嵌套,但是不可以交叉嵌套

6、在很早以前HTML4的时候，HTML的标签是大写的，但在后面的发展中，人们发现HTML仍然存在很多不足，标签不区分大小写和标签可以胡乱嵌套都在其中，于是1998 年语法更为完的XML（ The Extensible Markup Lanxguage 可扩展标记语言）成为推荐标准，意在替代HTML。和HTML一样，XML同样来源于SGML，但当时已有成千上万的站点，因此直接使用XML作为网页开发技术根本就不可能。因此，后面W3C就在HTML4.0的基础上，参照XML的语法规则对HTML进行扩展，形成了XHTML （ The Extensible HyperText Markup Language ，可扩展超文本标记语言）的1.0版本。所以，XHTML是实现 HTML 到 XML的过渡

5.基本标签

标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

段落标签

<p>大家好，我是段落1。</p>
<p>大家好，我是段落2。</p>
<p>大家好，我是段落3。</p>

换行标签

1. <p>大家好，我是段落标签p。我按了enter一下
2. 换行了</p>
3. 
4. <p>大家好，我是段落标签p。我按了enter一下<br/> 换行了</p>

文本格式化标签

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />

特殊符号

® ©

标签大致可分为两类

块级标签(block) -- 独占一行

内联标签(inline) -- 按文本内容占位

div和span标签

<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.

<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现

块级元素与行内元素的区别所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

6.超链接标签

6.1、超链接基本使用

超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接，是网页中指向一个目标的连接关系，这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时，遇到一个不认识的英文，你只要在这个单词上单击一下，即可跳转到它的翻译页面中，看完单词的解释后点一下返回按钮，又可继续阅读，这就是超链接的常见用途。还有经常到购物网站中去，我们都是在百度搜索，然后点击对应的搜索项进入到对应的购物网站的，这也是超链接的作用。超链接的属性：

1、href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是网络连接，也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。

3、本地链接指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。

4、如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面

6.2、锚点

锚点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者脚部去，这时候也可以运用上锚点技术来解决这个问题。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>锚点的使用</title>
  </head>
  <body>
  <a href="#i1">第一章</a>
  <a href="#i2">第二章</a>
  <a href="#i3">第三章</a>
   <div id="i1">
      <p>第一章内容</p>
  </div>
   <div id="i2">
      <p>第二章内容</p>
  </div>
  <div id="i3">
     <p> 第三章内容</p>
  </div>
  </body>
</html>

7.img标签

在HTML中，图像由<img>标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。

img标签的属性：

/*
src属性：
    指定图像的URL地址，是英文source的简写，表示引入资源。
    src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
    如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*/

点击图片跳转可以配合a标签使用

<a><img src="" alt=""></a>

8.列表标签

  <ul type="square">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ul>
  <ol start="100">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ol>

9.表格标签

9.1、table结构

在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。

语法：

<table border="2px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>alex</td>
        <td>3</td>
        <td>一年级</td>
    </tr>
    <tr>
        <td>卢本伟</td>
        <td>4</td>
        <td>二年级</td>
    </tr>
    <tr>
        <td>xx</td>
        <td>6</td>
        <td rowspan="2">三年级</td>
    </tr>
    <tr>
        <td>oo</td>
        <td>7</td>
    </tr>
</table>

1、<table>和</table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。

2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。

3、<tr>和</tr>表示表格中的一行的开始和结束。一组<tr>...</tr>，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。

4、<td>和</td>表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了

9.2、table属性

9.3、td属性

表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。

10.表单标签

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分：

表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。

表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性：

  <h3>用户注册</h3>
  <form action="http://127.0.0.1:8800" method="get">
       <p><label for="user_id">姓名</label>： <input type="text" name="user" id="user_id"></p>
       <p>密码： <input type="password" name="pwd"></p>
       <p>爱好：
           <input type="checkbox" name="hobby" value="basketball">篮球
           <input type="checkbox" name="hobby" value="football">足球
           <input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球
       </p>
       <p>性别：
           <input type="radio" name="gender" value="men">男
           <input type="radio" name="gender" value="female">女
           <input type="radio" name="gender" value="qita">其他
       </p>
      <p>生日：<input type="date" name="birth"></p>
      <p>籍贯：
          <select name="province" id="" multiple size="2">
              <option value="1">广东省</option>
              <option value="2" selected>山东省</option>
              <option value="3">河北省</option>
          </select>
      </p>
      <p>
          <textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea>
      </p>
      <div>
          <p><input type="reset" value="重置"></p>
          <p><input type="button" value="普通按钮"></p>
          <p><button>普通按钮</button></p>
          <p><input type="submit" value="提交"></p>
      </div>
  </form>

注：点击提交时，会根据enctype里面的方式把带上name的如user=123&pwd=123的形式打包放到请求体那一堆里发送过去让conn.recv()接受。name=value&name=value&name=value(input输入的东西也是value 选择框什么的选中的也是value，多选单选name都写一样没什么问题）。

上面四种按钮各不相同。<button>普通按钮</button>只提交自己的form表单里的数据。

随便玩玩

用我们自己的服务器(本机)简单玩一下,以后用到的后端原理相似只不过会进行账号密码等的校验，这里显然没有校验只是点击提交便进行了跳转。

第一步启动服务器

第二步打开登陆注册的html（右上角随便选个浏览器就行，注意action里的地址）

第三步随便输入一些内容后点击提交跳转到上面的res界面

两小时掌握HTML

1.web开发

1.1、最简单的web应用程序

1.2、HTTP协议

1.2.1 、简介

1.2.2、 http协议特性

1.3.3、http请求协议与响应协议

2.HTML概述

3.HTML标准结构

4.标签的语法

5.基本标签

6.超链接标签

6.1、超链接基本使用

6.2、锚点

7.img标签

8.列表标签

9.表格标签

9.1、table结构

9.2、table属性

9.3、td属性

10.表单标签

随便玩玩

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

两小时掌握HTML

1.web开发

1.1、最简单的web应用程序

1.2、HTTP协议

1.2.1 、简介

1.2.2、 http协议特性

1.3.3、http请求协议与响应协议

2.HTML概述

3.HTML标准结构

4.标签的语法

5.基本标签

6.超链接标签

6.1、超链接基本使用

6.2、锚点

7.img标签

8.列表标签

9.表格标签

9.1、table结构

9.2、table属性

9.3、td属性

10.表单标签

随便玩玩

热门文章

最新文章

相关电子书