web前端:html学习的第二天

html5

表格

跨列:colspan
跨行:rowspan
边框的厚度:border
单元格填充:cellpadding
单元格间距:cellspacing
边框颜色:bordercolor
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
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="2">
<tr>
<td>移动</td>
<td>联通</td>
<td>铁通</td>
</tr>
<tr>
<td>IBM</td>
<td>惠普</td>
<td>华硕</td>
</tr>
</table>

<table border="2">
<tr>
<td>手机充值、IP卡</td>
<!-- 跨列 -->
<td colspan="3">办公设备、文具、耗材</td>

</tr>
<tr>
<!-- 跨行 -->
<td rowspan="3">各种卡的总汇</td>
<td>铅笔</td>
<td>彩笔</td>
<td>粉笔</td>
</tr>
<tr>

<td>打印</td>
<td>刻录</td>
<td>墨盒</td>
</tr>
<tr>

<td>笔记</td>
<td>钢笔</td>
<td>墨水</td>
</tr>
</table>

<table border="2" cellpadding="0" cellspacing="0" bordercolor="#f00">
<tr>
<td rowspan="2">阿里巴巴旗下网站</td>
<td>我要买</td>
<td>我要买</td>
<td>我要买</td>
</tr>
<tr>
<td colspan="3">您好,欢迎来淘宝!</td>
</tr>

</table>
</body>
</html>

表单

表单所包含的控件

单行文本输入框:text
密码框:password
单选按钮:radio
复选按钮:checkbox
下拉列表:select
重置按钮:reset
提交按钮:submit
多行文本框:textarea

表单元素的统一格式

form

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<div>登录名:<input type="text" value="叮咚" name="denglu" />(可包含a-z,0-9,下划线)</div>
<div>密码:<input type="password" value="" name="pass"/>(至少包含6个字符)</div>
<div>
再次输入密码:<input type="password" value=""/>
</div>
<div>
性别:<input type="radio" value="男" checked="checked" name="sex"/>男&nbsp;&nbsp;&nbsp;
<input type="radio" value="女" name="sex"/>
</div>
<div>
爱好:<input type="checkbox" value=""/>运动&nbsp;&nbsp;&nbsp;
<input type="checkbox" value=""/>聊天&nbsp;&nbsp;&nbsp;
<input type="checkbox" value=""/>玩游戏
</div>
<div>
出生日期:
<select>
<option>yyyy</option>
<option>yyyy1</option>
<option>yyyy2</option>
</select>
<select>
<option>【选择月份】</option>
<option>1</option>
<option>2</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</div>
<div>
<h3>阅读淘宝协议</h3>
<textarea rows="7" cols="20" readonly="readonly">
啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da
啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da
啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da
啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da
啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da 啊实打实的啊啊da
</textarea>
</div>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单申请表</title>
</head>
<body>
<div style="width: 200px;height: 450px; border: #000 2px solid; background: #f6C;">
<h3 style="text-align: center;">申请表</h3>
<form>
<div>
姓名:<input type="text" value=""/>
</div>
<div>
密码:<input type="password" value=""/>
</div>
<div>
感兴趣的职业:<br/>
<input type="radio" value="" name="web" checked="checked"/>web设计
<input type="radio" value="" name="web"/>web开发
</div>
<div>
其他要求:<br/>
<textarea rows="10" cols="30" readonly="readonly">包括薪水待遇、工作地点等</textarea>
</div>
<div>
<input type="checkbox" value="" checked="checked"/>发送确认信息
</div>
<div>
经验:<br/>
<select>
<option>无经验</option>
<option>1年经验</option>
<option>3年经验</option>
</select>
</div>
<div>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</div>
</form>
</div>
</body>
</html>

框架:iframe

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<body>
<a href="http://www.sohu.com" target="frame1">框架去搜狐</a>
<iframe name="frame1" src="http://www.baidu.com" width="500" height="500" frameborder="0"></iframe>
<iframe src="表单申请表.html"/>
</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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格分包</title>
</head>
<body>
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td>分包单位</td>
<td colspan="2">/</td>
<td colspan="4">分包项目经理</td>
<td colspan="3">/</td>
<td colspan="3">施工班组长</td>
<td>/</td>
</tr>
<tr>
<td rowspan="2" colspan="2">主控项目</td>
<td rowspan="2">规范规定</td>
<td colspan="10">施工单位检查评定记录</td>
<td rowspan="2">建立单位验收记录</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

<div>
搜名字/账号/广播:<input type="text" value=""/>
<input type="submit" value="搜索"/>
</div>
<form>

<div>
*姓名:<input type="text" value=""/>
</div>
<div>
*性别:<input type="radio" value="" name="sex"/>
<input type="radio" value="" name="sex"/>
</div>
<div>
*生日:
<select>
<option>1998年</option>
<option>1999年</option>
<option>2000年</option>
</select>
<select>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<select>
<option>1日</option>
<option>2日</option>
<option>3日</option>
</select>
</div>
<div>
生日显示方式:
<input type="checkbox" value=""/>年份
<input type="checkbox" value=""/>月份日期
<input type="checkbox" value="" checked="checked"/>星座
</div>
<div>
家乡:
<select>
<option>国家/地区</option>
</select>
</div>
<div>
所在地:
<select>
<option>中国</option>
<option>美国</option>
<option>日本</option>
</select>
<select>
<option>浙江省</option>
<option>北京市</option>
<option>山东省</option>
</select>
<select>
<option>德州</option>
<option>杭州</option>
<option>北京</option>
</select>
</div>
<div>
从事行业:<input type="text" value=""/>
</div>
<div>
常用邮箱:<input type="text" value=""/>
</div>
<div>
个人主页:<input type="text" value="http://"/>
</div>
<div>
<textarea cols="20" rows="5">

</textarea>
</div>
<div>
<input type="submit" value="保存"/>
<input type="reset" value="重置"/>
</div>
</form>
</body>
</html>
文武科技社
新的天地,从扫码开始!
😆听说打赏我的人,都进了福布斯排行榜😆
-------------本文结束感谢您的阅读-------------
0%