今日内容
- web概念概述
- HTML
web概念概述
JavaWeb：
* 使用Java语言开发基于互联网的项目
软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，迅雷...
* 优点：
（i）用户体验好
* 缺点：
（i） 开发、安装，部署，维护 麻烦
-
B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
(i) 开发、安装，部署，维护 简单
* 缺点：
(i). 如果应用过大，用户的体验可能会受到影响
(ii) 对硬件要求过高- B/S架构详解
- 资源分类：
- 静态资源：
- 使用静态网页开发技术发布的资源。
- 特点：
- 所有用户访问，得到的结果是一样的。
- 如：文本，图片，音频、视频, HTML,CSS,JavaScript
- 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
- 动态资源：
- 静态资源：
- 资源分类：
- B/S架构详解
- 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
我们要学习动态资源，必须先学习静态资源！
HTML
快速入门：
* 语法：
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签：有开始标签和结束标签。如 <html> </html>
2. 自闭和标签：开始标签和结束标签在一起。如
-
标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a> -
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
-
html的标签不区分大小写，但是建议使用小写。
图片标签
<body>
<img src="./image/banner_1.jpg" width="1000" height="400" align="left"/>
<img src="../image/banner_1.jpg" width="500" height="400" align="right"/>
<\body>
列表标签
<ol>有序，<ul>无序
<body>
早上起床
<ol type="1">
<li>睁眼</li>
<li>刷牙</li>
<li>洗脸</li>
</ol>
晚上睡觉
<ul>
<li>睁眼</li>
<li>刷牙</li>
<li>洗脸</li>
</ul>
</body>
image.png
链接标签
<body>
<a href="https://www.jianshu.com/u/529191774ab4" target="_blank">点击这里</a><br>
<a href="https://www.jianshu.com/u/529191774ab4" target="_self">点点点</a><br>
<a href="mailto:1090656181@qq.com" target="_self">发送邮箱</a><br>
<a href="https://www.jianshu.com/u/529191774ab4" target="_blank"><img src="image/jiangxuan_2.jpg"></a><br>
</body>
image.png
表格标签
<table border="1" width="1000" cellspacing="0" align="center" bgcolor="#f5f5dc">
<caption>学生信息表</caption>
</thead>
<tbody>
<tr >
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr bgcolor="red" align="center" >
<td>1</td>
<td>程泽琪</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#adff2f" align="center">
<td>2</td>
<td>于松江</td>
<td>男</td>
</tr>
</tfoot>
</table>
image.png
表单标签
<form action="#" method="get">
<label for="username">用户名</label>：<input type="test" name="username" id="username" placeholder="输入用户名"><br>
<label for="password">密码</label>：<input type="test" name="password" id="password" placeholder="输入密码"><br>
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
兴趣： <input type="checkbox" name="interest" value="shop">逛街
<input type="checkbox" name="interest" value="buy">买东西
<input type="checkbox" name="interest" value="eat">吃东西<br>
图片：<input type="file" name="picture" value="图片"><br>
取色器：<input type="color"><br>
生日：<input type="datetime-local"><br>
邮箱：<input type="email"><br>
住址：<select>
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select><br>
自我描述：<textarea rows="5",col="20"></textarea><br>
<input type="submit" value="登陆"><input type="button" value="登陆"><br>
<input type="image" src="image/logo.jpg"><br>
</form>
image.png
网友评论