自学前端第一天-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_63293995/article/details/123280439

这篇博客介绍了如何使用VSCode编辑HTML，并展示了基础的HTML结构和常用标签。通过快捷键如Alt+B快速预览网页效果，利用！+回车快速生成标签，如h系列标题标签和p段落标签，以及了解br换行和hr水平线标签的功能。此外，还分享了VSCode的一些实用快捷操作，如复制、粘贴和剪切整行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

软件：vs code、谷歌

首先是网页的固定结构html为一个整体，head头部（放置网页的标题，风格等），body身体（放置网页的主题内容）

<html>
<head>
    <title>网页的标题</title>
</head>
<body>
    网页的主体内容
</body>
</html>

第一步是先认识vs code的一些快捷键

1.快速查看网页效果：alt+b （注：vs code需要先去安装open in browser插件才可使用该快捷键）

2.快速生成结构标签：！+回车键（回车键也可以换成tab键，但！必须是英文的，中文！无效）

3.保存：ctrl+s （可以点击左上角文件-自动保存，省掉每次保存的麻烦）

4.快速复制一整行：光标点击需要复制的位置，按下ctrl+c

5.快速粘贴一整行：ctrl+v

6.快速剪切一整行：ctrl+x

7.注释快捷键：ctrl+/

认识排版标签

打开vs code软件新建一个文件（后缀为.html）

1.h系列的标签（使用场景：文章的标题，网页的logo部分等）

使用快捷键！+回车键生成结构标签

在body输入h标签如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

使用快捷键alt+b查看网页效果

可以得知h标签有文字加粗，数字越大，文字越小，独占一行的特点（注：该标签范围1~6级）

2.段落标签<p>段落内容</p>，通俗来说就是写作文一段一段的文字，结合<br>换行标签来说，先附代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>第一段balalalalaalalalalalalalalalalalalala</p>
    <p>第一段balalalalaalalalalalalalalalalalala<br>la</p>
</body>
</html>

网页效果如下

可以看到p标签的特点：1.段落之间存在间隙 2.独占一行

br标签：让文字强制换行

补充：水平线标签hr：在页面中显示一条水平线