创建
html
网页的步骤包括准备文本编辑器、编写html代码、保存文件并用
浏览器
打开。1. 准备文本编辑器，如记事本或vs code；2. 编写包含基本结构标签（如、、、、<body>）的html代码；3. 将文件保存为.html格式；4. 用浏览器打开该文件以查看网页内容。常用html标签包括定义标题的<h1>-<h6>、段落<p>、链接、图片、列表<ul>、<ol>和<li>，以及容器<div>和<span>。要添加
css
样式，可使用内联样式、内部样式表或推荐使用的外部样式表。实现交互性需借助javascript，可通过内联javascript或外部.js文件引入，并绑定事件响应操作。简单布局可用flexbox等css技术完成，而响应式设计则依赖视口设置、
弹性布局
、媒体查询和弹性图片等手段，以确保网页在不同设备上良好显示。掌握html、css和javascript三者结合是制作网页的关键。
创建一个HTML网页，其实就是用HTML这种标记语言告诉浏览器该显示什么内容，以及如何组织这些内容。简单来说，就是用标签把文字、图片、链接等元素包裹起来，浏览器读懂这些标签，就能正确地呈现出你想要的网页。
掌握HTML，就能踏出网页制作的第一步。
创建HTML网页的步骤：
立即学习
“
前端免费学习笔记（深入）
”；
准备文本编辑器：
随便一个文本编辑器都行，比如Windows自带的记事本，或者更专业的VS Code、Sublime Text等等。
编写HTML代码：
在编辑器里输入HTML代码。最基本的结构包括
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><!DOCTYPE html></code></div>
,
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><html></code></div>
,
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div>
,
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div>
, 和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><body></code></div>
。
保存文件：
将文件保存为
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.html</code></div>
格式，比如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">index.html</code></div>
。
用浏览器打开：
双击
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.html</code></div>
文件，浏览器就会打开并显示你的网页了。
HTML基础标签有哪些？
HTML标签是构建网页的基石。掌握常用标签的用法，能让你更有效地组织网页内容。以下是一些最常用的HTML标签：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><!DOCTYPE html></code></div>:
告诉浏览器这是一个HTML5文档。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><html></code></div>:
HTML文档的根元素，所有其他标签都嵌套在它里面。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div>:
包含网页的元数据，比如标题、字符集、CSS样式表等等。这些信息不会直接显示在网页上。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div>:
定义网页的标题，显示在浏览器的标签页上。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><body></code></div>:
包含网页的主要内容，比如文本、图片、链接等等。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h1></code></div>-<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h6></code></div>:
定义标题，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h1></code></div>
是最高级别的标题，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h6></code></div>
是最低级别的标题。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p></code></div>:
定义段落。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div>:
定义链接，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">href</code></div>
属性指定链接的目标地址。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div>:
定义图片，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div>
属性指定图片的URL。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><ul></code></div>:
定义无序列表。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><ol></code></div>:
定义有序列表。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><li></code></div>:
定义列表项。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div>:
定义一个容器，用于组织和样式化HTML元素。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><span></code></div>:
定义内联容器，用于对文本进行样式化。
举个例子，一个简单的HTML页面可能是这样的：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><!DOCTYPE html>
<html>
<head>
<title>我的第一个网页
这段代码会创建一个包含标题、段落、链接和图片的网页。注意
欢迎来到我的网页！
这是一个简单的段落。
访问示例网站image.jpgstyle
这是一个绿色的段落。
style.cssp {
color: red;
font-size: 20px;
}
这是一个红色的段落。
onclick.js