概述

本系列笔记为前端入门学习，了解前端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>

效果如下：

参考链接：