开发工具VS Code

开发工具VS Code及其特点

Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行与Mac OS、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows、MacOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言和运行时拓展的生态系统。

1.轻量级：

VS Code虽然功能强大，但体积小，启动速度快，对系统资源的消耗相对较低。

2.跨平台：

支持Windows、macOS和Linux操作系统，使得开发者可以在不同平台上使用相同的工具。

3.丰富的插件生态：

VS Code拥有一个庞大的插件市场，用户可以根据需要安装各种扩展来增强编辑器的功能。

4.内置Git支持：

VS Code内置了Git版本控制功能，方便开发者进行代码的版本控制。

5.智能代码补全：

通过IntelliSense，VS Code提供智能的代码自动补全和代码提示功能，提高编码效率。

6.调试功能：

VS Code内置调试功能，支持多种语言和运行环境，方便进行代码调试。

7.代码片段和模板：

用户可以创建自定义的代码片段和模板，快速生成常用的代码结构。

8.多语言支持：

支持多种编程语言的语法高亮显示，包括但不限于JavaScript、TypeScript、Python、C++、Go、Java等。

9.多工作区：

支持同时打开多个项目或文件夹，方便在不同项目间切换。

10.代码重构：

提供代码重构工具，如重命名、提取方法等，帮助开发者优化代码结构。

HTML5

HTML5的简介

HTML5是HTML（HyperText Markup Language，超文本标记语言）的第五次重大修订版本，由万维网联盟（W3C）制定的标准。它是构建网页和网络应用的核心语言，旨在取代1999年发布的HTML 4.01标准。HTML5的制定工作始于2004年，并于2014年10月28日被W3C正式推荐为标准。

主要特点及新特性

1.语义化标签：

HTML5引入了一系列新的语义化标签，如<article>、<section>、<header>、<footer>等，使得网页结构更加清晰，有助于搜索引擎优化（SEO）和无障碍访问。

2.多媒体支持：

HTML5提供了<audio>和<video>标签，使得在网页中嵌入音频和视频内容变得更加简单，无需依赖第三方插件。

3.图形绘制：

通过<canvas>标签，HTML5支持2D图形绘制，允许开发者使用JavaScript进行复杂的图形和动画操作。

4.矢量图形：

HTML5支持SVG（Scalable Vector Graphics），这是一种用于描述二维矢量图形的语言，可以在网页上渲染高质量的图形。

5.表单控件：

HTML5增强了表单功能，引入了新的输入类型（如email、url、number、range、date、time等）和表单验证功能。

6.本地存储：

HTML5引入了Web Storage（本地存储）API，包括localStorage和sessionStorage，允许网站存储数据在用户的浏览器中，无需使用cookies。

7.离线应用：

通过应用程序缓存（Application Cache），HTML5使得网络应用可以缓存资源，实现离线访问。

8.Web Workers：

HTML5支持Web Workers，允许JavaScript脚本在后台线程中运行，而不会影响页面的性能。

9.WebSockets：

HTML5提供了WebSockets API，允许在用户的浏览器和服务器之间建立一个全双工、双向的通信通道。

10.性能和集成：

HTML5改进了性能和集成性，提供了更好的错误处理和文档兼容性。

11.APIs：

HTML5引入了多种新的API，如Geolocation API用于获取用户的地理位置信息，File API用于处理文件上传等。

HTML5的设计目标是更好地支持网络应用，提供更好的用户体验，并减少对插件的依赖。随着HTML5的普及，它已经成为现代网页设计和开发的重要基础。

CSS

CSS样式简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档的表现形式的语言。CSS不仅可以静态地修饰网页，还可以动态地控制页面布局。CSS是前端开发中不可或缺的一部分，掌握CSS对于创建美观、响应式的网页至关重要。

CSS的作用

1.布局控制：

定义网页元素的位置、大小和布局。

2.视觉效果：

设置字体、颜色、背景、边框等视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-family: "楷体";
            font-size: larger;
            background-color: aqua;
            border: solid 5px blue;
        }
    </style>
</head>
<body>
    <p>字体样式</p>
</body>
</html>

3.动画和过渡：

创建动画效果和过渡效果，增强用户体验。

4.响应式设计：

通过媒体查询实现不同设备上的适配显示。

CSS样式的基本语法

CSS规则由两个主要部分组成：选择器和声明块。

CSS的层叠和继承

层叠：

当多个规则应用于同一个元素时，CSS通过特定的规则来决定哪个规则优先级更高。

继承：

某些CSS属性可以被元素的子元素继承，如color和font-family。

CSS选择器的种类

1.简单选择器：

如元素类型选择器（p）、类选择器（.className）、ID选择器（#idName）。

2.组合选择器：

可以组合使用，如后代选择器（ancestor descendant）、子代选择器（parent > child）、相邻兄弟选择器（A + B）和通用兄弟选择器（A ~ B）。

3.伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            color: black;
        }
        a:visited{
            color: blue;
        }

        a:hover{
            color: aqua;
        }
        a:active{
            color: brown;
        }
        
    </style>
</head>
<body>
    <a href="#">超链接</a>
</body>
</html>

如:hover、:focus、:nth-child()等。

4.属性选择器：

根据元素的属性或属性值选择元素，如[type="text"]。

CSS的单位和值

长度单位：

像素（px）、em、rem、%等。

颜色值：

颜色名（如red）、十六进制代码（如#FF0000）、RGB（如rgb(255, 0, 0)）等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: blue;
            color: #f00;
            color: rgb(100%, 0%, 0%);
        }
    </style>
</head>
<body>
    <div>content</div>
</body>
</html>

CSS的盒模型

CSS的盒模型包括：内容（content）、填充（padding）、边框（border）和外边距（margin）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            padding: 50px;
            margin: 50px;
            text-align: center;
            border: solid 5px blue;
        }
    </style>
</head>
<body>
    <div>content</div>
</body>
</html>

CSS的布局方式

浮动布局（Float）：

通过float属性使元素浮动。后续可以用clear回归文本流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: rgb(221, 39, 228);
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <br clear="left">
    <div class="b"></div>
</body>
</html>

定位布局（Position）：

通过position属性控制元素位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: rgb(221, 39, 228);
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>

Flexbox：

一种更现代的布局方式，通过display: flex;实现。

Grid布局：

另一种现代布局方式，通过display: grid;实现。

CSS预处理器

Sass、Less和Stylus等预处理器允许使用变量、嵌套规则、混合（mixins）和函数等高级功能，使CSS更易于维护和扩展。

结束语

随着介绍的结束，我们共同完成了对HTML5和CSS样式的学习之旅，并且探索了如何使用强大的开发工具Visual Studio Code（VS Code）来提升我们的开发效率和体验。通过这些知识的积累，我们不仅掌握了网页构建的基石，还学会了如何用CSS样式来美化和布局我们的网页，使之更加生动和用户友好。

VS Code以其丰富的功能和插件生态系统，成为了我们编码旅程中的得力助手。它不仅提供了代码编辑的便利，还通过实时预览、智能提示和调试工具等功能，让我们的开发工作更加高效和精确。

在未来的开发道路上，HTML5和CSS将继续作为构建现代网页的核心技术，而VS Code将继续作为我们手中的利器。让我们将所学应用到实践中，不断探索和创新，用我们的知识和技能去构建更加精彩的数字世界。

感谢您跟随本文一同学习，希望这篇文章能够成为您学习旅程中的一个坚实的台阶。愿您在编程的道路上越走越远，不断进步，不断突破。让我们期待在下一次的技术探索中再次相遇。祝您编码愉快，创作无限！

# html5 # css
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模

avatar 魔乐社区
cover

替你试过了，消费级显卡可以跑的开源文生图SOTA模型，顶级渲染、高密度文本绘图

avatar 魔乐社区
cover

量化挑战赛冠军专访：4小时啃下W4A8量化，我靠的是这些经验

avatar 魔乐社区