HTML发展史及登录页面的开发
一、贯穿案例展示--登陆页面
二、案例切片
- 切片1：制作标题
- 切片2：制作表单-用户登陆
- 切片3：设计框架图
- 切片4：设计样式
三、切片1：制作标题
3.1、原型图（axure）
用axure现场画
3.2、实现需求
3.2.1、需求分析
需求分解：
1、创建一个文本文件
2、文本文件中添加HTML框架
3、键入文本
4、在浏览器中打开该文件
3.2.2、需求实现
现场操作
3.3、知识点补充
6.3.1、将文本设置为标题
讲解标题标签
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
...
<h6>我是六级标题</h6>
3.3.2、文本段落标签
段落标签
<p>我是一个文本控件</p>
3.3.3、给文本设置样式
文本控件font
<font size="30px" color="red">窗前明月光，</font>
超链接标签字体标签、粗体或、斜体标签或
3.3.4、其他常见标签
换行
<br/>
水平线
<hr/>
空格
3.4、案例拓展
3.4.1、案例一
需求：按图实现效果
使用到的知识点
html基本标签：标题<h？>、水平线
、段落
、换行
参考代码
<html>
<body>
<h2>静夜诗</h2>
<hr/>
窗前明月光，<br/>
疑是地上霜；<br/>
举头望明月，<br/>
低头思故乡。
</body>
<html>
3.4.2、案例二
需求：按图实现效果
使用到的知识点
html基本标签：图像标签、超链接标签字体标签、粗体或、斜体标签或
参考代码
<html>
<body>
<font color="red" size="30px" face="黑体">静 夜 诗</font>
<hr/>
<strong>窗前明月光，</strong><br/>
<em>疑是地上霜；</em><br/>
<b>举头</b><i>望明月，</i><br/>
<a href="https://www.baidu.com">低头思故乡</a>。<br/>
<img src="libai.jpeg"></img>
</body>
<html>
3.5、小结
现场提问
1、如何在网页中画一条水平线？
2、如何在挖网页中建立一个文本段落
3、如何设置字号？
四、切片2：制作表单-用户登陆
4.1、原型图（axure）
用axure现场画
4.2、实现需求
4.2.1、需求分析
需求分解：
1、添加表单控件
2、在表单控件中添加用户名文本框控件、密码文本框控件
3、将填写密码的文本框改成密码输入框
4、在表单控件中添加登陆按钮控件
4.2.2、需求实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>用户登陆</h1>
<form>
用户名：<input type="text" size="10"/><br />
密码：<input type="password" size="10"/><br />
<input type="submit" value="登陆"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
4.3、知识点补充
4.3.1、单选按钮控件
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
Ps：
- 当name属性的值一致时，可以实现单选按钮单个选中
- checked属性值为true时，表示单选按钮被选中
4.3.2、复选框控件
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>
4.3.3、下拉列表控件
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
Ps：
- disabled属性值为true时，禁用下拉列表
- selected属性可以设置某个列表项被选中
4.3.4、文本域控件
<textarea cols="40" rows="20">
这是一个文本域控件
</textarea>
4.3.5、特殊符号
4.3.6、表格
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Ps：
- cellspacing="0"：设置单元格无间距
- cellpadding="10" 设置单元格边距
4.3.7、有序列表
有序列表始于
- 标签。每个列表项始于
- 标签。列表项使用数字来标记。
<ol> <li>Coffee</li> <li>Milk</li> </ol>4.3.8、无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<ul> <li>Coffee</li> <li>Milk</li> </ul>4.3.9、自定义列表
自定义列表以
- 标签开始。每个自定义列表项以
- 开始。每个自定义列表项的定义以
- 开始。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>4.4、案例拓展
4.4.1、案例一
按图实现效果
使用到的知识点
表单控件的使用
参考代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> 业主姓名：<input type="text" size="20"/><br /> 业主电话：<input type="text" size="20"/><br /> 性别：<input type="radio" checked>男 <input type="radio">女<br /> 身份证号：<input type="text" size="20"/><br /> 备注信息：<textarea cols="20" rows="10"></textarea> <input type="submit" value="确认修改"/> </form> </body> </html>4.4.2、案例二
按图实现效果
使用到的知识点
表格控件的使用
参考代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"> <tr> <th><input type="checkbox"/></th> <th>业主姓名</th> <th>性别</th> <th>联系方式</th> <th>身份证号</th> <th>房屋编码</th> </tr> <tr> <td><input type="checkbox"/></td> <td>yx7845</td> <td>男</td> <td>15278762321</td> <td>333876494736289984</td> <td>602</td> </tr> </table> </body> </html>4.5、小结
现场提问
1、如何创建一个文本框 2、如何创建一个单选按钮 3、如何创建一个表格 4、创建表单的关键字是什么五、课程小结
5.1、知识框架图
现场提问，用XMind现场总结，再次加深学生印象
5.2、课后作业
需求定义
开发一个用户注册的页面
需求分解
需求分解： 1、在页面中添加标题 2、在页面中添加用户名、密码、重复密码、昵称的文本框 3、在页面中添加爱好复选框 4、在页面添加性别单选按钮 5、在页面添加学历下拉列表 6、在页面添加注册、重置按钮原型设计
参考文献
无
