3小时前端入门教程（HTML+CSS+JS）_哔哩哔哩_bilibili
此部分只作为了解学习。不必深究。
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本标签</title>
</head>
<body>
<h1>Test1</h1>
<h2>Test2</h2>
<h3>Test2</h3>
<h4>Test2</h4>
<h5>Test2</h5>
<h6>Test2</h6>
<p>This is a Test</p>
<p>
字体加粗:<b>加粗1</b><strong>加粗2</strong><i>斜体</i><u>下划线</u><s>删除键</s>
</p>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<table border="1">
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
<tr>
<td>One data</td>
<td>Two data</td>
<td>Three data</td>
</tr>
<tr>
<td>One data</td>
<td>Two data</td>
<td>Three data</td>
</tr>
<tr>
<td>One data</td>
<td>Two data</td>
<td>Three data</td>
</tr>
</table>
</body>
</html>
|
![]()
HTML属性1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 属性</title>
</head>
<body>
<a href="https://bakebakebakebake.github.io/">这是一个超链接</a>
<br>
<a href="https://bakebakebakebake.github.io/" target="_blank">这是一个超链接</a>
<hr>
<img src="https://bakebakebakebake.github.io/images/Pasted%20image%2020240118184733.png" alt="decribption" width="800" height="300">
<hr>
<img src="" alt="404">
</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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 区块</title>
</head>
<body>
<div class="nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
</div>
<div class="content">
<h1>HEADING</h1>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<span>span tag1</span>
<span>span tag2</span>
<span>span tag3</span>
<span>span tag4</span>
<hr>
<span>One Link Click This <a href="#">Link</a></span>
</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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表单</title>
</head>
<body>
<form action="#">
<label>UserName</label>
<input type="text" placeholder="input UserName"><br><br>
<label for="pwd">PassWord</label>
<input type="password" id="pwd" placeholder="Input password"><br><br>
<label for="">Gender</label>
<input type="radio" name="Gender">Male
<input type="radio" name="Gender">Female
<input type="radio" name="Gender">Other
<br><br>
<label for="">Hobby</label>
<input type="checkbox" name="Hobby">Singing
<input type="checkbox" name="Hobby">Dancing
<input type="checkbox" name="Hobby">ComputerGames
<input type="checkbox" name="Hobby">Reading
<br><br>
<input type="submit" value="login">
</form>
</body>
</html>
|
效果：
![]()
CSS
JS
