JavaWeb学习笔记——基础1(html)

发表于 | 分类于 | 阅读次数：

了解什么是标记语言
了解HTML主要特性,主要变化及发展趋势
了解HTML的结构标签
掌握HTML的主要标签(字体,图片,列表,链接,表单等标签)

今日任务

  • 网站信息页面案例

  • 网站图片信息页面案例

  • 网站友情链接页面案例

  • 网站首页案例

  • 网站注册页面案例

  • 网站后台页面案例

导航

| 目标 | 了解什么是标记语言
了解HTML主要特性,主要变化及发展趋势
了解HTML的结构标签
掌握HTML的主要标签(字体,图片,列表,链接,表单等标签) |
|————–|——————————————————————————————————————————| |

1、网站信息页面显示案例：

需求分析：

在网页中显示一个文字信息页面，显示效果如下：

【HTML的概述】

  • 什么是HTML

HTML：Hyper Text Markup Language 超文本标记语言

  • 超文本：比文本功能更加强大

  • 标记语言：通过一组标签对内容进行描述的一门语言

  • 为什么学习HTML

HTML是设计页面基础

  • 在哪些地方可以使用HTML

设计页面的时候都可以使用HTML

  • 如何使用HTML

HTML的语法和规范

  • HTML文件的扩展名是.html或者是.htm

  • HTML文件是由头和体组成

  • HTML这组标签是不区分大小写

  • HTML的标记通常是由【开始标签】和【结束标签】组成：

<b>内容</b>  
<br/> 换行 

html标签:
声明
子标签:
    <head></head>
    <body></body>
head:用来存放当前页面的重要信息,一般不展示在html页面上
    常见的子标签:
        <title></title> 网页的标题
body:
    要展示的数据放在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
    <font>标签
    <font 属性名=”属性值”>文字</font>
        size:控制字体大小.最小1 最大7
        color：控制字体颜色. 使用英文设置 ，使用16进制数设置
        face：控制字体.
    .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font>天佑中华</font>天佑中华<br/>
		
		<font size="7">我个大7</font><br />
		<font size="100">我个大100</font>
		<font size="1">我个大1</font>
		<br/>
		
		<font color="red">我很红</font>
		<font color="#ff0000">我很红</font>
		<font color="#f000ff">我很红</font><br />
		<font color="#055000">我很红</font>
		
		<br />
		<font face="黑体" size="6">我很黑</font>
	</body>
</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
<hn>标题标签
	<h1>b标题</h1>

n取值 :1~6
h1最大  h6最小
自动换行 且留白 默认加粗

常用属性:
	align:对齐方式
	left:左  right:右 center:居中
格式:
	<h2 align="center"></h2>


<p>段落标签
	<p>一段文字</p>


<br/>换行标签
	<br/>代表换行


<hr/>水平线标签
	<hr/>水平线标签

<b>字体加粗
	<b>文字</b>


<i>斜体标签
	<i>斜体</i>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font>天佑中华</font>天佑中华<br/>
		
		<font size="7">我个大7</font><br />
		<font size="100">我个大100</font>
		<font size="1">我个大1</font>
		<br/>
		
		<font color="red">我很红</font>
		<font color="#ff0000">我很红</font>
		<font color="#f000ff">我很红</font><br />
		<font color="#055000">我很红</font>
		
		<br />
		<font face="楷体" size="6">我很黑</font><br />
		<p>
			<i>感受停在我发端的指尖</i><br />

			如何瞬间冻结时间<hr />
			
			记住望着我坚定的双眼<br />
			
			也许已经没有明天<br />
			
			<b>面对浩瀚的星海</b><br />
			
			
		</p>
	</body>
</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
 <html>
     <head>
         <meta charset="utf-8">
         <title>页面标题</title>
     </head>
     <body>
         <!-- 创建标题标签 -->
         <h2>公司简介</h2>
         <!--
             作者：offline
             时间：2016-01-21
             描述：水平线
         -->
         <hr />
         <!--
             作者：offline
             时间：2016-01-21
             描述：创建段落标签
         -->
     <p> 
	<b> 腾讯，1998年11月诞生于中国深圳，是一家以互联网为基础的科技与文化公司。</b>
	我们的使命是 “<font color="#ff0000"> 通过互联网服务提升人类生活品质</font>” 。腾讯秉承着 “<i><b>一切以用户价值为依归</b></i>”的经营理念，为亿万网民提供优质的互联网综合服务。
</p>
	
   <p> 腾讯的战略目标是“连接一切”，我们长期致力于社交平台与数字内容两大核心业务：
一方面通过微信与QQ等社交平台，实现人与人、服务及设备的智慧连接；
另一方面为数以亿计的用户提供优质的新闻、视频、游戏、音乐、文学、动漫、影业等数字内容产品及相关服务。
我们还积极推动金融科技的发展，通过普及移动支付等技术能力，为智慧交通、智慧零售、智慧城市等领域提供有力支持。
</p>
	
	
<p>腾讯希望成为各行各业的数字化助手，助力数字中国建设。在工业、医疗、零售、教育等各个领域，
	腾讯为传统行业的数字化转型升级提供“数字接口”和“数字工具箱”。我们秉持数字工匠精神，
	希望用数字创新提升每个人的生活品质。随着“互联网+”战略实施和数字经济的发展，
	我们通过战略合作与开放平台，与合作伙伴共建数字生态共同体，推进云计算、大数据、人工智能等前沿科技与各行各业的融合发展及创新共赢。
	多年来，腾讯的开放生态带动社会创业就业人次达数千万，相关创业企业估值已达数千亿元。
</p>
	

<p> 腾讯的愿景是成为“最受尊敬的互联网企业”。我们始终坚守“科技向善”的初心，
	运用科技手段助力公益事业发展，并将社会责任融入每一个产品。
	2007年，腾讯倡导并发起了中国互联网第一家在民政部注册的全国性非公募基金会——腾讯公益慈善基金会。腾讯公益致力于成为“人人可公益的创连者”，
	以互联网核心能力推动公益行业的长远发展为己任。腾讯公益联合多方发起了中国首个互联网公益日——99公益日，帮助公益组织和广大爱心网友、企业之间形成良好的公益生态，
	让透明化的“指尖公益”融入亿万网民的生活。
</p>
     </body>
 </html>

2、网站的图片页面显示

需求分析：

在网页中显示带有图片的页面效果如下：

【HTML的图片标记】

<img />

-   src：图片的路径

-   width：图片宽度

-   height：图片的高度

-   alt：图片提示

图片路径：

  • 分成相对路径和绝对路径

  • 相对路径:

    • ./ :代表当前路径

    • ../ :代表上一级路径

步骤分析：

  • 创建一个img标签引入logo图片

  • 创建一个img标签引入header图片

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>

    <head>

        <meta charset="utf-8">

        <title>网站图片页面</title>

    </head>

    <body>

        <img src="../img/header.jpg" alt="正品保障" height="60px" />
        <img src="../img/3.jpg" title ="商品展示" height="1200px" />

    </body>

</html>

3、网站的列表显示页面

需求分析：

在页面中列表显示友情链接：

【HTML的列表标签】

1
2
3
4
5
6
7
8
9
10
11
12
13
    无序列表
        <ul>
            <li>内容1</li>
    <li>内容2</li>
        </ul>
    有序列表
        <ol>
            <li>内容1</li>
    <li>内容2</li>
        </ol>

常用的子标签
	<li></li> 列表项(列表内容)

步骤实现

  • 创建一个无序列表显示友情链接

代码实现

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
    <ul>
            <li>百度</li>
            <li>传智播客</li>
            <li>百合网</li>
            <li>世纪佳缘</li>
        </ul>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ol type="a"> 
			<li>貂蝉</li>
			<li>西施</li>
			<li>杨玉环</li>
			<li>王昭君</li>
		</ol>
		
		<ul type="square"> 
			<li>刘德华</li>
			<li>张学友</li>
			<li>郭富城</li>
			<li>黎明</li>
		</ul>
	</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
<a>超链接</a>
    href：超链接跳转的路径

    target：打开方式
	    _self：在自身页面打开
	    _blank：打开一个新窗口



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>友情连接</h2>
		<ol>
			<li><a href="#">CSDN</a></li>
			<li><a href="http://www.hust.edu.cn" target="_blank">hust</a></li>
		</ol>
	</body>
</html>

4、网站的首页显示

需求分析：

在浏览器中显示网站的首页效果如下：

dd

【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
表格标签★
	<table></table>
		常用的子标签
			<tr>:行
	<tr></tr>
		常用子标签:
			<td>:列
			<th>:表头单元格 默认居中加粗
		注意:
			一行必须只有有一个单元格或者一列
	//////////////////

	table 的常用属性:
		border:边框  像素值
		width:
		align:表格对齐方式

	tr 的常用属性:
		align:内容对齐

	td 的常用属性:
		align:内容对齐
		colspan:跨列合并 值:合并的列数
		rowspan:跨行合并

	<table>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	
	</table>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="40%" height="150px" align="center" bgcolor="#ffff00">
			<!--创建一个4行3列-->
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr align="center">
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td align="center">32</td>
				<td>33</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
			</tr>
		</table>
		
		<hr />
		<table border="1" width="40%" height="150px" align="center" >
			<!--创建一个4行3列-->
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr align="center">
				<td>21</td>
				<td colspan="2">22&23</td>
			
			</tr>
			
			<tr>
				<td rowspan="2">31&41</td>
				<td align="center">32</td>
				<td>33</td>
			</tr>
			<tr>
				
				<td>42</td>
				<td>43</td>
			</tr>
		</table>
	</body>
</html>

表格的属性：

  • border ：表格边框

  • width ：表格宽度

  • height ：表格高度

  • align ：水平方向对齐方式 left center right

  • bgcolor ：背景色

步骤分析：

  • 步骤一：创建8行表格

  • 步骤二：实现第一行，嵌套一个一行三列表格。

  • 步骤三：实现第二行，实现导航，设置背景色。

  • 步骤四：放置一张图片

  • 步骤五：显示热门商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。

  • 步骤六：引入一张广告图片。

  • 步骤七：显示最新商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。

  • 步骤八：广告信息

  • 步骤九：链接版权信息。

代码实现

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>网站首页</title>
</head>
<body>
	<table width="1400" border="0" align="center">
		<tr>
			<td>
				<!-- LOGO部分 -->
				<table width="100%">
					<tr height="40">
						<td>
							<img src="../img/logo2.png"/>
						</td>
						<td>
							<img src="../img/header.png"/>
						</td>
						<td>
							<a href="#">登录</a>
							<a href="../案例五：网站注册页面显示/网站的注册页面.html">注册</a>
							<a href="#">购物车</a>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr height="30" bgcolor="black">
			<td>
				<!--导航部分-->
				
				<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;  
				<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;  
				<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;        
				<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp; 
				<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp; 
				
			</td>
		</tr>
		<tr>
			<td>
				<img src="../img/1.jpg" width="100%" />
			</td>
		</tr>
		<tr>
			<td>
				<table width="100%" border="0">
					<tr>
						<td colspan="7"><font size="5"><b>最新商品</b></font><img src="../img/title2.jpg"></td>
					</tr>
					<tr>
						<td rowspan="2"  width="200" height="500">
							<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
						</td>
						<td colspan="3" width="600" height="250">
							<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
						</td>
						
						<td width="200" align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td width="200"  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td width="200"  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
					</tr>
					<tr>
						
						<td  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<!--广告-->
				<a href="#"><img src="../products/hao/ad.jpg" width="100%"></a>
			</td>
		</tr>
		<tr>
			<td>
				<table width="100%" border="0">
					<tr>
						<td colspan="7"><font size="5"><b>最新商品</b></font><img src="../img/title2.jpg"></td>
					</tr>
					<tr>
						<td rowspan="2"  width="200" height="500">
							<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
						</td>
						<td colspan="3" width="600" height="250">
							<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
						</td>
						
						<td width="200" align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td width="200"  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td width="200"  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
					</tr>
					<tr>
						
						<td  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td  align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
						<td align="center">
							<img src="../products/hao/small03.jpg"/><br/>
							<p><font color="gray">电磁锅</font></p>
							<p><font color="red">$499</font></p>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<img src="../img/footer.jpg" width="100%"/>
			</td>
		</tr>
		<tr>
			<td align="center">
			    <a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
			    <a href="">联系我们</a>
			    <a href="">招贤纳士</a>
			    <a href="">法律声明</a>
			    <a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
			    <a href="">支付方式</a>
			    <a href="">配送方式</a>
			    <a href="">服务声明</a>
			    <a href="">广告声明</a>
				<br/>
				Copyright © 2005-2016 传智商城 版权所有 
			</td>
		</tr>
	</table>
</body>
</html>

5、网站的注册页面案例：

需求分析：

在浏览器中显示如下的效果：

ff

【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


表单标签：

-   需要提交的表单需要使用<form></form>括起来

    -   action：提交路径

    -   method：提交方式

-   文本框:

    -   <input type=”text”/>

        -   name

        -   value

        -   size

        -   maxlength

        -   readonly

-   密码框：

    -   <input type=”password”/>

-   单选按钮：

    -   <input type=”radio”/>

        -   Checked：默认选中

-   复选框

    -   <input type=”checkbox”/>

        -   Checked：默认选中

-   下拉列表框

    -   <select><option></option></select>

        -   Selected：默认选中

        -   Multiple：全部显示

-   文件上传项

    -   <input type=”file” name=”file”/>

-   文本区

    -   <textarea name=”” cols=”” rows=””></textarea>

-   提交按钮

    -   <input type=”submit” value=”注册”>

-   重置按钮

    -   <input type=”reset” value=”重置”>

-   普通按钮

    -   <input type=”button” value=”普通按钮”>

-   隐藏字段

    -   <input type=”hidden” name=”id”/>

提交方式：

-   GET ：默认值

    -   提交的数据都会在地址栏中进行显示

    -   提交的数据的时候是有大小的限制

-   POST ：

    -   提交的数据不会再地址栏中进行显示

    -   提交的数据没有大小限制
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

表单:
	常用属性:
		action:信息提交的路径 默认是当前页面
		method:表单提交的方式
			<"只需要掌握两种
				get(默认)和post"
			"get和post的区别:
				1.get请求会把所有的参数追加在地址栏上,post请求不会
				2.get请求参数大小有限制,post请求参数大小没有限制
				3.post相当于get安全些">
	常见的子标签
		input
		select:下拉选
		textarea:文本域
	
	input标签
		常用的属性:
			type:
				text:文本框 默认
				password:密码框
				radio:单选框
				checkbox:多选框
				file:文件框
				
				submit:提交
				reset:重置
				button:普通按钮
				
				hidden:隐藏域 在页面上显示 提交的时候可以提交过去
				image:图片提交 替代submit 
			name:
				可以将几个单选框(复选框)设置为一组
				要想将信息保存到服务器上必须有name属性
			readonly:
				readonly="readonly" 只读
			disabled:
				disabled="disabled" 禁用
				
	select :下拉选
		格式:
			<select name="pro">
				<option>黑龙江</option>
			</select>
	
	textarea:文本域
		常用的属性:
			cols:列
			rows:行
		
		
	提交到服务器的内容的格式:
		key=value&
	<"对于文本框 密码框 文本域 手写的内容传递过去了"
	"对于单选框和多选框来说,却没有把值传递过去"
		要想把值传递过去 必须设置value属性
	若下拉选要想把选中内容的值传递过去,请加上value属性>
	
	<默认值:
		文本框 密码框:只需要添加value属性
		单选框 多选框:添加 checked="checked"
		下拉选:添加selected="selected"	
		文本域:标签体>
			
当我们提交的时候 发现地址栏变化
	?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl




<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="get">
			<input type="hidden" name="id" value="007"/>
			姓名:<input name="username" value="xuduoduo"/><br>
			密码:<input type="password" name="password"  value="123" disabled="disabled"><br>
			性别:<input type="radio" name="sex" value="1" checked="checked">男
				<input type="radio" name="sex" value="0">女
				<br>
			爱好:<input type="checkbox" name="hobby" value="eat">吃
				<input type="checkbox" name="hobby" value="drink" checked="checked">喝
				<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
				<br>
			头像:<input type="file" name="photo"><br>
			籍贯:
				<select name="pro">
					<option value="01">黑龙江</option>
					<option value="02">吉林</option>
					<option value="03" selected="selected">辽宁</option>
				</select>
				<select name="city">
					<option >-请选择-</option>
					<option value="0101">哈尔滨</option>
					<option value="0102">漠河</option>
					<option value="0201">长春</option>
					<option value="0202">吉林</option>
					<option>沈阳</option>
					<option>锦州</option>
				</select>
			<br>
			自我介绍:
				<textarea name="intr" cols="40" rows="4">good!</textarea>
			<br>
			<input type="submit" value="保存"/>
			<input type="reset" />
			<input type="button" value="普通按钮"/>
		</form>
	</body>
</html>

步骤分析：

  • 步骤一：创建一个5行表格

  • 步骤二：完成每行显示

  • 步骤三：中间行设置一个背景图片，嵌套一个表格居中显示。在表格中显示表单的内容

代码实现：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="100%">
			<tr>
				<td>
					<!-- LOGO部分 -->
					<table width="100%">
						<tr height="40">
							<td>
								<img src="../img/logo2.png"/>
							</td>
							<td>
								<img src="../img/header.png"/>
							</td>
							<td>
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr bgcolor="black" height="30">
				<td>
					<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;  
					<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;  
					<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;        
					<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp; 
					<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
				</td>
			</tr>
			<tr height="600">
				<td>
					<table width="100%" height="100%" background="../img/regist_bg.jpg">
						<tr>
							<td align="center">
								<table width="60%" height="80%" border="1" bgcolor="white">
									<tr>
										<td>
											<form>
											<table width="100%" height="100%" border="0" align="center" cellspacing="10">
												<tr>
													<td>用户名</td>
													<td><input type="text" name="username"/></td>
												</tr>
												<tr>
													<td>密码</td>
													<td><input type="password" name="password"/></td>
												</tr>
												<tr>
													<td>确认密码</td>
													<td><input type="password" name="repassword"/></td>
												</tr>
												<tr>
													<td>性别</td>
													<td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td>
												</tr>
												<tr>
													<td>Email</td>
													<td><input type="text" name="email"/></td>
												</tr>
												<tr>
													<td>姓名</td>
													<td><input type="text" name="name"/></td>
												</tr>
												<tr>
													<td>生日</td>
													<td><input type="text" name="birthday"/></td>
												</tr>
												<tr>
													<td>验证码</td>
													<td><input type="text" name="checkcode" size="10"/></td>
												</tr>
												<tr>
													<td colspan="2"><input type="submit" value="注册"/></td>
												</tr>
											</table>
											</form>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<img src="../img/footer.jpg" width="100%"/>
				</td>
			</tr>
			<tr>
				<td align="center">
				    <a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
				    <a href="">联系我们</a>
				    <a href="">招贤纳士</a>
				    <a href="">法律声明</a>
				    <a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
				    <a href="">支付方式</a>
				    <a href="">配送方式</a>
				    <a href="">服务声明</a>
				    <a href="">广告声明</a>
					<br/>
					Copyright © 2005-2016 传智商城 版权所有 
				</td>
			</tr>
		</table>
	</body>
</html>

6、网站后台页面显示

需求分析：

在浏览器中显示网站的后台页面，效果如下图：
dd

【HTML的框架标记frameset】

1
2
3
4
5
6
7
8
9
10
11
	
<frameset>
</frameset>
* 使用了frameset标签，不需要使用body.
* <注意: 最好和body不要共存>
* 属性：
* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径
*

步骤分析：

  • 步骤一：先将页面切分成上下两个部分。

  • 步骤二：将下部分切分成左右两个部分。

  • 步骤三：分别引入不同的页面。

代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<frameset rows="15%,*">
		<frame src="top.html" />
		<frameset cols="15%,*">
			<frame src="left.html" />
			<frame src="right.html" />
		</frameset>
	</frameset>
</html>

扩展需求：

点击分类管理，将数据放入到表格中显示到右侧区域中！

在frame上添加一个属性name，在超链接的target属性上设置这个名称。点击超链接的时候，跳转到指定的位置。

1
2

<h3><a href="data.html" target="right">分类管理</a></h3>

总结

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
案例1-网站信息展示
需求:
	在页面展示一些文字信息,需要排版
技术分析:
	html:超文本标签语言


////////////////////
html:
	作用:展示
	超文本:超越了一般文本,描述文本的字体 颜色 图片
	标签:标记
	html书写规则:
		文件的后缀名  .html(建议) 或者 .htm
		标签必须用 <> 引起来 已经定义好的标签
		属性 
			格式: key="value"
			建议属性的值用引号引起来.
		不区分大小写
	注意:
		最好将所有的内容放在一个标签中 <html></html>
		有开始标签和结束标签的标签称之为围堵标签
		没有结束的标签的称之为空标签  <br/>
		开始标签和结束标签之间的内容称之为标签体.
		<!--注释内容--> html页面中的注释
		标签必须正常嵌套,
		标签最好关闭
文件标签:
	html标签:
		声明当前网页为html页面
		子标签:
			<head></head>
			<body></body>
		head:用来存放当前页面的重要信息,一般不展示在html页面上
			常见的子标签:
				<title></title> 网页的标题
		body:
			要展示的数据放在body中
标题标签:
	<hn></hn>
	n取值 :1~6
		h1最大  h6最小
		自动换行 且留白 默认加粗
	常用属性:
		align:对齐方式
			left:左  right:右 center:居中
	格式:
		<h2 align="center"></h2>
		//////
字体标签:(了解)规定文本的字体、字体尺寸、字体颜色。
	<font></font>
	常用属性:
		face:字体
		size:尺寸
		color:颜色
颜色的取值:(RGB)
	方式1: #xxxxxx  x为16进制
	方式2: 英文单词
段落标签:
	<p></p>
其他标签:
	<b></b>  <strong></strong>加粗 
	<i></i> 斜体
水平线
	<hr/>
换行
	<br/>

图片标签

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
//////////////////////////
案例1-步骤分析:
	1.新建一个html页面
	2.标题标签
	3.添加一个水平线
	4.4个段落
	5.添加字体颜色 加粗 斜体
/////////////////////
案例2-图片网页展示
需求:
		在一个页面中展示多张图片
技术分析:
	<img/>
图片标签:★
	<img/>
		常用属性:
			★src:图片的路径
			alt:替代文字
			title:移上去显示的文字
			width:宽
			height:高
	大小的写法:
		像素:123px
		百分比:20%
	路径的写法:
		相对路径:
			./ 或者 什么都不写  当前目录
			../  上一级目录
		绝对路径:
			带协议的绝对路径:
				http://www.itheima.com
实现:

列表标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
////////////////
案例3-列表页面展示
需求:
	将友情连接的页面通过列表展示出来
技术分析:
	列表标签
列表标签:
	<ol></ol> 有序
	<ul></ul> 无序
	
	常用的标签
		<li></li> 列表项
超链接标记
	<a></a>
		常用属性:
			href:跳转路径
			target:在那里打开
				默认值:_self  _blank(在空白页面打开)

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
////////////////////////
案例4-首页信息的展示
需求:
	通过表格布局将首页信息展示
技术分析:
	表格表格
表格标签★
	<table></table>
		常用的子标签
			<tr>:行
	<tr></tr>
		常用子标签:
			<td>:列
			<th>:表头单元格 默认居中加粗
		注意:
			一行必须只有有一个单元格或者一列
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
	//////////////////

	table 的常用属性:
		border:边框  像素值
		width:
		align:表格对齐方式
	tr 的常用属性:
		align:内容对齐
	td 的常用属性:
		align:内容对齐
		colspan:跨列合并 值:合并的列数
		rowspan:跨行合并
步骤分析:
	1.常见一个8行1列的表格
	2.在第一行 放logo
		嵌套一个1行3列的表格
	3.第2行 放菜单
	4.第3行 放图片
	5.第4行 热门商品
		嵌套一个2行7列的表格
	
	6.第5行 放广告图片
	7.第6行 最新商品
		嵌套一个2行7列的表格
	8.第7行 放一个图片
	9.第8行 
		两个段落

表单标签

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
///////////////////////
案例5-表单页面
需求:
	设计一个表单页面,用来收集用户的数据
技术分析:
	表单标签
表单标签★★★
	<form></form>
	作用:
		用来从浏览器端收集用户的信息.
步骤分析:
	1.在页面中间添加一个表格
	2.10行3列表格
	3.在表格中添加表单表单子标签



	表单:
		常用属性:
			action:信息提交的路径 默认是当前页面
			method:表单提交的方式
				只需要掌握两种
					get(默认)和post
				get和post的区别:
					1.get请求会把所有的参数追加在地址栏上,post请求不会
					2.get请求参数大小有限制,post请求参数大小没有限制
					3.post相当于get安全些
		常见的子标签
			input
			select:下拉选
			textarea:文本域
		
		input标签
			常用的属性:
				type:
					text:文本框 默认
					password:密码框
					radio:单选框
					checkbox:多选框
					file:文件框
					
					submit:提交
					reset:重置
					button:普通按钮
					
					hidden:隐藏域 在页面上显示 提交的时候可以提交过去
					image:图片提交 替代submit 
				name:
					可以将几个单选框(复选框)设置为一组
					要想将信息保存到服务器上必须有name属性
				readonly:
					readonly="readonly" 只读
				disabled:
					disabled="disabled" 禁用
					
		select :下拉选
			格式:
				<select name="pro">
					<option>黑龙江</option>
				</select>
		
		textarea:文本域
			常用的属性:
				cols:列
				rows:行
			
			
		提交到服务器的内容的格式:
			key=value&
		对于文本框 密码框 文本域 手写的内容传递过去了
		对于单选框和多选框来说,却没有把值传递过去
			要想把值传递过去 必须设置value属性
		若下拉选要想把选中内容的值传递过去,请加上value属性
		
		默认值:
			文本框 密码框:只需要添加value属性
			单选框 多选框:添加 checked="checked"
			下拉选:添加selected="selected"	
			文本域:标签体
				
	当我们提交的时候 发现地址栏变化
		?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl
-->

frameset:框架集、转义字符、总结

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
119
120
121
122
123
124
125
126
/////////////////////////////////
案例6-后台管理页面(了解)
需求:
	开发一个后台管理页面,通过frameset实现
技术分析:
	frameset:框架集
	frame:具体实现
frameset:框架集(了解)
	常用属性:
		cols:垂直切割
			例如: cols="40%,60%"
			例如: cols="40%,*,10%"
		rows:水平切割
	常见的子标签:
		frame
	注意:
		最好和body不要共存
frame:具体实现
	常用属性:
		src:展示的页面的url


//////////////
补充:
	转义字符:
		三部分构成 &实体;
		掌握的转义字符:
			>	&gt;  //greater than
			<	&lt;
			&	&amp;
			空格 &nbsp;
	//////////////////////
	meta
		元信息
		<meta charset="UTF-8">指定浏览器用什么编码打开此页面
//////////////////////////////////










/////////////////////////////////////////////
上午回顾:
html	
	文件标签:
		<html>
			<head>
				<title></title>
			</head>
			<body></body>
		</html>
	排版标签:
		p
		br
		hr
	字体
		font
		h1~h6
		b
		strong
		i
	图片★
		<img src="图片路径" alt="替代文字" width="" height=""/>
	超链接★
		<a href="跳转路径" target="_blank">xxxx</a>
	列表
		<ol></ol>
		<ul></ul>
		
		列表项
			<li></li>
	表格标签★★
		<table border="" width="" align="">
			<tr>
				<td></td>
			</tr>
		</table>
		
		td中的重要属性:
			colspan:列合并
			rowspan:行合并
	表单标签★★★
		form	
			常用属性:
				action:提交路径
				method:提交方式 get和post
			常见的子标签:
				input
				select
				textarea
			input标签:
				10中type
					text
					password
					radio
					checkbox
					file
					submit
					reset
					button
					hidden
					image
		若想将内容发送到服务器,必须有name属性  username=tom
			select标签:
				<select name="">
					<option value="提交到服务器的值">展示内容</option>
				</select>
			textarea:文本域
				格式:
					<textarea cols="" rows="" name=""></textarea>
	框架(了解)
		frameset:定义框架集
			常用属性:
				cols:
				rows:
			常见的子标签:
				frame
		frame:具体展示
			常用属性:
				src:展示网页的url
				name:给当前的frame起个名称
-------------本文结束感谢您的阅读-------------
感谢您的支持，我会继续努力的!
0%