web前端之HTML（1/4）

艾文老师alvin
http://www.yuan316.com/

HTML

前言

1.1、CS架构和BS架构

web网页，我们都不陌生，相信大家都有使用web浏览上网的。那么，学习制作网页前，我们需要清晰哪些概念，准备哪些工具呢？接下来，我们要先了解下。在日常生活中，我们都会上网，或聊天、或阅读、或购物等，浏览很多的网站，而网站就是由网页组成。在互联网中，软件系统体系分两大结构：

  • CS模式

C/S 就是Client/Server 的缩写，是客户端和服务器架构。早期的软件系统多数是C/S结构的设计标准。 例如，用户要听歌，会去下载一个酷狗的软件，打开酷狗去听歌；用户要看视频，会去下载一个优酷视频播放器，去播放视屏。用户要聊天，会去下载一个微信或者QQ；用户要玩游戏，会去下载一个游戏客户端回来玩....

  • BS模式

B/S 就是Browser/Server的缩写，是浏览器和服务器架构。B/C是随着Internet技术的兴起，对C/S结构的变化或者改进的结构。本质上B/S还是属于C/S结构范围，也就是B/S包含在C/S中，是特殊的C/S架构。浏览器就是B/S结构最主要的客户端，网站也是B/S结构的软件。

例如：用户想要听歌，会去打开一个百度音乐的网址；用户要去看视频会去打开优酷的网址；用户要聊天，会去打开一个微信网页版的地址；用户要去玩游戏，会去打开一个游戏页面的网址。

C/S结构下，客户机子必须要下载专门的软件 才可以享受到服务端的服务。而B/S结构下，客户机上只要安装一个浏览器（Browser）就可以在任何地方进行操作而不用安装任何专门的软件，只要能上网的电脑就能享受到服务器提供的服务，客户端能实现零安装、零维护。

1.2、网页构成

World Wide Web Consortium，简称“W3C”，中文翻译为万维网联盟，又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立，建立者是万维网的发明者蒂姆·伯纳斯·李。万维网联盟是Web技术领域最具权威和影响力的国际中立性技术标准机构，创建和发展了W3C标准，致力于维护和发展 web 规范。W3C 标准是网页开发的核心标准。那么什么是W3C标准呢？

W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：

  • 结构（Structure）

  • 表现（Presentation）

  • 行为（Behavior）

对应的W3C标准也分成了三个方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMA[Script等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

前端基础总共分为三部分：html、css和js。

image

原则：不用直接从0开始构建前端，使用框架快速构建即可。

那么了解了开发网页的标准以后，我们接下来开始正式的学习网页开发吧。

1.web开发

1.1、最简单的web应用程序

import socket

sock=socket.socket()
sock.bind(("127.0.0.1",8800))
sock.listen(5)

while 1:
    print("server is working...")
    conn,addr=sock.accept()
    recv_data=conn.recv(1024)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\nwelcome to web world!")
    conn.close()

sock.close()

1.2、HTTP协议

1.2.1 、简介

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

image

1.2.2、 http协议特性

(1) 基于TCP/IP协议

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

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

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

image

(3) 无状态保存

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

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

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

image

(4) 无连接

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

短连接和长连接：短连接，在一定时间内反复发送请求，浏览器跟服务端的连接不中断。

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

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

(1) 请求协议

image

请求方式: get与post请求

  • GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditBook?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的请求体中.
  • GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制。

请求组成：请求首行（）、请求头、请求体。

【注意】请求头和请求体之间有一行空行。

get和post的区别：get请求头后面只有两行空行，没有请求体。

(2) 响应协议

组成：响应首行（协议版本，状态码、状态码的原因短语）、响应头（响应头可以为空）、响应主体。

image

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

image

image

2.HTML概述

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

image

response里面是响应体的内容。

image

  • 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文档。

上面这句的意思是使用通用的标准H5的规范来解析，而不是使用浏览器自己的方式解析。

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

3、<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义，放一些解释性的内容，譬如编码格式等。

【示例】

image

如上图，没有定义编码格式，则中文解析为乱码：
image

如果加上编码信息：
image

解析正常：
image

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

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

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

4.标签的语法

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

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

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

3、HTML不区分大小写

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

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>
  • 段落标签

连续的多个空格或多个空行，会被html解析为一个空格。
p标签除了块级标签的特性外，还会每行有一定的间隙。

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

<p>大家好，我是段落标签p。我按了enter一下<br/> 换行了</p>
  • 文本格式化标签

HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化。

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
  • 特殊符号
    内容很多，可以百度。常用如下：
&reg;    注册商标®
&nbsp;   空格（助记：牛逼space）
&copy;   版权©
&amp;    &
&lt;     <
&gt;     >

标签大致可分为两类

  • 块级标签(block) -- 独占一行 ，比如：p、h1-h6、div、ul、li
  • 内联标签(inline) -- 按文本内容占位，比如：b、strong、em、i、del、span、img、a、input等

基本嵌套原则：
块级可以嵌套块级和内联
内联只能嵌套内联

  • div和span标签

div标签本身不带任何样式，所以应用广泛，可以通过css定义各种表现的样式。而其他标签多少都自带一些样式，不能完全diy，所以div使用很广泛。span的原理跟div相似，只是span是内联标签。

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

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

6.超链接标签

6.1、超链接基本使用

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

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

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

属性 值 描述
href 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如：F:\html\index.html ] 规定链接的跳转目标
title 百度 链接的提示信息
target _blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] 与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过

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

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

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

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

5、如果href的值为#，则不做任何动作。

【扩展】客户端（浏览器）想服务端发送请求共有4种形式：

  • 1.地址栏请求（get请求）
  • 2.超链接标签（get请求）
  • 3.form表单（get、post请求）
  • 4.ajax

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>
  <span id="top"></span>

   <div id="i1">
      <p>第一章内容 <a href="#top">返回顶部</a></p>
  </div>
   <div id="i2">
      <p>第二章内容 <a href="#top">返回顶部</a></p>
  </div>
  <div id="i3">
     <p> 第三章内容 <a href="#top">返回顶部</a></p>
  </div>
  </body>
</html>

7.img标签

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

img标签的属性(通常不用，使用css控制)：

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

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

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

8.列表标签

  • ul：unorder list
  • li：list
  • ol：order list
  <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>

如下图，ul和ol的区别是：一个有序号，一个没有序号：
image

image

更改样式（一般通过css控制，历史问题：css出现之前，html里面标签定义了各种属性。）：
image
image

9.表格标签

9.1、table结构

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

语法：

<table border="1">
  <tr>
    <td>单元格的内容</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属性

属性 值 描述
width px、% 规定表格的宽度。
height px、% 规定表格的高度。
align left、center、right 规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定表格的背景颜色。
background url 规定表格的背景图片。
border px 规定表格边框的宽度。
cellpadding px、% 规定单元格边框与其内容之间的空白。
cellspacing px、% 规定单元格之间的空隙。

9.3、td属性

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

属性 值 描述
height px、% 规定单元格的高度。
width px、% 规定单元格的宽度。
align left、center、right 规定单元格内容的对齐方式。
valign top、middle、bottom 规定单元格内容的垂直对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定单元格的背景颜色。
background url 规定单元格的背景图片。
rowspan number 规定单元格合并的行数
colspan number 规定单元格合并的列数

【示例：合并单元格】

image
image

【扩展】 th标签，一般用于表头。

完整方式：

image
image

image

10.表单标签

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

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

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

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

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

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

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

属性 值 描述
action 访问服务器地址 服务器端表单处理程序的URL地址
method post、get[默认值] 表单数据的提交方法
target 参考超链接的target属性 表单数据提交时URL的打开方式
enctype application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] 表单提交数据时的编码方式

【扩展】给服务器传键值对据的两种方式：

image

Content-Type: 指出后面发送给服务器的数据使用的是那种格式。
使用&分割的多个参数属于urlencoded类型。
如果是json格式，则使用上图的下面那种方式。
image

  <h3>用户注册</h3>

  <form action="http://127.0.0.1:8800" method="get" enctype="application/x-www-form-urlencoded">
       <p><label for="user">姓名</label>： <input type="text" name="user" id="user"></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="">广东省</option>
              <option value="" selected>山东省</option>
              <option value="">河北省</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>

image
image

【注意】input标签内必须设置name属性，因为name属性值即为向服务器发送数据的键名，实际输入的内容为键值，如果没有name属性，浏览器不知道该发什么数据，就不会给发送数据。提交执行过程：当点击submit按钮的时候，浏览器会把键值对按照form的enctype指定的格式打包，使用method指定的方法，发送到action指定的服务器地址。发送表单的时候一般使用post方法，因为get方法会把表单信息放在地址栏发送，不安全。

如下图，直接给好图标，就不会每次都多一个获取图标的请求：
image

input标签如果设置value属性，则会默认显示value的属性值。

checkbox：复选框（方框），name值可以相同，也可以不同，但是最好设置为相同，方便服务器处理数据，譬如多选的情况下，服务器可以把相同name的value值放到一个列表里面。value值不同，可以选中多个框，服务器会自动处理，提交时只有勾选的值才会提交给服务器，未勾选的不发送。checked="checked"，可以简写为checked，默认选中状态。

radio：单选框（圆圈）。name值必须相同，只能选中一个值。

date：日期类型。实际发送给服务器的是一个日期的字符串：
image

select标签：组合标签，子标签option。默认是单选框。使用multiple="multiple" 可以多选，可以简写为multiple，默认显示所有的option，使用size属性可以设置显示的项目的数量。

image

image

image

image

image

option：selected，默认选中该项。

image

image

textarea：区域文本。cols，列数； rows，行数。placeholder='个人简介'，默认灰色显示的提示信息，输入内容后自动消失。

按钮。input标签，type='button', value='按钮'，这里的按钮只是按钮的显示文本。button按钮不像submit自带提交功能，它本身不带任何功能，可以后期自定义。

input， type=‘reset’ ，重置按钮，会自动重置输入的内容，默认选中或默认值不会自动重置。

，如果该标签放在form表单里面，则相当于submit按钮，如果放在form表单外面，则相当于一个普通按钮。

label标签：例如输入姓名的时候，输入框前面是姓名两个字，提示后面需要输入姓名，但是用户只能单击后面的输入框，才能获取焦点，输入姓名。如果想用户点姓名两个字，也能获取焦点，输入姓名，就用到了label标签，具体怎么做？需要把姓名两个字放到label标签中，并且for属性值设置为input姓名的id值即可。如下图：

image

11、总结

今天我们学习了HTML标签元素尤其是form表单标签的使用和属性以及基于HTTP协议实现web通信流程，这一点是需要重点理解掌握的。

posted @ 2021-12-17 06:58  #缘起  阅读(112)  评论(0)  编辑  收藏  举报