HTML简单练习（二）

发表于 更新于 分类于 ， 阅读次数：

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
<!doctype html>
<html>
	<head>
		<meta charset="utf-8"><!--用什么编码写的就写什么-->
		<title>我的第二个html</title>
	</head>
	<body bgcolor="red" background="https://img95.699pic.com/photo/50086/2210.jpg_wh300.jpg">
		<!--单元格合并,row删除下面,colpan无所谓-->
		<table border="1px" width="60%" height="150px"><!--设置背景色和背景图片-->
		<!--thead,tbody,tfoot的展示-->
			<thead>
				<tr>
					<th>1</th><!--th自动居中加粗表格中字体-->
					<th>2</th>
					<th>3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="2">4</td>
            </tbody>
			<tfoot>
					<td rowspan="2">6</td>
				</tr>
		
				<tr>
					<td>7</td>
					<td>8</td>
					
				</tr>
			</tfoot>
		</table>
		<img src="https://img95.699pic.com/photo/40015/8254.jpg_wh300.jpg" width="500px"/><!--
		放置图片--,设置高度图片会失真，title可以设置鼠标悬停信息，alt如果图片找不到就显示后面的文字-->
		<!--超链接
		target属性
		_blank:新窗口
		_self:当前窗口
		_top:顶级窗口
		_parent:父窗口
		-->
		<br>
		<a href="http://baidu.com" target="_blank">百度</a>
		<!--无序列表，属性type可以指定字前面的图形样式，比如圆circle-->
		<ul>
			<li>北京</li>
					<ul>
						<li>北京</li>
						<li>北京</li>
						<li>北京</li>
					</ul>
			<li>北京</li>
			<li>北京</li>
		</ul>
		<!--有序列表-->
		<ol>
			<li>北京</li>
					<ol>
						<li>北京</li>
						<li>北京</li>
						<li>北京</li>
					</ol>
			<li>北京</li>
			<li>北京</li>
		</ol>
		<!--表单(收集信息）表单上method是post不会显示具体提交什么，get会显示具体提交什么，默认get,超链接是get请求-->
		<form action="www.baidu.com" method="post">
		<!--画按钮 submit才提交,写button就只是一个按钮-->
		<input type="" name="测试数据"><!--有name才提交-->
		<input type="submit" value="登录">
		
		</form><!--action用来指定内容提交地址-->
		<form>
			<input type="button" value="你好">
			<!--下拉框选择，multiple支持多选,界面按住Ctrl选，size设置展示条数-->
			<select name="value信息" multiple="multip1" size="2">
				<option value="gz">高中</option><!--默认选中selected-->
				<option value="xx" selected>小学</option>
				<option value="dx">大学</option>
				<option value="sx">硕士</option>
				<option value="bs">博士</option>
			</select>
			<br>
			<!--文本域-->
			简介
			<textarea rows="10",cols="60" name="id"></textarea>
		</form>
		<!--type属性有radio（相当于单选）可以表示性别等类似需求，需要跟value,传的是value,跟checked默认选中，checkbox相当于多选,也要有value-->
		<!--type=file可以上传文件-->
		<!--type=hidden隐藏域，网页看不到，但是表单提交时会自动提交给服务器-->
		<!--readonly,disabled(放在input中）出现后都改不了数据，但只有readonly的数据能提交，disabled不能-->
		<!--maxlength属性限制文本框内能输入的数据。-->
		<!--id不能重复，方便获取节点，用javascript对节点进行增删改-->
		<!--div,spand都可以称为图层，盒子。此功能方便布局布局-->
	</body>
</html>

效果图

本地图片