一、WEB概述:
B/S: Browser-Server :
浏览器服务器模型WEBQQ 网页游戏
- 优点: 不需要下载客户端程序, 使用浏览器可以直接访问. 程序的升级操作是在服务器端进行的.
浏览器只需要刷新页面就可以看到升级后的效果
缺点: 浏览器具有一定的局限性, 页面的展示能力仍然是很差. 所有的页面数据都需要从服务器
实时的获取, 所以对网速的依赖很高
C/S: Client-Server
客户端服务器模型 QQ LOL
优点: 客户端可以任意的设计, 页面的展示能力就可以很强. 由于大量的资源都已经保存在了客
户端, 和服务器交互的仅仅是一些变化的数据, 所以对网速的依赖很低
缺点: 第一次使用时需要下载客户端程序, 一旦程序需要升级操作, 所有的客户端程序都需要升
级. 在有些场景中是不能被接受的.
web的三大方向：
1.互联网方向---.网站
2. cs架构软件-- 客户端和服务器端的交互
3. bs架构软件---网页版的应用
HTML是什么 ：
- HTML(Hyper Text Mark-up Language)超文本标记语言最基础的网页语言 W3C ○
- HTML不是一门编程语言而是一门标记语言
- HTML是用标记(标签/元素)来描述网页内容的
- HTML是文档的一种
- HTML是一种的文档，文档中的标签标记语言
- html的本质其实是一个文本文档，里面的标记语言被计算机进行了
特殊的处理，能够在打开文档的时候标记语言将会被浏览器进行标记的识别
文档进行一定的布局处理，在浏览器中展示出特殊文档的内容
HTML的结构:
- <!DOCTYPE HTML>用来指定当前页面所遵循的html的版本,版本的设置和声明
- head头部用来存放需要加载的资源，配置文件，由于浏览器的解释从上到下进行解释，所以靠前的资源是优先加载的。
- body标签部分用来存放页面的数据，是页面的可见范围的内容
- title标签用于指定html文档的名字
- <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用来指定浏览器用什么编码解析当前页面
- content="text/html;charset=UTF-8";用来指定文档的格式和文档的编码格式
-
HTML语法：
- html标签分为开始标签和结束标签,如果标签内没有修饰的内容, 开始标签和结束标签可以合并为一个自闭标签；自闭标签的出现就是标签体里面没有可以修饰的部分，设定为自闭单标签
- 单标签：<hr/> <br/>常见
- 标签通常都可以具有属性, 属性与属性值用"="连接, 属性的值可以用双引号、单引号引起来或者不用引号, 一般会用双引号引起来 如果不生效查看页面代码使用的是否为英文双引号
- html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
- 如果非要输入空格,可以用转义字符来替代
- 如果非要输入换行,可以用 <br/> 来代替
- 转义字符：常见的四种转义
< <
> >
" "
' '
空格
标签：
1. font标签：
属性：
color:三种表现形式: #十六进制，颜色名，三原色rgb(a,b,c)
size;字体的大小，范围 0 ~ 7 默认值是3
<font color="red" size="7">我是一个字体标签</font>
2. 拓展：
关于写不写引号的问题：如果是字符串类型的话就建议加引号（单双都可以），如果是数值类型的话可以不写引号，浏览器会保证解析，写高级的浏览器都可以进行解释，为避免低级的版本不兼容所以建议进行添加。
3.标题标签: <h1><h1/>
属性；
align:位置的控制，控制标题的位置
只有 h1---h6的范围 依次进行减小的范围 标签是只有六级，从大到小的展示 h1~h6展示
<h1 align="left">一级标签</h1>
<h2 align="right">二级标签</h2>
<h3 align="center">三级标签</h3>
<h4 align="justify">四级标签</h4>
<h5 align="left">五级标签</h5>
<h6 align="left">六级标签</h6>
<h7 align="left">七级标签</h7><br />
属性:
align:指定文本的排列，仅仅是文本的排列（文字，表格，段落）
属性值：
left:靠左
right:靠右
center:居中
justify:自适应
4. 列表标签 ul oi di (无序列表，有序列表 ，自定义列表)
属性：type
属性值：三种表现形式，默认是实心圆的方式
disc :实心圆 默认属性是实心的圆
square:实心正方形
circle:空心圆
<ul type="square">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
图片标签：图片一般没有位置的控制 <img/>
属性：
src:图片的路径源，相对路径或者绝对路径
alt:图片加载出不来的时候，用来代替图片的解释信息
width:控制图片的宽度 属性值默认单位为像素:px
height:控制图片的高度 属性值默认单位为像素:px
拓展：如果使用控制宽高的是其他值单位的话 % ---代表占用当前页面的比例值
超链接:文档中的超链接 <a><a/>标签进行获取文档或者网页间的跳转方式
属性：
href:将要跳转的目标的地址，跳转分为网页的内部跳转和网页的外部跳转
一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷
name: 指定锚的名字,作为定位标记的值一般是
target:属性值
_self：在当前窗口打开新的的页面
_blink；在新窗口打开新的页面 默认打开方式
使用标签标记进行网页内部的跳转：
1. 其原理不过是：在欲连结处做个记号（网页的任何地方都可以喔！），然后，连结时就寻这记号，就可以快速找到资料。很简单吧！，使用#进行位置的查询获取，通过name和id属性进行标记
2. 实现本页面的跳转： # 代表的是一个位置信息，一般在本页面中进行使用
3. name,id属性可用于创建在一个HTML文档书签标记。提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
4. <a name="tag"/> （做标记的地方） <a href="#tag">返回顶部</a>（实现标记的地方）
表格标签：table标签
td和th之间没有父子类的关系，tr只是用来控制在一行，里面没有进行嵌套的表格
tr td th 都是table的子元素：所以直接控制table可以控制子元素和父元素之间的关系
重要属性：
cellspacing:同一行中的单元格之间的空格距离 默认 1px
cellpadding:控制每个单元格的边框和单元格之间的内容的距离 默认1px
bgcolor:控制表格的整体的背景颜色
bordercolor：控制边框颜色
width:控制表格的宽度
align:控制表格在文档中的位置
background；表格的背景，可以使用图片作为背景
tr:表格中的行标签
重要属性：
align:控制行中的内容对齐方式
bgcolor:控制行中的背景颜色
td:行中的单元格标签
重要属性：
rowspan:竖直跨行数
colspan:可以横跨的列数
th:行中的头标签
capation:表示的是表格的标题，存在于 table的最顶部
<table border="10px" cellspacing="10px" cellpadding="5px"
background="./image/img/3.jpg" width="500px" align="center">
<caption>王者荣耀英雄排名榜</caption>
<tr bgcolor="red" align="center">
<th>上单</th>
<th>中单</th>
<th>下单</th>
</tr>
<tr bgcolor="white" align="right">
<td>程咬金</td>
<td><blink>露娜</blink></td>
<td>鲁班</td>
</tr>
<tr bgcolor="blue">
<td>程咬金</td>
<td>露娜</td>
<td>鲁班</td>
</tr>
</table>
Form表单：
1. 什么是表单：
浏览器向服务器发送数据的方式, 有两种：
1. 利用超链接向服务器发送数据--请求参数
在超链接的后面拼接上要发送的请求参数, 链接和请求参数之间用?分割, 参数名和参数值用= 连接, 多个参数之间用& 分割, 可以存在多个同名的参数
2. 利用表单向服务器发送数据
利用HTML中的<form>标签以及一些表单项标签, 用户可以输入数据, 通过提交表单发送数据给服务器
2. 表单标签: form
- 必须存在的属性:
action:指定表单发送的目标URL地址
- 可选的属性: method: 指定以何种方式发送表单 默认不写隐式表示 get属性
- http协议指定了7种提交方式, 其中5种使用的极少, 多数只用GET提交和POST提交。
- 只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST")才是POST提交，其他提交都是GET提交．
- GET提交和POST提交的区别：
- 主要区别体现在数据传输方式的不相同.
- GET提交:
- 请求参数会赋在地址栏后进行传输 1)
- 这种方式发送的数据量有限, 最大不超过1kb(或4kb)
- 数据显示在地址栏, 安全性差
- POST提交:
- 请求参数在底层流中传输 2)
- 这种方式发送的数据量无限制
- 地址栏上看不到数据, 比较安全
表单中项：
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它。
input：表单中的的属性框
属性框中的name属性：
name 属性：
- 用于对提交到服务器后对表单数据进行标识
- 用来区分和规定input元素
- 需要提交到服务器中的数据，就需要name属性进行标识
- value 属性用于给定默认值input元素的默认值，有些input元素根据默认值的来获取input元素的的具体值，比如单选框，多选框，没有指定value属性的话，提交默认是on,text,password等默认值是空串
1.text;文本域
2.password:密码框
3. radio；单选框 进行单项的选择 如性别选择 多个radio的name属性相同会被当作一组来使用 必须用value为选项指定提交的值，不指定name属性相同的话，不能辨别是同一组的单选框
4.checkbox:多选框 进行多项选择，爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用， 必须用value为选项指定提交的值，指定为一组多选框，name属性
5.hidden:隐藏框，用户看不到的隐藏框 如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中
6.submit:提交按钮，可以通过value属性指定按钮的的文字展示
7.reset:重置按钮，将表单的内容进行重置，回到初始化阶段，通过value属性指定按钮的的文字展示
4. button:普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的行为。可以用value属性,指定按钮显示的文字。button主要使用的js中进行行为的确定和做出相关的动作函数
5. file:文件上传项，提供选择文件进行上传的功能
6. image:利用一张图片替代提交按钮的功能, 不常用 <input type = "image" name = "..." src = "..."inclick ="document.foormName.submit()">
表单中的属性：
readonly属性 ：使当前输入项变为只读,不能修改,但是提交时仍会被提交
disabled 属性：使当前输入项不可用,不能修改值,也不会被提交
size属性:指定当前输入框的宽度，对输入框有效，对其他的单选啥的无效
checked属性 ：指定单选框/复选框被选中
<textarea> 文本域 ：
属性:rows 指定文本域的行数(高度)
cols 指定文本域的列数(宽度)
readonly 只读
disabled 禁用
<select> <option> 下拉列表：
select 提供下拉选择功能
option 下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
重要属性:·
name:下拉列表的名称
disabled:禁用下拉列表
其他属性：
size: 设置下拉选项中可见选项的个数--->设置下拉框中可以显示的个数，可以隐藏其他的下拉元素
multiple 是否支持多选
下拉列表中的属性解释：
name元素标识该下拉列表提交的参数标识
value:表示提交的标识的值，提交的值option 下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
form表单：
<form align="center" action="#" method="get">
登录：<input type="text" name="zhangsan" disabled="disabled" size="23" /><br />
密码：<input type="password" name="password"/><br/>
<!--name用来向浏览器进行提交数据-->
性别：<input type="radio" name='gender' value="男">男
<input type="radio" name="gender" value="女">女
<br/>
<!--根据name属性来进行确定一组属性的内容-->
爱好：<input type="checkbox" name="hobby" value="打篮球" size="23" />打篮球
<input type="checkbox" name="hobby" value="吃">吃
<input type="checkbox" name="hobby" value"喝">
喝
<br/>
<select name="city" size="10" multyple>
<!--name元素标识该下拉列表提交的参数标识
value:表示提交的标识的值，提交的值
option 下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
-->
<option value="江西">江西</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="浙江">浙江</option>
<option value="湖南">湖南</option>
<option value="江西">江西</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="浙江">浙江</option>
<option value="湖南">湖南</option>
</select>
<input type="image"/>
<br />
<input type="submit" value="提交表单">
<input type="submit" value="重置表单">
</form>
表单容易出现的问题：
提交的时候禁止访问的原因：
浏览器和服务器的底层时通过流来进行传输的，post的提交方式因为没有大小的限制，所以在服务器中设定拦截机制，避免服务器的负载加重，进行一定的控制的数据的提交（比如进行一百万的数据的提交，没有控制的话，将会导致服务器出现问题）
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
