c c 软件架构书籍推荐 c/s架构的软件有哪些

转载

mob6454cc70219b 2023-10-25 21:24:22

文章标签 c c 软件架构书籍推荐前端 html HTML 常用属性 文章分类 架构后端开发

概述

软件架构

C/S 架构

基于客户端-服务器的软件架构：

一般我们使用的软件都是C/S架构，QQ、360、Office等；
C表示客户端（Client），用户通过客户端来使用软件；
S表示服务器（Server），服务器负责处理软件的业务逻辑。

特点：

软件使用前必须得安装；
软件更新时，服务器和客户端得同时更新；
C/S架构的软件不能跨平台使用；
C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。

B/S 架构

基于浏览器 - 服务器的软件架构：

B/S 本质上也是 C/S，只不过 B/S 架构的软件，使用浏览器（Browser**）作为软件的客户端；**
B/S 架构的软件通过使用浏览器访问网页的形式，来使用软件；
比如：京东淘宝 B站等；

特点：

软件不需要安装，直接使用浏览器访问指定的网址即可；
软件更新时，客户端不需要更新；
软件可以跨平台，只要系统中有浏览器，就可以使用；
B/S 架构的软件，客户端和服务器之间通信采用的是通用的HTTP协议，相对来说不安全；

移动应用开发

移动应用开发的方式，目前主要有以下几种：

Native APP：原生应用程序
Web APP：WEB应用程序
Hybrid APP：混合应用程序
小程序

微信小程序
百度小程序
支付宝小程序
…

微网页

微信公共号
百度直达号
…

Native APP

原生 APP 就是利用 Android、iOS 平台官方的开发语言、开发类库、工具进行开发。比如Android的Java语言，iOS 的 Object-C 语言。在应用性能和交互体验上是最好的。

优点：

能访问移动硬件设备的所有功能，比如通讯录，摄像头等功能；
运行速度快，用户体验好；
方便推广，可以在APP商店上架推广。

缺点：

开发和维护成本高，Android、iOS 平台需要分别开发；
上架审核繁琐；
需要手机安装APP。

WEB APP

Web APP 指采用HTML5，CSS，JavaScript 等技术开发的 APP，不需要下载安装。程序运行在智能手机的浏览器中运行（和PC上的WEB应用原理相同）。

优点：

开发成本低，跨平台，一套程序各种移动平台（Android、iOS等）都能运行；
不需要应用商店上架，移动设备安装浏览器有网络就可以使用WEB APP；
手机端不需要下载安装；
软件维护和更新容易，只需要更新服务器程序即可。

缺点：

只能使用有限的移动硬件设备功能,无法使用很多移动硬件设备的独特功能；
WEB APP不容易推广（需要借助搜索引擎或让用户记住应用的网址）；
依赖于网络,页面访问速度慢,耗费流量；

Hybrid APP

混合模式移动应用，介于WEB App、Native App 这两者之间的APP开发技术，兼具Native App良好交互体验的优势和 WEB App跨平台开发的优势 ,原生客户端的壳WebView，其实里面是HTML5的网页.

把网页打包成移动 App；
使你的 Web 程序可以访问手机原生能力；

优点：

开发成本较低,可以跨平台,调试方便；
维护成本低,功能可复用，如果代码合理,只需要一名前端就可以维护多个APP，而且很多功能还可以互相复用；
更新较为自由，虽然没有web app更新那么快速,但是 Hybrid 中也可以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果；
功能更加完善,性能和体验要比起web app好太多；
部分性能要求的页面可用原生实现；

缺点：

学习范围较广，需要原生配合；
相比原生,性能仍然有较大损耗，相比原生而言有不少损耗,体验无法和原生相比；
不适用于交互性较强的app，这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)；

网页结构

W3C专门是为了定义网页相关的标准而成立的组织，W3C定义了网页中的HTML、CSS、DOM、 HTTP、XML等标准。

根据W3C标准，一个网页主要由三部分组成：结构、表现、行为。

HTML 用于描述网页的结构；
CSS 用于控制网页的表现样式；
JavaScript 用户响应用户的操作和行为；

一个设计优良的网页要求结构、表现、行为三者分离。

HTML 概述

HTML 是用来描述网页结构的一种超文本标记语言 (Hyper Text Markup Language)。

HTML 使用标签的的形式来标识网页中的不同组成部分。

Web浏览器的作用是解析HTML文档，并以网页的形式显示它们。浏览器不会显示HTML标签，而是使用标签来解释页面上的内容。

文档结构

一个 HTML 的基本结构如下：

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          <h1>网页正文</h1> 
          <!-- html 注释 -->
    </body>
</html>

第一行是文档声明,定义了HTML的文档内容。
第二行标签和最后一行定义HTML文档的整体。

标签中的 lang=“en” 定义网页的语言为英文；
定义成中文是 lang=“zh-CN”；
不定义也没什么影响，它一般作为分析统计用。

标签和标签是它的第一层子元素。
标签里面负责对网页进行一些设置，设置包括定义网页的编码格式、标题、外链CSS样式文件和 JavaScript 脚本文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏。定义网页编码格式为UTF-8
内编写网页上显示的内容。
HTML文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。

文档声明

<!DOCTYPE html>

用来标识当前页面的HTML的版本，以上声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的

属性

通过属性可以设置标签的效果；
属性需要定义在开始标签中或自结束标签中；

<标签名属性名=“属性值” 属性名=“属性值”></标签名>
<标签名属性名=“属性值” 属性名=“属性值” />

例子：

<h1 title="我是一个标题">标题</h1> 
<a href="https://www.baidu.com">跳转到百度</a>

注释

语法：

语法规则

HTML中不区分大小写，但是尽量使用小写
HTML的注释不能嵌套
标签必须结构完整

要么成对出现
要么自结束标签

标签可以嵌套但是不能交叉嵌套

常用标签

html

网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在 html 标签的内部

head

网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面
子标签

title

用来设置网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名

meta

用来设置网页的元数据，比如网页使用的字符集

<meta charset="UTF-8" />

设置网页的关键字

<meta name="keywords" content="关键字,关键字,关键字,关键字"/>

设置网页的描述

<meta name="description" content="网页的描述"/>

body

网页的主体
网页中所有的可见部分都需要在body中编写

h1 ~ h6

在HTML中一共有六级标题
六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
一般一个页面中只能写一个h1

p

段落标签，可以将HTML文档分割为若干段落。浏览器会自动在段落前后添加空行。

常用属性：

align: 用于设定对齐方式可选值 left 、right 、center 默认值是 left.

br

换行标签。因为浏览器会自动的忽略空白与换行，因此
标签成为了我们最常用的标签。

hr

标签会生成一条水平线。

常用属性:

align：设置水平线对齐方式可选值 left right center
size：设置水平线厚度以像素为单位。默认为2
width：设置水平线长度.可以是绝对值或相对值。默认为100%
color：设置水平线颜色.默认为黑色

div

用于在文档中设定一个块区域。

常用属性：align: left center right

span

用于在行内设定一个块区域。

img

图片标签，使用图片标签可以向页面中引入一个外部图片。

常用属性：

src：指向一个外部图片的路径，可以使用相对路径或URL
alt：

指定一个在图片无法加载时对图片的描述
搜索引擎主要通过该属性来识别图片的内容

width：用于设定图片的宽度
height：用于设定图片的高度
border：图片边框厚度
图片的格式：

JPEG：颜色丰富的图片，如，照片
GIF：颜色单一，简单透明的图片，动态图
PNG：颜色丰富，复杂透明的图片
图片选择的原则：效果一致，用小的，效果不一致，用效果好的

iframe

内联框架标签，向一个页面中引入其他的外部页面。

常用属性：

src：外部页面的地址，可以使用相对路径
width：框架的宽度
height：框架的高度
name

可以为内联框架指定一个名字
可以将该属性值设置为超链接的target属性的值
这样当点击超链接时，页面将会在相应的内联框架中打开

内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架。

a

用于定义超连接，用于从一个页面链接到另一个页面。

常用属性:

href：链接跳转的目标地址

可以是一个相对路径或URL地址。
可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置。

target: 指定在哪个窗口中打开链接。

_self：默认值，在当前窗口打开链接
_blank：在新窗口中打开链接
内联框架的name属性值：在指定的内联框架中打开链接

列表

有序列表

标签表示的是一个无序列表。

常用属性:

type：规定列表的项目符号类型,可取值 disc, square, circle.默认值为 disc
标签表示的是一个列表项
常用属性:

type：用于设定项目符号，默认值为 disc

无序列表

表示的是一个有序列表。

常用属性:

type：这个属性规定列表中使用的标记类型。可取值1 A a I i.
start：这个属性规定列表的起始值

标签表示的是一个列表项
常用属性:

value：用于设定列表的项目数字

数值单位

HTML 的数值默认单位为像素(px).

在有些位置可以使用百分比来设置。

例如:

这个就代表水平线厚席为3px. 这个就代表水平线长度为总长度的30%.

颜色值

颜色由红®、绿(G)、蓝(B)组成。

颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
十六进制值的写法为#号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

<!DOCTYPE html>
<html>
	<body>
		<p style="background-color:red">
			通过颜色名称设置背景颜色
		</p>
		<p style="background-color:#FFFF00">
			通过十六进制设置背景颜色
		</p>
		<p style="background-color:rgb(255,255,0)">
			通过 rgb 值设置背景颜色
		</p>
	</body>
</html>

特殊字符

空格：
大于号： <
小于号：>
版权符号： ©

音频和视频

audio

音频标签

标签支持的3种文件格式：MP3、Wav、Ogg。

浏览器兼容性如下：

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

建议使用MP3格式！！！

3 种音频的 MIME-type 分别是：

音频格式	MINE-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

常用属性：

src：音频来源，相对路径或URL
controls：显示音频控件
autoplay：自动播放
loop：循环播放
muted：静音
preload：规定是否预加载音频，如果设置了 autoplay 属性，则忽略该属性。

auto：当页面加载后载入整个音频
metadata：当页面加载后只载入元数据
none：当页面加载后不载入音频

<audio controls>
    <source src="media/nokia.mp3" type="audio/mpeg">
    <source src="media/nokia.ogg" type="audio/ogg">
</audio>

<audio controls src="media/nokia.mp3"></audio>

video

视频标签

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg

浏览器	MP4	WebM	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	NO	NO
Opera 10.6+	NO	YES	YES

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

常用属性：

src：视频来源，相对路径或URL
poster：视频正在下载时显示的图像
width：视频播放器的宽度
height：视频播放器高度
controls：显示视频控件
autoplay：自动播放
loop：循环播放
muted：静音
preload：规定是否预加载音频，如果设置了 autoplay 属性，则忽略该属性。

auto：当页面加载后载入整个音频
metadata：当页面加载后只载入元数据
none：当页面加载后不载入音频

<video controls poster="img/nokia.jpg" width="800" height="500">
    <source src="media/nokia.mp4" type="video/mp4">
</video>

表格

table定义表格

<table></table>

常用属性：

align：用于设定表格的对齐方式
bgcolor：用于设定表格的背景颜色。
border：用于设定表格边框的宽度
width：用于规定表格的宽度。

tr定义表格的行

<table>
	<tr></tr>
</table>

标签用于定义表格的行,包含一个或多个th或td元素。

常用属性:

align：用于设定表格中行的内容对齐方式。
bgcolor：用于设定表格中行的背景颜色。

th定义表格的表头

内部的文本通常呈现为居中加粗文本。Html表格中有两种类型的单元格：

表头单元格th:包含表头信息。
标准单元格td:包含数据。
两种单元格的属性一致

td定义表格的列

align:用于设定单元格内容的对齐方式。
bgcolor:用于设定单元格背景颜色。
height:用于设定单元格的高度。
width:用于设定单元格的宽度。
colspan:用于设定列合并
rowspan:用于设定行合并。

colspan 属性

colspan属性用在td或th标签中，用来指定单元格横向跨越的列数

在浏览器中将显示如下：

c c 软件架构书籍推荐 c/s架构的软件有哪些_常用属性

<table border="1" cellspacing="0" bordercolor="blue"
       style="border-collapse:collapse;">
    <tr>
        <td colspan="3">单元格1</td>
    </tr>
    <tr>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

上例中的单元格1，把colspan设为"3", 令所在单元格横跨了三列。如果我们将colspan设为"2"，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。

c c 软件架构书籍推荐 c/s架构的软件有哪些_常用属性_02

<table border="1" cellspacing="0" bordercolor="blue"
       style="border-collapse:collapse;">
    <tr>
        <td colspan="2">单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格4</td>
    </tr>
</table>

rowspan 属性

rowspan属性用在td或th标签中，用来指定单元格纵向跨越的行数

c c 软件架构书籍推荐 c/s架构的软件有哪些_常用属性_03

上例中的单元格1，其rowspan被设为"3"，这表示该单元格必须跨越三行（本身一行，加上另外两行），因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。

<table border="1" cellspacing="0" bordercolor="blue" 
       style="border-collapse:collapse;">
    <tr>
        <td rowspan="3">单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
    </tr>
</table>

caption定义表格标题

通常这个标题会被居中于表格之上。

thead定义表格的页眉

标签用于组合 HTML 表格的表头内容。
元素应该与和元素结合起来使用。

注意: 内部必须有标签。

tbody定义表格的主体

标签用于组合HTML表格的主体内容。

tfoot定义表格的页脚

标签用于组合HTML表格中的表注内容。

表单

form

form 标签代表一个表单，表单用于向服务器传输数据。

form 标签能够包含，可以是文本字段，复选框，单选框或提交按钮等。

还可以包含等。

name：用于定义表单的名称
action：用于规定提交表单时向何处发送表单数据。
method：用于规定提交的方式。一般取值 POST 或 GET。

POST与GET方式区别:

GET 方式只能传输少量数据,而 POST 可以携带大数据。
GET 方式提交时，数据会在地址栏上显示，安全性差。
POST 方式提交不会在地址栏上显示数据，更加安全。

input

标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。关于标签 type 属性值说明 :

text

定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

其它常用属性:

name：定义表单名称
value：定义标签值
size：定义输入字段的长度
maxlength：定义可输入最大字符个数
minlength：定义可输入最小字符个数

password

定义密码字段。该字段中的字符被掩码.

其它常用属性:

name：定义标签名称
value：定义标签值
size：定义输入字段的长度
maxlength：定义可输入最大字符个数
minlength：定义可输入最小字符个数

radio

定义单选按钮。

其它常用属性:

name：定义标签名称

注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样

value：定义标签值
checked：定义该标签默认被选中。

checkbox

定义复选框。

常用属性:

name：定义标签名称.注意，一组的checkbox它们的name值应该是一样的。
value：定义标签值
checked：定义该标签默认被选中。

button

定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

常用属性:

name：定义标签名称
value：按钮显示名称

hidden

定义隐藏的输入字段。

常用属性:

name：定义标签名称
value：定义标签值

file

定义输入字段和 "浏览"按钮，供文件上传。

常用属性:

name：定义标签名称

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

常用属性:

name：定义标签名称
value：按钮显示名称

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

常用属性:

name：定义标签名称
value：按钮显示名称

image

定义图像形式的提交按钮。

这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。

常用属性:

name：定义标签名称
src：定义作为提交按钮显示的图像的url
alt：定义作用图像的替代文本。

select

用于定义一个下拉列表

常用属性:

name：定义下拉列表的名称
size：定义下拉列表中可见选项的数目
multiple：定义可选择多个选项

option

用于定义下拉列表中的选项。

常用属性:

value：定义送往服务器的选项值
selected：定义选项为选中状态。

textarea

用于定义一个多行文本输入控件(多行文本框,文本域)

常用属性:

name：定义多行文本框名称
cols：定义多行文本框可见宽度
rows：定义多行文本框可见行数

button

定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

常用属性:

name：定义标签名称
value：按钮显示名称

hidden

定义隐藏的输入字段。

常用属性:

name：定义标签名称
value：定义标签值

file

定义输入字段和 "浏览"按钮，供文件上传。

常用属性:

name：定义标签名称

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

常用属性:

name：定义标签名称
value：按钮显示名称

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

常用属性:

name：定义标签名称
value：按钮显示名称

image

定义图像形式的提交按钮。

这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。

常用属性:

name：定义标签名称
src：定义作为提交按钮显示的图像的url
alt：定义作用图像的替代文本。

select

用于定义一个下拉列表

常用属性:

name：定义下拉列表的名称
size：定义下拉列表中可见选项的数目
multiple：定义可选择多个选项

option

用于定义下拉列表中的选项。

常用属性:

value：定义送往服务器的选项值
selected：定义选项为选中状态。

textarea

用于定义一个多行文本输入控件(多行文本框,文本域)

常用属性:

name：定义多行文本框名称
cols：定义多行文本框可见宽度
rows：定义多行文本框可见行数

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：常见数据可视化图表类型及图形适用范围和实例说明数据可视化常用的图表

下一篇：python对医学图像进行去反光处理 python医学影像

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯