1000字范文 > 零基础学习WEB前端开发(二)：HTML标签及开发工具

零基础学习WEB前端开发(二)：HTML标签及开发工具

时间：2021-08-20 23:31:40

写HTML文件之前需要新建一个记事本：

再对文件的后缀进行修改：

一、HTML标签基础知识

1.1 标签的写法

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。<标签>内容</标签>

HTML 标签是由尖括号包围的关键词，比如 <html>HTML 标签通常是成对出现的，比如 <b> 和 </b>，也有少数是单标签标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签

1.2 标签的关系

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

包含关系。例如：

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

并列关系。例如：

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

1.3 HTML基本结构标签

<!DOCTYPE html>声明为 HTML5 文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落

1.4 第一个网页文件

<html><head><title>第一个页面</title></head><body>键盘敲烂，工资过万</body></html>

二、开发工具

2.1 常用工具下载链接

下面工具都很好用，其实都是文本编辑器，我前面GUI开发用的就是VSCode和NotePad++。

教程里的老师推荐的是用VScode，因而就顺着使用Vocode吧。

Sublime Text 4/download

VSCodehttps://vscode./

NotePad++https://notepad-plus./WebStorm/webstorm/

2.2 VSCode使用

关于VSCode的安装及设置为中文，网上一搜一堆，这里不再赘述，可以看下面两个文章进行设置

VScode——下载、安装、配置中文环境（windows）

Linux --VScode 安装和设置中文环境

在正式写代码之前先安装一个小插件，“Open In Default Browser”（Open in Browser也可）这样就可以直接打开，而不用退出去打开html文件。注意安装完成之后需要重启VSCode一下生效

新建文件：

点击第一个！之后，神奇的事情发生了：

对代码进行微小修改：

<!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>我用VsCode创建的第一个页面</title></head><body>用VSCode来写代码确实不错呀！！！</body></html>

实现效果：

提示：一定要注意保存、文件后缀一定是.html