1、系统结构： 2
1.1 B/S架构：（以后主要走的方向是这个。）
Browser / Server （浏览器/服务器的交互形式。）
Browser支持哪些语言：HTML CSS JavaScript
写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西。）
前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）
S是服务器端Server，Server端的语言很多：C C++ Java python.....（我们主要是使用Java语言完成服务器端的开发）
1.1.1 B/S架构的系统有什么优点和缺点？ 2
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷
企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。
1.1.2 B/S架构的系统有哪些代表？ 2
京东
百度
天猫
....
1.2 C/S架构 2
Client / Server （客户端/服务器端的交互形式。）
1.2.1 优缺点 2
缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
1.2.2 常见的C/S架构的系统： 2
微信
支付宝
....
1.3 软件和环境准备 3
看b站老杜html 3
2、什么是HTML？怎么开发HTML？怎么运行HTML？ 4
* HTML: Hyper Text Markup Language （超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
超文本: 流媒体、图片、声音、视频....
* HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....
* 直接采用浏览器打开HTML文件就是运行。
3、HTML是谁制定的？ 3
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）
W3C制定了很多规范：
HTML/XML/http协议/https协议......
为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系
4. 第一个html程序 5
代码在 001我的第一个html页面.html
<!--一个html代码有根，有头，有体，并且每一部分都有自己相应的结尾-->
<!--
这是html的注释
加上以下代码的第一行（即<!doctype html>）就表示HTML5语法,去掉就表示html4.0
html不区分大小写，语法松散不严格
-->
<!doctype html>
<html><!--根-->
<head><!--头-->
<!--网页的标题，显示再网页的左上角-->
<title>网页的标题</title>
</head>
<body><!--体-->
网页的主题内容~欢迎学习HTML！
</body>
</html> <!--这句写不写都可以，也不区分大小写-->5. 基本标签 6
段落标记：
段落标记：<p></p>
标题字：
<!--标题字：时html预留的格式，和word中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
换行 <br> ,<br>标签是一个独目标记
水平线（横线） <hr> 也是独目标记
预留格式 <pre></pre>
<del>删除字</del>
<ins>插入字</ins>
<i>斜体字</i>
右上角加字: 例如 10<sup>2</sup>
右下角加字：例如 10<sub>m</sub>
字体标签 ：<font><?font> 例如 <font color="red" size="50"></font>
代码在 002html基本标签
<!--基本标签 6-->
<!doctype html>
<html>
<head>
<title>HTML的基本标签</title>
</head>
<body>
<!--段落标记 <p></p>-->
<p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
<!--标题字：时html预留的格式，和word中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<!--换行 <br> ,<br>标签是一个独目标记-->
hello,world!
hello<br>world!
<!--水平线（横线）也是独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color = "red" width="50%"> <!-- 还可以设置颜色，宽度-->
<hr color = 'green' width=30%> <!--语法很松散的，怎么写都行-->
<!--预留格式-->
<pre>
for(int i=0;i<10;i++){
System.out.println(i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup> <!--右上角加字-->
10<sub>m</sub> <!--右下角加字-->
<font color="red" size="50">字体标签</font>
</body>
</html>6. 实体符号 7
实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号
空格
大于号 >
小于号 <
代码在 003实体符号
<!--实体符号 7-->
<!doctype html>
<html>
<head>
<title> 实体符号 </title>
</head>
<body>
b<a>c <br><!--当我想在网页上显示b<a>c 时，由于<>冲突会被错误解析 <br>时换行-->
<!-- 实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号 -->
b<a>c <br>
<!--空格 -->
abc def
</body>
</html>7. 表格 8
<table></table>代表表格 <tr></tr> 代表行 <td></td>代表单元格
border="1px" 设置表格的边框为1像素宽度。
width 宽度
height 高度
例如<table border="1px" width="300px" height="150px">
<!--如果width写百分比形式，则是按照页面等比例缩放--><table border="1px" width="60%" height="150px">
代码在 004 表格
<!--表格 8-->
<!doctype html>
<html>
<head>
<title> 表格 </title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br> <!--换行-->
<center><h1>员工信息列表</h1></center> <!--这里插入标题一形式的一句话-->
<hr> <!--横线-->
<!--解释：<table></table>代表表格 <tr></tr> 代表行 <td></td>代表单元格-->
<!--
border="1px" 设置表格的边框为1像素宽度。
width 宽度
height 高度
<table border="1px" width="300px" height="150px">
-->
<!--画一个三行三列的表格-->
<table align="center" border="1px" width="60%" height="150px"> <!--如果width写百分比形式，则是按照页面等比例缩放-->
<!--一行三列-->
<tr align="center"> <!--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>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
<body>
</html>8. 单元格合并 9-10
注意事项：
1、row合并的时候，删除“下面的”单元格
合并用rowspan ,然后删除下面的单元格 例如我们合并cf单元格，就需要删除f单元格，再c出写rowspan="2"
2、col合并的时候，对删除哪个没有要求。
col合并的时候，对删除哪个没有要求 例如 合并de 我们删除e单元格
3. th标签也是单元格标签，比td标签多的是自动居中和字体加粗
代码在005 表格-单元格合并
<!--单元格合并 9-10 -->
<!doctype html>
<html>
<head>
<title> 单元格合并以及th标签 </title>
</head>
<body>
<table border="1px" width="50%">
<tr>
<!--
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
-->
<!--th标签也是单元格标签，比td标签多的是自动居中和字体加粗-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<!--注意事项：
1、row合并的时候，删除“下面的”单元格
2、col合并的时候，对删除哪个没有要求。
-->
<!--合并用rowspan ,然后删除下面的单元格 例如我们合并cf单元格，就需要删除f单元格，再c出写rowspan="2"-->
<td rowspan="2">c</td>
</tr>
<tr>
<!--col合并的时候，对删除哪个没有要求 例如 合并de 我们删除e单元格-->
<td colspan="2">d</td>
<!--
<td>e</td>
-->
<!--删除f单元格
<td>f</td>
这里我们注释掉相当于删除了-->
</tr>
</table>
</body>
</html>9. thead tbody tfoot 11
thead tbody tfoot 再table中不是必须的只是这样做便于后期的JS代码编写
解释thead tbody tfoot 这三个主要是分割作用没有什么作用 只是为了方便
代码在006 HTML的表格-thead tbody tfoot
<!--thead tbody tfoot 11-->
<!doctype html>
<html>
<head>
<title> thead tbody tfoot 再table中不是必须的只是这样做便于后期的JS代码编写 </title>
</head>
<body>
<table border="1px" width="50%">
<!--解释thead tbody tfoot 这三个主要是分割作用没有什么作用 只是为了方便-->
<thead><!--头-->
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<tbody><!--身体-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
<tfoot><!--脚-->
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</tfoot>
</table>
</body>
</html>
