一、HTML入门案例(静夜思)

1.概述

HTML：Hyper Text Markup Language 超文本标记语言
超文本：比普通文本功能强大，能实现不同样式(比如加粗，居中，斜体)
标记语言：使用标签对内容进行描述的语言。

2.使用下列标签完成静夜思案例

1
2
3
4
5
 
<h1></h1> 一级标题
<b></b> 加粗
<i></i> 斜体
</br> 换行
<p></p>段落

HTML的主要作用
设计网页的基础，HTML5

3.HBuilder常用快捷键mac版

ctrl + D 删除光标所在的行
command + shift + R 复制当前行到下一行
command + enter 将光标移动到下一行(如果原先光标在上一行的中间，只用enter会将当前行的前后两部分内容分开成两行，而使用这个命令可以直接将光标跳转到下一行而不改变当前行的内容，说得很麻烦，自己试试，很简单)
command + shift + enter 在当前行的上一行插入空行
tab 输入标签在按tab会自动生成前后标签和<>，这个很好用
command + 方向键 左右是到当前行的前后，上下是到所有行的首尾
command + / 注释

4.入门案例及基本语法规范



1
2
 
strong:也是加粗，但是包含语义，搜索引擎友好
em：也是斜体，但是包含语义，搜索引擎友好

5.图片及路径

6.有序列表ol和无序列表ul

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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 无序列表ul
			li 列表项
			type属性：默认黑点，可以是小圆圈，小方块
		 -->
		<ul type="square">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马进程员</li>
		</ul>
		<hr>
		<!-- 有序列表ol
			常用属性：
				type：指定序号的类型
				start：从几开始，必须得写数字
		 -->
		<ol type="I">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马进程员</li>
			
		</ol>
	</body>
</html>

7.超链接标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 超链接标签a
		常用属性：
		href：指定网址，要加上http协议，如果访问的是本网站的html文档，可以直接写文档路径
		target：以什么方式打开
			_blank:以新窗口打开
			_self：当前窗口直接跳转
	 -->
	<body>
		<a href="https://www.baidu.com" target="_self">百度</a>
	</body>
</html>

8.表格标签table

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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- table标签
		tr：行
		td：列，一般是tr嵌套td
		常用属性：
		border：指定边框
		width：宽度
		height：高度
		bgcolor:背景色
		align:对齐方式
		表格的合并
			colspan：跨列合并
			rowspan：跨行合并
	 -->
	<body>
		<table border="2px" width="400px" height="150px" bgcolor="antiquewhite" align="center">
			<tr bgcolor="blue" align="center">
				<td bgcolor="yellow">2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr bgcolor="red">
				<td align="center">2</td>
				<td>2</td>
				<td colspan="2" rowspan="2" align="center">2</td>
				<td>2</td>
			</tr>
			<tr>
				<td colspan="2" align="center" >2</td>
				<td rowspan="2">2</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 表格的嵌套 -->
	<body>
		<table border="2px" width="400px" align="center">
			<tr>
				<td colspan="2" rowspan="2">
					<table align="center" border="1px" width="100%">
						<tr>
							<td align="center">11</td>
							<td>12</td>
						</tr>
						<tr>
							<td>21</td>
							<td>22</td>
						</tr>
					</table>
				</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>23</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

练习

1.
做一个网页首页
步骤分析：
（1）创建一个8行1列的表格
（2）第一部分LOGO：嵌套一个1行3列的表格
（3）第二部分导航部分：放置五个超链接
（4）第三部分：轮播图
（5）第四部分：嵌套一个3行7列表格
（6）第五部分：直接放一张图片
（7）第六部分：同（5）
（8）第七部分：放一张图片
（9）第八部分：放置友情链接。

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
208
209
210
211
212
213
214
215
216
217
218
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 
	 做一个网页首页
	 步骤分析：
	 （1）创建一个8行1列的表格
	 （2）第一部分LOGO：嵌套一个1行3列的表格
	 （3）第二部分导航部分：放置五个超链接
	 （4）第三部分：轮播图
	 （5）第四部分：嵌套一个3行7列表格
	 （6）第五部分：直接放一张图片
	 （7）第六部分：同（5）
	 （8）第七部分：放一张图片
	 （9）第八部分：放置友情链接。
	 -->
	<body>
		<table width="100%" >
			<!-- 第一部分LOGO：嵌套一个1行3列的表格 -->
			<tr>
				<td>
					<table width="100%" >
						<tr>
							<td><img src="../img/logo2.png" alt="图片加载失败"></td>
							<td><img src="../img/header.jpg" alt="图片加载失败"></td>
							<td>
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第二部分导航部分：放置五个超链接 -->
			<tr bgcolor="black">
				<td height="50px">
					<a href="#"><font color="white">首页</font></a>
					<a href="#"><font color="white">手机数码</font></a>
					<a href="#"><font color="white">鞋靴箱包</font></a>
					<a href="#"><font color="white">电脑办公</font></a>
					<a href="#"><font color="white">香烟酒水</font></a>
				</td>
			</tr>
			<!-- 第三部分：轮播图 -->
			<tr>
				<td>
					<img src="../img/1.jpg" width="100%">
				</td>
			</tr>
			<!-- 第四部分：嵌套一个3行7列表格 -->
			<tr>
				<td>
					<table width="100%" height="500px">
						<tr>
大专栏  web前端知识day01_HTMLs="line">							<td colspan="7">
							<h3>最新商品<img src="../img/title2.jpg" ></h3>
							</td>
						</tr>
						<tr align="center">
							<td rowspan="2" width="206px" height="475px">
								<img src="../img/big01.jpg" >
								</td>
							<td colspan="3" height="240px">
								<img src="../img/middle01.jpg" width="100%" height="100%" alt="图片加载失败">
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
						<tr align="center">
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第五部分：直接放一张图片 -->
			<tr>
				<td>
					<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%">
				</td>
			</tr>
			<!-- 第六部分：同（5） -->
			<tr>
				<td>
					<table width="100%" height="500px">
						<tr>
							<td colspan="7">
							<h3>热门商品<img src="../img/title2.jpg" ></h3>
							</td>
						</tr>
						<tr align="center">
							<td rowspan="2" width="206px" height="475px">
								<img src="../img/big01.jpg" >
								</td>
							<td colspan="3" height="240px">
								<img src="../img/middle01.jpg" width="100%" height="100%" alt="图片加载失败">
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
						<tr align="center">
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第七部分：放一张图片 -->
			<tr>
				<td>
					<img src="../img/footer.jpg" width="100%">
				</td>
			</tr>
			<!-- 第八部分：放置友情链接。 -->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<br>
					Copyright@
				</td>
			</tr>
		</table>
	</body>
</html>

2.
网站注册案例1

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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单标签form 
			常用属性：
			action：提交的地址
			method：
				get 方式 默认提交方式 会将参数拼接在链接后面，有大小限制，4k，也有1k的。
				post 方式 会将参数封装在请求体中，没有这样的限制。
		
		-->
		<form action="../04_网站首页/网站首页.html" method="get">
			<!-- 隐藏域
				主要是用来存放页面上的一些ID信息
			 -->
			<input type="hidden" name="uid" id="" value="sdfalsjflsj" />
			<!-- 文本输入框 -->
			用户名：<input type="text" name="username" placeholder="请输入用户名" /><br>
			密码：<input type="password" placeholder="请输入密码"/><br>
			照片：<input type="file"/><br>
			性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br>
			验证码：<input type="text" /><br>
			爱好：
			<input type="checkbox" />抽烟
			<input type="checkbox" />喝酒
			<input type="checkbox" />烫头<br>
			出生日期：<input type="datetime-local" /><br>
			手机号码：<input type="number" /><br>
			个人介绍：
			<textarea rows="4" cols="40">
				
			</textarea><br>
			籍贯：
			<select>
				<option>---请选择---</option>
				<option>湖北</option>
				<option>内蒙古</option>
				<option>火星</option>
			</select><br>
			<input type="submit" value="注册" />
			<input type="button" value="普通按钮">
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

3.
注册入门案例2

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>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 创建一个5行1列的表格
		 1.logo部分
		 2.导航栏
		 3.注册部分
		 4.页脚图片
		 5.网站声明信息
		 -->
		 <table border="1px" width="100%">
			 <!-- 1.logo部分 -->
			 <tr>
				 <td>
					 <table border="1px" width="100%" >
					 	<td><img src="../img/logo2.png" ></td>
					 	<td><img src="../img/header.jpg" ></td>
					 	<td>
							<a href="#">注册</a>
							<a href="#">登录</a>
							<a href="#">购物车</a>
						</td>
					 </table>
				 </td>
			 </tr>
			 <!-- 2.导航栏 -->
			 <tr bgcolor="black">
			 	 <td>
					 <a href="#"><font color="white">首页</font></a>
					 <a href="#"><font color="white">手机数码</font></a>
					 <a href="#"><font color="white">鞋靴箱包</font></a>
					 <a href="#"><font color="white">电脑办公</font></a>
					 <a href="#"><font color="white">香烟酒水</font></a>
				 </td>
			 </tr>
			 <!-- 3.注册部分 -->
			 <tr>
			 	<td background="../img/regist_bg.jpg" height="500px">
					<table border="5px"width="60%" height="80%" align="center" bgcolor="white">
						<tr>
							<td>
								<table width="60%" height="60%" align="center">
									<tr>
										<td colspan="2"><font color="blue">会员注册</font>User REGISTER</td>
									</tr>
									<tr>
										<td>用户名：</td>
										<td>
											<input type="text" placeholder="请输入用户名">
										</td>
									</tr>
									<tr>
										<td>密  码：</td>
										<td><input type="password" placeholder="请输入密码"/></td>
									</tr>
									<tr>
										<td>确认密码：</td>
										<td><input type="password" placeholder="请再次输入密码"/></td>
									</tr>
									<tr>
										<td>Email：</td>
										<td><input type="email" placeholder="请输入邮箱"/></td>
									</tr>
									<tr>
										<td>姓名：</td>
										<td><input type="text" placeholder="请输入真实姓名"></td>
									</tr>
									<tr>
										<td>性别：</td>
										<td><input type="radio" name="sex">男<input type="radio" name="sex" />女</td>
									</tr>
									<tr>
										<td>出生日期：</td>
										<td><input type="date" placeholder="请选择出生日期"/></td>
									</tr>
									<tr>
										<td>验证码：</td>
										<td><input type="text" /></td>
									</tr>
									<tr>
										<td></td>
										<td><input type="submit" value="注册"></td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			 </tr>
			 <!-- 4.页脚图片 -->
			 <tr>
			 	<td>
					<img src="../img/footer.jpg" >
				</td>
			 </tr>
			 <!-- 5.网站声明信息 -->
			 <tr>
			 	 <td align="center">
					 <a href="#">关于我们</a>
					 <a href="#">联系我们</a>
					 <a href="#">招贤纳士</a>
					 <a href="#">法律声明</a>
					 <a href="#">友情链接</a>
					 <a href="#">支付方式</a>
					 <a href="#">配送方式</a>
					 <a href="#">服务声明</a>
					 <a href="#">广告声明</a>
					 <br>
					 Copyright@
				 </td>
			 </tr>
		 </table>
	</body>
</html>

web前端知识day01_HTML的更多相关文章

  1. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  2. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  3. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  4. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. web前端知识体系小结（转）

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  7. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  8. （转）web前端知识精简

    Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...

  9. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

随机推荐

  1. 2019.11.18CTFD搭建记录

    ### 0x01 实验室纳新,准备在自己服务器搭建个ctfd给新生们玩玩,忙活了一天orz[大一刚开学就搭建过没这么费力啊..] 现在大二了没想到能折腾一天... 直接说下我踩的坑吧,给后来的人们说说 ...

  2. 201409-2 画图 Java

    思路: 法1:计算每个矩形的小方块,去掉重复的 法2:二维数组,需要涂色就置flag为1,最后遍历输出,不会有重复计算 import java.util.Scanner; public class M ...

  3. 05 SpringMVC：02.参数绑定及自定义类型转换&&04.SpringMVC返回值类型及响应数据类型&&05.文件上传&&06.异常处理及拦截器

    springMVC共三天 第一天: 01.SpringMVC概述及入门案例 02.参数绑定及自定义类型转换 03.SpringMVC常用注解 第二天: 04.SpringMVC返回值类型及响应数据类型 ...

  4. ZJNU 1069 - 表达式的转换——中级

    栈运用的模板题,对于符号进行出入栈操作,每次与栈顶的符号进行优先级判断,得出第一行后缀表达式. 在其后的化简计算中,每次用一个特殊符号(代码中使用了'?')代替原来的计算结果引用,并开一个数组表示每次 ...

  5. 线性齐次递推式快速求第n项 学习笔记

    定义 若数列 \(\{a_i\}\) 满足 \(a_n=\sum_{i=1}^kf_i \times a_{n-i}\) ,则该数列为 k 阶齐次线性递推数列 可以利用多项式的知识做到 \(O(k\l ...

  6. \_\_module\_\_和\_\_class\_\_

    目录 __module__和__class__ 一.__module__ 二.通过字符导入模块 三.__class__ __module__和__class__ # lib/aa.py class C ...

  7. Python基础学习五

    Python基础学习五 迭代 for x in 变量: 其中变量可以是字符串.列表.字典.集合. 当迭代字典时,通过字典的内置函数value()可以迭代出值:通过字典的内置函数items()可以迭代出 ...

  8. ubuntu Elasticsearch环境搭建

    https://www.cnblogs.com/pigzhu/p/4705870.html

  9. ubuntu16.04设置apt 阿里源

    sudo gedit /etc/apt/sources.listdeb http://mirrors.aliyun.com/ubuntu/ trusty main restricted univers ...

  10. 表查询语句及使用-连表（inner join-left join）-子查询

    一.表的基本查询语句及方法 from. where. group by(分组).having(分组后的筛选).distinct(去重).order by(排序).  limit(限制) 1.单表查询: ...