入门基础知识
１．前端三大件
首先我们要知道HTML、CSS、Javascript三者并称为前端三大件，一个正常的网页可以
通过HTML进行基本的框架构建，通过CSS进行页面美化和排版，通过JS来实现网页的功能
２．HTML简介
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
３．HTML版本须知
HTML历史上有如下版本： [5]
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 [5]
③HTML 3.2：1997年1月14日，W3C推荐标准。 [5]
④HTML 4.0：1997年12月18日，W3C推荐标准。 [5]
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 [5]
⑥[HTML 5](https://baike.baidu.com/item/HTML 5/8762673)：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。 [6]
４．使用的工具
使用Google Chrome浏览器来实现，使用vscode来编译，建议官网下载，下面是笔者的VScode百度网盘资源
链接: https://pan.baidu.com/s/1-UlhQVi0RkQNyPDp_aSsfw?pwd=igsg 提取码: igsg
其实一开始使用vscode写HTML还是细节满满的，这是笔者找的相对比较好的安装vscode后第一个HTML网页教程
HTML入门
一．基本框架
如下图所示，这是极简化基本框架模板，由“”说明文件类型，由用角括号包裹一对htlm，在这之中就是html编写主板。
两个head中间写htlm文件的网站资讯，如网页名字和网页编码格式等。
两个body中间写html文件的网站内容主，如图片，链接，文章等
二．第一个网页
了解了基本框架后，让我们一起来编写第一个简单网页吧！加油！
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>page2</title>
</head>
<body>
<p>这是我们的第一个HTML网页哦！</p>
</body>
</html>
|
笔者来提示注意事项并展示成果了哦！
三. 基本标签
由上文可知角括号里总包括一些标签字母，来实现各种不同的功能
由于实在是太多拉，这里笔者给大家找了一个相当不错的《HTML标签》大全哦，建议收藏。
下图是笔者自己写的个别标签使用图片哦！
相关代码
可以偷懒使用作者的代码进行简单修改（jpg、MP4文件需要自己本地的），但是还是建议自己敲一遍熟悉熟悉
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="description" content="周杰伦最帅,不愧是我喜欢的银，（对网页的描述）"/>
<mata name="author" content="周杰伦"></mata>
<mata name="keywords" content="标签，周杰伦，html，自学"/>
<mate name="viewport" content="width = device-width,initial-scale=1.0"/>
<title>第一个html网页哦</title>
</head>
<body>
<h2>第一篇文章</h2>
<p>今天开始<i><b>入门</b></i>了呢</p>
<br/>
<hr/>
<h2>第二篇文章</h2>
<p>开心</p>
<a href="https://baiyi-ing.github.io/">白依的博客</a>
<br/> <a href="page2.html">page2</a>
<br/> <a href="HTML/page3.html">page3</a>
<br/> <a href="1650390422890.jpg">鸭鸭</a>
<br/><a href="https://sm.ms/image/y9aOnjLwukBxHZC" target="_blank"><img src="https://s2.loli.net/2022/05/14/y9aOnjLwukBxHZC.png" ></a>
<br/><img src="1650390422890.jpg" width="400" height="500"/>
<video src="前奏.mp4" controls width="400">一个本地视频</video>
<lo type="A" style="color: red;">
<li>ol是可以排序的哦</li>
<li>这就是相应效果哦</li>
<li>加入type可以改变存档情况</li>
<li>A表示用大写字母排序</li>
<li>a表示用小写字母排序</li>
<li>i表示用小写罗马字排序</li>
<li>I表示用大写写罗马字排序</li>
</lo>
<table width="400">
<tr>
<td>日期</td>
<td>数学</td>
<td>英文</td>
</tr>
<tr>
<td>2.8</td>
<td>90</td>
<td>90</td>
</tr>
</table>
<div style="color: blueviolet;">
<table width="400">
<tr>
<td>日期</td>
<td>数学</td>
<td>英文</td>
</tr>
<tr>
<td>2.8</td>
<td>90</td>
<td>90</td>
</tr>
</table>
</div>
<div> div </dic>
<div> div会换行 </div>
<span> span </span>
<spam> span不会换行 </spam>
<br><br>
表单<br>
<form>
账号：<input type="text" placeholder="请输入账号"/>
<br><br>
密码：<input type="password" placeholder="请输入密码"/>
<br><br>
<hr>
<input type="text" name="keyword"/>
<input type="submit" name="submit" value="搜索"/>
</form>
<input type="date"/>
<br><br>
<input type="range" />
<br><br>
<input type="file" />
<br><br>
<input type="checkbox" />
<br><br>
<textarea>你好鸭，可以在这里输入哦！</textarea>
</body>
</html>
|
注意：图片img、MP4等使用前要提前保存到所在文件中才能使用哦
四. 子页跳转
建立Page2和Page3作为主页index的子页,不同于其它网页链接，这两个子页都是总文件中的文件，而且page3还不是直接在总文件夹中的文件。如下图是两个不同子页跳转到首页（index.html）的写法
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Page2</title>
</head>
<body>
<a href="index.html">首页</a>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<head>
<title>Page3</title>
<body>
<p><h2>Page3</h2></p>
<br/>
<a href="../index.html">首页</a>
</body>
</head>
|
