HTML个人网站指南，从基础到未来

HTML的基础语法

HTML标签

HTML由一系列标签组成,用于指定网站的结构和内容，以下是基本的HTML标签：

（图片来源网络，侵删）

<html>：开始HTML文件，指定文件名和版本。
<head>：包含网站的全局内容，如 CSS 标头和 meta 标头。
<body>：网站的主体部分，包含内容。
<script>：包含网站的脚本，如社交媒体互动和动态内容加载，`：网站标题。
<meta>：包含网站的 meta 标头，如 viewport、 charset等。
<style>：包含网站的样式，如 CSS 样式。
<link>：将外部资源（如 CSS 库、JavaScript 库）导入到网站。
<script>：与外部脚本结合使用。
<script id="cookie"></script>：唯一标识外部脚本。

HTML结构

HTML的结构使用 <```标签和 ```> 定义。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.">我的个人网站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            line-height: 1.6;
        }
        h1 {
            color: #2c3e5;
            margin-bottom: 2px;
        }
        p {
            margin: 1px 0;
        }
    </style>
</head>
<body>
    <!-- 内容开始 -->
    <h1>Welcome to My Personal Website</h1>
    <p>This is my personal website. I'm a自媒体作者，致力于分享我的创作和生活点滴。</p>
    <h2>Recent Posts</h2>
    <p>
        1. [最近发布] 新增了一个视频库，内容涵盖生活、娱乐、科技等多个领域。
        2. [更新] 新增了一个产品页面，介绍了我们的最新产品及其优势。
        3. [热门] 关注我的新视频，点击下方按钮即可观看。
    </p>
    <!-- 内容结束 -->
</body>
</html>

CSS样式

HTML的布局通常不够美观,因此需要使用 CSS 表达式来优化和美化内容，以下是基本的 CSS 表达式：

（图片来源网络，侵删）

body { margin: 0; padding: 0; }：去掉默认的左右边距和底部 padding。
h1, h2, p { margin-bottom: 2px; }、小标题和正文的最低边距。
a { color: #333; text-decoration: none; }：设置链接的默认颜色和样式。
link { color: #333; }：设置外部链接的默认颜色。
meta title { color: #333; font-family: Arial, sans-serif; }：设置 meta 标头的默认颜色和字体。

JavaScript 动态内容

HTML 无法直接实现动态内容，因此需要结合 JavaScript 来实现，以下是几种常见的动态内容实现方法：

a. 社交媒体脚本

<script>
    const socials = document.querySelectorAll('.social-button');
    socials.forEach(button => {
        button.addEventListener('click', function() {
            button.textContent = '关注我';
            button.style.display = 'block';
        });
    });
</script>

b. 邮件营销工具

<script>
    const mails = document.querySelectorAll('.mail');
    mails.forEach(mail => {
        mail.addEventListener('click', function() {
            alert('您的信息已添加到我的邮箱中！');
            mail.style.display = 'none';
        });
    });
</script>