《Web前端开发基础》课件-7 表格

任务四用表格实现招聘页面的制作表格及其属性《Web前端基础》课程任务效果展示1第一部分Knowledge表格相关标签一、定义表格的基本语法表格中一般通过三个标记来构建，分别是表格标记<table>、行标记<tr>和单元格标记<td>表格标记是<table>和</table>，<table>标记的属性表格标记及属性1属性名描述常用属性值border设置表格的边框（默认为0，无边框）像素值cellspacing设置单元格与单元格边框之间的空间间距像素值（默认为2像素）cellpadding设置单元格内容与单元格边框之间的空间间距像素值（默认为1像素）width设置表格的宽度像素值height设置表格的高度像素值align设置网页中的水平对齐方式Left、center、rightbgcolor表格的背景颜色预定义的颜色值、十六进制#RGBrgb(r,g,b)background表格的背景图像url地址二、表格行的设定表格是按行组织的，一个表格有几行组成就要有几个行标签<tr>，行标签用它的属性值来修饰，属性都是可选的，<tr>标签的属性如表表格标签及属性1属性名描述常用属性值height设置行高度像素值align设置一行内容水平对齐方式Left、center、rightvalign设置一行内容垂直对齐方式Top、middle、bottombgcolor设置行的背景颜色预定义的颜色值、十六进制#RGBrgb(r,g,b)background设置行的背景图像url地址表格标记及属性1三、单元格的设定<th>和<td>都是插入单元格标签，这两个标签必须嵌套在<tr>标签内，都是成对出现<th>用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标签内容，其中的文字以粗体居中显示。<td>就是该单元格中的具体数据内容，<th>和<td>标签的属性都是一样的，属性设定如表

属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（80%）colspan单元格向右打通的栏数rowspan单元格向下打通的列数align单元格内容的水平对齐方式，可选值为：left、center、rightvalign单元格内容的垂直对齐方式，可选值为：top、middle、bottombgcolor单元格的背景颜色bordercolor单元格边框颜色bordercolorlight单元格边框向光部分的颜色bordercolordark单元格边框背光部分的颜色background单元格的背景图片表格标记及属性1四、单元格的跨行与跨列设定1.水平跨度-colspan语法：<tdcolspan=跨的列数>单元格水平跨度是指在复杂的表格结构中，有些单元格是跨多个列的。跨的列数就是这个单元格所跨列的个数，也可以说是单元格向右打通的单元格个数。

表格标签及属性1例：跨多列的表格<tableborder="2"><tr><tdcolspan="3">学生成绩表</td></tr><tr><td>英语</td><td>数学</td><td>语文</td></tr><tr><td>95</td><td>98</td><td>89</td></tr></table>COLSPAN=“n”属性表示跨多少列？表格标记及属性12.垂直跨度-rowspan语法：<tdrowspan=单元格跨行数>单元格除了可以在水平方向上跨列，还可在垂直方向上跨行。跨行设置需要使用rowspan参数。与水平跨度相对应，rowspan设置的是单元格在垂直方向上跨行的个数，也可以说是单元格向下打通的单元格个数。

表格标签及属性1例：跨多行的表格<tableborder="1"><tr><tdrowspan=“3”>早上菜谱</td><td>食物</td><td>鸡蛋</td></tr><tr><td>饮料</td><td>牛奶</td></tr><tr><td>甜点</td><td>开心粉</td></tr></table>rowspan=“n”属性表示跨多少行？表格标签及属性1例：跨行跨列的表格表格标签及属性1第二部分Knowledge表格样式属性1.设置表格及单元格边框：同border属性2.设置表格及单元格宽度与高度:width:宽度height:高度

3.表格边框属性：表格样式属性1（1）border-collapse语法：border-collapse:separate|collapse设置是否把表格边框合并为单一的边框取值：

separate:默认值。边框独立（标准HTML）collapse:相邻边被合并例：table{border-collapse:collapse;}Table,td{border:1pxsolidblack;}4.设置表格及单元格文本对齐方式text-align:水平对齐方式（left/center/right）vertical-align：垂直对齐方式（top/middle/bottom）表格样式属性1（2）border-spacing

语法：border-spacing

:

length

设置分隔单元格边框的距离取值：length

如：3px

由浮点数字和单位标识符组成的长度值。不可为负值。例：table{border-collapse:separate;border-spacing:10px;}任务表单页的制作表单元素与属性《Web前端基础》课程任务效果展示本次课任务：步骤二：表单对象验证及美化教学目标1.知识目标2.能力目标掌握HTML5中新增的表单及表单验证相关属性及属性值及应用技巧熟练应用各类样式进行表单及表单对象的美化能综合利用各类样式进行表单及表单对象的美化能综合利用HTML5新增表单验证相关属性进行页面交互制作第一部分Knowledge新增表单元素1.Input类型-emailemail类型用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值，必须符合email格式才能通过验证并提交。例：<inputtype="email“name="useremail"/>新增表单元素一2.Input类型-url

url输入类型用于应该包含URL地址的输入字段。会在提交表单时对url字段的值自动进行验证。例：<inputtype="url"name="user_url"/>新增表单元素一3.Input类型-number

number输入类型用于包含数字值的输入字段。您可以设置可接受数字的限制。下面的属性来为number类型规定限制：例：<inputtype="number"name=“month"min="1"max="12"step="1"/>新增表单元素一4.Input类型-rangerange类型用于应该包含一定范围内数字值的输入域。range类型显示为滑动条。您还能够设定对所接受的数字的限定：例：<inputtype="range"name="points"min="1"max="10"/>新增表单元素一5.Input类型-dateHTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）。例：<inputtype=“date"name=“birthday”/><inputtype=“month"name=“month”/><inputtype=“time"name=“time”/>新增表单元素一6.Input类型–colorcolor输入类型用于规定颜色。该输入类型允许您从拾色器中选取颜色：例：<inputtype="color"name="user_color"/>新增表单元素一7.Input类型–teltel类型用来输入电话号码，通常与pattern属性进行配合使用。例：<inputtype="tel"name="tel"pattern="^\d{11}"/>新增表单元素一8.Input类型–search

search类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。例：<inputtype="search"name="search"/>新增表单元素一第二部分Knowledge新增表单元素属性1.required属性：required属性可以用用在大多数的输入元素上（除了隐藏元素、图片元素按钮上等）。required属性表示此输入框是必填项，当提交的时候，如果此输入框为空，那么将提示用户输入后提交。例：

<inputname=“username”required=“required”type="text"/>表单元素属性二表单元素属性二2.Placeholder属性

Placeholder属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。例：

<inputname=“username”Placeholder=“请输入你的姓名”type="text"/>3.pattern属性：

pattern属性的值一般为正则表达式，当用户输入的内容符合一定的格式，那么才能提交，否则将提示用户不符合要求，如上所示必须输入3位数字。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。

一般我们在验证”联系电话”时，给出：pattern=”^\d{11,13}$”，表示11到13位的数字

例：<inputname=“phone"pattern="^\d{13}$"type=“tel"/>表单元素属性二4.autocomplete属性：

autocomplete属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete属性适用于<form>，以及下面的<input>类型：text,search,url,telephone,email,password,datepickers,range以及color。属性值：on默认值。规定启用自动完成功能。off规定禁用自动完成功能。

例：<inputname=“useremail"type=“email”autocomplete=“on”/>表单元素属性二5.novalidate属性：

novalidate属性规定当提交表单时不对其进行验证。如果表单使用该属性，则表单不会验证表单的输入。注释：novalidate属性适用于：<form>，以及以下类型的<input>标签：text,search,url,tel,email,password,datepickers,range以及color。

例：<formaction="demo_form.asp"novalidate="novalidate"/>表单元素属性二6.autofocus属性：

autofocus属性规定当页面加载时input元素应该自动获得焦点。如果使用该属性，则input元素会获得焦点。

例：<inputtype="email"name="u