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

最新推荐文章于 2022-03-09 15:57:53 发布

是刃小木啦~

最新推荐文章于 2022-03-09 15:57:53 发布

阅读量6.3k

点赞数

分类专栏： WEB前端开发文章标签：前端 html css3

本文链接：https://blog.csdn.net/txr152111/article/details/120879779

版权

WEB前端开发专栏收录该内容

22 篇文章 3 订阅

订阅专栏

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

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

一、HTML标签基础知识

1.1 标签的写法

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

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

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> 元素定义一个大标题
 元素定义一个段落

1.4 第一个网页文件

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

二、开发工具

2.1 常用工具下载链接

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

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

Sublime Text 4http://www.sublimetext.com/download

VSCode https://vscode.en.softonic.com/

NotePad++https://notepad-plus.en.softonic.com/WebStormhttps://www.jetbrains.com/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

2.3 VSCode需要安装的插件

（1）Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

用于设置成中文界面

（2）Open In Default Browser或者Open in Browser

可以直接使用在浏览器打开

（3）CSS Peek

追踪至样式

（4）Auto Rename Tag

自动修改标签对，改一个，另一个也改了

是刃小木啦~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
零基础学习WEB前端开发(二)：HTML标签及开发工具

写HTML文件之前需要新建一个记事本：再对文件的后缀进行修改：一、HTML标签基础知识1.1 标签的写法HTML 标记标签通常被称为 HTML 标签 (HTML tag)。<标签>内容</标签>HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 和 ，也有少数是单标签标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和.
复制链接

扫一扫