关于前端的实操试题

发布时间:2023年12月25日

HTML

  1. 创建一个简单的HTML文档结构:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My HTML Page</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This is a simple HTML page.</p>
    </body>
    </html>
    
  2. 创建一个表单:

    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
    
        <input type="submit" value="Login">
    </form>
    

CSS

  1. 添加样式到HTML文档:
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
    
        h1 {
            color: #333;
        }
    
        p {
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
    

    JavaScript

  1. 简单的事件处理:

    <button id="myButton">Click me</button>
    
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
    

  2. 操作DOM元素:

    <div id="myDiv">This is a div.</div>
    
    <script>
        var myDiv = document.getElementById('myDiv');
        myDiv.innerHTML = 'Content changed!';
        myDiv.style.color = 'blue';
    </script>
    

文章来源:https://blog.csdn.net/weixin_59383576/article/details/135189144
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。