vs怎么用html生成css（vs怎么运行html）

大家好，我是讯享网，很高兴认识大家。

 <div id="module-unit-notification-container" hidden=""></div> <p>目前，你的网站中有一个空的 HTML 文件。 接下来添加一些代码！ 目标是使用超文本标记语言 (HTML) 来描述客户的浏览器应显示的 Web 页面。 拥有一个初始模板不是很好吗？ 使用编辑器方便填写一些典型样板文件或 HTML 结构。</p>

讯享网

在本单元中，你将添加基本的 HTML 内容，在浏览器中打开 HTML 页面，并第一次看到开发人员工具。

Visual Studio Code 为即学即会的 HTML 编程提供基本支持。其中包括语法突出显示、IntelliSense 的智能完成功能以及可自定义的格式设置。

在 Visual Studio Code 中打开你的网站文件夹，然后在“资源管理器”中选择文件以将其打开。
在页中键入，然后选择 Enter。 HTML5 模板代码将添加到文件中。
按如下所示修改模板代码。在 Windows 上选择 Control+S，或在 macOS 上选择 Command+S 来保存文件。
```
讯享网
```

HTML 有各种版本。 doctype 指示此 HTML 文档包含 HTML5 代码。

虽然我们不打算深入探讨所有 HTML 元素的含义，但我们想要指出一些重要的事项。标记指示通常不会对查看者显示的元数据信息，除非他们在其浏览器中查看源代码。元元素或标记提供关于网页的描述性信息。例如，它们可帮助搜索引擎处理网页中要在搜索结果中返回的信息。

UTF-8 字符集 () 可能看似无关紧要，但对于确定计算机如何解释字符至关重要。如果缺少字符集的元数据，可能会导致安全受到影响。字符集属性背后存在很多历史记录和技术信息，但本练习重要的一点是，Visual Studio Code 样板提供一些合理的默认值。

HTML 代码中的元素包含浏览器标签页中不可见的网站相关信息。

元数据定义有关 HTML 文档的数据，例如字符集、脚本以及在其中打开网页的浏览器。

网页的标题显示在浏览器窗口的顶部，在某些方面具有重要意义。例如，标题用于搜索引擎并在其中显示。我们来添加标题。

在编辑器中，修改元素，使其类似于以下示例。

若要向网页上的 HTML 元素应用样式，可以直接在网页标头中编写 CSS 代码。在 HTML 页面中编写 CSS 称为“内部 CSS”。但是，最好将 HTML 结构与 CSS 样式分离。获得一个称为“外部 CSS”的单独 CSS 页面。代码简洁且已划分时，往往更易于阅读。可以使用一个或多个外部样式表为多个 Web 页面提供服务。无需使用重复的 CSS 代码更新每个 HTML 页面，可以对单个 CSS 文件进行更改，并将这些更新应用到所有相关网页。我们来链接到外部样式表。

在 Visual Studio Code 编辑器中，在元素后面添加一个空白行，键入，然后选择 Enter。 Visual Studio Code 应将以下行添加到文件中。
```
讯享网
```
将更新为，并选择 Control+S (Windows) 或 Command+S (macOS) 保存文件。

接下来立即开始填写元素。

元素包含客户在其浏览器中可见的网站内容。

在元素内部添加一个标题元素，后跟一个段落元素，然后创建包含多个列表项元素的无序列表。

讯享网
编辑代码或复制并粘贴，以便其外观类似于以下示例。
```
讯享网
```

可将 ID 属性（在元素中使用）用于样式化单个元素，而类属性（在元素中使用）用于样式化同一类的所有元素。

在继续下一步之前，请确保选择 Control+S 或 Command+S 保存文件。

可以通过在浏览器中打开 HTML 文件在本地预览网页。你的浏览器指向的不是以开头的网站地址，而是指向与类似的本地文件路径。

若要使用 Visual Studio Code 进行预览，请右键单击并选择“使用默认浏览器打开”，或选择文件并使用键盘快捷方式 Alt+B。

使用默认浏览器打开网页。

可以通过使用浏览器中的开发人员工具检查网页。一起来试一试。

右键单击网页并选择“检查”以打开开发人员工具，或尝试以下快捷方式：
- 按“开发人员工具”的键盘快捷方式 F12。
- 在 Windows 和 Linux 上按 Ctrl+Shift+I，在 Mac 上按 Option+Command+I。
这些键盘快捷方式适用于 Microsoft Edge、Chrome 和 Firefox。如果你使用的是 Safari，请参阅 Web 开发工具。安装后，选择“Safari”>“偏好设置”，然后选择“高级”。在窗格底部，选择“在菜单栏中显示开发菜单”复选框。选择“开发”>“显示 Web 检查器”。有关详细信息，请查看 Safari Web 检查器文档。

要了解有关打开开发人员工具和主要可用功能的更多信息，请查看 DevTools 工具概述一文。
选择“元素”选项卡。
将鼠标移到“元素”选项卡中显示的 HTML 元素上，然后展开各种元素的内容。

开发人员工具中的“元素”选项卡将显示在浏览器中呈现的文档对象模型 (DOM)。调试时，查看浏览器如何解释你的源代码通常十分重要。

检查浏览器中的页面可提供各种有用信息，有助于排查问题。还可以使用检查器查看 CSS 的详细信息，如下一节所示。

vs怎么用html生成css（vs怎么运行html）

相关推荐