HTML中常用代码-CSDN博客

本文链接：https://blog.csdn.net/HUAREN_cn/article/details/134099711

更多开源资源访问：HUAREN

1.设置标题大小：


    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

2.段落设置：

HTML段落标签是`<p>`，用于定义文本段落

3.超链接：

<a href="链接地址">这是一个超链接</a>

4.插入图片：

<!DOCTYPE html>
<html>
<head>
<style>
  img {
    width: 320px;
    height: 240px;
  }
</style>
</head>
<body>

<img src="example.jpg" alt="示例图片">

</body>
</html>

5.插入视频：

<!DOCTYPE html>
<html>
<head>
<style>
  video {
    width: 320px;
    height: 240px;
  }
</style>
</head>
<body>

<video controls>
  <source src="movie.mp4" type="video/mp4">
  出现未知错误
</video>

</body>
</html>

6.网页尺寸自适应：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 默认样式 */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }

  /* 当屏幕宽度小于600px时，应用以下样式 */
  @media screen and (max-width: 600px) {
    body {
      background-color: lightblue;
    }
  }
</style>
</head>
<body>

<h1>自适应网页示例</h1>
<p>当屏幕宽度小于600px时，背景颜色将变为浅蓝色。</p>

</body>
</html>

7.网页空格：

在HTML中，空格可以通过以下几种方式表示：

1. 普通空格：使用`&nbsp;`表示一个普通的空格。例如：`&nbsp;&nbsp;&nbsp;&nbsp;`。

2. 非断行空格：使用`&nbsp;`表示一个非断行空格。例如：`&nbsp;`。

3. 不间断空格：使用`&nbsp;`表示一个不间断空格。例如：`&nbsp;`。

4. 软换行空格：使用`&#xa0;`表示一个软换行空格。例如：`&#xa0;`。

5. 硬换行空格：使用`&#xA0;`表示一个硬换行空格。例如：`&#xA0;`。

8.插入音乐：

<audio controls>
  <source src="your_music_file.mp3" type="audio/mpeg">
  未知错误
</audio>

9.超链接：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<a href="链接地址">这是一个超链接</a>

</body>
</html>

10.指定文字方向：

<!DOCTYPE html>
<html>
<head>
<style>
.left-align {
  text-align: left;    <!--自定义left或right-->
}
</style>
</head>
<body>

<p class="left-align">
<!--放入文字-->


</p>

</body>
</html>

11.标签设置中间位置：

<crent> 插入的东西 <crent>

12.背景颜色，字体颜色：

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: lightblue; /* 设置背景颜色 */
    color: white; /* 设置字体颜色 */
  }
</style>
</head>
<body>







</body>
</html>

13.炫酷的按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷按钮</title>
    <style>
        .button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 24px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #4CAF50;
            border: none;
            border-radius: 15px;
            box-shadow: 0 9px #999;
        }

        .button:hover {background-color: #3e8e41}

        .button:active {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>
</head>
<body>
    <button class="button">点击我</button>
</body>
</html>

14.弹窗公告：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告弹窗</title>
    <style>
        /* 遮罩层 */
        .overlay {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 弹窗内容 */
        .modal {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            animation-name: animatetop;
            animation-duration: 0.4s;
        }

        /* 添加动画效果 */
        @keyframes animatetop {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }
    </style>
</head>
<body>

<!-- 弹窗按钮 -->
<button onclick="openModal()">点击打开公告弹窗</button>

<!-- 遮罩层 -->
<div id="myModal" class="overlay">
    <!-- 弹窗内容 -->
    <div class="modal">
        <h2>公告标题</h2>
        <p>这里是公告的内容，可以自定义文本内容。</p>
        <button onclick="closeModal()">关闭</button>
    </div>
</div>

<script>
    // 打开弹窗
    function openModal() {
        document.getElementById("myModal").style.display = "block";
    }

    // 关闭弹窗
    function closeModal() {
        document.getElementById("myModal").style.display = "none";
    }
</script>

</body>
</html>

15.顶置提醒公告栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告栏</title>
    <style>
        .announcement {
            background-color: #f9edbe;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
            font-size: 18px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="announcement">
        这是一个公告栏，用于发布重要信息或通知。
    </div>
</body>
</html>

16.网页调用QQ：

<a href="https://qm.qq.com/cgi-bin/qm/qr?k=你的密钥&jump_from=webapi">点击这里访问QQ</a>

17.警告弹窗：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>警告弹窗</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="showAlert">显示警告弹窗</button>
    <div id="alertBox" class="hidden">
        <h2>警告！</h2>
        <p>这是一个警告弹窗！</p>
        <button id="closeAlert">关闭</button>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

CSS（文件命名为: styles.css）：

.hidden {
    display: none;
}

#alertBox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#closeAlert {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

JS（文件命名为scripts.js）：

document.getElementById('showAlert').addEventListener('click', function() {
    var alertBox = document.getElementById('alertBox');
    alertBox.classList.remove('hidden');
    alertBox.style.animation = 'slideIn 0.5s';
});

document.getElementById('closeAlert').addEventListener('click', function() {
    var alertBox = document.getElementById('alertBox');
    alertBox.classList.add('hidden');
    alertBox.style.animation = 'slideOut 0.5s';
});

function slideIn(element) {
    element.style.opacity = 1;
}

function slideOut(element) {
    element.style.opacity = 0;
}

以上就是所有，

先到这里把，写不动了！！！

更多开源代码新项目：HUAREN