一、HTML是什么
HTML是一种超文本标记语言，
通过它可以建立网页（文字、图片、音乐、视频、链接、程序），
人们可以通过通过浏览器进行访问。
二、HTML历史
HTML 2.0——1995年11月，RFC 1866发布
HTML 3.2——1997年1月14日，W3C发布推荐标准
HTML 4.0——1997年12月18日，W3C发布推荐标准
HTML 4.01——1999年12月24日，W3C发布推荐标准
HTML 5——2014年10月28日，W3C发布推荐标准
三、Html、CSS、js的关系
1. HTML实现网页内容。
2. CSS实现网页样式。
3. JavaScript实现动态特效。
四、html语法结构
1.类型声明 html
2.文档头部 head
3.文档体 body
4.文档元素
1 <!DOCTYPE html><!--类型标签：文档类型--> 2 3 <html> 4 <head><!--头部标签：文档属性--> 5 <meta charset="UTF-8"> <!--中文字符定义--> 6 <title></title> <!--标题标签：标题名称--> 7 </head> 8 9 <body> <!--文档标签：文档内容--> 10 </body> 11 </html> 12
五、元素
1.元素是指从开始标签到结束标签的所有代码。 <开始标签 属性="属性值"> 内容 <结束标签>
2.单标记元素在开始标签中关闭，为了规范要在后面加“ /”。
3.大多数html元素都是可以嵌套的。
开始标签 元素内容 结束标签
<p> hello world! </p> 双标签
<br /> 单标签
六、属性
我们能为元素定义属性，属性为元素提供更多的信息，属性能定义文本样式、排列方式、标签名等等。
开始标签 属性 元素内容 结束标签
<a href="http://www.baidu.com" > 超链接 </a>
href 规定元素的链接地址
七、格式化
用不同的标签元素来表达不同的内容就是格式化；作用是让我们的代码更加规范，能够被爬虫识别，定义样式更加方便。
我们表达段落用p标签 <p>这是段落</p>
我们表达链接用a标签 <a href="http://www.baidu.com" target="_blank">超链接</a>
我们表达斜体用i标签 <i>这是斜体</i>
八、各标签功能
1 ------------------------------------元素-------------------------------------
2
3
4 <!DOCTYPE html>
5 <html>
6 <head>
7 <meta charset="UTF-8">
8 <title>html元素</title>
9 <style>
10 a:link {color: #D86C01;} /* 未访问的链接 */
11 a:visited {color: #D86C01;} /* 已访问的链接 */
12 a:hover {color: #50C07D;} /* 鼠标移动到链接上 */
13 a:active {color: #D86C01;} /* 选定的链接 */
14
15 body{
16 width: 800px;
17 margin-left: 80px;
18
19 }
20 p,ul,address,blockquote,pre{
21 margin-bottom: 40px;
22 background-color: #D3D3D3;
23 }
24
25 #list{
26 width: 200px;
27 position: fixed;
28 left: 900px;
29
30 }
31
32 #list a{
33 text-decoration:none;
34
35
36 }
37 </style>
38 </head>
39 <body>
40
41 <div id="list">
42 <h3>目录</h3>
43 <a href="#1">1.标题文本--h1-h6</a><br>
44 <a href="#2">2.加粗文本--b</a><br>
45 <a href="#3">3.斜体文本--i</a><br>
46 <a href="#4">4.重要文本--strong</a><br>
47 <a href="#5">5.强调文本--em</a><br>
48 <a href="#6">6.较小文本--small</a><br>
49 <a href="#7">7.插入线--ins</a><br>
50 <a href="#8">8.删除线--del</a><br>
51 <a href="#9">9.下划线--u</a><br>
52 <a href="#10">10.地址--address</a><br>
53 <a href="#11">11.短引用--q</a><br>
54 <a href="#12">12.长引用--blockquote</a><br>
55 <a href="#13">13.单行代码--code</a><br>
56 <a href="#14">14.多行代码--pre</a><br>
57 <a href="#15">15.段落--p</a><br>
58 <a href="#16">16.换行--br</a><br>
59 <a href="#17">17.水平线--hr</a><br>
60 <a href="#18">18.版权号--& copy</a><br>
61 <a href="#19">19.注册商标--& reg</a><br>
62 <a href="#20">20.有序列表--ol/li</a><br>
63 <a href="#21">21.无序列表--ul/li</a><br>
64
65
66 </div>
67 <!--页面目录区域-->
68
69
70
71 <div>
72 <h3 id="1">1.标题文本（h1-h6）</h3>
73 <p>
74 <ul>
75 <li><h1>标题文本</h1></li>
76 <li><h2>标题文本</h2></li>
77 <li><h3>标题文本</h3></li>
78 <li><h4>标题文本</h4></li>
79 <li><h5>标题文本</h5></li>
80 <li><h6>标题文本</h26></li>
81 </ul>
82
83 </li>
84 </p>
85
86 <h3 id="2">2.加粗文本（b）</h3>
87 <p>
88 普通文本 | 例：<b>加粗文本</b>
89 </p>
90
91 <h3 id="3">3.斜体文本（i）</h3>
92 <p>
93 普通文本 | 例：<i>斜体文本</i>
94 </p>
95
96 <h3 id="4">4.重要文本（strong）</h3>
97 <p>
98 普通文本 | 例：<strong>重要文本，表现与加粗文本类似</strong>
99 </p>
100
101 <h3 id="5">5.强调文本（em）</h3>
102 <p>
103 普通文本 | 例：<em>重要文本，表现与斜体文本类似</em>
104 </p>
105
106 <h3 id="6">6.较小文本（small）</h3>
107 <p>
108 普通文本 | 例：<small>较小文本，文字缩小</small>
109 </p>
110
111 <h3 id="7">7.插入线（ins）</h3>
112 <p>
113 普通文本 | 例：<ins>表现与下划线类似，通常与删除线配合使用</ins>
114 </p>
115
116 <h3 id="8">8.删除线（del）</h3>
117 <p>
118 普通文本 | 例：<del>可删除文本</del>
119 </p>
120
121 <h3 id="9">9.下滑线（u）</h3>
122 <p>
123 普通文本 | 例：<u>避免单独使用下划线，以免让用户误以为是超链接</u>
124 </p>
125
126 <h3 id="10">10.地址（address）</h3>
127 <p>
128 普通文本 | 例：<address>蓝桥街199号</address>
129 </p>
130
131 <h3 id="11">11.短引用（q）</h3>
132 <p>
133 普通文本 | 例：<q>引用一句话，前端的核心能力在于解决实际问题，能够用简单代码实现需求。</q>
134 </p>
135
136 <h3 id="12">12.长引用（blockquote）</h3>
137 <p>
138 普通文本 | 例：<blockquote>引用一段话,效果就是跨一行独立出来并且与上下文相隔。</blockquote>
139 <p>这是下文。</p>
140 </p>
141
142 <h3 id="13">13.单行代码（code）</h3>
143 <p>
144 普通文本 | 例：<code>a=1 b=2 c=a+b pingt(c)</code>
145 </p>
146
147 <h3 id="14">14.多行代码（pre）</h3>
148 <p>
149 普通文本 | 例：
150 <pre>
151 a=1;
152 b=2;
153 c=a+b;
154 pingt(c)
155
156 </pre>
157 </p>
158
159 <h3 id="15">15.段落（p）</h3>
160
161 <p>这就是段落</p>
162
163 <h3 id="16">16.换行（br）</h3>
164 <p>这就是<br>换行</p>
165
166
167 <h3 id="17">17.水平线（hr）</h3>
168 <p>
169 <hr>
170 </p>
171
172 <h3 id="18">18.版权号（& copy）</h3>
173 <p>©</p>
174
175 <h3 id="19">19.注册商标（& reg）</h3>
176 <p>®</p>
177
178 <h3 id="20">20.无序列表（ul/li）</h3>
179 <p>
180 <ul>
181 <li>无序列表</li>
182 <li>无序列表</li>
183 <li>无序列表</li>
184 </ul>
185 </p>
186
187 <h3 id="21">21.有序列表（ol/li）</h3>
188 <p>
189 <ol start="10">
190 <li>有序列表</li>
191 <li>有序列表</li>
192 <li>有序列表</li>
193 </ol>
194 </p>
195
196
197
198
199 </div>
200 <!--正文区域-->
201
202
203 </body>
204 </html>
205
206
207
208 ----------------------------------超链接-------------------------------------
209
210 <!DOCTYPE html>
211 <html>
212 <head>
213 <meta charset="UTF-8">
214 <title>html超链接</title>
215 <style>
216 a:link {color: blue} /* 未访问的链接 */
217 a:visited {color: blue} /* 已访问的链接 */
218 a:hover {color: red} /* 鼠标移动到链接上 */
219 a:active {color: blue} /* 选定的链接 */
220 body{
221 width: 800px;
222 margin-left: 80px;
223 }
224 p,ul,address,blockquote,pre{
225 margin-bottom: 40px;
226 background-color: #D3D3D3;
227 }
228
229 .list{
230
231
232 }
233
234 </style>
235 </head>
236 <body>
237
238 <div class="list">
239 <h3>目录</h3>
240 <a href="#1">1.超链接--a</a><br>
241 <a href="#2">2.回到顶部--a</a><br>
242 <a href="#3">3.插入图像--img</a><br>
243
244
245 </div>
246 <!--页面目录区域-->
247
248
249
250 <div>
251
252
253 <h3 id="1">1.超链接（a）</h3>
254 <p>
255 <a href="http://www.baidu.com">外部链接</a><br>
256 <a href="../index.html" >本地链接</a><br>
257 <a href="http://www.baidu.com" target="_blank">新窗口打开</a><br>
258 <a href="mailto:[email protected]"?subject=邮件主题内容&body=邮件内容">邮件链接</a><br>
259 <a href="http://www.taobao.com"><img src="../images/logo.gif" alt="图像链接" title="图像链接"/></a><br>
260 </p>
261
262 <h3 id="2">2.回到顶部（a #）</h3>
263 <p>
264 <a href="#">回到顶部</a>
265 </p>
266
267 <h3 id="3">3.插入图像（img）</h3>
268 <p>
269 <img src="../images/xxgk.jpg"/>
270 </p>
271
272
273 </div>
274 <!--正文区域-->
275
276
277 </body>
278 </html>
279
280 ------------------------------------表格--------------------------------------
281
282 <!DOCTYPE html>
283 <html>
284 <head>
285 <meta charset="UTF-8">
286 <title>html表格</title>
287 <style>
288 a:link {color: blue} /* 未访问的链接 */
289 a:visited {color: blue} /* 已访问的链接 */
290 a:hover {color: red} /* 鼠标移动到链接上 */
291 a:active {color: blue} /* 选定的链接 */
292 body{
293 width: 800px;
294 margin-left: 80px;
295 }
296 p,ul,address,blockquote,pre{
297 margin-bottom: 40px;
298 background-color: #D3D3D3;
299 }
300
301 table,tr,th,td{
302 border-collapse:collapse;
303 border: 1px solid #0099FF;
304 width: 500px;
305 height: 30px;
306 padding: 2px;
307
308 }
309
310
311 table,tr,th{
312 background-color:#A9A9A9;
313 text-align: center;
314 color: #000000;
315
316 }
317
318 table,tr,td{
319 background-color:#D8D8D8;
320 text-align: center;
321 color: #000000;
322
323 }
324
325
326
327
328
329 </style>
330 </head>
331 <body>
332
333 <div class="list">
334 <h3>目录</h3>
335 <a href="#1">1.表格--table</a><br>
336
337
338
339 </div>
340 <!--页面目录区域-->
341
342
343
344 <div>
345
346
347 <h3 id="1">1.表格（table）</h3>
348 <p>
349
350 <!--
351 表格标签：table 表格摘要：summary 表格标题：caption
352 表头thead 表格体：tbody 能将表格分段显示 表尾tfoot
353 表格行：tr 表格行标题：th 表格行内容：td
354 -->
355
356 <table summary="表格摘要：本表记录了2012-2013年库存，记录包含u盘和耳机库存量">
357 <caption>2012-2013年库存记录</caption>
358
359 <tr><th>产品名称</th> <th>品牌</th> <th>库存量（个）</th> <th>入库时间</th></tr>
360 <tr><td>耳机</td> <td>联想</td> <td>500</td> <td>2012-1-2</td></tr>
361 <tr><td>U盘</td> <td>金士顿</td> <td>120</td> <td>2012-8-10</td></tr>
362 <tr><td>U盘</td> <td>爱国者</td> <td>133</td> <td>2012-3-25</td></tr>
363 <tr><td>耳机</td> <td>联想</td> <td>600</td> <td>2013-8-2</td></tr>
364 <tr><td>U盘</td> <td>金士顿</td> <td>320</td> <td>2013-5-10</td></tr>
365 <tr><td>U盘</td> <td>爱国者</td> <td>533</td> <td>2013-2-25</td></tr>
366 <tr><td span="2">金额合计:</td> <td>10000</td>
367
368 </table>
369 <br />
370
371 <table>
372 <tr><th>产品名称</th> <th>品牌</th> <th>库存量（个）</th> <th>入库时间</th></tr>
373 <tr><td>耳机</td> <td>联想</td> <td>500</td> <td>2012-1-2</td></tr>
374 <tr><td>U盘</td> <td>金士顿</td> <td>120</td> <td>2012-8-10</td></tr>
375 <tr><td>U盘</td> <td>爱国者</td> <td>133</td> <td>2012-3-25</td></tr>
376 <tr><td>耳机</td> <td>联想</td> <td>600</td> <td>2013-8-2</td></tr>
377 <tr><td>U盘</td> <td>金士顿</td> <td>320</td> <td>2013-5-10</td></tr>
378 <tr><td>U盘</td> <td>爱国者</td> <td>533</td> <td>2013-2-25</td></tr>
379 <tr><td colspan="3">金额合计:</td> <td>10000</td></tr>
380 </table>
381
382 <br />
383 <table>
384 <tr>
385 <th>表格1</th>
386 <th>表格2</th>
387 </tr>
388 <tr>
389 <td>
390 <ul>
391 <li>梨子</li>
392 <li>桃子</li>
393 <li>苹果</li>
394 </ul>
395 </td>
396
397 <td>
398 你喜欢吃的水果有
399 </td>
400 </tr>
401 </table>
402
403
404
405 </div>
406 <!--正文区域-->
407
408
409 </body>
410 </html>
411
412
413 ---------------------------------表单--------------------------------------
414 <!DOCTYPE HTML>
415 <html>
416 <head>
417 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
418 <title>html表单</title>
419
420 </head>
421 <body>
422 <form action="save.php" method="post">
423 单行文本框：
424 <input type="text" />
425
426 <br>
427
428 单行密码框：
429 <input type="password" />
430
431 <br>
432
433 多行文本框：
434 <textarea rows="2" cols="10" >默认值</textarea>
435
436 <br><br><br>
437
438 单选框：
439 男<input type="radio" name="sex" />
440 女<input type="radio" name="sex" />
441
442 <br>
443
444 多选框：
445 苹果
446 <input type="checkbox" name="fruits" />
447 梨子
448 <input type="checkbox" name="fruits" />
449 桃子
450 <input type="checkbox" name="fruits" />
451
452 <br><br><br>
453 多选下拉框：
454 <select multiple="multiple">
455 <option>苹果</option>
456 <option>梨子</option>
457 <option>桃子</option>
458 <option>樱桃</option>
459 </select>
460
461
462 <br>
463 单选下拉框：
464 <select>
465 <option>苹果</option>
466 <option>梨子</option>
467 <option>桃子</option>
468 <option>樱桃</option>
469 </select>
470 <br><br><br>
471
472 附件上传：<input type="file"/><br>
473 <a id="download" href="download/my.rar" target="_blank">文件下载：</a>
474 <br><br><br>
475
476 <input type="submit" value="提交" />
477 <input type="reset" value="重置" />
478
479
480 </form>
481
482
483 </body>
484 </html>
时间： 2024-10-25 18:16:33