概述
软件架构
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的标准编写的
标签
-
标签也称为元素;
-
结构:
-
- 成对出现:<标签名>标签内容</标签名>,eg:
这是一个段落
; - 自结束标签:<标签名 />,eg:
换行,
分割线;
- 成对出现:<标签名>标签内容</标签名>,eg:
-
标签不区分大小写,建议使用小写;
-
大部分标签可以嵌套;
属性
-
通过属性可以设置标签的效果;
-
属性需要定义在开始标签中或自结束标签中;
-
- <标签名 属性名=“属性值” 属性名=“属性值”></标签名>
- <标签名 属性名=“属性值” 属性名=“属性值” />
例子:
<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定义表格的行
标签用于定义表格的行,包含一个或多个th或td元素。<table> <tr></tr> </table>
常用属性:
-
align:用于设定表格中行的内容对齐方式。
-
bgcolor:用于设定表格中行的背景颜色。
th定义表格的表头
内部的文本通常呈现为居中加粗文本。Html表格中有两种类型的单元格:
-
表头单元格th:包含表头信息。
-
标准单元格td:包含数据。
-
两种单元格的属性一致
td定义表格的列
-
align:用于设定单元格内容的对齐方式。
-
bgcolor:用于设定单元格背景颜色。
-
height:用于设定单元格的高度。
-
width:用于设定单元格的宽度。
-
colspan:用于设定列合并
-
rowspan:用于设定行合并。
colspan 属性
colspan属性用在td或th标签中,用来指定单元格横向跨越的列数
在浏览器中将显示如下:
<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",则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数。
<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标签中,用来指定单元格纵向跨越的行数
上例中的单元格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:定义多行文本框可见行数