概述

本系列笔记为前端入门学习,了解前端HTML+CSS+JS以及node.js等开发工具和框架的基础知识。

准备工作

开发环境搭建:VS code + 插件:

  • HTML CSS Support (CSS编写神器)
  • Liver Server (实时预览)(安装后在vs code空白处右键=>open/stop with live server即可弹窗出page,编辑完只要ctrl+s就可以自动刷新)
  • Auto Rename Tag (同步修改标签,头尾绑定一起修改)

快捷操作:

  • 直接输入!, p, h1等命令快速创建标签

  • shift + alt + down 快速复制当前行

  • ctrl + / 注释当前行

  • 鼠标放在属性名称上,可以显示其属性的取值及解释

HTML基础

HTML(HyperText Markup Language):超文本标记语言。其结构组成元素可以分为三类:(其实是display属性的三个值)

  • 块元素(block):新行开始,独占一行。如div, p, h1~h6, table, ul, ol, li, dl, dd等。可以包含其他块级元素和行内元素。
  • 行内元素(inline):在同一行内水平排列,只占据内容所需宽度,不能包含块级元素,可以包含其他的行内元素。如span, a, button等。
  • 行内块元素(inline-block):同一行内水平排列,可以设置宽度、高度、内外边距等块级元素特性。如img, 也可以通过display: inline-block强制指定。
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
<!-- 文档类型 -->
<!DOCTYPE html>
<!-- 语言 -->
<html lang="en">
<!-- head -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- page的大标题 -->
<title>HTML基本语法</title>
</head>
<!-- body -->
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>正文(段落)</p>
<p>文本样式:<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s></p>

<!-- 超链接 -->
<a href="http://phyjack.com/archives/">超链接</a>
<!-- 换行 -->
<br>
<a href="http://phyjack.com/archives/" target="_self">超链接self打开(默认)</a>
<a href="http://phyjack.com/archives/" target="_blank">超链接blank打开</a>
<a href="http://phyjack.com/archives/" target="_parent">超链接parent打开</a>
<a href="http://phyjack.com/archives/" target="_top">超链接top打开</a>

<!-- 分割线 -->
<hr>
<!-- 图片 -->
<img src="http://images.phyjack.com/20240711055222.png" alt="">
<hr>
<img src="123.png" alt="无法获取图片">
<hr>

<!-- 块元素 -->
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<!-- 行内元素 -->
<span>span标签</span>
<span>span标签</span>
<span>span标签</span>

<ul>无序列表
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>

<ol>有序列表
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>

<table border="2">
<!-- table row -->
<tr>
<!-- table header -->
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
</tr>
<tr>
<!-- table data -->
<td>Bob</td>
<td>Eric</td>
<td>Jack</td>
</tr>
<tr>
<td>23</td>
<td>25</td>
<td>24</td>
</tr>
<tr>
<td>99</td>
<td>98</td>
<td>98</td>
</tr>
</table>

</body>
</html>

效果如下:

参考链接: