# 表单与列表
# 表单
表单是服务器收集用户数据的方式。
# form
一般情况下表单项要放在 FORM 内提交。
<form action="hd.php" method="POST">
<fieldset>
<legend>测试</legend>
<input type="text">
</fieldset>
</form>
2
3
4
5
6
| 属性 | 说明 |
|---|---|
| action | 后台地址 |
| method | 提交方式 GET 或 POST |
# label
使用 label 用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。
<form action="hd.php" method="POST" novalidate>
<label for="title">标题</label>
<input type="text" name="title" id="title">
</form>
2
3
4
# input
文本框用于输入单行文本使用，下面是常用属性与示例。
| 属性 | 说明 |
|---|---|
| type | 表单类型默认为 text |
| name | 后台接收字段名 |
| required | 必须输入 |
| placeholder | 提示文本内容 |
| value | 默认值 |
| maxlength | 允许最大输入字符数 |
| size | 表单显示长度，一般用不使用而用 css 控制 |
| disabled | 禁止使用，不可以提交到后台 |
| readonly | 只读，可提交到后台 |
<form action="hd.php" method="POST" novalidate>
<fieldset>
<legend>文本框</legend>
<input type="text" name="title" required placeholder="请输入标题" maxlength="5" value="" size="100">
</fieldset>
</form>
2
3
4
5
6
novalidate 属性规定当提交表单时不对其进行验证。
# 其他类型
通过设置表单的 type 字段可以指定不同的输入内容。
类型 说明
email 输入内容为邮箱
url 输入内容为URL地址
password 输入内容为密码项
tel 电话号，移动端会调出数字键盘
search 搜索框
hidden 隐藏表单
submit 提交表单
2
3
4
5
6
7
8
# hidden
隐藏表单用于提交后台数据，但在前台内容不显示也以在其上做用样式表也没有意义。
<input type="hidden" name="id" value="1">
2
# 提交表单
创建提交按钮可以将表单数据提交到后台，有多种方式可以提交数据如使用AJAX，或HTML的表单按钮。 1.使用input构建提交按钮，如果设置了name值按钮数据也会提交到后台，如果有多个表单项可以通过些判断是哪个表单提交的。
<input type="submit" name="submit" value="提交表单">
2.使用button也可以提交，设置type属性为submit 或不设置都可以提交表单。
<button type="submit">提交表单</button>
# 禁用表单
通过为表单设置 disabled 或 readonly 都可以禁止修改表单，但 readonly表单的数据可以提交到后台。
<input type="text" name="web" value="houdunren.com" readonly>
# pattern
表单可以通过设置 pattern 属性指定正则验证，也可以使用各种前端验证库如formvalidator (opens new window) 或 validator.js (opens new window)
| 属性 | 说明 |
|---|---|
| pattern | 正则表达式验证规则 |
| oninvalid | 输入错误时触发的事件 |
<form action="">
<input type="text" name="username" pattern="[A-z]{5,20}"
oninvalid="validate('请输入5~20位字母的用户名')">
<button>提交</button>
</form>
<script>
function validate(message) {
alert(message);
}
</script>
2
3
4
5
6
7
8
9
10
11
# textarea
文本域指可以输入多行文本的表单，当然更复杂的情况可以使用编辑器如ueditor、ckeditor等。
| 选项 | 说明 |
|---|---|
| cols | 列字符数（一般使用css控制更好） |
| rows | 行数（一般使用css控制更好） |
<textarea name="content" cols="30" rows="3">houdunren.com</textarea>
# select
下拉列表项可用于多个值中的选择。
| 选项 | 说明 |
|---|---|
| multiple | 支持多选 |
| size | 列表框高度 |
| optgroup | 选项组 |
| selected | 选中状态 |
| option | 选项值 |
<select name="lesson">
<option value="">== 选择课程 ==</option>
<optgroup label="后台">
<option value="php">PHP</option>
<option value="linux">LINUX</option>
<option value="mysql">MYSQL</option>
</optgroup>
<optgroup label="前台">
<option value="php">HTML</option>
<option value="linux">JAVASCRIPT</option>
<option value="mysql">CSS</option>
</optgroup>
</select>
2
3
4
5
6
7
8
9
10
11
12
13
# radio
单选框指只能选择一个选项的表单，如性别的选择男、女、保密 只能选择一个。
| 选项 | 说明 |
|---|---|
| checked | 选中状态 |
<input type="radio" name="sex" value="boy" id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" value="girl" id="girl" checked>
<label for="girl">女</label>
2
3
4
5
# checkbox
复选框指允许选择多个值的表单。
<fieldset>
<legend>复选框</legend>
<input type="checkbox" name="sex" value="boy" id="boy">
<label for="boy">PHP</label>
<input type="checkbox" name="sex" value="girl" id="girl" checked>
<label for="girl">MYSQL</label>
</fieldset>
2
3
4
5
6
7
8
# 文件上传
文件上传有多种方式，可以使用插件或JS拖放上传处理。HTML本身也提供了默认上传的功能，只是上传效果并不是很美观。
| 选项 | 说明 |
|---|---|
| multiple | 支持多选 |
| accept | 允许上传类型 .png,.psd 或 image/png,image/gif |
<form action="" method="POST" enctype="multipart/form-data">
<fieldset>
<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
</fieldset>
<button>保存</button>
</form>
2
3
4
5
6
# 日期与时间
| 属性 | 说明 |
|---|---|
| step | 间隔：date 缺省是1天，week缺省是1周，month缺省是1月 |
| min | 最小时间 |
| max | 最大时间 |
日期选择
<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
周选择
<input type="week">
月份选择
<input type="month">
日期与时间
<input type="datetime-local" name="datetime">
# datalist
input表单的输入值选项列表
<form action="" method="post">
<input type="text" list="lesson">
<datalist id="lesson">
<option value="PHP">后台管理语言</option>
<option value="CSS">美化网站页面</option>
<option value="MYSQL">掌握数据库使用</option>
</datalist>
</form>
2
3
4
5
6
7
8
# autocomplete
浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
<form action="">
<input type="search" autocomplete="on" name="content" />
<button>提交</button>
</form>
2
3
4
# 列表
列表的使用与word 等软件的列表概念相似，只不过是应用在网页展示中。
列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。
所谓有序，指的是按照数字或字母等顺序排列列表项目
所谓无序，是指以●、○、▽、▲等开头的，没有顺序的列表项目
列表的主要标记，如下表所示
# 有序列表ol
有序列表标记——ol
有序列表的类型——type
有序列表的起始数值——start
有序列表是指有数字编号的列表项，可以使用CSS定义更多样式，具体请查看CSS章节。
有序列表的起始数值——start ，默认情况下，有序列表的列表项是从数字1开始的，通过start参数可以调整起始数值。
<style>
.li-style1{
/*
circle 空心圆
disc 实心圆
square 实心方块
decimal 数字
upper-alpha 大写字母
lower-alpha 小写字母
upper-roman 大写罗马数字
lower-roman 小写罗马数字
*/
list-style-type: decimal;
}
.li-style2
/* 取消风格 */
list-style: none;
}
.li-style3{
/*inside 内部 outside 外部（默认）*/
list-style-position: inside;
}
</style>
<ol start="1">
<li>后盾人</li>
<li>houdunren.com</li>
<li>hdcms.com</li>
</ol>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<BODY>
<H1>星期中的每一天</H1>
<OL start="1">
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</OL>
</BODY>
2
3
4
5
6
7
8
9
10
11
12
# 无序列表ul
没有数字编号的列表项，可以使用CSS定义更多样式，具体请查看CSS章节。 设置无序列表的类型type 无序列表的默认符号是圆点（● ）。 ul元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有： disc(圆●)、circle（圆圈○ ）、square（方块■ ）
无序列表的应用 无序列表UL也称为“项目列表”
<ul>
<li>后盾人</li>
<li>houdunren.com</li>
<li>hdcms.com</li>
</ul>
2
3
4
5
又如以下实例：
<BODY>
<H1>星期中的每一天</H1>
<UL>
<LI >星期日
<LI type="square">星期一
<LI type="disc">星期二
<LI type="circle">星期三
<LI type="square">星期四
<LI type="disc">星期五
<LI type="circle">星期六
</UL>
</BODY>
…
2
3
4
5
6
7
8
9
10
11
12
13
14
# 菜单列表menu
菜单列表标记——menu 菜单列表主要用于设计单列的菜单列表。 菜单列表在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过无序列表来实现。 菜单列表标记的方法：
<menu>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
</menu>
2
3
4
5
6
7
# 目录列表dir
目录列表——dir
目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容。
例如字典中的索引或单词表中的单词等。
目录列表的语法格式：
<dir>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项2</li>
…
</dir>
2
3
4
5
6
# 描述列表dl
描述列表指每个列表项有单独的标题。 1、定义列表标记——dl 在HTML中还有一种列表标记，称为定义列表（Definition Lists）。 不同于前两种列表，它主要用于解释名词， 包含两个层次的列表， 第一层次是需要解释的名词， 第二层次是具体的解释。 定义列表的语法
<dl>
<dt>名词1<dd>解释1
<dt>名词2<dd>解释2
<dt>名词3<dd>解释3
…
</dl>
2
3
4
5
6
<dl>
<dt>开源产品</dt>
<dd>hdcms内容管理系统</dd>
<dd>hdjs前库组件库</dd>
<dt>网站导航</dt>
<dd>houdunren.com</dd>
<dd>houdunwang.com</dd>
</dl>
2
3
4
5
6
7
8
9
# 嵌套列表
1、定义列表的嵌套 2、无序列表和有序列表的嵌套 定义列表的嵌套 在定义列表中，一个dt标记下可以有多个dd标记作为名词的解释和说明，以实现定义列表的嵌套。
<dl>
<dt>赠孟浩然</dt><br/>
<dd>作者：李白</dd><br/>
<dd>诗体：五言律诗</dd><br/>
<dd>吾爱孟夫子， 风流天下闻。<br/>
红颜弃轩冕， 白首卧松云。<br/>
醉月频中圣， 迷花不事君。<br/>
高山安可仰？ 徒此挹清芬。<br/>
</dd>
<dt>蜀相</dt><br/>
<dd>作者：杜甫</dd><br/>
<dd>诗体：七言律诗</dd><br/>
<dd>丞相祠堂何处寻？ 锦官城外柏森森，<br/>
映阶碧草自春色， 隔叶黄鹂空好音。<br/>
三顾频烦天下计， 两朝开济老臣心。<br/>
出师未捷身先死， 长使英雄泪满襟。<br/>
</dd>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 表格与多媒体
# 表格
表格在网页开发中使用频率非常高，尤其是数据展示时。
# 基本使用
| 属性 | 说明 |
|---|---|
| table、tr、td | 基本构成 |
| caption | 表格标题 |
| thead，th | 表头部分 |
| tbody | 表格主体部分 |
| tfoot | 表格尾部 |
<table border="1">
<caption>后盾人表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>后盾人</td>
<td>2020-2-22</td>
</tr>
</tbody>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
表格宽度——width
表格高度——height
对齐方式——align
表格边框宽度——border
表格边框颜色——bordercolor
内框宽度——cellspacing
表格内文字与边框间距——cellpadding
设置表格背景颜色——bgcolor
设置表格的背景图像——background
2
3
4
5
6
7
8
9
# 单元格合并
下面是水平单元格合并
<table border="1">
<thead>
<tr>
<th>标题</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">后盾人 2020-2-22</td>
</tr>
</tbody>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
下面是垂直单元格合并
<table border="1">
<thead>
<tr>
<th>标题</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">后盾人</td>
<td>2030-03-19</td>
</tr>
<tr>
<td>2035-11-08</td>
</tr>
</tbody>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 视频
Adobe与苹果公司对 FLASH都不支持或消极状态，这时HTML提供对视频格式的支持，除了使用html提供的标签来播放视频外，也有很多免费或付费的插件，如video.js 、阿里云播放器 等等。
属性说明
| 属性 | 描述 |
|---|---|
| autoplay | 如果出现该属性，则视频在就绪后马上播放（需要指定类型如 type="video/mp4")。 |
| preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。如果视频观看度低可以设置为preload="none" 不加载视频数据减少带宽。如果设置为 preload=metadata值将加载视频尺寸或关键针数据，目的也是减少带宽占用。设置为preload="auto" 时表示将自动加载视频数据 |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | 设置视频播放器的高度。 |
| width | 设置视频播放器的宽度。 |
| loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | 规定视频的音频输出应该被静音。 |
| poster | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| src | 要播放的视频的 URL。 |
<video src="houdunren.mp4" autoplay="autoplay"
loop muted controls width="800" height="200">
<source src="houdunren.mp4" type="video/mp4">
<source src="houdunren.webm" type="video/webm">
</video>
2
3
4
5
6
7
# 声音
HTML对声音格式文件也提供了很好的支持。 属性说明
| 属性 | 描述 |
|---|---|
| autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。如果设置为 preload=metadata值将加载视频尺寸或关键针数据，目的也是减少带宽占用。设置为preload="auto" 时表示将自动加载视频数据 |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | 规定视频的音频输出应该被静音。 |
| src | 要播放的视频的 URL。 |
<audio controls autoplay loop preload="auto">
<source src="houdunren.ogg" type="audio/ogg">
<source src="houdunren.mp3" type="audio/mp3">
</audio>
2
3
4