一、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的提交方式因为没有大小的限制,所以在服务器中设定拦截机制,避免服务器的负载加重,进行一定的控制的数据的提交(比如进行一百万的数据的提交,没有控制的话,将会导致服务器出现问题)