images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3
现在,这张图片已经准备好用于你的 HTML 页面。我们下载了一张风景图片,非常适合演示如何在 HTML 中插入图片。
创建基本 HTML 文档
在这一步中,你将创建一个基本的 HTML 文档,作为你第一个网页的基础。HTML(超文本标记语言)是用于创建网页的标准标记语言。
导航到你的项目目录:
cd ~/project/my-first-webpage
打开 WebIDE 并创建一个名为 index.html 的新文件:
touch index.html
现在,让我们添加基本的 HTML 结构。在 WebIDE 中打开 index.html 文件,并输入以下代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
</body>
</html>
让我们分解一下这个 HTML 文档的关键组成部分:
<!DOCTYPE html> 声明这是一个 HTML5 文档
<html> 是 HTML 页面的根元素
<head> 包含文档的元信息
<body> 包含页面的可见内容
<h1> 是一个主标题
<p> 是一个段落
在 HTML 页面中插入图片
在这一步中,你将学习如何将下载的风景图片插入到你的 HTML 页面中。<img> 标签用于在 HTML 中嵌入图片。
在 WebIDE 中打开你的 index.html 文件,并修改内容以包含图片:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
<h2>Beautiful Landscape</h2>
<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
</body>
</html>
让我们分解一下图片标签的属性:
src:指定图片文件的路径
alt:为可访问性提供替代文本
width:设置图片的显示宽度(以像素为单位)
预览并理解图片显示
在这一步中,你将学习如何预览你的 HTML 页面,并理解图片在网页浏览器中的显示方式。由于 LabEx 环境提供了带有内置预览功能的 WebIDE,你可以立即查看你的网页。
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy