亲自试一试

编辑器首页

W3Schools 在线代码编辑器

使用 W3Schools 在线代码编辑器,您可以编辑 HTML、CSS 和 JavaScript 代码,并在浏览器中查看结果。


Run » 运行结果尺寸:

实例

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: white;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">

</body>
</html>

This is a Heading

This is a paragraph.

Avatar
亲自试一试 »

点击 "亲自试一试" 按钮查看运行结果。


编辑器说明

左边的窗口是可编辑的——编辑代码并点击"Run"按钮在右边的窗口中查看结果。

"运行结果尺寸" 以像素为单位返回结果窗口的宽度和高度(即使您调整浏览器窗口的大小)。

您可以使用窗口之间的栏来控制窗口的大小(可拖动的装订线)。

图标在下表中解释:

Icon 描述
回到 www.w3schools.cn
更多选项的菜单按钮
保存您的代码(并与他人共享)
改变方向(水平或垂直)
更改颜色主题(深色或浅色)

学习编码

如果您是编码新手,我们建议您从 HTML 开始,然后转到 CSS 和 JavaScript:

HTML 教程 CSS 教程 JavaScript 教程