上查看所有课程
网页设计指的是创建和美化网站外观的过程。构建现代网站和网络应用程序有 3 项基本技术。它们是
- HTML
- CSS
- JS
这些技术协同工作，为网页提供结构、样式和交互性。
HTML
HTML（超文本标记语言）是一种标记语言，用于构建和组织网页内容。它使用各种标签来定义页面上的不同元素，例如标题、段落和链接。让我们看一个示例
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Programiz</h1>
<p>We create easy to understand programming tutorials.</p>
</body>
</html>浏览器输出
这里，我们有一个 HTML 文档，其中
<h1>- 文档的标题<p>- 文档的段落
上述代码中的标题和段落标签有助于创建网页结构。
CSS
CSS（层叠样式表）是一种样式表语言。它用于样式化 HTML 文档。
它指定 HTML 元素的外观，包括布局、颜色和字体。我们使用 <style> 标签将 CSS 添加到 HTML 文档中。让我们为之前的 HTML 代码添加一些 CSS。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Programiz</h1>
<p>We create easy to understand programming tutorial.</p>
</body>
</html>浏览器输出
在上面的代码中，我们对 <h1> 和 <p> 标签应用了 CSS 以更改它们的文本颜色。请注意以下代码，
h1 {
color: blue;
}此 CSS 代码将每个 <h1> 元素的文本颜色变为蓝色。
同样，
p {
color: red;
}此 CSS 代码将每个 <p> 元素的文本颜色变为红色。
JavaScript
JavaScript（JS）是一种编程语言，使网站具有交互性和动态性。它主要用于网络浏览器中，创建下拉菜单、表单验证、交互式地图以及网站上的其他元素。
我们将 JavaScript 与 HTML 和 CSS 结合使用，以创建更具动态性和用户友好性的网站。我们使用 <script> 标签将 JS 添加到 HTML 中。例如，
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button onclick="displayAlert()">Click me!</button>
<script>
function displayAlert() {
alert("Learn coding from Programiz Pro");
}
</script>
</body>
</html>浏览器输出（点击按钮前）
浏览器输出（点击按钮后）
在上面的示例中，我们创建了一个按钮，点击时会调用 displayAlert()。
请注意以下代码，
<script>
function displayAlert() {
alert("Learn coding from Programiz Pro");
}
</script>此函数仅显示一个带有消息 Learn coding from Programiz Pro 的警报框。
HTML、CSS 和 JavaScript 如何工作？
让我们看一个 HTML、CSS 和 JS 如何协同工作以提供用户友好的网络体验的示例。让我们看一个示例，
<html>
<head>
<title>My Webpage</title>
<style>
body {
text-align: center;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML, CSS, and JavaScript webpage.</p>
<button onclick="displayAlert()">Click me!</button>
<script>
function displayAlert() {
alert('Hello World!');
}
</script>
</body>
</html>浏览器输出（点击按钮前）
浏览器输出（点击按钮后）
在上面的示例中，我们创建了一个简单的网页。现在我们可以学习更多 HTML、CSS 和 JS 来创建更好的网站。