Web概念概述
JavaWeb:
使用Java语言开发基于互联网项目
软件的架构：
C/S架构：
客户端，服务器端
1. 在用户本地有一个客户端程序，在远程有一个服务器端程序。
2.QQ,WeChat,3D游戏
优点：
用户体验感非常好。
缺点：
开发成本高，安装复杂，部署麻烦，维护麻烦
B/S架构：
基于浏览器开发的互联网项目，浏览器网址（域名）,服务器端
1.只需要一个浏览器即可，用户通过不同的域名（网址），客户可以访问到不同的服务器端程序
优点：
1.开发成本低，安装简单，部署轻松，维护简单
缺点：
1.如果应用过大，加载延迟性过高
2.对服务器硬件要求较高.
资源分类：
1.静态资源：
使用静态网页开发技术发布的资源，不发生发改变的资源
如：文本信息，图片信息，音频信息，视频信息，HTML ,CSS ,JavaScript
如果用户请求的是静态资源，那么服务器就会直接将静态资源发送给浏览器，浏览器中收到的服务器端发送的静态资源，浏览器直接加载，在浏览器内部内置了一个解析引擎。可以直接展示静态资源给用户。
2.动态资源：
使用动态网页开发技术发布的资源。浏览器要在浏览器上发生变化的。
特点：
1.所有的用户访问服务器端程序，服务器端返回给用户可能呈现的是不同画面。
比如：淘宝，京东，等第三方平台。
2.用到的动态的网页技术；jsp/Servlet,php,asp...
如果用户请求服务器端的资源是动态资源，那么服务器端程序会首先把动态的资源转换成静态资源，然后再把转换后的静态资源发给浏览器客户端。
静态资源：
HTML:展示页面的内容，可以搭建一些基础页面。
CSS：用于构建页面的风格或者样式，进行页面优化
JavaScript： 脚本，有用户交互的一些动作，如点击动作，让页面有一些动态的效果。
HTML：
概念：
Hyper Text Markup Language 超文本标记语言；
语法格式：<>
超文本：
超文本是用超链接的方法，将各种不同空间的文本信息或者其他格式数据组织在一起的网状文本。
标记语言：
1.由标签构成的语言--->格式：<标签名称> 如:<a>,<img>,<ul>,<ol>,<table>等
2.标记语言不把它归为编程语言。
快速入门：
语法：
1.html文件的扩展名是.html或者.htm
2.标签一般分为两类：<a></a> <img></img>
单标签：<img> <hr> <br><input><meta>
双标签：<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a> <script><center>
3.标签可以嵌套：
需要正确的嵌套：
如：
错误：<a><span></a></span>你中有我，我中有你
正确：<a><span></span></a>
开始标签：如<a>
结束标签：如</a>4.在开始标签中可以定义属性，属性是有键值对组成的，但需要双引号（单引号）引起来
如：<a href = "baidu.com"></a>
5.html标签不区分大小写，一般建议使用小写。
基础标签:
- html
- title
- head
- body
- meta
- footer
- DOCTYPE
- <!--...-->
-
<!DOCTYPE html><!-- ctrl+shift+/ 注释快捷键 html注释 定义文档类型为HTML类型的 --> <html><!--页面标签的根标签 --> <head><!-- 头部标签 控制性元素 在该标签定义的内容一般都是不显示的,除了title --> <meta charset="UTF-8"><!--定义关于HTML 文档的元信息. charset字符设置 防止乱码 --> <title>标签</title><!-- 整个页面文件的标题 --> </head> <body><!--页面的主题标签 存放一些页面的显示元素 --> 你好,菜鸡 </body> </html>文本系列标签:
-
h1~h6
-
br
-
p
-
hr
-
b
-
i
-
font
图片标签：
-
img
超链接标签
-
a
表格标签
-
table
-
tr
-
td
-
th
-
caption
-
thead
-
tbody
-
tfoot
<!-- 文本系列标签 -->
<!-- 标题标签 从h1到h6字体大小递减,加粗加黑 -->
<h1>
<b>静夜思</b>
</h1>
<h2>
<i>床前明月光</i>
</h2>
<h3>
<strong>疑是地上霜</strong>
</h3>
<hr>
<h4>举头望明月</h4>
<h5>低头思故乡</h5>
<br>
<br>
<!--换行标签 -->
<h6>李白</h6>
<!--段落标记 p 双标签使用 -->
<p>基础课程部分可以详细学一下，有了基础后续的课程内容其实就</p>
<p>是配合逻辑来理解就没问题了。千万不要只看不做， 做的时候尽量自己想能不能扩展一下，
否则学完还是课件的东西，企业也不会用你这些东西； 没有产生价值，所以还是要灵活地学习、灵活地用来解决问题。</p>
<!-- 水平分割线 -->
<hr weigh="300px" align="left" size="3px" color="red">
<!-- 加黑和斜体 -->
<b><i>final</i></b>
<br />
<!-- 字体标签font -->
<font size="30px" face="宋体" color="green">Jfinal</font>
<!-- img图片标签
相对路径:
相对于当前项目的根路径 ./image/1.jpg
./: 代表当前文件的目录
./image/1.jpg
../: 代表上一级目录
../image/2.jpg
-->
<img src="" alt="">
<!--有序无序列表 -->
<ol type="I">
<!-- 列表序号类型 -->
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ol>
<ul type="circle">
<!-- 列表表示类型空心圆 -->
<li>002</li>
<li>003</li>
<li>005</li>
<li>006</li>
<li>007</li>
</ul>
<!--链接标签a herf还可以指定请求服务器的请求路径-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>
<br>
<!--块级标签 行级标签
块级标签:默认占满一行,大多是都是可以设置宽与高
行级标签:只占所包含的文本信息范围,大多数不能设置宽与高.
-->
<span>Jfinal</span>
<div>Jfinal</div>
<!-- 表格标签table
tr td th caption thead tfoot tbody
cellspacing:单元格之间的空白宽度
bgcolor :单元格背景色
align: 规定表格相对周围元素的对齐方式
colspan 属性设置跨列
rowspan 属性设置跨行
-->
<table border="10%" cellspacing="0" cellpadding width="500px"
bgcolor="yellow" align="center">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>单位</th>
<th>职务</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td rowspan="2">7</td>
<td>8</td>
</tr>
<tr>
<td colspan="2">90</td>
<td>6</td>
</tr>
</table>
内联框架标签
-
iframe
iframe标签元素会创建包含另外一个文档的内联框架(行内框架) name属性：指定ifram标签的名称，如果a标签中的target属性值是其name属性值，当你点击a标签的时候，对应的超链接内容就会出现在iframe中 src属性:指的是iframe中要显示的内容的链接 frameborder属性：一般情况下取值为0，不显示边框，取值为1显示边框 scrolling属性：取值为yes--滚动，取值为no--不滚动，auto-->自动 width属性：表示框架的宽度 height属性：表示框架的高度
表单标签 form表单
一般用于向服务器提交的时候将form表单中的数据进行提交。
action属性：表示请求的路径,通常我们指定为请求服务器的路径，表单提交服务器具体的URL
method属性：表示请求的方式，delete、put、get、post、trace....通常情况下我们一般使用get或者post方式
默认的请求方式是get请求方式，一般会将请求的数据追加在请求路径上
如：.../search?q=QQ&qs=n&form=QBRE&sp=-1&pq=qq&sc=8-2&sk=&cvid=FF6D29DEBCBB4C3190308AE563D5978D
数据以这种格式进行提交。多个数据之间&符号进行连接，请求的资源路径长度是有所限制的，所以大多数情况下我们能够使用post请求就使用它
post请求：一般请求的参数数据不会展示在请求路径上，而且请求中携带数据长度没有限制。
-
input标签
用来获取用户输入的信息
-
type属性：属性规定要显示的 <input> 元素的类型。 不同的属性显示不同的样式
-
text：文本框，输入文本信息
-
password：密码框
-
radio：互斥单选按钮
-
checkbox：复选按钮，可以重复选
-
submit：提交按钮，将表单中的数据提交给服务器
-
file：上传文件按钮
-
image：图片提交按钮，通过src设置图片
-
reset：重置按钮
-
hidden：隐藏按钮，hidden中的数据也会发送给服务器，浏览器页面中不会显示hidden中的信息，一般用于发送用户的id信息
-
button：普通的按钮，一般需要结合js一块使用
-
-
-
name属性：表单发送数据提交给服务器的时候，通过name属性来实现的，
-
value属性：设置input框中的默认值
-
checked属性：一般用于单选按钮或者复选按钮被选中
-
readonly属性：是否只读
-
disabled属性：是否可用
-
size属性：大小，设置文本框的大小
-
placeholder属性： 占位符属性，通常用于文本框的占位符，提示用户输入信息类别。
<!--内联框架标签 iframe
iframe标签元素会创建包含另外一个文档的内联框架(行内框架)
name属性:指定iframe标签的名称,如果a标签中的target属性值是其name属性,
当你点击a标签的时候,对应的超链接内容就会出现在iframe里面.
src属性:指的是iframe中要显示的内容的链接
frameborder属性:一般取值为0,不显示边框,取值为1显示边框
scrolling属性:取值为yes--滚动 取值为no---不滚动 auto--自动
width属性:表示框架的宽度
height属性:表示框架的高度.
-->
<a href="http://www.baidu.com" target="box">百度</a>
<iframe src=" " name="box" frameborder="0" width="100%" height="100%"></iframe>
<!-- 表单标签format
一般用于向服务器提交的时候将表单中的数据进行提交.
action属性：表示请求服务器的路径，通常指定为请求服务器的路径，表单提交服务器的具体URL
method属性:表示请求的方式， delete，put ,get,post,trace....通常情况下一般使用get和post方式
默认的请求方式是get请求方式，一般会将请求 的数据追加在请求路径上；
多个数据之间用&符号进行链接，请求的资源路径长度是有所限制的，所以大多数情况下我们能够使用post请求就使用它
post请求：一般请求的参数数据不会展示在请求路径上，而且请求中携带的数据长度没有限制
input标签：用来获取用户输入的信息。
type属性：属性规定要显示<input>元素的类型。不同的属性显示不同的样式
text:文本框，输入文本信息
password:密码框
radio:互斥单选框 按钮
checkbox:复选框 按钮
submit:提交按钮 将表单中的数据提交给服务器
file:上传文件按钮
image:图片提交按钮 通过src设置图片
reset:重置按钮
hidden：隐藏按钮,hidden中的数据也会发送给服务器，浏览器页面中不会显示hidden中的字段信息，一般用于发送用户的id信息
button:普通的按钮，一般需要结合js一块使用
name属性：表单发送数据提交给服务器的时候，通过name属性来实现的。
value属性：设置input框中的默认值
checked属性：一般用于单选按钮或者是复选按钮被选中。
readonly属性：是否只读
disabled属性：是否可用
size属性：大小，设置文本框的大小。
placeholder属性：占位符属性，通常用于文本框的占位符，提示用户输入信息的类别。
-->
<!--准备一个表单 -->
<form action="" method="post" >
<p>用户名:</p><input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password">
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女
<input type="checkbox" name="habby" checked="checked">篮球
<input type="checkbox" name="habby">足球
<input type="checkbox" name="habby">排球
<input type="file" name="fileup">文件上传
<input type="button" name="button" value="按钮">
<input type="submit" value="提交" >
<select name="select" >
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
