学习Web开发

阅读(335.7k) 收藏赞(2)

手册简介

《学习Web开发》是一门介绍Web开发的实用型的课程，在这里你将从最基础的层面开始对Web开发进行学习了解。学会如何设置构建简单网页所需的工具并发布简易代码，学习HTML、CSS及JavaScript的基础内容。本教程适合作为Web开发新手的入门学习教程。

手册说明

timg (2)

本教程内容由Mozilla开发者网络（MDN）提供，经W3Cschool整理翻译后发布。这个《Web开发入门》的内容虽然不能让你从“小白”变成“大神”，但可以让你从“小白”到“入门”。到那个程度以后，你已经拥有许多预备知识，可以自行探索，学习更多前端初级的内容，以及其他前端中级到高级的内容。

学习建议

1、如果你是完全的web初学者，我们建议你首先通读Web开发入门章节，这个章节介绍Web开发的实用入门知识；

2、如果你已经具备了一些知识，那么下一步应当了解 HTML 和 CSS 的细节。从 HTML 章节开始，然后到 CSS 章节；

3、如果你已经熟悉 HTML 和 CSS ，或者你主要对写程序感兴趣，想进一步学习JavaScript或者服务端开发。那么就从 JavaScript 第一步或服务端第一步章节开始了解吧；

4、如果你在 Web 开发中产生一些特定的疑问，那么常见问题这个章节或许能解答你的问题。

教程章节

1、Web开发入门

2、HTML—构建网络

3、CSS—网页样式

4、更新中……

Web相关学习教程

CC协议

本文档基于 Creative Commons Attribution-ShareAlike 2.5 Generic License 协议发布。

更新记录

盒模型概要 01-21 15:25
Web 调试HTML 09-19 18:25
Web 文档和网站结构 09-18 17:30
HTML入门 09-18 10:44
发布网站 09-15 18:26
HTML基础 09-15 18:25
你的网页将呈现什么样子？ 09-15 18:24
Web开发入门 09-15 18:20
HTML简介 09-15 17:56
head中有什么? HTML中的元数据 09-14 16:12

多端阅读

意见反馈 X

意见反馈：

联系方式：

查看完整版笔记

违规举报 X

广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容
其他

<> /* 初始状态隐藏组件 */ #aiBox.m-aiTool { visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } #aiBox { box-sizing: border-box; } /* 组件加载完成后的显示状态 */ #aiBox.loaded.m-aiTool.loaded { visibility: visible; opacity: 1; } .m-aiTool { display: none; position: fixed; bottom: 20px; right: 5px; width: 40px; height: 40px; } .m-aiTool img { width: 100%; height: 100%; } .ai-warp { position: fixed; bottom: 30px; right: 20px; width: 128px; height: 128px; background-image: url("https://atts.w3cschool.cn/ai-tool.png"); background-repeat: no-repeat; background-position: center; background-size: 100% auto; cursor: pointer; z-index: 2000; user-select: none; /* 防止拖拽时选中文本 */ } /* 修改样式部分 */ #popup-window { position: fixed; bottom: -100%; /* 初始位置在视口下方 */ left: 80px; width: 530px; height: 600px; border: 1px solid #c5c5c5; border-radius: 5px; background-color: #fff; opacity: 0; z-index: 2000; transition: opacity 0.3s ease; } /* 显示状态的样式 */ #popup-window.show { bottom: 20px; opacity: 1; } .popup-window-warp { width: 100%; height: 100%; display: flex; flex-flow: row wrap; } .popup-nav { width: 110px; height: 100%; flex: 0 0 80px; background-color: #232324; padding: 5px; box-sizing: border-box; } .popup-iframe { flex: 1; display: flex; flex-direction: column; background: #fff; overflow: hidden; } .popup-iframe iframe { width: 100%; height: 100%; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .popup-iframe .ai-tool-top { padding: 8px; background: #EEF0F4; display: flex; justify-content: flex-end; align-items: center; height: 32px; } .popup-iframe .ai-tool-top .maxkb-chat-close { cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.3s; } .popup-iframe .ai-tool-top .maxkb-closeviewport { cursor: pointer; } .popup-iframe .ai-tool-top .maxkb-openviewport { cursor: pointer; } .popup-iframe .ai-tool-top .maxkb-viewportnone { display: none; } .nav-title-openwin { width: 100px; height: 36px; display: flex; align-items: center; box-sizing: border-box; padding: 5px 3px; margin-bottom: 3px; font-size: 12px; color: rgb(201205212); cursor: pointer; } .nav-title-openwin img { width: 22px; height: 22px; margin-right: 5px; } .nav-title { width: 100px; height: 36px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 5px 3px; margin-bottom: 3px; font-size: 12px; color: rgb(201205212); cursor: pointer; } .nav-title img { width: 22px; height: 22px; margin-right: 5px; } .nav-title:hover { background-color: #2C2C2D; border-radius: 8px; } .nav-title.nav-active { border-radius: 8px; background-color: #2C2C2D; color: #fff; } /* 放大状态的样式 */ #popup-window.maxkb-enlarge { width: 50% !important; height: 100% !important; top: 0 !important; right: 0 !important; /* 改为right: 0，使其靠右显示 */ left: auto !important; /* 改为auto，避免left属性影响 */ bottom: auto !important; opacity: 1; transition: width 0.3s easeheight 0.3s ease; } /* 移动端适配 */ @media only screen and (max-width: 768px) { #aiBox { display: none; } .m-aiTool { display: block; } } .ai-tool-top { padding: 8px; background: #EEF0F4; display: flex; justify-content: flex-end; align-items: center; height: 32px; box-sizing: border-box; } .tool-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .tool-title { font-size: 16px; font-weight: 500; color: #333; } .more-link { display: flex; align-items: center; color: #666; text-decoration: none; font-size: 14px; gap: 4px; } .more-link:hover { color: #1890ff; } .tool-content { flex: 1; overflow-y: auto; padding: 20px; } .tool-grid { display: grid; grid-template-columns: repeat(41fr); gap: 12px; padding: 0; max-width: 100%; } .tool-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; padding: 8px; border-radius: 6px; transition: background-color 0.3s; aspect-ratio: 1; width: 90px; height: 90px; box-sizing: border-box; } .tool-item:hover { background-color: #e8e8e8; } .tool-icon { width: 32px; height: 32px; /* 固定图标容器高度 */ display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .tool-icon img { width: 32px; height: 32px; /* 固定图标大小 */ object-fit: contain; /* 保持图片比例 */ } .tool-name { font-size: 12px; color: #333; text-align: center; width: 100%; line-height: 1.2; height: 2.4em; /* 固定文字容器高度，刚好容纳两行 */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; padding: 0 4px; position: relative; } /* 工具提示样式 */ .tool-name::after { content: attr(data-tooltip); position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); background: rgba(0000.75); color: white; padding: 3px 6px; border-radius: 4px; font-size: 12px; white-space: normal; /* 允许提示文字换行 */ max-width: 200px; /* 设置最大宽度 */ text-align: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.2svisibility 0.2s; } .tool-name::before { content: ''; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: rgba(0000.75); z-index: 1000; } /* 响应式布局调整 */ @media (max-width: 768px) { .tool-grid { grid-template-columns: repeat(31fr); gap: 10px; } .tool-item { width: 70px; height: 70px; } .tool-icon { width: 28px; height: 28px; } .tool-icon img { width: 20px; height: 20px; } } @media (max-width: 480px) { .tool-grid { grid-template-columns: repeat(21fr); gap: 8px; } .tool-item { width: 60px; height: 60px; } .tool-icon { width: 24px; height: 24px; } .tool-icon img { width: 18px; height: 18px; } .tool-name { font-size: 11px; } } .maxkb-chat-close { cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.3s; } .maxkb-chat-close:hover { background-color: rgba(0000.05); }