1.HTML Overview及VScode使用说明

下雨天-

已于 2024-10-15 21:21:57 修改

阅读量1.3k

点赞数 20

分类专栏： HTML学习文章标签： vscode ide 编辑器 html 前端

于 2024-10-15 21:16:50 首次发布

本文链接：https://blog.csdn.net/xyt___/article/details/142962680

版权

HTML学习专栏收录该内容

2 篇文章

订阅专栏

VScode的使用

一.打开桌面的Visual Studio Code

二.使用快捷键（Ctrl + N）或点击菜单栏的文件 -->新建文本文件（file -->new file）

三.新建的文件Untitled-1是纯文本格式的，需改为HTML格式。

1.点击右下角的纯文本（“Plain Text”）

2.输入html，选择HTML(html) 更改后可以看到，语言模式和文件标头均改变。

3.更改后可以看到，语言模式和文件标头均改变。4.快速生成标准的html代码

（1）在第一行输入!(英文的感叹号)

（2）按Tab键或者选择代码提示中的!

（3）保存文件（快捷键Ctrl+s）改名并保存

四.在浏览器中查看HTML页面

Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果有时不方便。所以这里我们可以安装一下扩展插件，在浏览器中查看html页面。

（1）点击左边的“Extensions”

（2）输入open in browser并安装

（3）选择要在浏览器打开的HTML页面

按快捷键Alt + B 在默认浏览器下打开页面。本次实验环境中没有设置默认浏览器，使用快捷键 Shift + Alt + B 可以选择其他浏览器打开。

附：在控制台下查看html页面

直接在控制台下查看html页面需要安装HTML Preview插件点击左边的“Extensions”

输入HTML Preview，选择插件并点击“install”安装

HTML（Hypertext Markup Language）

表示超文本标记语言，它是编写语言的最广泛使用的语言，也是编写Web页面的最广泛使用的语言网页。

超文本是指将网页（HTML文档）链接在一起的方式。因此，网页上可用的链接称为超文本。
顾名思义，HTML是一种标记语言，这意味着您可以使用HTML来简单地“标记”带有标记的文本文档，该标记告诉Web浏览器如何显示它。

最初，HTML的开发旨在定义标题，段落，列表等文档的结构，以促进研究人员之间共享科学信息。

现在，借助于HTML语言中可用的不同

1. 基本HTML文件

下面是一个HTML文档最简单的形式的示例

<!DOCTYPE html> 
<html> 
    
        <head>
            <title>This is document title</title> 
    </head> 
    <body> 
        <h1>This is a heading</h1>
        <p>Document content goes here……</p>
    </body> 
</html>

运行结果：

2. HTML标签

如前所述，HTML是一种标记语言，它使用各种标签来格式化内容。这些标签包含在尖括号<标签名>中。除少数标签外，大多数标签都有其对应的结束标签。例如，<htm>带有结束标记</ html>，而<body>带有结束标记</ body>标记等。

序号	标签	描述
1	`<!DOCTYPE...>`	此标记定义文档类型和HTML版本
2	`<html>`	该标签包含完整的HTML文档，主要由`<head> ... </ head>`表示的文档标头和`<body> ... </ body>`标记表示的文档正文组成。
3	`<head>`	此标记代表文档的标题，该标题可以保留其他HTML标记，例如`<title>`，`<link>`等。
4	`<title>`	`<head>`标记内使用`<title>`标记来提及文档标题。
5	`<body>`	此标记表示文档的正文，其中保留了其他HTML标记，例如`<h1>`，`<div>`，`<p>`等
6	`<h1>`	此标记表示标题。
7	`<p>`	该标签表示一个段落。

要学习HTML，需要研究各种标记并了解它们的行为，同时对文本文档进行格式化。学习HTML很简单，因为用户必须学习不同标签的用法，才能格式化文本或图像，才能生成漂亮的网页。

万维网联盟(World Wide Web Consortium , W3C)建议从HTML 4开始使用小写标记。

3. HTML文档结构

典型的HTML文档将具有以下结构

<html>
    <head>
        Document header related tags
    </head>
    <body>
        Document body related tags
    </body>
</html>

我们将在后续章节中研究所有标题和正文标签，现在让我们看看什么是文档声明标签。

`4.<!DOCTYPE>` 声明

Web浏览器使用<!DOCTYPE>声明标签来了解文档中使用的HTML版本。 HTML的当前版本是5，它使用以下声明

<!DOCTYPE html>

根据正在使用的HTML版本，还有许多其他的声明类型可以在HTML文档中使用。在讨论<!DOCTYPE ...>标记以及其他HTML标记时，我们将看到更多详细信息。

标签，HTML被广泛用于格式化网页。