HTML介绍+vscode安装和基础使用

最新推荐文章于 2024-07-25 11:52:08 发布

芒着可爱

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量910

点赞数 2

分类专栏： HTML5+CSS3 文章标签： html vscode 前端

本文链接：https://blog.csdn.net/m0_56600567/article/details/125943553

版权

HTML5+CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

HTML介绍
HTML基础
- HTML 语法规范
- HTML 基本结构标签（也称为骨架标签）
网页开发工具

HTML介绍

网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为** HTML 文件**。

什么是 HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。

所谓超文本，有 2 层含义：

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

网页的形成
网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。称为五大浏览器。
在这里插入图片描述

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

在这里插入图片描述

Web 标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

Web 标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：用于对网页元素进行整理和分类(HTML)
表现标准：用于设置网页元素的版式、颜色、大小等外观属性(CSS)
行为标准：用于对网页模型的定义及交互的编写(JavaScript)

Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

在这里插入图片描述

为什么需要 Web 标准？
浏览器不同，它们显示页面或者排版就有些许差异。

可以让不同的开发人员写出的页面更标准、更统一外
让 Web 的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜寻引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。

HTML基础

HTML 语法规范

HTML 标签是由尖括号包围的关键词，例如 <html>。
HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

标签关系:

双标签关系可以分为两类：包含关系和并列关系。

包含关系

<head> 
	 <title> </title> 
</head>

并列关系

<head> </head>
<body> </body>

HTML 基本结构标签（也称为骨架标签）

HTML标签：页面中最大的标签，我们称为根标签
文档的头部：注意在head标签中我们必须要设置的标签是title
文档的标题：让页面拥有一个属于自己的网页标题
文档的主体：元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

在这里插入图片描述

网页开发工具

在这里插入图片描述

VSCode

VSCode的安装

下载地址
在这里插入图片描述

选择安装（根据需求勾选打开与否）

VSCode的一些peizhi和扩展程序的安装

配置中文界面（可选）
方法一：（新安装的页面可能有右下角的弹窗，直接点击 “安装并重启” 即可）

方法二：（没有出现弹窗）
注意：选择install，下载好之后重新启动程序即可生效(因为这里已经安装了，所以…)
配置：右键+使用浏览器打开

在这里插入图片描述

自动重命名配对的HTML/ XML标签
追踪至样式
修改外观设置
方法一：

方法二：

VSCode 的使用

双击打开软件。
新建文件（Ctrl + N ）。
保存（Ctrl + S ）, 注意移动要保存为 .html 文件
Ctrl + 加号键，Ctrl + 减号键可以放大缩小视图
生成页面骨架结构。输入! 按下 Tab 键。
利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

<!-- 输入!号，再按tab就可以生成html的骨架代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    第一次用vscode写HTML代码
</body>
</html>