版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
WEB中国传统服饰页面项目5HTML5+CSS3项目化教程2个任务·9个学习小节模块1启航项目05项目5中国传统服饰页面本章任务01制作表格页面（表格）2个小节02制作会员注册页面（表单）7个小节模块1启航项目|项目5中国传统服饰页面025.1制作表格页面（表格）根据图5-1-1所示效果，制作中国传统服饰页面知识点·概念掌握表格的基本结构。掌握表格标签及其常用属性的应用。熟知网站页面的制作流程。理解网页设计原则和设计规范。语法格式<tablewidth="400"border="0"cellspacing="0…<tr><tableborder="1"width="500"height="100">任务效果图图5-1-1任务效果主要环节1走近表格标签2CSS控制表格和单元格样式模块1启航项目|项目5中国传统服饰页面|任务5.1035.1任务实现过程任务实现过程1/1任务分析此任务的目标是利用表格创建一个中国传统服饰页面第1、3、6部分：使用<img/>标签在单元格中插入指定图像第2、4、5部分：主要使用<dl>…实现步骤1任务实现（1）创建中国传统服饰首页文件default.html…代码实现/*代码5-1-10*/<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>中国传统服饰</title><linkrel="stylesheet"href="style.css"></head><body><tableid="box-1"cellspacing="0"><tr>（本步其余16行见教材）提示：完整代码见教材代码5-1-10模块1启航项目|项目5中国传统服饰页面|任务实现过程045.1.1走近表格标签任务5.1制作表格页面（表格）HTML语言提供了一系列的表格标签，通过这些标签可以规划和设计表格。表格标签及其描述如表5-1-1所示。本节要点创建表格设置<table>标签的属性设置<tr>标签的属性设置<td>标签的属性语法格式<tablewidth="400"border="0"cellspacing="0…模块1启航项目|项目5中国传统服饰页面055.1.1走近表格标签本节实现过程1/2实现步骤1创建表格如前所述，在HTML中，一张表格由不同行和列的单元格组成…2设置<table>标签的属性创建表格后，可以通过<table>标签的属性来对表格的样式进行设置…代码实现▍创建表格<tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><td>单元格内容</td></tr></table><!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head>（本步其余15行见教材）▍设置<table>标签的属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><tablewidth="500"border="1"align="center"cellpadding="5"rules="rows"><tr><td>下裙尺寸</td><td>裙长</td>（本步其余16行见教材）提示：完整代码见教材代码4-2-17、代码5-1-2模块1启航项目|项目5中国传统服饰页面|本节实现过程065.1.1走近表格标签本节实现过程2/2实现步骤1设置<tr>标签的属性表格中的每行是用<tr>标签来定义的…2设置<td>标签的属性表格中的每个单元格是用<td>标签来定义的…代码实现▍设置<tr>标签的属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><tablewidth="500"border="1"align="center"cellpadding="5"rules="rows"><trbgcolor="#ff0"align="center"><td>下裙尺寸</td><td>裙长</td>（本步其余16行见教材）▍设置<td>标签的属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><tablewidth="500"border="1"align="center"cellpadding="5"rules="all"><tr><tdbgcolor="#ff0"align="center"height="25">下裙尺寸</td><tdbgcolor="#ff0"align="center">裙长</td>（本步其余16行见教材）提示：完整代码见教材代码5-1-3、代码5-1-4模块1启航项目|项目5中国传统服饰页面|本节实现过程075.1.2CSS控制表格和单元格样式任务5.1制作表格页面（表格）可以利用CSS的背景、边框、宽高、颜色、文本对齐等属性来控制表格和单元格样式。另外，CSS中还定义了表格专有属性…本节要点CSS控制表格的宽度和单元格的高度CSS控制表格和单元格的边框CSS控制表格内文本的对齐方式CSS控制表格和单元格的背景语法格式<table>模块1启航项目|项目5中国传统服饰页面085.1.2CSS控制表格和单元格样式本节实现过程1/2实现步骤1CSS控制表格的宽度和单元格的高度利用CSS中的width和height属性分别控制表格的宽度和单元格…2CSS控制表格和单元格的边框利用CSS中的border和border…3CSS控制表格内文本的对齐方式利用CSS中的text-align属性可以设置表格内文本的水平对齐方…代码实现▍CSS控制表格的宽度和单元格的高度table{width:500px;/*表格宽度*/td,th{height:30px;/*单元格高度*/▍CSS控制表格和单元格的边框table{width:500px;border:1pxsolid#fa0;/*表格边框*/border-collapse:collapse;/*边框合并*/td,th{height:30px;border:1pxsolid#fa0;/*单元格边框*/▍CSS控制表格内文本的对齐方式table{width:500px;border:1pxsolid#fa0;border-collapse:collapse;margin:0auto;/*表格居中*/text-align:center;/*文本水平居中对齐*/td,th{height:30px;border:1pxsolid#fa0;提示：完整代码见教材代码5-1-6、代码5-1-7、代码5-1-8模块1启航项目|项目5中国传统服饰页面|本节实现过程095.1.2CSS控制表格和单元格样式本节实现过程2/2实现步骤1CSS控制表格和单元格的背景利用CSS中的background-color…代码实现/*代码5-1-9*/table{margin:0auto;width:500px;border:1pxsolid#fa0;border-collapse:collapse;text-align:center;background-image:url(images/tbg.jpg);/*表格背景图像*/td,th{height:30px;border:1pxsolid#fa0;（本步其余2行见教材）提示：完整代码见教材代码5-1-9模块1启航项目|项目5中国传统服饰页面|本节实现过程105.2制作会员注册页面（表单）根据图5-2-1所示效果，制作会员注册页面知识点·概念理解表单的构成，可以快速创建表单。掌握表单相关标签及其属性。熟知表单元素常用的CSS样式属性。了解表单常见的布局方式。语法格式<formmethod="提交方式"action="URL"><formaction="save.php"><formaction="save.php"method="get">任务效果图图5-2-1任务效果主要环节1表单概述2运用<label>标签3运用<input>标签4运用<textarea>标签模块1启航项目|项目5中国传统服饰页面|任务5.2115.2任务实现过程任务实现过程1/1任务分析本任务的目标是利用表单创建一个会员注册页面第1、2、3、4、6部分：制作方法参考任务5.1…实现步骤1任务实现（1）创建中国传统服饰会员注册文件regedit.html…代码实现/*代码5-2-25*/<tdclass="reg"><h3>会员注册</h3><formid="form1"name="form1"method="post"action=""><p><labelclass="lab"for="nick">昵称</label><inputname="nick"type="text"class="ipt"id="nick"required><span>昵称不可以为空</span></p><p><labelclass="lab"for="pwd">密码</label>（本步其余16行见教材）提示：完整代码见教材代码5-2-25模块1启航项目|项目5中国传统服饰页面|任务实现过程125.2.1表单概述任务5.2制作会员注册页面（表单）表单是用来收集访问者信息的域集，可以通过网络接收其他用户数据，如用户注册、网上留言、线上投票等…本节要点表单的构成创建表单action属性method属性autocomplete属性语法格式<formmethod="提交方式"action="URL">模块1启航项目|项目5中国传统服饰页面135.2.1表单概述本节实现过程1/1实现步骤1表单的构成在HTML中，一个完整的表单通常由标签、数据域和操作按钮构成…2创建表单在HTML中，使用<form>标签来定义表单…代码实现/*代码5-1-19*/<formmethod="提交方式"action="URL">表单元素</form><formaction="save.php"><formaction="save.php"method="get"><formautocomplete="on"><formenctype="multipart/form-data">提示：完整代码见教材代码5-1-19模块1启航项目|项目5中国传统服饰页面|本节实现过程145.2.2运用<label>标签任务5.2制作会员注册页面（表单）<label>标签为input元素定义标注，用于绑定一个表单元素。当单击<label>标签内的文本时…本节要点一是通过<label>标签的for属性，将for属性值与要绑定的表单元素的id属性值设置二是直接将要绑定的表单元素放到<label>标签内语法格式<labelfor="eid"></label><inputid="eid">模块1启航项目|项目5中国传统服饰页面155.2.3运用<input>标签任务5.2制作会员注册页面（表单）<input>标签在form元素中使用，用来声明允许用户输入数据的input控件…本节要点type属性设置autofocus属性placeholder属性required属性pattern属性语法格式<inputtype="input控件类型">模块1启航项目|项目5中国传统服饰页面165.2.3运用<input>标签本节实现过程1/2实现步骤1type属性设置在HTML中，<input>标签拥有多个type属性值…2autofocus属性在HTML5中，autofocus属性用于指定页面加载完毕后元素是否…3placeholder属性placeholder属性用于为input元素的输入框提供相关提示信…代码实现▍type属性设置<formaction="save.php"method="post"><label>账户：<inputtype="text"id="uid"></label><label>密码：<inputtype="password"id="pwd"></label></form><formaction="save.php"method="post"><inputtype="button"value="普通按钮"><inputtype="submit"value="提交按钮"><inputtype="reset"value="重置按钮"></form><formaction="save.php"method="post">（本步其余16行见教材）▍autofocus属性<formmethod="post"><labelfor="kw">请输入关键字：</label><inputtype="text"name="kw"id="kw"autofocus="true"><inputtype="submit"value="检索"></form>▍placeholder属性<formmethod="post"><labelfor="pid">邮政编码：</label><inputtype="text"id="pid"placeholder="请输入6位邮政编码"><inputtype="submit"value="提交"></form>提示：完整代码见教材代码5-2-1、代码5-2-11、代码5-2-12模块1启航项目|项目5中国传统服饰页面|本节实现过程175.2.3运用<input>标签本节实现过程2/2实现步骤1required属性required属性用于判断用户是否在表单输入框中输入了内容…2pattern属性pattern属性用于验证<input>输入框中用户输入的内容是否与…代码实现▍required属性<formmethod="post"><labelfor="pid">邮政编码：</label><inputtype="text"id="pid"required="required"><inputtype="submit"value="提交"></form>▍pattern属性<formmethod="post"><labelfor="idc">身份证号：</label><inputtype="text"id="idc"pattern="^([0-9]){7,18}(x|X)?$…<labelfor="url">个人网址：</label><inputtype="url"id="url"pattern="[a-zA-Z]+://[^\s]*$…<inputtype="submit"value="提交"></form>提示：完整代码见教材代码5-2-13、代码5-2-14模块1启航项目|项目5中国传统服饰页面|本节实现过程185.2.4运用<textarea>标签任务5.2制作会员注册页面（表单）通过前面的学习，我们知道单行文本输入框用来输入一行简短信息。但在浏览页面时，有些模块也经常需要用户输入多行文本…本节要点使用<textarea>标签定义多行文本输入框的基本语法格式如下在上面的语法格式中，<textarea>和</textarea>之间放置的内容是输入框中具体应用如代码5-2-15所示，运行效果如图5-2-17所示语法格式<textareacols="每行字符数"rows="显示行数">模块1启航项目|项目5中国传统服饰页面195.2.5运用<select>标签任务5.2制作会员注册页面（表单）在浏览网页时，经常会看到包含多个选项的下拉列表，如所在城市、兴趣爱好等。在HTML5中…本节要点使用<select>标签定义下拉列表的基本语法格式如下在上面的语法格式中，<select>标签用于在表单中添加一个下拉列表，<option>标具体应用如代码5-2-16所示，运行效果如图5-2-18所示语法格式<selectname="fabric"id="fabric">模块1启航项目|项目5中国传统服饰页面205.2.6运用<datalist>标签任务5.2制作会员注册页面（表单）<datalist>标签用于定义输入框的选项列表，选项通过<datalist>标签内的<option>标签进行创建…本节要点<datal
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年古建筑修缮技术员岗位技能测试题（附答案）
- 酒店多人合伙协议合同范本
- 商服房租租赁合同范本
- 2026-2027年秋冬季流感预防：幼儿园教师环境清洁消杀学习课件
- 2026 年秋冬季流感预防：流感防控科普长效机制课件
- 2026 年秋冬季流感预防：儿童流感疫苗常见疑问课件
- 2026年秋冬季流感防治-家长门诊管理宣传课件
- 2027年彩虹集团校园招聘笔试模拟试题及答案解析
- 2027中国邮政集团有限公司四川省分公司校园招聘笔试备考试题及答案解析
- 驾驭工程：赋能智能原生软件工程研究报告（2026年）
- 2026青岛胶州市中云街道办事处面向社会公开招聘非在编工作人员笔试参考题库及答案解析
- 德士古气化炉和主要设备煤炭气化工艺与操作51课件
- 中医骨伤重点专科
- DB31/T 1330-2021专职消防队、微型消防站建设要求
- 病理性骨折治疗
- OA审批流程管理办法
- 【课件】Starter+unit+3+section+B+1a-2c课件人教版英语七年级上册
- 装配式建筑装饰装修技术 课件 模块三 装配式吊顶
- 公司债权债务转让协议范本
- XX-JL-737-02-PKA0食品安全防护计划评估记录验证记录
- 旅游管理信息系统
评论
0/150
提交评论