系统结构
- B/S结构
- Browser/Server（浏览器/服务器的交互形式）
- Browser支持哪些语言：HTML CSS JavaScript
- 写HTML CSS JavaScript代码的这些人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西）
- 前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）
- S是服务器端Server，Server端的语言很多：C C++ Java python…（我们主要是使用Java语言完成服务器端的设计）
- B/S架构的系统有什么优点和缺点？
- 优点： 升级方便，只升级服务器端代码即可。维护成本低。
- 缺点：速度慢、体验不好、界面不炫酷
- 企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。
- B/S结构的系统有哪些代表？
- C/S结构
- Client/Server（客户端/服务器端的交互形式）
- 缺点：升级麻烦，维护成本较高。
- 优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
- 常见的C/S架构系统：
HTML概述
- HTML：Hyper Text Markup Language（超文本标记语言）
- 由大量的标签组成，每一个标签都有开始标签和结束标签。
- 超文本：流媒体、图片、声音、视频…
- HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm\。HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…
- 直接采用浏览器打开HTML文件就是运行。
- HTML是谁制定的？
- W3C：世界万维网联盟
- W3C指定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
- HTML规范目前最高的版本是HTML5.0，简称H5。
- 我们这里学习HTML4.0（主要是学习HTML的基础用法。）
- W3C指定了很多规范：
- 为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
- w3school：先出现的，和W3C没有关系
- w3cschool：后出现的，和W3C没有关系。
001- 我的第一个HTML页面
<!doctype html>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容，欢迎学习HTML
</body>
002- HTML的基本标签
<html>
<head>
<title>HTML的基本标签</title>
</head>
<body>
<p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
hello
world!
hello <br>world!
<hr>
<hr color="red" width = "50%">
<hr color='greeb' width = 30%>
<pre>
for(int i = 0; i <= 10; i ++){
System.out.println("i = " + i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>2</sub>
<font color="red" size="50">字体标签</font>
</body>
</html>
003- HTML的实体符号
<html>
<head>
<title>实体符号</title>
</head>
<body>
b<a>c
b<a>c
abc def<br>
a bc
</body>
</html>
004- HTML的表格
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br><br><br><br><br>
<center><h1>员工信息列表</h1></center>
<hr>
<table align="center" border="1px" width="60%" height="150px">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td align="center">z</td>
</tr>
</table>
</body>
</html>
005- HTML的单元格合并
<html>
<head>
<title>表格单元格的合并，以及th标签</title>
</head>
<body>
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">g</td>
</tr>
</table>
</body>
</html>
006- HTML的表格-thead tbody tfoot
<html>
<head>
<meta charset="GBK">
<title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">g</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tfoot>
</table>
</body>
</html>
007- HTML的背景颜色和背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色和背景图片</title>
</head>
<body bgcolor="green" background="img/baidu.png">
</body>
</html>
008- 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<br>
<img src="img/baidu.png" width="100px" title="我是百度图片哦" alt="图片找不哦"/>
<img src="img/baidu.png" width="100px" title="我是百度图片哦" alt="图片找不哦"></img>
<br><br<br>
<img src="img/baidu.png"/>
</body>
</html>
009- 超链接或者热链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接 热链接</title>
</head>
<body>
<a href="https://baidu.com">百度</a>
<a href="https://baidu.com">百度新闻</a>
<br><br>
<a href="007-HTML的背景颜色和背景图片.html">007</a>
<a href="https://hao123.com/">
<img src="img/hao123.png" width="100px"/>
</a>
<a href="https://hao123.com/" target="_blank">
<img src="img/hao123.png" width="100px"/>
</a>
</body>
</html>
010- 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol type="a">
<li>水果
<ol type="I">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol type="1">
<li>西红柿</li>
</ol>
</li>
<li>甜点</li>
</ol>
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
011- 表单form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单form</title>
</head>
<body>
<form action="http://192.168.111.3:8080/oa/save">
<input type="submit" value="登录"/>
<input type="button" value="设置按钮上显示的文本"/>
</form>
<a href="http://baidu.com">百度</a>
<form action="https://baidu.com">
<input type="text"/>
<input type="submit" value="百度"/>
</form>
<form action="http://localhost:8080/jd/login">
用户名<input type="text"/><br>
密码<input type="password"/><br>
<input type="submit" value="登录"/>
</form>
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</td>
</tr>
</table>
</form>
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
<form></form>
</body>
</html>
012- 用户注册的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册的表单</title>
</head>
<body>
<form action="http://localhost:8080/jd/register" method="post">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="userpwd"/>
<br>
确认密码
<input type="password"/>
<br>
性别
<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="0" checked/>女
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke" checked/>抽烟
<input type="checkbox" name="interest" value="drink"/>喝酒
<input type="checkbox" name="interest" value="fireHair"/>烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" >本科</option>
<option value="ss" selected>硕士</option>
</select>
<br>
简介
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
</form>
<a href="http://localhost:8080/os/save?username=zhangsan&password=111">提交</a>
</body>
</html>
013- 下拉列表支持多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表支持多选</title>
</head>
<body>
<select multiple="multiple" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
</body>
</html>
014- file控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file控件 hidden控件</title>
</head>
<body>
<input type="file"/>
<form action="http://localhost:8080/oa/save">
<input type="hidden" name="userid" value="111"/>
用户代码<input type="text" name="usercode"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
015- readonly和disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>readonly disabled</title>
</head>
<body>
<form action="http://localhost:8080/oa/save">
用户代码<input type="text" name="usercode" value="110" readonly/>
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled/>
<br>
<input type="submit" value="提交数据"/>
</form>
</body>
</html>
016- input控件的maxlength属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input控件的maxlength属性</title>
</head>
<body>
<input type="text" maxlength="3"/>
</body>
</html>
017- HTML中元素的id属性
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML中元素的id属性</title>
</head>
<body id="mybody">
<form id="myform">
<input type="text" id="username" name="username"/>
<input type="password" id="userpwd" name="userpwd"/>
</form>
</body>
</html>
018- HTML中的div和span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中的div和sapn</title>
</head>
<body>
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<span id="span1">我是一个SPAN</span>
<span id="span2">我是一个SPAN</span>
<div id="div3">
<div>
<div>test</div>
</div>
</div>
</body>
</html>
扫一扫
2181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
