前端：我们网站的页面，包括网站的样式、图片、视频等一切用户可见的内容都是前端的内容。
后端：处理网站的所有数据来源，比如我们之前从数据库中查询数据，而我们查询的数据经过处理最终会被展示到前端，而用于处理前端数据的工作就是由后端来完成的。
相当于，前端仅仅是一层皮，它直接决定了整个网站的美观程度，我们可以自由地编排页面的布局，甚至可以编写好看的特效；而灵魂则是后端，如何处理用户的交互、如何处理数据查询是后端的职责所在，我们前面学习的都是后端内容，而Java也是一门专注于后端开发的语言。
对于前端开发我们需要学习一些新的内容，只有了解了它们，我们才能编写出美观的页面。
学习前端的目的只是为了让同学们了解前后端的交互方式，在进行后端开发时思路能够更加清晰，有关前端的完整内容学习，可以浏览其他前端知识教程。
我们在最开始讲解网络编程时，提到了浏览器访问服务器，实际上浏览器访问服务器就是一种B/S结构（ Browser/Server，浏览器/服务器模式 ），而我们使用Java代码编写的客户端连接服务器就是一种C/S结构（ Client/Server架构，即客户端/服务器架构 ）。
HTML页面我们前面学习了XML语言，它是一种标记语言，我们需要以成对标签的格式进行填写，但是它是专用于保存数据，而不是展示数据，而HTML恰恰相反，它专用于展示数据，由于我们前面已经学习过XML语言了，HTML语言和XML很相似，所以我们学习起来会很快。
第一个HTML页面我们前面知道，通过浏览器可以直接浏览XML文件，而浏览器一般是用于浏览HTML文件的，以HTML语言编写的内容，会被浏览器识别为一个页面，并根据我们编写的内容，将对应的组件添加到浏览器窗口中。
我们一般使用Chrome、Safari、Microsoft Edge等浏览器进行测试，IE浏览器已经彻底淘汰了！
比如我们可以创建一个Html文件来看看浏览器会如何识别，使用IDEA也能编写HTML页面，我们在IDEA中新建一个Web模块，进入之后我们发现，项目中没有任何内容，我们右键新建一个HTML文件，选择HTML5文件，并命名为index，创建后出现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>我们发现，它和XML基本长得一样，并且还自带了一些标签，那么现在我们通过浏览器来浏览这个HTML文件（这里推荐使用内置预览，不然还得来回切换窗口）
我们发现现在什么东西都没有，但是在浏览器的标签位置显示了网页的名称为Title，并且显示了一个IDEA的图标作为网页图标。
现在我们稍微进行一些修改：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lbw的直播间</title> </head> <body> 现在全体起立 </body> </html>再次打开浏览器，我们发现页面中出现了我们输入的文本内容，并且标题也改为了我们自定义的标题。
我们可以在设置->工具->Web浏览器和预览中将重新加载页面规则改为变更时，这样我们使用内置浏览器或是外部浏览器，可以自动更新我们编写的内容。
我们还可以在页面中添加一个图片，随便将一张图片放到html文件的同级目录下，命名为image.xxx，其中xxx是后缀名称，不要修改，我们在body节点中添加以下内容：
<img src="http://www.likecs.com/image.xxx" alt="人的生命是有限的，可是为人民服务是无限的。"> <!-- 注意xxx替换成对应的后缀名称 -->我们发现，我们的页面中居然能够显示我们添加的图片内容。因此，我们只需要编写对应的标签，浏览器就能够自动识别为对应的组件，并将其展示到我们的浏览器窗口中。
我们再来看看插入一个B站的视频，很简单，只需要到对应的视频下方，找到分享，我们看到有一个嵌入代码：
<iframe src="http://player.bilibili.com/" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>每一个页面都是通过这些标签来编写的，几乎所有的网站都是使用HTML编写页面。
HTML语法规范一个HTML文件中一般分为两个部分：
头部：一般包含页面的标题、页面的图标、还有页面的一些设置，也可以在这里导入css、js等内容。
主体：整个页面所有需要显示的内容全部在主体编写。
我们首先来看头部，我们之前使用的HTML文件中头部包含了这些内容：
<meta charset="UTF-8"> <title>lbw的直播间</title>首先meta标签用于定义页面的一些元信息，这里使用它来定义了一个字符集（编码格式），一般是UTF-8，下面的title标签就是页面的标题，会显示在浏览器的上方。
我们现在来给页面设置一个图标，图标一般可以在字节跳动的IconPark网站找到：https://iconpark.oceanengine.com/home，选择一个自己喜欢的图标下载即可。
将图标放入到项目目录中，并命名为icon.png，在HTML头部添加以下内容：
<link href="http://www.likecs.com/icon.png" type="image/x-icon" />link标签用于关联当前HTML页面与其他资源的关系，关系通过rel属性指定，这里使用的是icon表示这个文件是当前页面图标。
现在访问此页面，我们发现页面的图标已经变成我们指定的图标样式了。