目录
1.HTML表格标签:
HTML表格标签的内容,包括表格标题、表头、表格主体、表格行和列、单元格和表注内容。
表格标签
在HTML网页中通过<table>标签来创建表格；在HTML规范中可以为表格<table>在网页中显示边框：
<table>....</table>
- 如果表格定义“border=1”属性，则报个在网页中会显示边框。
- 如果不定义“border”属性，则表格在网页中不会显示边框。
表格语法:
HTML表格标签们 <caption> 用于定义表格标题 <thead> 用于定义表格的表头 <th> 用于定义表格的表头单元格 <tbody> 用于定义表格的主体部分 <tr> 用于定义表格的行 <td> 用于定义表格主体单元格 <tfoot> 用于定义表格的表注
表格样式
空白单元格通过在代码中将<td>单元格标签的内容定义为空白,但是表格中仍然能正常显示表格,只是单元格中没有任何内容而已
表格边框 边框 表示围绕标签元素内容和内边距的一条或多条线,属性名称"border" 边框合并模型(border-collapse) 用于设定表格合并边框模型,常用属性值为"collapse" 和 "separate" 单元格间距(cellspacing) 标识单元格与单元格之间的空白距离 单元格边距(cellpadding) 表示单元格内容与其边框之间的空白距离
合并单元格 rowspan 表示单元格可横跨的行数 colspan 表示单元格可纵跨的列数
表格内容样式 表格背景颜色 "bgcolor" 带背景颜色的表格 单元格内容对齐方式 "align" 用于设定元素内容的对其方式 有"left" "center" "right" 表格可以嵌套很多元素,包括一个新的块元素,eg一个新的表格;
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML表格</title> </head> <body> <table border="1" cellspacing="0" cellpadding="8" style="border-collapse:collapse"> <caption> 这里是表格的标题</caption> <thead> <th>表头1</th> <th>表头2</th> <th>表头3</th> </thead> <tbody> <tr> <td></td> <td>(1,2)</td> <td>(1,3)</td> </tr> <tr> <td colspan="2" align="center">(2,1)</td> <td rowspan="2" bgcolor="#666666" >(2,3)</td> </tr> <tr> <td align="right">(3,1)</td> <td bgcolor="#3AAEF3">(3,2)</td> </tr> </tbody> <tfoot> <tr> <td>表注1</td> <td>表注2</td> <td>表注3</td> </tr> </tfoot> </table> </body> </html>
结果:
2.HTML表单基础
HTML表单是一个允许用户输入信息的一组表单元素(如:文本框、单选框、复选框、下拉列表、文本域和提交重置按钮等)，最终通过表单提交显示数据传递的组件
表单标签<form>
<form> form elements (表单元素） </form>一般来讲<form>标签和提交按钮是必不可少的。表单元素根据实际用户需要来要求设计，是表单中最灵活的部分。
form标签中 设定表单功能 action属性 属性值为URL地址，用于定义当提交表单时想该地址发送表单数据。URL值定义为“#”表示提交到本页。 method属性 属性值为“get”或者“post“，用于定义发送from-data的HTTP方法。 arget属性 用于定义在何处打开actionURL，属性值一般为”_blank" "_self" "_parent" 和"_top" accept-charset 定义服务器可以处理的表单数据字符集，eg ”utf-8“ ”GBK“ autocomplete 属性 值为”on“ 或者”off" 定义是否启用表单的自动完成功能 name 定义表单的名称
novalidate 如果使用该属性，则提交表单时不进行验证
target属性值 “_blank" 浏览器总在一个新的，未命名的窗口中载入目标文档页面 ”_self" 目标文档页面将在相同的框架或者浏览器窗口中显示 “_parent" 木匾文档页面建在父窗口或者框架中显示。但如果源文档页面本身就是顶级窗口或顶级框架，那么就与”_self"相同 “_top" 目标文档页面将会清除所有被包含的框架并将文档页面载入到整个浏览器窗口
表单组成
form组成 输入框<input>标签元素 <input>标签时表单中最重要的元素，用于输入用户数据信息。<input>标签根据不同的type属性值，会有不同的表现形式。 输入框<input>标签元素 分组<fieldset>标签可将表单内相关元素进行分组，将表单内容相关部分打包，生成一组相关表单的字段。当一组相关的表单元素放到<fieldset>标签内时，浏览器会以特殊的方式来显示内容 提交重置按钮 提交重置按钮会同样时使用<input>标签原属来定义的，提交按钮的type属性值为”submit“，重置按钮的type属性值为”reset"
HTML表单元素
文本域及其标记
文本域在HTML表单中时最常用的标签元素，只要通过<input typr="text" >标签来实现。同时在该表单中还是用标记<label>标签配合文本域设计，<label>标签主要作用是为<input>标签定义标记（或标注）。
<form action="ch06-html-from-textfield.php" method="get" target="_blank"> <table> <caption> 文本域表单</caption> <tr> <th> <label for="id_form_username"> 用户名:</label> </th> <td> <input type="text" name="name_form_username" id="id_form_username" /> </td> </tr> <tr> <td></td> <td> <input type="reset" value="重置" /> <input type="submit" value="提交" /> </td> </tr> </table> </form>结果：
代码中进行关联的关键就是<label>标签中的“for”属性，其属性值于<input>标签中的"id"属性值是一一对应的。
密码域
密码域主要出现在登陆页面中，主要通过<input type="password">标签来实现的。
<label for="id_form_password" >密码： </label> <input type="password" name="name_form_passwoed" id="id_form_password" />
单选按钮：
在HTML表单中，单选按钮主要通过<input type="radio"> 标签来实现。
<input type="radio" value="1" /> <input type="radio" value="2" /> <input type="radio" value="3" />复选框：
在HTML表单中，单选按钮主要通过<input type="checkbox"> 标签来实现。
<input type="checkbox" value="1" /> <input type="checkbox" value="2" /> <input type="checkbox" value="3" />下拉列表：
在HTML表单中，下拉列表是通过<select><option>来实现的。
<form action="ch06-html-from-textfield.php" method="get" target="_self"> <table> <tr> <select> <option>1</option> <option>2</option> <option>3</option> </select> </tr> </table> </form>多行文本域：
多行文本域在HTML表格中是比较常用的标签，主要通过<textarea>标签来实现
<textarea name="name_textarea" id="id_textarea" rows="5" cols="25"> </textarea>表达在这个文本框中能输入5行text，每行25个字符。
分组框：
在HTML页面中，分组框是通过<fieldset>标签元素定义的，分组框的标题是通过<legend>标签元素定义的
就是用<fieldset>代替<form> ,用<legend>代替<caption>
分组框的位置由网页决定。
3.HTML5表单新属性
自动完成属性：autocomplete
HTML5标准为表单新增的第一个属性；
自动完成属性规定<form> 或<input>标签应该具有自动完成功能。当用户在具有自动完成属性的标签元素中输入时，浏览器会在该标签元素内自动弹出显示由可供填写的选项。
自动完成适用于<form>标签，以及具有text ,search ,url ,telephone, email, password, datepickers, range 及color类型的<input>标签。
autocomplete的属性值有 “on“ 和”off“两种。
<form method="get" autocomplete="on" > .....</form>自动焦点属性：autofocus
HTML5标准为表单新增的第二个属性；
自动焦点属性规定HTML5页面在加载完成后，能够自动获取输入焦点的标签元素，该属性特别适合用于<input>标签
<input autofocus="autofocus" type="text">...</input>
4.HTML5表单输入类型
email类型：
HTML5中email类型输入框时通过<input type="email”>标签来实现的。
<label>电子邮件</label> <input type="email" />这样的好处是它会自己判断你输入的内容是否是email格式的，如果不是的话，会有舷窗跳出不正确的输入格式，并不会直接跳到过输入；但是当你输入空白的时候，就会直接跳过输入。就是空的email也能通过。
required
现在HTML5规范提供了一个”required“属性来避免该问题的出现
<label>电子邮件</label> <input type="email" required="required" />这样当你输入为空的email时就会跳出“输入为空”的指示。
value:输入框提示的内容
颜色与输入框属性颜色相同
placeholder:输入框提示的内容
前提是value的值为空时,才会显示placeholder的内容.而且placeholder的颜色只是框属性颜色的60%透明度的效果.
pattern
在<input type="email">标签中增加定义一个"pattern"属性,其属性值为".+gmail\.com$",表示电子邮件的后缀格式必须是"gmail.com".当然可以看实际情况改动.
number类型：
HTML5中number类型的输入框是通过<input typr="number">标签来实现的,属性如下:
HTML5中number输入框的属性值 max属性 规定允许的最大值 min属性 规定允许的最小值 step属性 规定合法数字的间隔(如果step="5" ,则合法的数是-5 , 0, 5, 10 等) <input typr="number" step="5" max="100" mix="0"/>输入框可以直接输入数字也可以通过"上下微调按钮"调节数字
range类型：
HTML5中range类型的输入框是通过<input typr="range">标签来实现的,属性如下:
HTML5中range类型输入框的属性值 max属性 规定数值范围的最大值 min属性 规定数值范围的最小值 <input type="range" max="100" min="0" />range的输入框是
search类型：
HTML5中search类型的输入框是通过<input typr="search">标签来实现的,
search类型输入框主要用于搜索功能
url类型：
HTML5中url类型的输入框是通过<input typr="url">标签来实现的,
主要用于输入网址;
日期选择类型：
HTML5中日期选择类型的输入框是通过<input>标签来实现的,具体类型有date, month, week, time,和datetime等
HTML5日期选择类型说明 date类型 选择日, 月 和 年 month类型 选择月, 年 week类型 选择周, 年 time类型 选择时间(小时和分钟) datetime类型 选择时间, 日, 月, 年(UTC时间) <input type="date" /><br> <input type="month" /><br> <input type="week" /><br> <input type="time" /><br> <input type="datetime" />
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
