蓝旭工作室课程预习：前端开发、VSCode与Gitee入门-优快云博客

HTML：指的是超文本标记语言 (Hyper Text Markup Language)，用于实现元素的定义。
CSS：级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。
JavaScript：是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，用于实现相应的效果和交互。

✔这是一个简单的HTML样例~

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>个人简介</title>
</head>

<body topmargin="0" bgcolor="#F0F8FF">
<table hight="900" width="800" align="center" border="0" cellpadding="0" cellspacing="0">
 <tr>
   <td width="260" valign="top" bgcolor="pink">
    <br/>
    <br/>
    <table width="200" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr><td hight="60"></td></tr>
    <tr><td align="center">< img src="image/person.jpg"/ width=200 hight=200 alt="头像"></td></tr>
    <tr><td align="center" style="font-size:25px;">lznnnnnn</td></tr>
    <tr><td align="center" style="font-size:10px;"><font color="0066FF">东北师范大学大一学生</font></td></tr>
    <tr><td><br/></td></tr>
    <tr><td>< img src="image/name.png"/ width=18 hight=18">&nbsp&nbsplznnnnnn</td></tr>
    <tr><td>< img src="image/number.png"/ width=18 hight=18">&nbsp&nbsp+86 18612345678</td></tr>
    <tr><td>< img src="image/email.png"/ width=18 hight=18">&nbsp&nbsp2241013456@qq.com</td></tr>
    <tr><td><br/></td></tr>
    </table>
    <hr style="FILTER:alpha(opacity=100,finishopacity=0,style=3)" width="80%"color=#987cb9 SIZE=3>
    <p>&nbsp&nbsp&nbsp&nbsp< img src="image/aaa.png"/ width=18 hight=18">&nbsp&nbsp<b>相关信息</b></p >
    <ul>
      <li>生日：2004.06.14</li>
      <li>学校：东北师范大学</li>
      <li>班级：计科中美班</li>
    </ul>
    <p>&nbsp&nbsp&nbsp&nbsp< img src="image/target.png"/ width=18 hight=18">&nbsp&nbsp<b>学年目标</b></p >
    <ul>
      <li>提升编程能力</li>
      <li>明确就业方向</li>
      <li>准备英语四级</li>
    </ul>
    <p>&nbsp&nbsp&nbsp&nbsp< img src="image/lan.png"/ width=18 hight=18">&nbsp&nbsp<b>语言能力</b></p >
    <table width="200" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr><td>< img src="image/eng.png"/ width="80" hight="80"></td><td>< img src="image/fre.png"/ width="80" hight="80"></td></tr>
      <tr><td align="center">ENGLISH</td><td align="center">FRENCH</td></tr>
    </table>
    <br/>
    <br/>
   </td>
   <td width="50" bgcolor="#f2f2f2"></td>
   <td width="480" align="top" bgcolor="#f2f2f2">
    <table width="480" align="center" border="0" cellpadding="0" cellspacing="0">
        <tr><td hight="40"></td></tr>
        <tr><td style="font-size:25px;" colspan="4">< img src="image/experience.png"/ width="40" hight="40" align="left">&nbsp&nbsp<b>个人基本情况</b></td></tr>
        <tr><td colspan="4">&nbsp;</td></tr>
        <tr><td><b>姓名</b></td><td>lznnnnnn</td><td><b>年龄</b></td><td>19</td></tr>
        <tr><td><b>性别</b></td><td>女</td><td><b>民族</b></td><td>汉</td></tr>
        <tr><td><b>籍贯</b></td><td>吉林长春</td><td><b>政治面貌</b></td><td>共青团员</td></tr>
        </table>
    <br/>
    <br/>
    <table width="480" align="center" hight="80" border="0" cellspacing="0" cellpadding="0">
    <tr><td style="font-size:25px;"colspan="2">< img src="image/edu.png"/ width="40" hight="40" align="left">&nbsp&nbsp<b>教育经历</b></td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr><td width="220"><b>2010.8-2016.6</b></td><td>111小学</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr><td><b>2016.8-2019.6</b></td><td>222初中</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr><td><b>2019.8-2022.6</b></td><td>333高中</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr><td><b>2022.8-present</b></td><td><a href=" ">东北师范大学</a ></td></tr>
    </table>
    <br/>
    <br/>
    <table width="480" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr><td style="font-size:25px;"colspan="3">< img src="image/skill.png"/ width="40" hight="40" align="left">&nbsp&nbsp<b>专业技能</b></td></tr>
    <tr><td colspan="3">&nbsp;</td></tr>
    <tr><td><b>C语言</b></td><td width="30">&nbsp;</td><td><b><font color="0066FF">大一上学期所习内容</font></b></td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td style="font-size:14px;">C语言系东北师范大学信息科学与技术学院于大一上学期开设的课程，经过一学期的学习与练习及期末的考核，学员已具备最基本的编程知识与编程能力。</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr><td><b>C++</b><td>&nbsp;</td></td><td><b><font color="0066FF">假期自修内容</font></b></td></tr>
    <tr><td>&nbsp;</td><td>&nsp;</td><td style="font-size:14px;">C++系学员在入学前的假期通过B站的网课自学的内容，进度略少，知晓基本内容。</td></tr>

    <tr><td colspan="2">&nbsp;</td></tr>

    <tr><td><b>HTML</b></td><td>&nbsp;</td><td><b><font color="0066FF">本学期开设课程</font></b></td></tr>

    <tr><td>&nbsp;</td><td>&nbsp;</td><td style="font-size:14px;">HTML系学员本学期学习内容，本网页是HTML练习成品。</td></tr>

    <tr><td colspan="2">&nbsp;</td></tr>

    <tr><td><b>JAVA</b><td>&nbsp;</td></td><td><b><font color="0066FF">本学期开设课程</font></b></td></tr>

    <tr><td>&nbsp;</td><td>&nbsp;</td><td style="font-size:14px;">JAVA系学员本学期学习内容。</td></tr>

  </table>

   </td>

   <td width="50" bgcolor="#f2f2f2"></td>

 </tr>

</table>

</body>

</html>

✔这是呈现效果~

二、VSCode相关安装

①VSCode安装

安装网址: https://code.visualstudio.com

在此处即可下载~

②VSCode插件安装

打开VSCode，点击左侧竖列中的“扩展”键，在搜索栏中输入想要安装的插件，再点击下载即可。

举个栗子吧~

如果希望设置语言配置设置——在“扩展”中搜索“Chinese”，选中需要下载的语言包，单击“install”即可下载。

快捷键：Ctrl+Shift+X

为了在学习的过程中提高效率&减少错误，可以试一下这两个插件~

1.HTML标签自动闭合（Auto Close Tag）——只需输入标签名，自动补全前后标签

2.HTML标签同步重命名（Auto Rename Tag） ——同步修改前后标签

三、认识浏览器

①简介

浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符(URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接，通过浏览器浏览互相关联的信息。

②组成及功能如下

地址栏：用于输入网站的地址。
菜单栏：由“文件” 、“编辑”、 “查看” 、“收藏夹” 、“工具”和“帮助”菜单组成。每个菜单中包含了控制IE工作的相关命令选项，这些选项包含了浏览器的所有操作与设置功能。
选项卡：IE浏览器可以使用多选项卡浏览方式，以选项卡的方式打开网站的页面。
页面窗口：是IE浏览器的主窗口，访问的网页内容显示在此。
状态栏：实时显示当前的操作和下载Web页面的进度情况。正在打开网页时，还会显示网站打开的进度。另外，通过状态栏还可以缩放网页。