对于一个软件系统,用户是通过用户界面来完成与软件系统的交互的(用户是通过用户界面来使用软件系统的),根据软件不同的架构模式,软件系统界面设计的实现技术是不同的:
- C/S架构
- B/S架构
C/S Client-Server 基于客户端和服务器的架构模式
B/S Browser-Server 基于浏览器和服务器的架构模式
Java语言可以进行C/S架构开发,JDK提供的AWT(abstract window toolkit)可以进行窗体开发
Java语言主要应用于web系统的开发,web系统就是基于B/S架构,其系统界面都是通过网页实现的
Java语言还可以用于进行Android和HarmonyOS应用开发
网页 —— 可以在网络中传输、通过浏览器解析并显示视图的页面
问题:一个文件通过网络传递给浏览器之后,浏览器是如何显示视图的呢?
页面文件
中编写的是浏览器可以识别的代码写有浏览器可以识别的代码的页面文件
通过网络传递给浏览器网页设计:就是在网页文件
中编写HTML代码(标签),通过浏览器可以显示特定的用户界面
HTML (Hyper Text Markup Language)超文本标记语言。以特定的标签在浏览器中呈现不同的视图
标记(标签):就是由
<>
和特定的单词组成的符号,可以被浏览器识别并显示对应的视图超文本:使用文本标签显示图片、视频、声音等非文本数据
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
XHTML 提出了基于HTML4更多的语法规则,让HTML编写规范更严谨
HTML5
为了便于前端开发,有很多的前端开发工具,可以为我们进行网页设计提供代码自动补全、代码错误提示、项目文件管理等功能,常见的工具:
HBuilder
–HBuilderX
HBuilderX的使用
下载:www.dcloud.io
解压:解压到存放软件的目录(免安装)
运行:
网页就是使用HTML标签构成的文档,在浏览器显示视图页面。HTML什么样的标签表示什么样的是呢?
网页界面:显示数据、输入数据
如何使用HTML标签在网页中显示数据和提供输入视图呢?
根据HTML标签的作用,我们将HTML标签分为以下:
- 显示标签:就是将图片、文本、声音、视频通过网页呈现给用户
- 表单标签:就是给用户提供输入框、按钮、单选按钮、复选框、文本域等视图供其输入数据
- 布局标签:对网页中的内容进行布局/排版
- 功能标签:能够提供特定用户功能的标签
- 框架标签:搭建页面框架(输入布局标签)
将文本、图片、声音和视频显示到网页
<font color="red" face="华文行楷" size="7">千锋教育font>
<font color="blue" face="微软雅黑" size="4">Java涛哥font>
<label style="color:green;font-size:100px;font-family:楷体">网页设计label>
<img src="http://www.qfedu.com/images/new_logo.png"/>
<img src="imgs/logo.jpg" height="200" alt="千锋LOGO"/>
<audio src="meida/麻雀.mp3" controls autoplay>audio>
<video src="meida/Java学科宣传片.mp4" controls autoplay width="400">video>
用户提供输入视图供其输入数据:
input标签可以用来显示多种表单输入视图效果,input标签有一个type属性,不同的属性表示不同的视图
- 文本输入框:
- 密码输入框:
- 单选按钮:
- 复选框:
- 文件选择框:
-普通按钮:
-重置按钮:
-提交按钮:
-图片按钮:
- 数字输入框:
- 日期输入框:
- 颜色选择框:
- 邮箱输入框:
- 电话输入框:
- 搜索输入框:
单选按钮和复选框:
<hr/>
性别:<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="溜溜球"/>溜溜球
下拉菜单(省、市、区选择)
<select multiple size="3">
<option value="BeiJing">北京option>
<option value="ShangHai">上海option>
<option value="GuangZhou">广州option>
<option value="ShenZhen">深圳option>
<option value="WuHan">武汉option>
select>
文本域、多行文本框
<textarea rows="5" cols="30">这是文本域的默认值textarea>
对于表单标签,他们有一些共有属性
id
属性,不仅是表单标签共有的属性,几乎所有的HTML标签都可以有这个属性,它表示此标签在当前网页文件中的唯一表示,便于我们定位标签进行操作;在一个网页中标签的ID属性值要保持唯一性。
name
属性,用于将数据提交(同步提交)到后端时,在后端接收数据。
required
属性,设置此输入框必须输入数据,否则不能提交。
<form>
<input type="text" required="required"/>
<input type="submit" />
form>
placeholder
属性,用于设置输入框空值提示信息。
readonly
属性,表示设置此输入框,只能显示数据,不能点击输入。
disabled
属性,设置输入组件禁用(输入框不能输入、按钮不能点击、下拉菜单不能选择)。
value
属性,表示当前输入框的值、下拉菜单选中的选项的值。
form标签,在页面中没有显示效果,它用于将用户在输入视图中输入的数据提交到后台
<form action="https://www.baidu.com" method="post" enctype="">
<input type="text" placeholder="请输入帐号" name="userName" value="123"/><br/>
<input type="password" placeholder="请输入密码" name="userPwd"/><br/>
<input type="reset" /><br/>
<input type="submit" value="登录"/>
form>
在HTML5规范中,提交按钮也可以写在form外面,但是要通过form属性指定表单id
<form id="form1">
<input type="text" placeholder="请输入帐号" name="userName" value="123"/><br/>
<input type="password" placeholder="请输入密码" name="userPwd"/><br/>
<input type="reset" /><br/>
form>
<input type="submit" value="登录1" form="form1" formaction="https://www.baidu.com" formmethod="get"/><br/>
<input type="submit" value="登录2" form="form1" formaction="http://www.qfedu.com" formmethod="post"/><br/>
用于对网页中的视图组件进行排版
h标签提供了默认的标题样式,HTML中提供了 h1~h6 用于表示6级标题
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
p标签: HTML可以将文档分割成多个段落
hr标签: 水平分割线
br标签:换行
<hr/>
<p>
枫桥夜泊<br/>
张继<br/>
月落乌啼霜满天,<br/>
江枫渔火对愁眠;<br/>
姑苏城外寒山寺,<br/>
夜半钟声到客船。<br/>
p>
<p>
静夜思<br/>
李白<br/>
床前明月光,<br/>
疑是地上霜;<br/>
举头望明月,<br/>
低头思故乡。<br/>
p>
将相关联的多行文本以列表的形式进行展示
1.有序列表
水龙头接水的步骤:
<ol type="i">
<li>放置水桶li>
<li>打开水龙头li>
<li>等待放水li>
<li>关闭水龙头li>
<li>提走水桶li>
ol>
2.无序列表
水果列表
<ul type="square">
<li>苹果li>
<li>菠萝li>
<li>西瓜li>
<li>火龙果li>
<li>香蕉li>
ul>
3.自定义列表
自定义列表
<dl>
<dt>分组1dt>
<dd>1-1dd>
<dd>1-2dd>
<dt>分组2dt>
<dd>2-1dd>
<dd>2-2dd>
dl>
在网页中显示一个表格,通过将页面的HTML元素存放在表格的不同单元格,以达到设置元素布局的效果
<table border="1" cellspacing="0" cellpadding="0" width="300" height="300" align="center" bgcolor="orange">
<tr height="50" bgcolor="aqua">
<td colspan="2">1-1td>
<td width="50" rowspan="2">1-3td>
tr>
<tr>
<td width="50" rowspan="2">2-1td>
<td valign="bottom" align="right">2-2td>
tr>
<tr height="50">
<td colspan="2">3-2td>
tr>
table>
区块元素(标签),在浏览器中进行显示的时候,通常会有换行 (例如:段落p、表格table…)
内联元素(标签),在浏览器中进行显示的时候,不会进行换行(例如:label img)
<div style=" width: 83px; height: 100px; border: 1px solid red; position: absolute; left: 0px; top:0px">
<img src="imgs/img01.png" height="100"/>
div>
<div style=" width: 83px; height: 100px; border: 1px solid green; position: absolute; left: 50px; top:50px">
<img src="imgs/img02.png" height="100"/>
div>
<div style=" width: 83px; height: 100px; border: 1px solid blue; position: absolute;left: 100px; top: 100px;">
<img src="imgs/img03.png" height="100"/>
div>
<fieldset style="width: 300px; height: 100px;">
<legend>管理员登录legend>
<p>帐号:<input type="text"/>p>
<p>密码:<input type="password"/>p>
fieldset>
功能标签,在网页中没有对应的视图效果,但是可以实现特定的功能
- form表单,用于提交用户输入数据的
- a超链接
参考3.2.5
超链接 激活文本可点击,当点击这个特定的文本之后,链接到对应的地址
学Java开发就来<a href="http://www.qfedu.com">千锋教育a> <br/>
<a href="https://www.baidu.com/s?wd=张韶涵"><img src="imgs/img01.png" height="50"/>a>
锚点 用于当前页面不同位置的跳转
<hr/>
<a href="#aaa">div1a>
<a href="#bbb">div2a>
<a href="#ccc">div3a>
<a href="#ddd">div4a>
<hr/>
<a id="aaa">a>
<div style="height: 1000px; background-color: aquamarine;">div1div>
<a id="bbb">a>
<div style="height: 1000px; background-color: lawngreen;">div2div>
<a id="ccc">a>
<div style="height: 1000px; background-color: palevioletred;">div3div>
<a id="ddd">a>
<div style="height: 1000px; background-color: peru;">div4div>
框架标签,实现页面的模块化
- frameset frame 不建议使用
- iframe
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<table width="100%" height="880" cellpadding="0" cellspacing="0" >
<tr height="80" bgcolor="lightblue">
<td align="center">
<label style="font-size: 40px;">QQMaillabel>
td>
<td align="right" valign="top">
二狗,欢迎你![<a href="#">退出a>]
td>
tr>
<tr>
<td width="200" bgcolor="lightgray" valign="top">
<ul>
<li><a href="page02-表单标签.html" target="mainFrame">新邮件a>li>
<li><a href="https://www.taobao.com" target="mainFrame">淘宝a>li>
<li><a href="http://www.qfedu.com" target="mainFrame">千锋a>li>
ul>
td>
<td>
<iframe name="mainFrame" width="100%" height="800" frameborder="0">iframe>
td>
tr>
table>
body>
html>
<b>粗体b>
<i>斜体i>
<u>下划线u>
<del>删除线del>
<strong>加重语气strong>
<em>强调em>
<small>小号文本small>
10<sup>上标sup>
4<sub>下标sub>
<code>System.out.println("计算机代码!");code>
<kbd>Ctrl+Lkbd>
<var>程序变量var>
<pre>预定义pre>
<address>湖北省武汉市江夏区address>
跟着涛哥一起学习<abbr title="Java DataBase Conectivity">JDBCabbr>技术
<bdo dir="rtl">定义文字方向bdo>
毛泽东同志说:<blockquote>生的伟大,死的光荣!blockquote>
案例:使用HTML标签,完成华为商城的登录页面的设计
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>华为商城欢迎您title>
head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="960">
<tr height="40" bgcolor="#eeeeee">
td>
<td>
<img src="imgs/logo.jpg" height="30"/>|千锋商城
td>
<td>td>
<td width="355">td>
tr>
<tr height="150">
<td>td>
<td colspan="2" align="center">
<label style="font-size: 30px;">华为帐号登录label>
td>
<td>td>
tr>
<tr>
<td>td>
<td align="center" width="30%">
<img src="imgs/qrcode.png" width="200" height="200" />
<br/>
<br/>
<br/>
<label style="font-size: 10px; color: lightgray;">若您使用华为手机,请进入“设置”>“华为帐号”扫码登录。label>
td>
<td width="30%">
<table height="320" width="400">
<tr>
<td align="center"><input type="text" placeholder="手机号/邮箱地址/账号名"/>td>
tr>
<tr>
<td align="center">
<input type="password" placeholder="密码"/>
<br/>
<a href="#">短信验证码登录a>
td>
tr>
<tr>
<td align="center"><input type="submit" value="登录"/>td>
tr>
<tr>
<td align="center">
<a href="#">注册a>
<a href="#">忘记密码a>
<a href="#">遇到问题a>
td>
tr>
<tr>
<td align="center">
<img src="imgs/qq.png" />
<img src="imgs/zfb.png" />
<img src="imgs/wx.png" />
td>
tr>
table>
td>
<td>td>
tr>
<tr height="150">
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr height="100" bgcolor="#eeeeee">
<td>td>
<td colspan="2" align="center" valign="middle">
<a href="#">华为帐号用户协议a> | <a href="#">关于华为帐号与隐私的声明a> | <a href="#">常见问题a> | <a href="#">Cookiesa>
<br/>
华为帐号 版权所有 © 2011-2021
td>
<td>td>
tr>
table>
body>
html>
案例运行效果图