正文

学会前端编程必备：100个实战习题，轻松掌握HTML、CSS、JavaScript！

/0 浏览量
0705

HTML实战习题

习题1：创建一个简单的网页结构

目标：学习HTML的基本结构。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这里是一些文本内容。</p>
</body>
</html>

习题2：使用语义化标签

目标：了解HTML5中的语义化标签。

代码示例：

<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
</header>

习题3：设置网页布局

目标：学习使用HTML和CSS创建网页布局。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页布局</title>
    <style>
        .container {
            width: 800px;
            margin: 0 auto;
        }
        .sidebar {
            width: 200px;
            float: left;
        }
        .main-content {
            width: 600px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">侧边栏内容</div>
        <div class="main-content">主要内容</div>
    </div>
</body>
</html>

CSS实战习题

习题1：设置文本样式

目标：学习CSS的基本文本样式。

代码示例：

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

习题2：设置背景和边框

目标：学习CSS的背景和边框样式。

代码示例：

div {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px;
}

习题3：使用伪元素

目标：学习CSS伪元素的使用。

代码示例：

a:hover::after {
    content: "（点击我）";
    color: red;
}

JavaScript实战习题

习题1：编写一个简单的JavaScript程序

目标：学习JavaScript的基本语法。

代码示例：

// 定义一个函数
function sayHello() {
    alert("你好！");
}

// 调用函数
sayHello();

习题2：使用DOM操作

目标：学习使用JavaScript操作DOM。

代码示例：

// 获取元素
var element = document.getElementById("myElement");

// 修改元素内容
element.innerHTML = "这是修改后的内容";

习题3：事件处理

目标：学习JavaScript的事件处理。

代码示例：

// 为按钮添加点击事件
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

通过以上100个实战习题，你可以轻松掌握HTML、CSS和JavaScript的基础知识。在学习和练习的过程中，不断积累经验，逐步提高自己的前端编程能力。祝你学习顺利！

-- 展开阅读全文 --