一、C/S架构与B/S架构
对于一个软件系统，用户是通过用户界面来完成与软件系统的交互的（用户是通过用户界面来使用软件系统的），根据软件不同的架构模式，软件系统界面设计的实现技术是不同的：
- C/S架构
- B/S架构
1.1 C/S架构
C/S Client-Server 基于客户端和服务器的架构模式
1.2 B/S架构
B/S Browser-Server 基于浏览器和服务器的架构模式
1.3 不同架构的前端技术栈
1.3.1 C/S
Java语言可以进行C/S架构开发，JDK提供的AWT（abstract window toolkit）可以进行窗体开发
- awt
- swing
1.3.2 B/S
Java语言主要应用于web系统的开发，web系统就是基于B/S架构，其系统界面都是通过网页实现的
- HTML 超文本标记语言 网页的结构
- CSS 层叠样式表 网页的样式
- JavaScript 网页脚本语言 网页的行为
1.3.3 移动应用
Java语言还可以用于进行Android和HarmonyOS应用开发
- AndroidUI xml及组件
- HarmonyOSUI xml及组件
二、HTML简介
2.1 什么是网页？
网页 —— 可以在网络中传输、通过浏览器解析并显示视图的页面
问题：一个文件通过网络传递给浏览器之后，浏览器是如何显示视图的呢？
- 存储在服务器上的
页面文件中编写的是浏览器可以识别的代码
- 当浏览器请求服务器时，服务器将这个
写有浏览器可以识别的代码的页面文件通过网络传递给浏览器 - 浏览器接收到文件后，不会将代码显示出来，而是对代码进行解析，显示出对应的视图
网页设计：就是在网页文件中编写HTML代码(标签)，通过浏览器可以显示特定的用户界面
2.2 HTML是什么？
HTML （Hyper Text Markup Language）超文本标记语言。以特定的标签在浏览器中呈现不同的视图
标记（标签）：就是由<>和特定的单词组成的符号，可以被浏览器识别并显示对应的视图
超文本：使用文本标签显示图片、视频、声音等非文本数据
2.3 HTML书写规范
HTML标签需要写在一个
网页文件中，网页文件的规则：
- 网页文件是一个后缀名为
.html或者.htm的文件- 网页文件有一个基本结构：
- 在网页文件第一行通过声明当前文档遵循的HTML规范
- 在HTML规范声明之后，必须有一对根标签（根标签：当前网页中其他的标签都在根标签的里面）
- 在根标签中，有两对子标签和
- head标签：用于定义当前网页文档的标题、字符集等属性信息
- body标签：用于定义当前网页显示的主体内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>我的第一个网页</title> </head> <body bgcolor="red"> <input type="password"/> </body> </html>
- 标签：
- 双标签（围堵标签）
- 单标签
- 标签属性：在双标签前一个标签中、单标签的标签名后可以添加键值对，用于设置当前标签的特性
- HTML标签是不区分大小写的，为了便于可读，建议统一写成小写
HTML版本规范
前端规范— w3c
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 提出了基于HTML4更多的语法规则，让HTML编写规范更严谨
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
<!DOCTYPE html>
2.4 前端开发工具
为了便于前端开发，有很多的前端开发工具，可以为我们进行网页设计提供代码自动补全、代码错误提示、项目文件管理等功能，常见的工具：
- webStorm
- vsCode
- subline
HBuilder–HBuilderX
HBuilderX的使用
- 下载：www.dcloud.io
- 解压：解压到存放软件的目录（免安装）
- 运行：
- 首次运行，需要对HBuilderX进行用户使用习惯设置（主题）
- 第一次关闭HBuilderX的时候，会提示创建桌面快捷方式
- 创建web项目
- 创建网页文件：选择项目—右键—新建—HTML文件
创建的HTML文件默认会给出规范的网页文件结构 - 运行网页文件：
三、HTML常用标签
网页就是使用HTML标签构成的文档，在浏览器显示视图页面。HTML什么样的标签表示什么样的是呢？
网页界面：显示数据、输入数据
- 为用户提供一个界面，显示用户想要看到的数据（文本、图片、声音、视频）
- 为用户提供一个界面，可以输入数据（发表博客：输入文本、选择图片、点击按钮）
如何使用HTML标签在网页中显示数据和提供输入视图呢？
根据HTML标签的作用，我们将HTML标签分为以下：
- 显示标签：就是将图片、文本、声音、视频通过网页呈现给用户
- 表单标签：就是给用户提供输入框、按钮、单选按钮、复选框、文本域等视图供其输入数据
- 布局标签：对网页中的内容进行布局/排版
- 功能标签：能够提供特定用户功能的标签
- 框架标签：搭建页面框架（输入布局标签）
3.1 显示标签
将文本、图片、声音和视频显示到网页
3.1.1 文本
<!--显示文本--> <!-- font标签：color属性设置颜色，fase属性设置字体，size属性设置大小 --> <font color="red" face="华文行楷" size="7">千锋教育</font> <font color="blue" face="微软雅黑" size="4">Java涛哥</font> <!-- H5不推荐使用font标签，显示文本推荐使用label标签 --> <!-- label标签没有字体属性，但是可以通过style属性值设置字体颜色、大小、样式 --> <label style="color:green;font-size:100px;font-family:楷体">网页设计</label>
3.1.2 图片
<!-- 显示图片 --- img标签： src属性用于指定显示的图片的路径，可以是网络图片路径，也可以本地图片路径 (本地图片：先在项目中创建一个存放图片的目录imgs，再将要显示的图片拷贝进来 ) width、hegiht属性,设置图片的宽度、高度 ,如果两个属性同时设置可能会改变图片的比例 可以只设置其中一个属性，另一个属性会等比缩放 alt属性，用于指定图片无法加载时的替换文本 --> <img src="http://www.qfedu.com/images/new_logo.png"/> <img src="imgs/logo.jpg" height="200" alt="千锋LOGO"/>
3.1.3 声音和视频
<!--audio标签 调用浏览器内置的音频播放器（默认是隐藏的） src属性指定音频的路径（网络路径、本地路径） controls属性表示显示播放器（此属性不需要属性值） autoplay属性表示音乐自动播放（考虑浏览器兼容性） --> <audio src="meida/麻雀.mp3" controls autoplay></audio> <!--video标签 调用浏览器内置的视频播放器（默认是隐藏的） src属性指定视频的路径（网络路径、本地路径） controls属性表示显示播放器的控制条（此属性不需要属性值） autoplay属性表示视频自动播放（考虑浏览器兼容性） width、height属性设置视频播放器的尺寸 --> <video src="meida/Java学科宣传片.mp4" controls autoplay width="400"></video>
3.2 表单标签
用户提供输入视图供其输入数据：
3.2.1 input标签
input标签可以用来显示多种表单输入视图效果，input标签有一个type属性，不同的属性表示不同的视图
- 文本输入框：<input type="text"/><br/> - 密码输入框：<input type="password"/><br/> - 单选按钮：<input type="radio"/><br/> - 复选框：<input type="checkbox"/><br/> - 文件选择框：<input type="file"/><br/> <!-- 普通按钮默认是没有文本的，通过value属性指定按钮文本 --> -普通按钮：<input type="button" value="点我呀！"/><br/> -重置按钮：<input type="reset"/><br/> -提交按钮：<input type="submit"/><br/> <!-- 图片按钮从功能讲和提交按钮一致，需要通过src属性指定按钮图片 --> -图片按钮：<input type="image" src="imgs/btn.bmp"/><br/> <!-- 以下input的type是HTML5新增的 ,要考虑浏览器的兼容性（浏览器是否支持）--> <!-- type=number ，表示次输入框只能输入数字，min设置最小值，max设置最大值--> - 数字输入框：<input type="number" min="10" max="20"/><br/> - 日期输入框：<input type="date"/><br/> - 颜色选择框：<input type="color"/><br/> - 邮箱输入框：<input type="email"/><br/> - 电话输入框：<input type="tel"/><br/> - 搜索输入框：<input type="search"/><br/>
单选按钮和复选框：
<hr/> <!-- 单选按钮使用注意事项： 1.如果多个单选按钮是同一个主题的选项，则需要提供name属性，且那么属性值必须相同（排他性） 2.单选按钮必须提供value属性，value属性值会在当前单选按钮被选中时提交 3.单选按钮可以通过添加checked属性使其默认被选中，如果有多个单选按钮添加checked属性，则选中最后一个 --> 性别：<input type="radio" name="gender" value="M" checked/>男 <input type="radio" name="gender" value="F"/>女 <input type="radio" name="gender" value="N" />不详 <hr/> <!-- 复选框注意事项（与单选按钮一致） --> 爱好：<input type="checkbox" name="hobby" value="篮球" checked/>篮球 <input type="checkbox" name="hobby" value="足球"/>足球 <input type="checkbox" name="hobby" value="羽毛球" checked/>羽毛球 <input type="checkbox" name="hobby" value="溜溜球"/>溜溜球
