低代码应用开发 课件 第2章 低代码应用开发基础知识_第1页
低代码应用开发 课件 第2章 低代码应用开发基础知识_第2页
低代码应用开发 课件 第2章 低代码应用开发基础知识_第3页
低代码应用开发 课件 第2章 低代码应用开发基础知识_第4页
低代码应用开发 课件 第2章 低代码应用开发基础知识_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章

低代码应用开发

基础知识低代码应用开发0102目录相关技术HTML5开发基础CSS中间件通信协议数据库JSON相关技术01HTML5

HTML（HyperTextMarkupLanguage，超文本标记语言）是万维网最核心的超文本标记语言。“超文本”指的是超链接，“标记”指的是标签。HTML是一种用来制作网页的语言，这种语言由一个个标签组成。用这种语言制作的文件保存的是一个文本文件，文件的扩展名为“.htm”或“.html”，一个.htm/.html文件就是一个网页。HTML5

HTML文档通常以文档声明开始，该声明的作用是帮助浏览器确定其尝试解析和显示的HTML文档类型。文档声明必须是HTML文档的第一行且顶格显示，对大小写不敏感。

整个HTML文档包含在一个<html></html>标签对中，由头（head）和体（body）两部分构成。HTML文档的基本结构如下：1、HTML文档的基本结构<!DOCTYPEhtml><html><headlang="en"><metacharset="utf-8"/><title>我的第一个网页</title></head><body>

我的第一个网页</body></html>HTML51）大小写区分问题：网页基本上是不区分大小写的，但在XHTML中，要使用小写字母来定义页面中所有的元素和属性，包括CSS样式表中的属性等也要使用小写字母。2）正确嵌套所有元素3）元素必须要封闭4）属性必须加上双引号5）明确所有的属性值6）推荐使用级联样式表控制外观7）使用注释8）推荐使用外部链接来调用脚本2、XHTML语言的基本语法规范HTML5标签的种类、数量很多，具体可以查看附录中“HTML基本常用标签/属性”的内容。1）基本标签<html>标签用来定义HTML文档结构，<head>标签用来定义HTML文档的头部信息，<meta/>标签用来定义HTML文档的元信息，<title>标签用来定义文档的标题信息，<link/>标签用来定义文档与外部资源的关系，<style>标签用来定义文档的样式信息，<body>标签用来定义HTML文档的正文部分，即可见的页面内容，<script>标签用来定义脚本代码，<!--...-->标签用来定义HTML注释内容。3、标签的使用HTML52）标题标签和图像标题标签用来定义一段文字的标题或主题，并且支持多层次的内容结构。HTML提供了六级标题标签<h1>～<h6>，并赋予了标题一定的外观。段落标签<p>表示一段文字等的具体内容，换行标签<br/>表示强制换行，水平线标签<hr/>表示一条水平线，预定义格式标签<pre>表示可以根据预先编排好的格式显示内容。图像是网页中不可缺少的一种元素，图像标签的基本语法结构如下：<imgsrc="图片地址"alt="替代文字"title="鼠标悬停时的提示文字"width="宽度"height="高度"/><a>标签主要有两种作用：超链接和锚记。基本语法结构如下：超链接：<ahref="链接的地址URL"target="目标窗口位置">链接文本或图像</a>锚记：<aname="锚名"/>target属性用于指定链接在哪个窗口打开，主要取值有_self（自身窗口）、_blank（新建窗口）、_parent（父窗体）、_top（顶级窗体）、自定义窗体名。在超链接中使用锚名时，锚名前需要加上“#”，如<ahref="#锚名"/>。3、标签的使用HTML53）列表标签列表是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的形式显示出来。列表分为3种类型：无序列表（ul+li）、有序列表（ol+li）、定义列表（dl+dt+dd）。3、标签的使用HTML54）表格标签标准的表格通常每行的列数一致，同行单元格的高度一致且水平对齐，同列单元格的宽度一致且垂直对齐，形成一个不易变形的长方形盒子结构，堆叠排列起来结构稳定。表格标签的基本语法结构如下：<table><tr><td>第1行第1列</td><td>第1行第2列</td>…</tr><tr><td>第2行第1列</td><td>第2行第2列</td>…</tr>…</table>表格还可以用<caption>标签设置表格标题，表头部分用<th>标签（默认具有粗体和居中对齐特性）代替<td>标签即可。3、标签的使用HTML55）表单标签在HTML5中，使用<form>标签来实现表单的创建，该标签属于容器标签，其他表单标签需要在它的范围内才能有效地实现表单数据的传递。表单标签的基本语法结构如下：<formmethod="…"action="…">表单元素…</form>其中，method属性表示表单提交数据的方法，值主要有get（默认值）、post等；action属性表示处理表单数据的服务器端页面的URL。3、标签的使用HTML5表单提供了多种表单元素，如单行文本框、密码框、复选框、单选按钮、提交按钮等。在HTML5中，一般使用<input>标签来定义表单元素。<input>标签的基本语法结构如下：<inputtype="类型"name="名字"value="值"…/><input>标签常用的属性如表2-1所示。3、标签的使用HTML5表单中还有一些不使用<input>标签的表单元素，如<button>标签表示普通按钮，<textarea>标签表示多行文本（文本区），<select>和<option>标签分别表示下拉菜单和下拉列表等。表单元素还具有一些特殊的属性，如只读属性readonly、禁用属性disabled、内容提示属性placeholder、必填属性required、表单验证属性pattern等。3、标签的使用CSS

CSS（CascadingStyleSheets，层叠样式表）是一种表现HTML或XHTML文件样式的计算机语言，是用来进行网页风格设计的。

通过建立CSS样式表，可以统一控制HTML中各个标签的显示属性，包括字体属性（如颜色、大小、风格等）、文本属性（如对齐、缩进、行高、修饰等）、边距属性（如内边距、边框、外边距等）、高度、宽度、背景、网页定位等，可以精确地定位网页元素的位置，美化网页的外观。

使用CSS样式表具有以下优势：（1）内容与表现分离。（2）网页的表现统一，容易修改。（3）丰富的样式使页面布局更加灵活。（4）减少网页的代码量，增加网页的浏览速度，节省网络带宽。（5）运用独立于页面的CSS样式文件，有利于网页被搜索引擎收录。CSS

CSS的语法规则如下：（1）CSS规则由两部分构成，即选择器和声明。（2）声明必须放在大括号匹配对（{}）中，并且声明可以是一条或多条。（3）每条声明由属性名与属性值组成，属性名与属性值之间用冒号（:）隔开，以分号（;）结尾。1、CSS的基本语法结构CSS的基本语法结构如下：选择器{属性名1:属性值1;属性名2:属性值2;…}CSS在HTML中引入CSS样式的方法有3种，分别是行内样式、内部样式和外部样式。1）行内样式行内样式也称直接样式，即在HTML标签中直接使用style属性设置CSS样式。行内样式的示例代码如下：<h1style="color:green;">style属性的应用</h1><pstyle="font-size:20px;color:pink;">直接在HTML标签中设置的样式</p>*使用style属性设置的CSS样式仅对当前的HTML标签起作用。2、在HTML中引入CSS样式CSS2）内部样式内部样式也称内嵌样式，即将CSS代码写在<style></style>标签对中。为了能在应用样式前见到样式的定义，通常将<style></style>标签对放在<head></head>标签对中。内部样式的示例代码如下：<styletype="text/css">h1{color:green;}</style>*虽然内部样式方便在页面中修改样式，但是不利于在多页面间共享、复用代码及维护，对内容与表现的分离也不够彻底。2、在HTML中引入CSS样式CSS3）外部样式外部样式是指把CSS代码单独保存为一个扩展名为.css的CSS样式文件。HTML文档引用扩展名为.css的CSS样式文件的方式，有两种，分别是链接式和导入式。链接外部CSS样式文件的方法是通常在HTML文档的<head></head>标签对中使用<link/>标签。语法格式如下：<head>…<linkhref="CSS样式文件"rel="stylesheet"type="text/css"/>…</head>2、在HTML中引入CSS样式CSS导入外部CSS样式文件的方法是在HTML文档中使用@import语句导入外部CSS样式文件，该导入语句必须放在<style></style>标签对中，一般放在开始位置。语法格式如下：<head>…<styletype="text/css"><!--@importurl("CSS样式文件");--></style></head>*外部样式实现了内容与表现的彻底分离，一个CSS样式文件可以应用于多个页面。这样不仅可以减少重复的工作量，有利于网站页面样式的统一和维护，还可以减少用户在浏览网页时重复下载代码，提高网站的运行速度。2、在HTML中引入CSS样式CSS选择器（Selector）是CSS中非常重要的概念。用户只需要通过选择器找到对应的HTML标签，并赋予各种样式声明，即可实现各种效果。CSS选择器主要有基本选择器、层次选择器、属性选择器、伪类选择器等。3．CSS选择器CSS1）CSS的基本选择器在CSS中，有3种基本选择器，分别是标签选择器、类选择器和ID选择器。标签选择器也称元素选择器，是用HTML标签的名称作为相应的标签选择器的名称，如前面内部样式的示例代码里的h1标签选择器通常用于设置页面中的标签样式。类选择器是用一个以句点（.）开头的类名称作为选择器的名称。如果想要在HTML标签中应用类样式，则可以使用标签的class属性引用类样式。ID选择器是用HTML标签的id属性值前面加一个“#”符号组成的名称作为选择器的名称，由于HTML页面中id属性的唯一特性，因此ID选择器的针对性更强，一般只使用一次。3．CSS选择器CSS2）层次选择器层次选择器是通过HTML的文档对象模型（DocumentObjectModel，DOM）元素之间的层次关系来选择元素的，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟等。具体语法如表2-2所示。3．CSS选择器CSS3）属性选择器在HTML中，可以给标签元素设置各种各样的属性及属性值，如id、class、href等。属性选择器是通过各种各样的属性及属性值选择到对应的元素并设置样式的，其语法如表2-3所示。3．CSS选择器CSS4）伪类选择器伪类选择器（简称“伪类”）通过冒号（:）来定义，它定义了元素的状态（如单击按下、单击完成等）。通过伪类选择器可以为元素的状态修改样式。伪类选择器主要可以分为动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。3．CSS选择器CSS动态伪类选择器可以用于超链接a标签的应用中。a标签有4种伪类选择器（即对应4种状态），分别是a:link（超链接被访问之前）、a:visited（超链接被访问之后）、a:hover（鼠标指针悬停在超链接上）、a:active（鼠标单击超链接，但是没有松开时）。a标签的这4种伪类选择器的顺序为a:link、a:visited、a:hover、a:active。在同时使用两种或两种以上的伪类选择器时，只有伪类选择器的顺序正确，才能正确显示其效果。表2-4所示为动态伪类选择器的语法。3．CSS选择器CSSUI元素状态伪类选择器主要针对HTML中的form元素进行操作。例如，type="text"有enabled和disabled两种状态，前者为可写状态，后者为不可写状态；type="radio"和type="checkbox"都有checked和unchecked两种状态。表2-5所示为UI元素状态伪类选择器的语法。3．CSS选择器CSS结构伪类选择器可以根据元素在文档中所处的位置来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净、整洁。表2-6所示为结构伪类选择器的语法。3．CSS选择器CSS否定伪类选择器是反向指定元素的一种方式。表2-7所示为否定伪类选择器的语法。3．CSS选择器CSSCSS中常用的样式属性主要有字体、文本、列表、背景、盒子模型、布局、定位等几大类。（1）字体样式属性主要有字体（font）、字体风格（font-style）、字体粗细（font-weight）、字体大小（font-size）、字体类型（font-family）等。其中font属性是组合属性，可以包含一个或多个其他属性的值，各个属性的值中间用空格隔开，语法格式如下：font:font-style||font-variant||font-weight||font-size||font-family（2）文本样式属性主要有文本颜色（color）、首行缩进（text-indent）、行高（line-height）、文本修饰（text-decoration）、文本对齐（水平对齐text-align和垂直对齐vertical-align）、文本阴影（text-shadow）等。4．CSS样式属性CSS（3）列表样式属性主要有列表（list-style）、列表项标记类型（list-style-type）、列表项标记图像（list-style-image）、列表项标记位置（list-style-position）和列表样式（list-style）等。其中list-style属性是组合属性，可以包含一个或多个其他属性的值，各个属性的值中间用空格隔开，语法格式如下：list-style:list-style-image||list-style-position||list-style-type（4）背景样式属性主要有背景（background）、背景颜色（background-color）、背景图像（background-image）、背景重复（background-repeat）、背景附加方式（background-attachment）、背景位置（background-position）、背景尺寸（background-size，主要取值为auto、percentage、cover、contain）、CSS3渐变（线性渐变linear-gradient和径向渐变radial-gradient）等。其中background属性是组合属性，可以包含一个或多个其他属性的值，各个属性的值中间用空格隔开，语法格式如下：background:background-color||background-image||background-repeat||background-attachment||background-position4．CSS样式属性CSS（5）盒子模型样式属性主要有外边距（margin）、内边距（padding）和边框（border，border包括边框宽度border-width、边框风格border-style、边框颜色border-color）等，盒子模型又分上、右、下、左4个方向。其中border属性是组合属性，可以包含一个或多个其他属性的值，各个属性的值中间用空格隔开，语法格式如下：border:border-width||border-style||border-colorCSS3中增加了盒子模型尺寸（box-sizing）、圆角边框（border-radius）、盒子阴影（box_x0002_shadow）等属性。box-sizing属性用于定义盒子模型的尺寸解析方式，主要取值为contain-box、border-box。border-radius属性用于为元素设计圆角的效果。（6）布局样式属性主要有浮动（float）、清除浮动（clear）、溢出（overflow）、显示（display）和可见性（visibility）等。（7）定位样式属性主要有上（top）、下（bottom）、左（left）、右（right）4个方向的位置，以及Z轴索引（z-index）和定位（position，主要取值为static、absolute、fixed、relative）等。4．CSS样式属性开发基础02中间件

中间件（Middleware）是一类连接软件组件和应用的计算机软件，它包括一组服务，可以使运行在一台或多台机器上的多个软件通过网络进行交互。中间件技术所提供的互操作性推动了一致性分布式体系架构的演进，该架构通常用于支持并简化那些复杂的分布式应用程序，它包括Web服务器、事务监控器和消息队列软件。定义功能①通信支持：中间件为其所支持的应用软件提供平台化的运行环境，该环境屏蔽底层通信之间的接口差异，实现互操作，所以通信支持是中间件一个最基本的功能。②应用支持：中间件的目的是服务上层应用，提供应用层不同服务之间的互操作机制。③公共服务：公共服务是对应用中共性的功能或约束的提取，即将这些共性的功能或约束分类实现，并支持复用，作为公共服务提供给应用程序使用。通信协议

通信协议又称通信规程，是指通信双方对数据传送控制的一种约定，即对数据格式、同步方式、传送速度、传送步骤、检验纠错方式及控制字符定义等问题做出统一规定，通信双方必须共同遵守。它也被叫作链路控制规程。

常用的通信协议主要有TCP/IP协议和HTTP协议等。TCP/IP协议

TCP/IP协议是网络中使用的基本的通信协议，是用于计算机通信的一组协议，我们通常称为TCP/IP协议族。

之所以说TCP/IP协议是一个协议族，是因为TCP/IP协议包括TCP、IP、UDP、ICMP、RIP、Telnet、FTP、SMTP、ARP、TFTP等协议，这些协议一起被称为TCP/IP协议。其中TCP（传输控制协议）和IP（网际协议）是保证数据完整传输的两个基本的重要协议。TCP/IP协议

TCP/IP协议由应用层、运输层、网络层、网络接口层这4个层次组成。•应用层：应用层是TCP/IP协议的第一层，是直接为应用进程提供服务的。

不同种类的应用程序会根据自己的需要来使用应用层的不同协议。例如，邮件传输应用使用了SMTP协议，万维网应用使用了HTTP协议，远程登录服务应用使用了Telnet协议等。

应用层还可以加密、解密、格式化数据。

应用层也可以建立或解除与其他节点的联系，这样能够充分节省网络资源。•运输层：运输层是TCP/IP协议的第二层。运输层在整个TCP/IP协议中起到了中流砥柱的作用；在运输层中，TCP和UDP协议同样起到了中流砥柱的作用。•网络层：网络层是TCP/IP协议的第三层。在TCP/IP协议中，网络层可以进行网络连接的建立和终止及IP地址的寻找等。•网络接口层：网络接口层是TCP/IP协议的第四层。由于网络接口层兼并了物理层和数据链路层，因此网络接口层既是传输数据的物理媒介，也可以为网络层提供一条准确无误的线路。1、TCP/IP的组成TCP/IP协议（1）协议标准是完全开放的，可以供用户免费使用，并且独立于特定的计算机硬件与操作系统。（2）独立于网络硬件系统，可以运行在广域网，更适用于互联网。（3）网络地址统一分配，网络中的每个设备和终端都具有一个唯一地址。（4）高层协议标准化，可以提供多种多样、可靠的网络服务。2、TCP/IP协议的特点HTTP协议

HTTP（HyperTextTransferProtocol，超文本传输协议）是一个简单的请求-响应协议，它通常运行在TCP协议之上。它指定了客户端可能发送给服务器什么样的消息，以及得到什么样的响应。请求消息和响应消息的头以ASCII形式给出；而消息内容则具有类似MIME的格式。HTTP协议（1）客户端与服务器端建立连接。（2）客户端向服务器端提出请求。（3）服务器端接收请求，并根据请求返回相应的文件作为应答。（4）客户端与服务器端关闭连接。1、HTTP事务处理过程HTTP协议（1）无状态，HTTP协议对事务处理没有记忆能力。（2）无连接，HTTP协议限制每次连接只处理一个请求。（3）HTTP协议支持客户和服务器模式。（4）HTTP协议非常灵活，允许传输任意类型的数据对象。（5）HTTP协议非常简单、快速，当客户端向服务器端请求服务时，只需要传送请求方法和路径即可。2、HTTP协议的特点数据库

数据库（DataBase，DB）就是用来组织、存储和管理数据的仓库。它的存储空间很大，可以存放大量的、各种类型的数据，包括文本数据、图像、声音等。

数据库在建立、运用和维护时由数据库管理系统统一管理和控制。数据库管理系统（DataBaseManagementSystem，DBMS）是位于用户与操作系统之间的一层数据管理软件，是数据库系统的核心组成部分，它使用户能够方便地定义数据和操纵数据，并能够保证

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论