一、软件的架构
1.C/S（客户端/服务器）：一般我们使用的软件都是C/S架构，比如系统中的软件QQ、360安全卫士、office等。C表示客户端（通常为图形化界面），用户是通过客户端来使用软件；S表示服务器，服务器负责处理软件的业务逻辑。其特点如下：
（1）软件使用前必须得安装
（2）软件更新时，客户端和服务器端需要同时更新
（3）C/S架构的软件不能跨平台使用（比如说windows平台的QQ在Linux平台上是不能使用的）
（4）C/S架构的软件客户端和服务器端通信采用的是自有协议，相对来说比较安全。
2.B/S（浏览器/服务器）：B/S本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端。B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上，这样就降低了对客户端的要求，我们的计算机只需要安装一个浏览器即可使用。比如：京东、淘宝、新浪微博等。其特点如下：
（1）软件不需要安装，直接使用浏览器访问指定的网址即可。
（2）软件更新的时候，客户端不需要更新
（3）软件可以跨平台使用。只要系统中有浏览器就可以使用
（4）B/S架构的软件，浏览器和服务器端之间通信采用的是通用的HTTP协议，相对来说不安全。
3.根据W3C标准，一个网页主要由三部分组成：结构、表现、行为。
（1）结构：HTML用于描述页面的结构
（2）表现：CSS用于控制页面中元素的样式
（3）行为：JavaScript用于响应用户操作
4.万维网联盟（W3C）：World Wide Web Consortium。W3C专门为了定义网页相关的标准而成立。W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。
5.WHATWG:网页超文本应用技术工作小组，是一个以推动网络HTML5标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
二、HTML简介
1.HTML的概念
HTML是超文本标记语言，即Hyper Text Markup language的简称，超文本标记语言是没有编译过程的语言。它不是编程语言，是使用一套标记标签来描述网页的。其特点是简易性、可扩展性、与平台无关、通用性。
2.HTML的规范
HTML是一个弱势语言，不区分大小写，页面的后缀名是html或htm，HTML5之后要求小写。
3.HTML基本结构
（1）html文档基本结构
<!DOCTYPE html><!-- 文档引用的规范，HTML5因为是"妥协式"的规范，所以不需要引用严格意义上的DTD规范 -->
<html><!-- html文档的根元素标签,成对出现,代表了一个html文档的开始和结束 -->
<head><!-- html文档的头部标签,成对出现 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Insert title here</title>
</head>
<body><!-- html文档的主体部分标签,成对出现,网页的大部分内容放在body标签内 -->
<p>Test Page</p>
</body>
</html>（2）head标签内包含的主要元素
title：该元素用于定义文档标题
meta：该元素用于HTML页面的元数据
script：该元素用于包含javascript脚本
link：该元素用于链接外部CSS样式
style：该元素用于定义内部CSS样式
说明①：title标签一般写在head标签内，title标签它是直接能在浏览器窗口中看到的，title标签极其重要，title标签是用户以搜索引擎最看重的标签，它能帮助用户和搜索引擎判断当前页面的主旨和中心思想，对搜索引擎来说，title标签中出现的关键词基本上就是该网页最想要表达的内容，因此我们在做SEO搜索引擎优化的时候，写title标签的时候应当将当前页面最核心的关键词写进title标签中，使你的自然排名提高，从而让你的网站能够达到更多的浏览量。
说明②：meta标签用于定义页面元信息，也就是一些键值对，主要有以下三个属性：
http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确的处理网页内容。
name：指定元信息名称，该名称可以随意指定。
content：指定元信息的值。
说明③：HTML的每个标签都具有属性，属性分私有属性和公有属性。HTML中表示长度的单位是像素，而且只有一种。
4.HTML的常用标签
（1）常用的块级标签
显示为“块”状，浏览器会在其前后显示折行，一个块级标签独自占据一行，常用的块级元素包括：p(段落标签)，h1-h6（标题标签），div（该标签一半当做结构化块状元素使用，一般最常见的用途是对网页进行整体分块布局，即当容器来使用），ul（无序列表标签，默认情况下，列表的列表项使用圆点进行标记），ol（有序列表标签，默认情况下，列表的列表项使用数字进行标记），hr（水平线标签）等。
（2）常用的行级标签
按行逐一显示，前后不会自动换行，也就是说多个行级标签可以在一行上面显示。
（3）超链接标签
<a href="链接地址" target="目标窗口" >链接文本或图片</a>
href：指定超链接所关联的另一个资源
target：指定框架集中的哪一个框架来转载另一个资源，该属性可以是_self、_blank、_top、_parent四个值，分别代表 自身、新窗口、顶层框架、父框架。
（4）图像标签（自结束标签）
<img src="图片地址" alt="提示文字" />
（5）span标签
一般块级标签不要组合在span标签内，span标签主要是对需要突显的内容或强调的内容进行显示，div标签是块级标签，所以其内容既可以放块级标签也可以放行级标签，类似于body标签，而span标签主要强调的是文本和行级标签。
（6）常用的特殊符号
空格：
大于：>
小于：<
双引号："
&号：&
版权号：©
单引号：' ()：() =：=
（7）文本格式化元素
<b>：定义粗体文本
<i>：定义斜体文本
<em>：定义强调文本，实际效果与斜体文本差不多
<strong>：定义粗体文本，与<b>的作用基本相同
<sub>：定义下标文本
<sup>：定义上标文本
<bdo>：定义wenben文本显示方向，内有dir属性，只能取值ltr或rtl
<u>：下划线 <s>：中划线（一般用在价格，折后价）
5.表格标签
table：用于定义表格
tr：定义表格行，该元素只能包含<td>或<th>两种元素
th：定义表格页眉的单元格
td：定义单元格，包含两个主要属性：
colspan：指定单元格横跨多少列
rowspan：指定单元格纵跨的行数
caption：用于定义表格标题
tbody：定义表格的主体
thead：定义表格的头
tfoot：定义表格的脚
注：tbody、thead、tfoot写与不写的区别：当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示，但是用tbody标签的话，边下载边显示。如果不写，那么浏览器解析表格内容的时候是从上到下解析，如果写了，那么顺序任意，浏览器解析的时候还是按照tbody、thead、tfoot的顺序显示内容。
6.表单标签
（1）form标签
<form action="表单提交地址" method="提交方式">
。。。文本框、按钮等表单元素
</form>
（2）form标签的常用属性
action：指定表单提交后交由服务器上的哪个处理程序进行处理
enctype：用于指定表单数据的编码方式
application/x-www-form-urlencode：默认的编码方式，将表单控件中的值处理成URL编码方式
multipart/form-data：以二进制流的方式来处理表单数据
text/plain：当表单的action的属性值为mailto:URL的形式时使用
method：指定向服务器提交的方式，一般为get和post两种方式。
get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址中看到请求参数的名和值，且get请求传递的数据比较小，一般不能大于2KB.
post方式的请求传递的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制。post方式的请求参数是放在HTML的HEADER中传输的，用户在地址栏中看不到请求参数，安全性相对较高。
（3）常见的表单元素
客户端向服务器传输的数据，这个数据必须要通过载体进行传递，这个载体一般都是表单元素。表单元素不能直接传递到服务器端，它必须通过表单才能传递过去，所以一般表单与其它表单控件元素结合使用，我们可以认为表单是表单元素的一个容器。
单行文本框：<input type="text" />
密码输入框：<input type="password" />
隐藏域：<input type="hidden" />
单选框：<input type="radio" />
复选框：<input type="checkbox" />
图像域：<input type="image" /> 可以指定width和height属性
文件上传域：<input type="file" />
提交、重置、普通按钮：指定input属性为submit、reset、button即可
（4）input元素常用的几个属性
checked：设置单选框、复选框初始状态是否处于选中状态，只有type属性为checkbox或radio时才可指定（值：checked）
disabled：设置首次加载时禁用此元素。当type属性为hidden时不能指定该属性（值：disabled）
maxlength：该属性是一个数字，设置文本框中所允许输入的最大字符数
readonly：指定该文本框内的值不允许被修改（值：readonly）
size：该属性是一个数字，用于指定该控件的长度，当type属性的值为hidden时不能指定该属性
src：指定图像域所显示的图像的url，只有当type属性为image时才可以指定该属性
7.textarea标签
该标签用于定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
（1）常用属性如下：
cols：规定文本区域内可见的宽度。
rows：规定文本区域内可见的行数。
disabled：规定禁用文本区域。（值：disabled）
maxlength：规定文本区域允许的最大字符数。
placeholder：规定一个简短的提示，描述文本区域期望的输入值。
readonly：规定文本区域为只读。（值：readonly）
