正文

新手必看！基础前端案例源码详解，轻松入门HTML、CSS、JavaScript

/0 浏览量
0828

HTML入门：构建网页骨架

HTML（HyperText Markup Language）是构建网页的基本语言，它定义了网页的结构和内容。以下是一个简单的HTML示例，展示了如何创建一个包含标题、段落和链接的基本网页。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

在这个例子中，<!DOCTYPE html> 声明了文档类型，<html> 标签定义了整个网页，<head> 部分包含了元数据，如字符集和标题，而 <body> 部分则包含了网页的实际内容。

CSS入门：美化网页外观

CSS（Cascading Style Sheets）用于美化网页，控制文本样式、颜色、布局等。以下是一个简单的CSS示例，展示了如何给上面的HTML页面添加样式。

body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    color: #333;
}

h1 {
    color: #333;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: #007bff;
    text-decoration: none;
}

在这个例子中，我们通过选择器（如 body、h1、p 和 a）来指定样式规则，从而改变网页元素的字体、背景颜色、文本颜色等。

JavaScript入门：让网页动起来

JavaScript 是一种用于网页交互的脚本语言。以下是一个简单的JavaScript示例，展示了如何通过JavaScript改变网页元素的文本内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            color: #333;
        }
    </style>
</head>
<body>
    <h1 id="title">欢迎来到我的网页</h1>
    <button onclick="changeText()">点击我</button>

    <script>
        function changeText() {
            document.getElementById('title').innerHTML = '网页内容已更改';
        }
    </script>
</body>
</html>

在这个例子中，我们创建了一个按钮，当用户点击按钮时，JavaScript 函数 changeText 会被调用，从而改变标题元素的文本内容。

总结

通过以上三个简单的案例，我们可以了解到HTML、CSS和JavaScript的基本用法。这些技术是前端开发的基础，掌握它们可以帮助你轻松入门前端开发。在实际开发中，你需要不断学习和实践，才能成为一名优秀的前端开发者。

-- 展开阅读全文 --