声明：本教程源于本人学习的一些经验的总结，希望大家帮忙完善与指正，也希望会给初学者带来方便，希望大家不要随便转载，写的不是很好，还不完善，不过转载时要注明作者和出处，附加原文的链接地址，谢谢了
已出：
自己写的web标准教程，帮你走进web标准设计的世界——第一讲
自己写的web标准教程，帮你走进web标准设计的世界——第二讲
上讲回顾：上一讲我主要讲解了一下网页常用的几个html标签。
本节我将给大家讲解表单标签和table标签，ok，Begin！Right now！
标签10：表单标签
功能：构造一个表单，用来向服务器提交数据
基本结构与详细标签：
a：input标签
使用指数：*****
功能：通过改变type类型来构造表单元素
类型：内联元素
常用属性：id，class，name（与ID类似，方便后台程序获取标签的值），accept（accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型。）
type与对应值一览
其中值img很少使用，他与值submit的功能是相同的，hidden值对于一个前台开发者而言几乎是用不到的，button值暂时不做介绍，毕竟我们现在离javascript还很遥远，呵呵
b: textarea标签
使用指数：****
功能：无限的向其中输入文本，比较适合做留言板，其中的文本的默认字体是等宽字体（通常是 Courier）
类型：内联元素
常用属性：id，class，name
特殊属性：cols，rows来设置他的区域大小，不过不推荐这种设置，还是建议通过css来设置（又是后话了）！
c: fieldset和legend标签
使用指数：**
功能：用来给你的表单划分区域，在legend中设置区域的标题（不是很常用）
类型：块级元素
常用属性：id，class，title
d:label标签
使用指数：***
功能：没有任何效果，只是为input标签提供一个标记不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
特殊属性for:
标签的 for 属性应当与相关元素的 id 属性相同。通过这种方法来与对应标签绑定
例子：
1
<
form
>
2
<
p
><
input type
=
“
radio
“
name
=
“
fru
“
id
=
“
apple
“
/
>苹果<
/
label
><
/
p>
3
<
p
><
input type
=
“
radio
“
name
=
“
fru
“
id
=
“
li
“
/
>梨<
/
label
><
/
p>
4
<
p
><
input type
=
“
radio
“
name
=
“
fru
“
id
=
“
ban
“
/
>香蕉<
/
label
><
/
p>
5
<
p
><
input type
=
“
radio
“
name
=
“
fru
“
id
=
“
ban
“
/
>草莓<
/
p
>
6
<
/
form>
点击梨，苹果会被选中，点击苹果，梨会被选中，点击香蕉，香蕉会被选中，点击草莓，草莓不会被选中，因为他没有应用label，这时只有点击按钮（
）才会被选中。
e:select标签
使用指数：***
功能：创建单选或者多选的下拉菜单
结构：
1
<
select name
=
“
sec
“
>
2
<
option value
=
“
volvo
“
>
Volvo
<
/
option>
//
每一个选项
3
<
option value
=
“
saab
“
>
Saab
<
/
option>
4
<
option value
=
“
opel
“
>
Opel
<
/
option>
5
<
option value
=
“
audi
“
>
Audi
<
/
option>
6
<
/
select>
这些属性就不详细讲了，大家去实践一下就明白了，很简单
下面通过一个例子在具体应用表单标签要注意的事项：
1
<
div id
=
“
form
“
>
2
<
form name
=
“
form1
“
action
=
“
#
“
method
=
“
get
“
>
3
//
form标签开始一个表单，action值为数据表单数据的传向页面，method为数据的传递形式，这些内容对于初学者不用理会
4
<
fieldset
>
5
<
legend
>
输入的文本
<
/
legend>
//
为表单划分区域
6
<
p
><
input type
=
“
text
“
name
=
“
user
“
id
=
“
user
“/
><
/
p
>
//
单行文本输入
7
<
p
><
input type
=
“
password
“
name
=
“
pwd
“
id
=
“
pwd
“
/
><
/
p
>
//
单行密文输入
8
<
p
><
textarea cols
=
“
2
“
rows
=
“
2
“
id
=
“
msg
“
name
=
“
msg
“
><
/
textarea><
/
p
>
//
多行文本输入
9
<
/
fieldset>
10
<
fieldset
>
11
<
legend
>
选择的文本
<
/
legend>
12
<
p
><
input type
=
“
radio
“
name
=
“
fru
“
id
=
“
apple
“
/
>苹果<
/
label
><
/
p>
13
<
p
><
input type
=
“
radio
“
name
=
“
fru
“
id
=
“
li
“
checked
=
“
checked
“
/
>梨<
/
label
><
/
p>
14
//
上面两个是单选按钮，注意每组单选按钮的name属性要相同，梨默认为被选
15
16
<
p
><
input type
=
“
radio
“
name
=
“
fru
“
id
=
“
ban
“
/
>香蕉<
/
label
><
/
p>
17
<
p
><
input type
=
“
checkbox
“
name
=
“
men1
“
id
=
“
a
“
/
>成龙<
/
label
><
/
p>
18
<
p
><
input type
=
“
checkbox
“
name
=
“
men2
“
id
=
“
b
“
/
>铁拐李<
/
label
><
/
p>
19
<
p
><
input type
=
“
checkbox
“
name
=
“
men3
“
id
=
“
c
“
/
>绿茶<
/
label
><
/
p>
20
//
上面是多选按钮组合，注意他们的name属性不能相同
21
22
<
select name
=
“
sec
“
id
=
“
sec
“
multiple
=
“
multiple
“
>
23
<
option value
=
“
1
“
>
11111111
<
/
option>
24
<
option value
=
“
2
“
selected
=
“
selected
“
>
22222222
<
/
option>
25
<
option value
=
“
3
“
selected
=
“
selected
“
>
33333333
<
/
option>
26
<
option value
=
“
4
“
>
44444444
<
/
option>
27
<
/
select>
28
//
上面是下拉式选择，并且可以多选，2，3行默认为被选
29
30
<
/
fieldset>
31
<
fieldset
>
32
<
fieldset
>
33
<
legend
>
上传的文件
<
/
legend>
34
<
p
><
input type
=
“
file
“
name
=
“
file
“
id
=
“
file
“
accept
=
“
image/gif, image/jpeg
“
/
><
/
p
>
35
//
上面为文件上传，规定只能上传格式为gif和jpeg的图片
36
<
/
fieldset>
37
<
fieldset
>
38
<
legend
>
提交与重置
<
/
legend>
39
<
p
><
input type
=
“
submit
“
value
=
“
提交表单
“
/
>
/
><
/
p>
40
//
表单的提交与重置
41
<
/
fieldset>
42
<
/
form>
43
<
/
div>
标签11：table
使用指数：***
功能：构造一个表格
类型：块级元素
常用属性：id，class
width：设置表格的宽度
border：设置表格的边框
标签a：caption
使用指数：*
功能：为表格定义一个标题
类型：块级元素
标签b：tr
使用指数：***
功能：为表格定义一个行
类型：块级元素
标签c：th
使用指数：**
功能：为表格的每一列定义一个小标题，默认字体加粗
类型：块级元素
标签d：td
使用指数：***
功能：为表格定义一个列
类型：内联元素
特殊属性：1.colspan：合并单元格（列合并）
2.rowspan：合并单元格（行合并）
例子：
1
<
table border
=
“
1
“
>
2
<
caption
>
标题
<
/
caption>
3
<
tr
>
4
<
th
>
Month
<
/
th>
5
<
th
>
Savings
<
/
th>
6
<
/
tr>
7
<
tr
>
8
<
td rowspan
=
“
2
“
>
January
<
/
td>
//
行合并，所以要占据两行空间
9
<
td
>
$
100
<
/
td>
10
<
/
tr>
11
<
tr
>
12
<
td
>
January
<
/
td>
//
由于上面是行合并，故这里少了一列
13
<
/
tr>
14
<
tr
>
15
<
td colspan
=
“
2
“
>
January
<
/
td>
//
列合并，故这里少了一列
16
<
/
tr>
17
<
/
table>
效果：
到这里html就讲完了，不要惊讶，我指的是主要的常用的部分讲完了，其他的就大家自己去学习吧，相信掌握了学习方法之后的工作是愉快的，哈哈。
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
![[JavaScript]阻止冒泡事件-千百度社区](https://qbd.heng.ink/wp-content/uploads/2024/08/20240826193942571-frontend_web.svg)
暂无评论内容