• HTML开篇之安装VSvode(用记事本编辑HTML)

    文章目录

    大家好，我是晓星航。今天为大家带来的是 HTML 相关的讲解！😀

    前端开篇知识点讲解

    网页三剑客：HTML CSS JavaScript

    HTML 描述了用户的骨架。(页面里面有啥没啥) 骨 静态的

    CSS 描述了网页的样式。(形容词) 皮 静态的

    JS 描述了网络的行为。(如何和用户交互) 魂 动态的

    1.HTML 结构

    1.1认识 HTML 标签

    HTML 代码是由 “标签” 构成的.

    形如:

    <body>hellobody>

    • 1
    • 标签名 (body) 放到 < > 中
    • 大部分标签成对出现. 为开始标签, 为结束标签.
    • 少数标签只有开始标签, 称为 “单标签”.
    • 5开始标签和结束标签之间, 写的是标签的内容. (hello)
    • 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
    <body id="myId">hellobody>

    • 1

    1.2HTML 文件基本结构

    <html>
    <head>
        <title>第一个页面title>
    head>
    <body>
       hello world
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • html 标签是整个 html 文件的根标签(最顶层标签)
    • head 标签中写页面的属性.
    • body 标签中写的是页面上显示的内容
    • title 标签中写的是页面的标题.

    1.3标签层次结构

    • 父子关系
    • 兄弟关系
    <html>
    <head>
        <title>第一个页面title>
    head>
    <body>
       hello world
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    其中:

    • head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
    • title 是 head 的子标签. head 是 title 的父标签.
    • head 和 body 之间是兄弟关系.

    可以使用 chrome 的开发者工具查看页面的结构.

    F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节.

    标签之间的结构关系, 构成了一个 DOM 树

    DOM 是 Document Object Mode (文档对象模型) 的缩写.

    1.4快速生成代码框架

    在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    细节解释: (了解即可, 不必深究)

    • 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
    • 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览 器会根据此处的声明提示是否进行自动翻译).
    • 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
    • name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
    • content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并 设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

    1.5用记事本写HTML

    首先新建一个记事本，并将后缀改为html

    用记事本格式打开它

    在里面使用HTML语言格式写入我们需要展示的hello内容

    将他拖入我们浏览器中解析运行，就可以看到我们目标的hello啦！

    1.6前端开发工具

    前端开发，使用的开发环境，最主流的是这么两个：

    1. JB系列
      IDEA 如果是专业版(教育版)，本身就是支持 前端 的
      或者也可以使用 JB 提供的 WebStorm 但是他是收费的

    2. VSCode 免费方案。使用体验略逊于 WebStrom (100 vs 90)
      注意 VSCode[轻量级开发工具] != Visual Studio[重量级开发工具]

    1.7下载vscode 及使用教学

    下载vscode

    在百度中搜索vscode，并点击进入官网

    进入官网页面点击Download进行下载

    找到自己电脑需要下载的地方点击下载按钮，例如博主的电脑是Windows系统，所以博主点击的就是第一个

    点击下载之后，我们电脑就自动开始下载前端开发工具 — vscode

    下载完毕之后，我们无脑点击下一步即可轻松完成下载！！！

    下载好后的图标展示

    那么我们如何使用vscode呢？

    进入vscode的初始界面

    首先点击左上角的File(文件)，并选中Open Folder(打开文件夹)

    选中一个我们提前创建好的，要存储的文件夹

    点击信任作者，这里的作者就是我们自己，所以是可以无条件信任的。

    选好目录之后的界面

    在我们选中的文件夹中创建新的文件

    创建好新文件之后，我们就可以直接编写前端代码了，这里提示和高亮此时就都出现了，和我们之前用记事本写的方式比较，简直就是上升了一个档次呀！！！(记住写完代码后 ctrl + s进行保存)

    如何运行我们的vscode代码呢？

    右键我们新建的文件，然后选择 在文件资源管理器中显示

    打开文件资源管理器

    在文件资源管理器中直接双击它，就能看到我们代码的运行界面啦！

    这里类似于拖拽我们的代码到浏览器运行，为什么我们不直接配置好环境直接和Java那样一点就运行呢？那是因为我们 html 这里的代码并不是全部都可以和Java代码一样一点就能运行，还是有有一些代码需要拖拽到里面才可以运行。

    如何自动保存呢？

    这里的hello.html后面有一个实心的小白点表示代码未保存

    在我们按下ctrl + s后，可以看到实心小白点消失了

    在左下角的选项中找到设置并打开，输入save，找到图中圈中画面把off改一下就能自动保存了！

    此时我们代码再次书写时，我们的vscode就会自动帮我们保存代码啦！！！

    汉化Vscode

    1. 找到我们这个图标点击

    1. 在搜索栏中输入Chinese来查找中文并点击install(下载)

    1. 下载完后我们点击弹出来的restart即可轻松转为汉化版本的Vscode了

    1. 大功告成，Vscode已经成功汉化！！！

    1. 如果我们想回退到英文版本，只需要把我们Chinese这个汉化补丁包卸载并重启我们的Vscode即可！！！

    感谢各位读者的阅读，本文章有任何错误都可以在评论区发表你们的意见，我会对文章进行改正的。如果本文章对你有帮助请动一动你们敏捷的小手点一点赞，你的每一次鼓励都是作者创作的动力哦！😘

  • 相关阅读:
    SignalR WebSocket通讯机制
    去除BottomNavigationView 点击tab时的水波纹效果
    阿里面试失败后，一气之下我图解了Java中18把锁
    react+electron从环境搭建到项目整合全过程
    c语言编程 “画圆” 源程序
    东营市高新技术企业认定8个必须知道的问题
    Java安全架构 JCA、JCE、JSSE、JAAS
    苹果iOS系统开发APP应用启动几种速度优化技巧与实践
    云原生架构体系
    关于GitHub Desktop中的“Open in Git Bash”无法使用的问题
  • 原文地址：https://blog.csdn.net/xinhang10/article/details/133522030