blob: 6b4f5ef77eb60f1e0a5fcb3038741a38b17ac6e0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
title: Web 入门
slug: Learn/Getting_started_with_the_web
tags:
- 主页
- 发布
- 层叠样式表
- 指南
- 新手
- 理论
- 设计
- 超文本标记语言
translation_of: Learn/Getting_started_with_the_web
---
<div>{{LearnSidebar}}</div>
<div class="summary">
<p><strong>Web 入门</strong>是一门介绍 Web 开发实用性的简洁系列课程。在这里你将学会如何设置构建简单网页所需的工具并发布你自己的简易代码。</p>
</div>
<h2 id="建立你的第一个网站">建立你的第一个网站</h2>
<p>构建一个专业的网站需要大量的工作，所以如果你是新手，我们鼓励你从小事做起。你不会直接建立另一个 Facebook，但建立一个个人的简单在线网站并不难，所以让我们从这里开始吧。</p>
<p>通过按顺序阅读下面列出的文章，你将逐渐建立好你自己的第一个在线网站。让我们开始吧！</p>
<h3 id="安装基础软件"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a></h3>
<p>当提到建站工具的时候，网上有着一大堆工具可供选择。如果你才刚刚起步，你可能会在各种各样的代码编辑器、框架以及测试工具中困惑不已。 在<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>中我们将一步一步地展示如何安装一些你所需要的基础 Web 开发软件。</p>
<h3 id="你的网站看起来是什么样的？"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的网站看起来是什么样的？</a></h3>
<p>在开始为你的网站写代码之前，你应该先做好规划。你将展示什么信息？你将使用什么样的字体和颜色？在<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的网站看起来是什么样的？</a>这一块中我们简要讲述了一个简单的方法，你可以根据这个方法来设计和规划网站的内容。</p>
<h3 id="文件处理"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a></h3>
<p>一个网站包含很多文件：文本内容、代码、样式表、媒体内容等。当你建立一个网站，你需要给这些文件安排一个合理的结构，并确保它们能够相互联系。<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>这块内容将向你解释如何给你的网站建立一个合理的文件结构以及一些你应该要注意的问题。</p>
<h3 id="HTML_基础"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a></h3>
<p>超文本标记语言 ( HTML ) 是用来构建你的网页内容并将其语义化的代码。举例来说， 我的内容是一些段落还是带点的列表？我的网页上有插入图片吗？有数据表格吗？<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a>将在你能承受的范围内提供足够的信息让你熟悉 HTML。</p>
<h3 id="CSS_基础"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基础</a></h3>
<p>层叠样式表 (CSS) 是用来添加样式到你网站的代码。举例来说，你想让文字是黑色还是红色的？在屏幕的何处展示内容？用什么背景图像和颜色来装饰你的网站？<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基础</a>带你完成你需要做的事。</p>
<h3 id="JavaScript_基础"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Javascript_basics">JavaScript 基础</a></h3>
<p>JavaScript 是一种被用来添加交互功能到你的网站的编程语言。比如游戏，或者当按下按钮后会发生的事情，或者将数据输入表格，动态样式效果，动画等等。<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基础</a>将让你了解这门令人激动的语言能做什么，以及如何开始。</p>
<h3 id="发布你的网站"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website">发布你的网站</a></h3>
<p>当你完成了代码并整理好了构建网站的文件的时候，你需要将它们发布到互联网上以便人们可以找到它。<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website">发布你的网站</a>描述了如何最轻松地发布你的简易代码。</p>
<h3 id="万维网是怎么工作的"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/%E7%BD%91%E7%BB%9C%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84">万维网是怎么工作的?</a></h3>
<p>当你访问你喜爱的网站时，你可能不知道在这背后有很多复杂的事情正在发生。<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/%E7%BD%91%E7%BB%9C%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84">万维网是怎么工作的</a>概述了当你通过你的电脑查看一个网页时发生了什么。</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>： 一个由 <a class="external external-icon" href="https://twitter.com/JeremiePat" rel="noopener">Jérémie Patonnier</a> 创作的面向 Web 开发的完全新手的系列视频，讲述了 Web 基础。</li>
<li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>:这篇文章提供了一些关于Web的有用的背景知识——它是如何产生的，什么是Web标准技术，它们是如何协同工作的，为什么“Web开发人员”是一个很好的职业选择，以及您将在本课程中学习哪些最佳实践。</li>
</ul>
|
