使用html+css+javascript制作网页

1.使用html制作一个静态网页

  1. 创建first.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Page Title</title>
    </head>
    <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

  2. 浏览器打开网页。

  3. 显示成功

2.使用html与css制作一个静态网页

Internal CSS

  1. first.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Page Title</title>
    <style>
    body {
      background-color: linen;
    }
    h1 {
      color: maroon;
      margin-left: 40px;
    }
    </style>
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

  2. 浏览器打开网页。

  3. 查看结果

Inline CSS

  1. first.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Page Title</title>
    </head>
    <body>

    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

    </body>
    </html>

  2. 浏览器打开网页。

  3. 查看结果

External CSS

  1. first.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Hello HTML and CSS</title>
      <link rel="stylesheet" href="styles.css" type="text/css">
    </head>
    <body>
      <main>
        <h1>Welcome, Web Creator!</h1>
        <p>This box is built with HTML structure and CSS styling.</p>
        <p><mark>Edit the code</mark> to change colors, fonts, or layout.</p>
        <button>Start Building</button>
      </main>
    </body>
    </html>

  2. styles.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    body { 
      font-family: "Segoe UI", sans-serif; 
      background:#f2f6fb; 
      margin:0; 
    }
    main {
      max-width: 600px;
      margin: 60px auto;
      background:#fff;
      padding:32px;
      border-radius:8px;
    }
    h1 {
      color:#04AA6D;
      margin-top:0;
    }
    mark { 
      background:#fffd91;
    }
    button { 
      background:#04AA6D; 
      color:#fff; 
      border:none; 
      padding:12px 24px; 
      border-radius:999px; 
      cursor:pointer; 
    }
    button:hover { 
      background:#028a56; 
    }

  3. 运行first.html

  4. 查看结果

3.html+css+javascript

Internal JS

  1. first.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
    <body>
    <head>
      <meta charset="UTF-8">
      <title>Hello HTML and JavaScript</title>
    </head>
    <h1>My First JavaScript</h1>

    <p>JavaScript can change the content of an HTML element:</p>

    <button type="button" onclick="myFunction()">Click Me!</button>

    <p id="demo">This is a demonstration.</p>

    <script>
    function myFunction() { 
      document.getElementById("demo").innerHTML = "Hello JavaScript!";
    }
    </script>

    </body>
    </html>

  2. 运行first.html

  3. 查看结果

HTML 标签属性触发

  1. first.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html>
    <body>
    <head>
      <meta charset="UTF-8">
      <title>Hello HTML and JavaScript</title>
    </head>
    <h1>My First JavaScript</h1>

    <p>JavaScript can change the content of an HTML element:</p>

    <button type="button" onclick="myFunction()">Click Me!</button>

    <p id="demo">This is a demonstration.</p>

    <script>
    function myFunction() { 
      document.getElementById("demo").innerHTML = "Hello JavaScript!";
    }
    </script>

    </body>
    </html>

  2. 运行first.html

  3. 查看结果

External JS

  1. first.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html>
    <body>
    <head>
      <meta charset="UTF-8">
      <title>Hello HTML and JavaScript</title>
    </head>
    <h2>Demo JavaScript in Body</h2>

    <p id="demo">A Paragraph</p>

    <button type="button" onclick="myFunction()">Try it</button>

    <script src="myScript.js"></script>

    </body>
    </html>

  2. myScript.js

    1
    2
    3
    function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
    }

  3. 运行first.html

  4. 查看结果