Javaweb零基础学习（壹）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52292970/article/details/118999263

这篇博客介绍了如何从零基础学习JavaWeb前端，通过实践操作展示了HTML的基本用法。作者强调Web的本质是文本文档，并通过修改后缀名为.html实现浏览器展示。内容包括使用VScode及插件、创建简单的HTML页面、插入图片，以及HTML的基本结构和标签使用。通过实例学习，读者可以理解HTML的超文本特性和标签语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javaweb零基础学习（壹）

前言

前言

这里讲一下我自己是如何自习的Javaweb前端，由于集训的时候讲了一下基础知识，所以我这里自学是以项目为主，边实践边学。

Web本质是什么

我们在桌面新建一个txt文档，输入几个字，Ctrl+s保存，再把它拖入我们的浏览器，你会发现，可以打开，这说明什么？这说明我们的Web网页，本质是一个文本文档。但是我们不能说，文本文档就是网页。
那么我们要怎样使得这个文本文档成为网页呢？
首先我们要改变后缀名，我们右键它，更改后缀名，你会发现，现在是.txt，我们把它改为.html，回车点击是的。

下载相关软件

下载VScode安装插件
Atuo Rename Tag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

guides 代码对齐辅助线，有利于代码整洁规范

Chinese (Simplified) Language Pack for Visual Studio Code 中文简体语言包

View In Browser ， open in browser 在浏览器中打开，很重要的插件

Path Intellisense 文件路径提示

Live Server 用这个打开可以自动刷新页面

JavaScript (ES6) code snippets 可以快速编写ES6语法的js拓展包

常用文本标签

先别问原理，打入以下内容


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>念奴娇·赤壁怀古</title>
	</head>
	<body>
		念奴娇·赤壁怀古<br/>
		【宋】 苏轼<br/>
		大江东去，浪淘尽，千古风流人物。<br/>
		故垒西边，人道是，三国周郎赤壁。<br/>
		乱石穿空，惊涛拍岸，卷起千堆雪。<br/>
		江山如画，一时多少豪杰。<br/>
		遥想公瑾当年，小乔初嫁了，雄姿英发。<br/>
		羽扇纶巾，谈笑间，樯橹灰飞烟灭。<br/>
		故国神游，多情应笑我，早生华发。<br/>
		人生如梦，一尊还酹江月。
	</body>
</html>

右键open with live server
我们会看到一首词
然后我们再上网找一张图片，右键另存为为.png格式
再修改代码为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>念奴娇·赤壁怀古</title>
	</head>
	<body>
		念奴娇·赤壁怀古<br/>
		【宋】 苏轼<br/>
		大江东去，浪淘尽，千古风流人物。<br/>
		故垒西边，人道是，三国周郎赤壁。<br/>
		乱石穿空，惊涛拍岸，卷起千堆雪。<br/>
		江山如画，一时多少豪杰。<br/>
		遥想公瑾当年，小乔初嫁了，雄姿英发。<br/>
		羽扇纶巾，谈笑间，樯橹灰飞烟灭。<br/>
		故国神游，多情应笑我，早生华发。<br/>
		人生如梦，一尊还酹江月。
	</body>
    <br>
    <img src="图片名.png">
</html>

这首诗的底部就加入了这张图片
这里我们使用了用于设计网页骨架的语言HTML，这是一种超文本语言，因为它能显示文本，还能使用连接图片视频等，所以是超文本。
同时这又是一门标签语言，用标签标识我们的设计。
其中标签可以嵌套但不能穿插，即一般标签必成对出现。
比如