一.WEB概述
B/S: Browser-Server 浏览器服务器模型
优点: 不需要下载客户端软件 使用浏览器就可以直接使用 软件升级操作是在服务器端进行 我们只需要刷新页面就可以看到升级后的效果
缺点: 浏览器的能力是有限的 页面的展示能力仍然是很差的 由于页面中所有的资源都需要从服务器获取 所以对网速的依赖很高
C/S: Client-Server 客户端服务器模型
优点: 客户端可以任意的设计 画面的展示能力就可以很强 由于大量的资源已经被保存在了客户端 所以和服务器交互的就是一些参数 对网速的依赖低
缺点: 第一次使用时需要下载安装包 一旦软件需要升级 所有的客户端都需要进行升级操作 在有些场景下是不能被接受的 
二.HTML概述
1.HTML是什么?
超文本标记语言 最基础的网页语言 W3C
HTML不是一门编程语言 而是一门标记语言
HTML是用标记(标签/元素)来描述网页内容的
HTML是文档的一种
2.HTML的基本的结构
<!DOCTYPE HTML> -- 文档声明 用来指定当前页面所遵循的HTML的版本
<html>
<head> -- 存放页面的基本属性信息的 优先被浏览器加载
</head>
<body> -- 存放页面中可视的网页内容
</body>
</html>
<title> 指定网页标题
<meta charset="utf-8" /> 指定浏览器打开当前页面时使用哪一个码表 这个编码要和文件保存时所使用的编码保持一致 这样才不会出现乱码问题!!
3.HTML的语法细节
HTML是通过标签来组织整个网页内容 标签分为开始标签和结束标签 如果标签没有要修饰的内容也没有子标签 可以合并成自闭标签
HTML中的标签都可以具有属性 属性与属性之间用空格隔开 属性与属性值用 = 连接 属性值用单引号或者是双引号引起来 或者是不用引号 都可以 但是一般情况下都会使用双引号引起来
<meta charset="utf-8" />
<br/>
<hr/>
在HTML中多个连续的空白字符(制表符 换行 空格) 会默认合并成一个空格来显示
如果真的想要写一个空格 可以用转义字符来代替 --
注释的格式: <!-- html的注释 -->
三.HTML标签
1.font标签 -- 用来规定字体的颜色 样式和大小
color 字体颜色
face 字体样式
size 字体大小
2.标题标签
h1~h6
属性:
align 规定文本的排列方式
left right center justify
3.转义字符
< <
> >
" "
' '
& &
空格4.列表标签
(1)定义列表
<dl> 定义一个定义列表
<dt> 定义列表中的标题
<dd> 定义列表中的项
(2)有序列表
<ol> 定义一个有序列表
<li> 定义列表中的条目
属性:
type 规定列表条目的符号类型
start 规定列表条目符号起始值
(3)无序列表
<ul> 定义一个无序列表
<li> 定义列表中的条目
属性:
type 规定列表条目的符号类型
disc square circle
**!!5.图像标签**
<img src="图像的url地址" alt=""/>
src 图像的url地址
alt 替代图像显示的文本
border 边框
width 宽度
height 高度
6.map
为图像指定可点击区域的超链接
<map id="map1" name="map1">
<area shape="circle" coords="645,410,70" href="./img/2.gif"/>
</map>
area属性
shape 指定区域的形状
coords 指定区域的坐标
href 指定点击区域后跳转的资源的url地址
7.超链接标签
<a> -- 锚
(1) 通过href属性, 创建指向另外一个文档的超链接
(2) 通过name或id属性, 在文档内部创建书签
<a href="http://www.tmooc.cn" target="_blank">百度一下, 你就不知道!!</a><br/>
属性:
target 指定以何种方式打开超链接
_self 在当前页面打开超链接
_blank 在新窗口打开超链接
href 指定超链接的url地址
8.表格标签
<table> 定义一个表格
<tr> 定义表格中的行
<td> 定义表格中的单元格
<th> 定义表头
<caption> 定义表格标题
table属性:
align 定义表格的排列方式
border 边框
cellpadding 设置边框与单元格内容之间的距离
cellspacing 设置单元格之间的距离
bgcolor 背景颜色
width 宽度
tr属性:
align 定义表格行内容的排列方式
bgcolor 背景颜色
td/th属性:
align 定义单元格内容的排列方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 规定单元格横跨的列数
rowspan 规定单元格竖跨的行数
thead tfoot tbody
这三个标签要么一起使用 要么都别使用 并且使用的顺序必须是thead tfoot tbody
如果表格中没有使用这三个标签 那么表格中所有的内容将会包含在一个隐藏的tbody里面
9.框架标签
frameset 定义一个框架集
frame 定义框架集中的一个窗口
!!!框架标签必须要放在head标签和body标签之间
frameset属性:
cols: 定义框架集中列的数目和尺寸
rows: 定义框架集中行的数目和尺寸
frame属性:
src 指定窗口文档url
frameborder 设置是否有边框
noresize 设置框架边框不可调整大小
name 设置框架的名字
iframe: 创建包含另外一个文档的内联框架（即行内框架）。
属性:
src
width
height
iframe标签一般不要写成自闭标签 在标签内部可以书写提示文本 当浏览器不支持此标签时 文本将会显示 如果支持的话 文本将不会显示
!!!10.表单标签
(1) 浏览器向服务器发送数据的方式, 有两种
a) 利用超链接向服务器发送数据
其实就是在超链接的后面拼接上要发送的请求参数, 超链接和请求参数之间用 ? 分割, 多个请求参数之间用&分割 请求参数可以是同名的
b) 利用表单向服务器发送数据
其实是利用<form>标签和一些表单项标签, 在表单项中用户可以输入数据, 通过提交表单可以把表单项中的参数发送给服务器
(2)form标签
action(必选): 指定表单提交的目的地地址
method(可选): 指定以何种方式来提交表单
http协议规定了7种提交方式向服务器发送数据, 其中5种都不常用 只用GET和POST提交
只有使用表单并且明确的指定提交方式为POST时(method="POST") 才是POST提交 其他的提交都是GET提交
**GET提交和POST提交方式的区别:**
主要区别在于请求参数传输过程的不相同
GET提交:
请求参数会拼接在地址栏后进行传输
请求参数显示在地址栏上 不安全
通过地址栏发送数据 数据量有限 不能超过1kb(4kb)
POST提交:
请求参数会通过底层流进行传输
请求参数不会显示在地址栏上 相对更安全一些
通过流进行传输没有数据量的限制
(3) 表单项标签
表单中可以有多个表单项, 每个要被提交的表单项都必须要有name属性才可以被提交 如果没有name属性 在表单提交时将不会被提交!!
!!input标签
!!!type属性:
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示
单选框 radio 如：性别选择。 name属性相同的单选框则为一个组 一个组单选框只能选择其中一个 必须通过value属性来设置表单项提交的值
复选框 checkbox 如：兴趣选择。name属性相同的复选框则为一个组 必须通过value属性来设置表单项提交的值
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 本身没有什么特殊的效果 可以利用js为按钮设置具体的功能效果
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
图像 image 它可以替代submit按钮。
!!!name属性: 表单中可以有多个表单项, 每个要被提交的表单项都必须要有name属性才可以被提交 如果没有name属性 在表单提交时将不会被提交!!
value属性: 为输入项指定默认值
size属性: 定义输入框的宽度
readonly: 设置输入框为只读 在表单提交时仍然会被提交
disabled: 禁用输入框 在表单提交时不会被提交
checked: 设置单选框或者复选框选项默认被选中
textarea标签
cols 宽度
rows 行数
name
readonly
disabled
select标签 提供下拉选择的功能
option 下拉菜单中的选项
select属性:
name
size
multiple
readonly
disabled
option属性:
value
seleced
fieldset 组合框 可以将表单中的元素进行分组
legend 可以为分组设置标题
**其他标签
marquee
pre 可以将文本内容按在代码区的样子显示在页面上
<b> 加粗
<i> 斜体
<u> 下划线
<s> 删除线
<em> 强调
<strong> 更加强烈的强调
<sub> 下标
<sup> 上标