1.web开发
1.1 CS架构和BS架构
-
CS模式 C/S 就是Client/Server 的缩写，是客户端和服务器架构。早期的软件系统多数是C/S结构的设计标准, 如QQ，微型，网易云音乐
-
BS模式 B/S 就是Browser/Server的缩写，是浏览器和服务器架构。
C/S结构下，客户机子必须要下载专门的软件 才可以享受到服务端的服务。而B/S结构下，客户机上只要安装一个浏览器（Browser）就可以在任何地方进行操作而不用安装任何专门的软件，只要能上网的电脑就能享受到服务器提供的服务，客户端能实现零安装、零维护。
1.2 网页的构成
W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：
-
结构（Structure）
-
表现（Presentation）
-
行为（Behavior）
结构由HTML体现，表现由CSS体现, 行为由JS体现
前端基础总共分为三部分：html、css和js。
1.3 http协议
1.3.1 简介
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于万维网（WWW:World Wide Web ）服务器与本地浏览器之间传输超文本的传送协议
1.3.2 特性
- 基于TCP/IP协议
http协议是基于TCP/IP协议之上的应用层协议
- 基于请求-响应模式
HTTP协议规定,请求从客户端发出,最后服务器端响应该请求并 返回。换句话说,肯定是先从客户端开始建立通信的,服务器端在没有 接收到请求之前不会发送响应
- 无状态保存
HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议 自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个 级别,协议对于发送过的请求或响应都不做持久化处理。
- 无连接
无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
1.3.3 请求与响应
用于HTTP协议交互的信息被为HTTP报文。请求端(客户端)的HTTP报文 做请求报文,响应端(服务器端)的 做响应报文。HTTP报文本身是由多行数据构成的字文本。
- 请求报文
- GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditBook?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的请求体中. - GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制
- 响应报文
响应状态码：状态码的职责是当客户端向服务器端发送请求时, 返回的请求结果。借助状态码,用户可以知道服务器端是正常理了请求,还是出现了 错误
2.HTML概述
HTML，即超文本标记语言（HyperText Markup Language ]），超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。
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文档
2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML文档，在它们之间是文档的头部<head>和主体<body>。
3、<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
4、<title></title>定义网页标题，在浏览器标题栏显示。
5、<body></body>之间的文本是可见的网页主体内容
6、<meta charset="UTF-8"> 声明编码方式用utf8
4.HTML标签语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
1、HTML标签是由尖括号包围的特定关键词
2、标签分为闭合和自闭合两种标签
3、HTML不区分大小写
4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性
5、标签可以嵌套,但是不可以交叉嵌套
5.HTML标签
分类：
-
块级标签/行级标签
-
封闭标签/半封闭标签
5.1 标题标签
一共6级，从大到小, 独占一行
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
5.2 段落标签
独占一行
<p>锄禾日当午</p> <p>汗滴禾下土</p> <p>谁知盘中餐</p> <p>粒粒皆辛苦</p>
5.3 换行标签
<br/>
<p>锄禾日当午</p>
<p>汗滴禾下土</p><br/>
<p>谁知盘中餐</p>
<p>粒粒皆辛苦</p>
5.4文本格式化标签
HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素,但我们更常用css来控制样式
<b>定义粗体文本</b><br /> <strong>定义粗体文本方式2</strong><br /> <em>定义斜体字</em><br /> <i>定义斜体字方式2</i><br /> <del>定义删除文本</del><br />
5.5 特殊符号
  : 空格
5.6 div和span标签
<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现. <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现 这两个元素是专门为定义CSS样式而生的。
5.7 超连接标签
点击链接可以从一张页面跳转到另一张页面
<a href=""></a>
| 属性 | 值 | 描述 |
|---|---|---|
| href | 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如：F:\html\index.html ] | 规定链接的跳转目标 |
| title | 百度 | 链接的提示信息 |
| target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过 |
5.8 图片标签
它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。
<img src="" alt="">
/*
src属性：
指定图像的URL地址，是英文source的简写，表示引入资源。
src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*/
5.9 列表标签
# 无序列表
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
# 有序列表
<ol start="100">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
5.10 表格标签
在HTML中使用table来定义表格
<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自标签即可知道一个表格有多少列，多少的单元格了。
5.10.1 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 | 规定单元格合并的列数 |
5.10.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、% | 规定单元格之间的空隙。 |
5.11 表单标签
表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.
<h3>用户注册</h3>
<form action="http://127.0.0.1:8800" method="get">
<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>
form属性
| 属性 | 值 | 描述 |
|---|---|---|
| action | 访问服务器地址 | 服务器端表单处理程序的URL地址 |
| method | post、get[默认值] | 表单数据的提交方法 |
| target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
| enctype | application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |