【前端入门】从零学习 Web 开发

项目结构

# Web
## index.html
## images/ # 存储图片
    ### bicycle.jpg
    ### view.jpg
## scripts/ 存储.js文件
    ### main.js
## styles/ 存储.css文件
    ### style.css

HTML 基础

<!doctype html> <!-- 文档类型 -->
<html lang = "zh-CN"> <!-- 根元素：文档语种 -->
<head> <!-- 声明 -->
    <meta charset = "utf-8" /> <!-- UTF-8 字符编码 -->
    <meta name = "viewport" content = "width=device-width" /> <!-- 视口元素：随页面宽度渲染 -->
    <title>学习 Web 开发</title> <!-- 页面标题 -->
    <link href = "styles/style.css" rel = "stylesheet" /> <!-- CSS 路径 -->
</head>
<body> <!-- 页面内容 -->
    <h1>秋日瀑布村</h1> <!-- 标题 -->
    <img src = "images/bicycle.jpg" alt = "秋日序曲" /> <!-- 图像 -->
    <p>在那个被岁月温柔抚摸的小镇上，阳光如同金子一般珍贵，它透过繁茂的树叶，洒在那条安静的街道上。
       一辆蓝色的自行车静静地停靠在一幢橙黄色的小屋前，仿佛在等待着它的主人归来。
       小屋的门微微敞开，透露出一丝生活的气息，而门口悬挂的红灯笼，随风轻轻摇曳，似乎在诉说着一个又一个温暖的故事。<br/>
       <br/> <!-- 换行符 -->
       不远处，一条小河蜿蜒流过，河面上偶尔飘过几片落叶，它们随着河水的流动，带走了秋天的秘密。
       河的对岸，是一片被秋色染红的树林，那里的枫叶如同燃烧的火焰，照亮了整个山谷。
       瀑布从高处倾泻而下，水声潺潺，与林中的鸟鸣声交织在一起，构成了一首自然的交响乐。
    </p>
    <p>学习 Web 开发的基础：</p> <!-- 段落 -->
    <ul> <!-- 列表 -->
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <p>
        点击这里
        <a href = "https://developer.mozilla.org/zh-CN/docs/Learn"> <!-- 链接 -->
            学习 Web 开发
        </a>
        ，希望你能够快速上手！
    </p>
    <button>Change user</button> <!-- 按钮 -->
    <script src = "scripts/main.js"></script> <!-- 脚本 -->
</body>
</html>

CSS 基础

/* 根元素样式 */
html {
    background-color: #00539f; /* 背景颜色为深蓝色 */
    font-size: 10px; /* 字体大小为10像素（px）*/
    font-family: "Open Sans", sans-serif; /* 默认字体为"Open Sans"，如果没有则使用无衬线字体 */
}

/* 标题样式 */
h1 {
    font-size: 60px; /* 字体大小为60像素 */
    text-align: center; /* 文本居中对齐 */
    margin: 0; /* 去掉外边距 */
    padding: 20px 0; /* 内边距上下各20像素，左右为0 */
    color: #00539f; /* 文本颜色为深蓝色 */
    text-shadow: 3px 3px 1px black; /* 添加文本阴影，水平偏移3像素，垂直偏移3像素，模糊半径1像素，颜色为黑色 */
}

/* 段落样式 */
p {
    font-size: 30px; /* 字体大小为30像素 */
}

/* 列表项样式 */
li {
    font-size: 30px; /* 字体大小为30像素 */
    line-height: 2; /* 行高为字体大小的2倍 */
    letter-spacing: 1px; /* 字母间距为1像素 */
}

/* 网页主体样式 */
body {
    max-width: 100%; /* 最大宽度为100% */
    margin: 0 auto; /* 外边距为0，左右自动居中 */
    background-color: #ff9500; /* 背景颜色为橙色 */
    padding: 0 20px 20px 20px; /* 内边距：上边0，右边20像素，下边20像素，左边20像素 */
    border: 5px solid black; /* 边框为5像素宽的实线，颜色为黑色 */
}

/* 图片样式 */
img {
    display: block; /* 块级元素 */
    margin: 0 auto; /* 外边距为0，左右自动居中 */
    max-width: 100%; /* 最大宽度为100% */
}

JavaScript 基础

const myImage = document.querySelector("img"); // 获取页面中第一个 <img> 元素的引用

myImage.onclick = () => { // 为图片添加点击事件监听器
    const mySrc = myImage.getAttribute("src"); // 获取图片的当前 src 属性值
    // 判断当前图片的 src 是否为 "images/bicycle.jpg"
    if (mySrc === "images/bicycle.jpg") { // 如果是，则将图片的 src 改为 "images/view.jpg"
        myImage.setAttribute("src", "images/view.jpg");
    } else { // 如果不是，则将图片的 src 改为 "images/bicycle.jpg"
        myImage.setAttribute("src", "images/bicycle.jpg");
    }
};

let myButton = document.querySelector("button"); // 获取页面中第一个 <button> 元素的引用
let myHeading = document.querySelector("h1"); // 获取页面中第一个 <h1> 元素的引用


function setUserName() { // 定义一个函数，用于设置用户的个性化欢迎信息
    const myName = prompt("请输入你的名字."); // 弹出一个对话框，提示用户输入名字，并将输入值存储到变量 myName 中
    if (!myName) { // 如果用户未输入名字（点击取消或直接关闭对话框），则重新调用 setUserName 函数
        setUserName();
    } else { // 如果用户输入了名字，则将名字存储到浏览器的 localStorage 中，键为 "name"
        localStorage.setItem("name", myName);
        myHeading.textContent = `Web 开发很有意思, ${myName}`; // 修改 <h1> 元素的文本内容，添加个性化欢迎信息
    }
}

// 检查浏览器的 localStorage 中是否存在键为 "name" 的数据
if (!localStorage.getItem("name")) { // 如果不存在，则调用 setUserName 函数，提示用户输入名字
    setUserName();
} else { // 如果存在，则从 localStorage 中获取存储的名字
    const storedName = localStorage.getItem("name");
    myHeading.textContent = `Web 开发很有意思, ${storedName}`; // 修改 <h1> 元素的文本内容，显示存储的名字
}

myButton.onclick = function () { // 为按钮添加点击事件监听器
    setUserName(); // 当按钮被点击时，调用 setUserName 函数，允许用户重新输入名字
};