HTML标签
HTML 标签
HTML 大量使用语义化标签,所谓语义化就是见名知意,
排版标签
标题标签
- h 即 head 的简写
- 有
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
6 种,从左到右字号依次变小。 - 基本格式
<h1></h1>
- 像
<h7>
这种错误的标签在展示时不起作用
<body>
<!-- align="left"表示左对齐 center表示居中 right表示右对齐 -->
<h1 align="left">标题一</h1>
<h2 align="center">标题二</h2>
<h3 align="right">标题三</h3>
<h4 align="left">标题四</h4>
<h5 align="center">标题五</h5>
<h6 align="right">标题六</h6>
</body>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
段落标签
- p 即 paragraph 的简写
- 基本格式
<p>段落内容</p>
- 段落中的文本内容超出浏览器宽度之后会执行自动换行
水平线标签
- hr 即 horizontal 的缩写
- 其作用是在页面中插入一条水平线
- 基本格式:
<hr />
- 这是一个自闭合标签。(普通标签成对出现;自闭合标签不需要包裹内容,自己就执行了开始和结束的操作)
容器标签
- div 即 division 的缩写,分割、区分的意思
- span 即 span ,跨度、范围的意思
- 这俩本质上是一个容器,类似于 Android 中的 ViewGroup
- 基本格式
<div>这是div标签中的内容</div>
<span>这是span标签中的内容</span>
font 字体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>font标签</title>
</head>
<body>
<font color="red" face="宋体" size="7">我是font标签</font>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
color | 字体颜色 |
---|---|
face | 字体种类 |
size | 字体大小 |

文本格式化标签
关于 HTML 和 XHTML 的区别,可以参考
标签的属性
- 基本格式:
<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>
- 标签可以拥有多个属性
- 属性必须写在开始标签中,位于标签名后面
- 属性之间不区分顺序
- 标签名与属性、属性与属性之间使用空格隔开
- 任何属性都有默认值,省略该属性表示使用默认值
图像标签
- img 即 image 的缩写
- 基本格式
<img src="图片URI/URL" />
<img />
常用属性如下:
属性 | 属性值 | 属性含义 |
---|---|---|
src | URI/URL | 图像的路径 |
alt | 文本 | 图像无法正常显示时的提示文本 |
title | 文本 | 鼠标悬停于图像时显示的文本 |
width | 像素(XHTML 不支持按页面百分比显示) | 图像的宽度 |
height | 像素(XHTML 不支持按页面百分比显示) | 图像的高度 |
border | 数字 | 设置图像边框的宽度 |
- 设置图像的宽高时,如果想等比缩放,则只设置其中一个即可
<body>
<!-- img标签可以是显示图片 width="200px" height="200px" 分别表示宽度和高度 alt表示图片异常加载提示-->
<h3 color="red">相对路径的图片,.表示当前目录 src="./images/005.png"</h3>
<img src="./images/005.png" width="200px" height="200px" alt="图片找不到" />
<h3 color="red">绝对路径的图片</h3>
<h3 color="red">正确的格式:http://ip:port/工程名/资源路径</h3>
<h3 color="red">错误的格式:盘符:/目录/文件名</h3>
<img
src="http://5b0988e595225.cdn.sohucs.com/images/20180317/61f43ca9d0544f44b65203644e78d7ed.jpeg"
alt="网络资源图片"
/>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12

超链接标签
超链接标签
- anchor 的缩写
- 基本格式
<a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
- href 即 HyperText Reference , 指定要跳转的 URL 地址
- target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值,blank 表示新窗口打开
注意:
- 外链需要添加
http://
或https://
前缀- 内部链接 直接链接内部页面名称即可,如
<a href="index.html">首页</a>
- 如果当时没有确定链接目标时,可以为 href 赋值 为 “#” ,即
href="#"
,表示一个空连接- 各种网页元素,如 文本、图像、表格、音频、视频等都可以作为超链接的载体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>超链接文本示例</title>
</head>
<body>
<a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng简书</a>
<br />
<a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
<br />
<a href="aTag.html" target="_blank">内部链接--再打开一个aTag.html</a>
<br />
<a href="#">空的超链接</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
锚点
- 通过创建锚点,可以快速定位到目标内容区域
- 创建锚点分为两步
- 为目标内容(即锚点)创建 id 并赋值
- 将超链接文本与锚点的 id 关联,
<a href="#id名称"> 超链接文本 </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<a href="#createAnchor">点击跳转到锚点位置</a>
<br />
通过创建锚点, 可以快速定位到目标内容区域
<!--加这一堆br是为了增加页面高度,不然显示不出锚点效果-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h3 id="createAnchor">创建锚点分为两步</h3>
<hr />
为目标内容(即锚点)创建id 并赋值
<br />
将超链接文本与锚点的id 关联,<a href="#id名称"> 超链接文本 </a>
</body>
</html>
1
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<base>
标签
标签可以限定同一页面内所有 超链接 的打开方式。` ` 设置
之后依旧可以为某个单独的超链接设置打开方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>base 标签</title>
<!--指定页面中所有超链接的默认打开方式为 blank -->
<base target="_blank" />
</head>
<body>
<a href="https://www.jianshu.com/u/414acf7abc2b">CnPeng简书</a>
<br />
<!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载-->
<a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>
<br />
<a href="aTag.html">内部链接--再打开一个aTag.html</a>
<br />
<a href="#">空的超链接</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<img /> 、 < br/>、 <hr />、<base/>
都是自闭合标签
转义字符
注释标签
- 格式为
< !-- 注释内容 -- >
路径
相对路径
- 图像文件和 HTML 文件位于同一文件夹中,只需要输入图像文件的名称即可,
<img src="logo.gif"/>
- 图像文件位于 Html 文件的下一级文件夹,输入文件夹名和文件名,二者之间用“/” 隔开,
<img src="image/logo.gif"/>
- 图像文件位于 HTML 文件的上一级,在文件名之前加
../
, 上两级则使用../../
,依次类推。<img src="../image/logo.gif"/>
绝对路径
- 本地绝对路径:
D:\web\img\logo.gif
- 网络绝对路径:
https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700
列表标签
无序列表 <ul>
- 所谓无序列表就是以小圆点或者小方块作为行首标志的列表
- 无序列表的各项之间是并列的,没有顺序级别的区分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>无序列表 ul</title>
</head>
<body>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注意:
<ul></ul>
之间只能嵌套<li></li>
,不允许嵌套其他标签<li></li>
之间相当于一个容器,可以嵌套任意标签
有序列表 <ol></ol>
- 内部也是嵌套
<li></li>
- 默认以 1、2、3...作为行首排序标志
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>有序列表ol</title>
</head>
<body>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
自定义列表 <dl></dl>
<dl></dl>
为外层标签、<dt></dt>
为内层标签、<dt>
下还可以嵌套<dd></dd>
- 自定义列表项前不具有任何项目符号,既没有小圆点也没有 1234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>自定义列表项1</dt>
<dd>自定义列表项1 的内容解释1</dd>
<dd>自定义列表项1 的内容解释2</dd>
<dt>自定义列表项2</dt>
<dd>自定义列表项2 的内容解释1</dd>
<dd>自定义列表项2 的内容解释2</dd>
</dl>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
效果图如下:
表格标签 table
<table></table>
用来定义表格,<tr></tr>
用来定义行,嵌套在<table></table>
中<td></td>
用来定义行中的单元格,嵌套在<tr></tr>
中<tr></tr>
中只能嵌套, 但 <td></td>
相当于一个容器,可以嵌套任意元素
表格相关的属性如下:
属性名称 | 含义 | 属性取值 |
---|---|---|
border | 表格的边框。默认 border="0",即无边框 | 像素值 |
cellspacing | 单元格与单元格边框之间的间距。 默认 cellspacing="2" | 像素值 |
cellpadding | 单元格内容与单元格边框的间距。 默认 cellpadding="1" | 像素值 |
width | 表格的宽度 | 像素值 |
height | 表格的高度 | 像素值 |
align | 表格在页面中的水平对齐方式 | left 、center 、right |
caption | 标题 | 文本 |
colspan | 从当前列向后 横跨几列, 应用于 td、th | 数字 |
rowspan | 从当前行向下 竖跨几行, 应用于 td、th | 数字 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
<tr>
<td>第一行第1列</td>
<td>第一行第2列</td>
<td>第一行第3列</td>
</tr>
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
<td>第二行第3列</td>
</tr>
</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<!-- 表格标签 border表示边框 align设置在table里面表示表格整个位置
设置在tr里面表示单元格对齐方式
单元格间距 cellspacing="10"-->
<table border="1" width="300" height="300" align="center" cellspacing="0">
<thead>
<!-- thhead表示表头 -->
<th>第1列</th>
<th>第2列</th>
<!-- th是字体加粗的td标签一般用在表头 -->
<th>第3列</th>
</thead>
<tr>
<!-- 行 -->
<td align="left">1-1</td>
<!-- 列,单元格 -->
<td align="center">1-2</td>
<td align="right">1-3</td>
</tr>
<tr>
<!-- 行 -->
<td><b>2-1</b></td>
<!-- 列,单元格 b标签加粗 -->
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- 行 -->
<td>3-1</td>
<!-- 列,单元格 -->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
1
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
31
32
33
34
35
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
31
32
33
34
35

<body>
<!-- colspan表示跨列 rowspan表示跨行-->
<table border="1" width="300" height="300" align="center" cellspacing="0">
<thead>
<!-- thhead表示表头 -->
<th>第1列</th>
<th>第2列</th>
<!-- th是字体加粗的td标签一般用在表头 -->
<th>第3列</th>
</thead>
<tr>
<!-- 行 -->
<td colspan="2">1-1</td>
<!-- 第一行的第一列跨2列 -->
<td>1-3</td>
</tr>
<tr>
<!-- 行 -->
<td rowspan="2">2-1</td>
<!-- 第二行的第一列跨2行 -->
<td colspan="2" rowspan="2">2-2</td>
<!-- 第二行的第二列跨2行2列 -->
</tr>
<tr><!-- 行 --></tr>
</table>
</body>
1
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
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
表头标签
- 表头一般位于表格的第一行或者第一列。
- 表头标签为
<th></th>
,在显示的时候默认会显示为加粗的效果 - 增加表头时,使用
<th></th>
替代对应位置的<td></td>
即可
下图即是设置了表头的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表头</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" align="center">
<caption>caption标签是啥?标题?</caption>
<tr>
<th>属性</th>
<th>含义</th>
<th colspan="2">取值</th>
</tr>
<tr>
<th>border</th>
<td>单元格边框</td>
<td>像素值,默认0</td>
<td rowspan="3">rowspan从当前单元格向下跨三行</td>
</tr>
<tr>
<th>cellspacing</th>
<td>单元格与单元格边框的间距</td>
<td>像素值,默认2</td>
</tr>
<tr>
<th>cellpadding</th>
<td>单元格内容与单元格边框的间距</td>
<td>像素值,默认1</td>
</tr>
</table>
</body>
</html>
1
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
31
32
33
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
31
32
33
表格结构(了解)
使用表格时,可以将表格分为头部、主体、页脚(页脚有兼容问题)
<thead></thead>
用来定义头部。必须位于<table></table>
中,一般包含网页的 logo 和导航等头部信息。<tbody></tbody>
用来定义表格的主体,一般包含网页中除头部和底部之外的其他内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>thead+tbody</title>
</head>
<body>
<table cellspacing="2" cellpadding="10" align="center" border="1">
<thead>
<tr>
<th>属性名称</th>
<th>含义</th>
<th>取值</th>
</tr>
</thead>
<tbody>
<tr>
<td>colspan</td>
<td>向右横跨几列</td>
<td>数值</td>
</tr>
<tr>
<td>rowspan</td>
<td>向下竖跨几行</td>
<td>数值</td>
</tr>
</tbody>
</table>
</body>
</html>
1
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
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
网页元素检查(开发者模式)
- 基于 chrome 浏览器,在页面中右击,然后选择 “检查”
表格标题标签 caption
<caption></caption>
标签用来定义标题的标签- 必须写在
<table></table>
中,和<thead></thead>
平级
相关代码可以参考 表头标签
的代码。
单元格合并
- 适用于
<td></td>、<th></th>
- colspan 跨列合并(水平合并)
- rowspan 跨行合并(垂直合并)
相关代码可以参考 表头标签
的代码。
表单标签
html 中一个完整的表单通常由 表单元素、提示信息、表单域(即多个表单的父容器)三部分组成。

input 输入标签
<input/>
为单标签(自闭合标签)- type 是其基本属性,用来控制输入的类型
input 、br、hr 、img、 base 都是单标签
属性 | 取值 | 含义 |
---|---|---|
type | text | 单行文本输入框(不换行的) |
type | password | 密码输入框 |
type | radio | 单选框(配合 name 可以实现单选效果) |
type | checkbox | 复选框 |
type | button | 普通按钮 |
type | submit | 提交按钮 |
type | reset | 重置按钮 |
type | image | 图像形式的提交按钮 |
type | file | 文件域, 点击之后打开文件选择器 |
name | 任意文本 | 控件名称 , name 相同则表示是同一组数据 |
value | 任意文本 | 默认文本值 |
size | 正整数 | 显示大小 |
checked | checked | 默认是否被选中 |
maxlength | 正整数 | 控制输入的最大字符数量 |
- 多个 radio 使用相同的 name ,则表示这是一组数据,这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中;
- name 和 value 是每个表单元素都有的属性值,主要给后台人员使用;
- name 表单元素的名字, 要求单选按钮和复选框要有相同的 name 值;
- checked 属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素;
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>input标签</title>
</head>
<body>
用户名:
<input type="text" maxlength="15" />
<br />
<!--次数密码中间的空格使用了是全角输入法,全角输入法中,空格占一个汉字的大小-->
密 码:
<input type="password" />
<br />
<!--使用name 限定了一组内容,从而实现单选-->
性 别:
<input type="radio" name="sex" checked="checked" />
男
<input type="radio" name="sex" />
女
<br />
爱 好:
<input type="checkbox" name="hobby" />
看电影
<input type="checkbox" name="hobby" />
读书
<br />
<input type="button" value="普通按钮" />
<br />
<input type="submit" value="提交按钮" />
<br />
<input type="reset" value="重置按钮" />
<br />
<input type="image" src="../image/imgButton.png" />
<br />
请选择文件:
<input type="file" />
</body>
</html>
1
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
效果图如下:
label 标签(理解)
- label 标签为 input 标签定义标注/标签
- 用来绑定一个表单元素,当点击 label 标签的时候,被绑定的表单元素就会获取焦点
- 通过 for 属性,可以绑定 label 和 input ; 或者直接用 lable 标签将 input 包裹起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>label的使用</title>
</head>
<body>
<!--label 中直接包裹 input,可以实现绑定-->
<label>
点击此处文本,用户名输入框会获取焦点
<br />
用户名:
<input type="text" />
</label>
<br />
<hr />
<!--使用 label 的 for 属性绑定input-->
<label for="#two">点击此处文本,密码输入框会获取焦点</label>
<br />
用户名:
<input type="text" />
<br />
密 码:
<input type="text" id="#two" />
</body>
</html>
1
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
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
textarea 文本域标签
<textarea></textarea>
用来做大量文本的输入,支持多行- 有 cols 、rows 属性。cols 限制每行中所输入的文本字数,rows 限制最大行数。(这两个属性通常不被使用,更多使用会使用 CSS 样式做相关控制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>textarea标签</title>
</head>
<body>
请输入评论内容:
<br />
<textarea></textarea>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
效果图如下:
下拉菜单 <select></select>
<select></select>
用来定义下拉菜单<option></option>
用来定义下拉菜单选项<select></select>
中至少包含一对<option></option>
- 在 option 中定义了属性 selected="selected" 之后,表示该项被默认选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>select标签</title>
</head>
<body>
设置家乡
<select>
<option>选择省份</option>
<option>山东</option>
<option>内蒙古</option>
<option>黑龙江</option>
<option>山西</option>
</select>
<select>
<option>济南</option>
<option selected="selected">临沂</option>
<option>聊城</option>
<option>莱芜</option>
<option>青岛</option>
</select>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
效果图如下:
表单域 <form></form>
该标签用来定义表单域,以实现用户信息的收集和传递,form 中的内容通常都会被提交到服务器。
基本语法格式:
<form action="url地址" method="提交方式" name="表单名称">...各种表单控件...</form>
1
常用属性有 action、method、name
- action : 指定接收并处理表单信息的服务器 url 地址
- method : 表单数据的提交方式。分为 post / get
- name : 指定表单名称,用来区分页面中的多个表单
每个表单都应该有自己的表单域
使用 form 包裹之后点击提交按钮才有提交的动作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>form表单域</title>
</head>
<body>
<!--使用 form 包裹之后,提交按钮和图片按钮点击时就有效果了-->
<form action="https://www.baidu.com" method="post" name="userInfo">
用户名:
<input type="text" maxlength="15" />
<br />
<!--次数密码中间的空格使用了是全角输入法,全角输入法中,空格占一个汉字的大小-->
密 码:
<input type="password" />
<br />
<!--使用name 限定了一组内容,从而实现单选-->
性 别:
<input type="radio" name="sex" checked="checked" />
男
<input type="radio" name="sex" />
女
<br />
爱 好:
<input type="checkbox" name="hobby" />
看电影
<input type="checkbox" name="hobby" />
读书
<br />
<input type="button" value="普通按钮" />
<br />
<input type="submit" value="提交按钮" />
<br />
<input type="reset" value="重置按钮" />
<br />
<input type="image" src="../image/imgButton.png" />
<br />
请选择文件:
<input type="file" />
</form>
</body>
</html>
1
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
上次更新: 2025/02/26, 08:57:57