客户至上 · 专业至上
Customer first and professional first

网页制作常用代码

来源:沐阳科技 作者:网页制作 2024-04-23 09:56:11 0

网页制作常用代码

以下是一些网页制作中常用的HTML、CSS和JavaScript代码示例:


### HTML 基础结构


```html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My Website</title>

</head>

<body>

    <h1>Hello, World!</h1>

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

</body>

</html>

```


### CSS 样式设置


```css

body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

}


h1 {

    color: blue;

}


p {

    font-size: 16px;

    line-height: 1.5;

}

```


### JavaScript 基础操作


```javascript

// 弹出对话框

alert("Hello, World!");


// 控制台输出

console.log("This is a message in the console.");


// 获取元素并修改内容

document.getElementById("myElement")[xss_clean] = "New content";

```


### 响应式设计


```css

/* 在不同屏幕尺寸下修改样式 */

@media screen and (max-width: 600px) {

    body {

        font-size: 14px;

    }

}

```


### 简单交互效果


```html

<!-- 切换图片 -->

<button onclick="changeImage()">Change Image</button>

<img id="myImage" src="image1.jpg" alt="Image">


<script>

function changeImage() {

    var img = document.getElementById("myImage");

    img.src = "image2.jpg";

}

</script>

```


这些是网页制作中常用的基础代码示例,您可以根据需要进行修改和扩展,实现不同的功能和效果。