A、HTML入力例（ノスタルジア）
1.概要
HTML：ハイパーテキストマークアップ言語HTML
ハイパーテキスト：強力な通常のテキスト機能よりも、異なるスタイル（太字など、中心、イタリック）を達成できる
内容を記述したラベルに使用される言語：マークアップ言語を。
2.ノスタルジアケースを完了するには、次のタグ
1
2
3
4
5
|
<H1> </ H1>タイトル
<B> </ B>太字
<I> </ I>イタリック
</br>改行
<P> </ P>段落
|
HTMLの主な役割
ベースページのデザイン、HTML5
3.HBuilder一般的に使用されるショートカットキーMacバージョン
カーソル削除のCTRL + D線
電流コピーするための次の行に+ Rコマンド+シフト
コマンド+は、入力ラインの中央に元の2つの部分は、唯一の最前列に入る場合、次の行（現在のカーソルにカーソルを移動2行に分割、カーソルは現在の行の内容を変更せずに次の行にジャンプ指示し、このコマンドを使用して、彼は自分のために、それは非常に面倒作られ、非常に単純な）
コマンド+ Shiftキー+挿入行に現在の行を入力します。空白行
> <自動的に縦方向のタブによって生成されたラベルとタブを入力し、これをうまく利用タブ
現在のコンテキストにコマンド+左右の矢印キーはラインで、縦線がエンドすべてで
コマンド+ /コメント
4.例と基本的な文法仕様をスタート
1
2
|
強い：それは大胆ですが、含まれるセマンティック検索エンジンに優しい
EM：イタリックされていますが、セマンティック検索エンジンは友好含み
|
5.画像とパス
6.オール順序付きリストと番号なしリスト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>
|