共计 3379 个字符，预计需要花费 9 分钟才能阅读完成。
1. 学习 HTML 和 CSS
HTML 是网页的根底，它定义了页面的构造和内容；CSS 则负责丑化页面，使其更加好看。你能够通过在线教程、书籍、视频等形式来学习这两种技术。例如，W3Schools 提供收费的 HTML 和 CSS 教程，能够帮忙你疾速入门
2. 编辑器的抉择
编写 HTML 和 CSS 代码须要应用文本编辑器。对于初学者，能够抉择一些可视化的编辑器，如 Visual Studio Code、Sublime Text 等，这些编辑器提供了很多有用的性能，如代码高亮、主动补全等。
下载 Visual Studio Code：
1. 关上您的浏览器，拜访 Visual Studio Code 的官方网站：https://code.visualstudio.com/。
2. 点击“Download for Windows”（如果您应用的是 Windows 操作系统）或“Download for Mac”（如果您应用的是 Mac 操作系统）按钮。
3. 下载实现后，双击下载的安装程序。
4. 依照安装程序的提醒，实现 Visual Studio Code 的装置。
5. 装置实现后，关上 Visual Studio Code，您就能够开始应用它了
Visual Studio Code 里创立 html
1. 关上 Visual Studio Code。
2. 点击左侧菜单栏中的“文件”选项。
3. 抉择“新建文件”。
4. 在新建文件中输出“index.html”。
5. 在文件中输出以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>6. 保留文件，点击左上角的“文件”选项，抉择“保留”。
3. 设计网页布局
在开始编写代码之前，你须要先设计好你的网页布局。思考页面中要蕴含哪些元素，它们应该放在什么地位，以及它们之间的关系。
4. 编写 HTML 代码
依据你的设计，编写 HTML 代码来创立网页的构造和内容
如何编写 HTML
1. 关上文本编辑器
2. 在文本编辑器中创立一个新文件，并将其保留为 .html 文件
3. 在文件中输出以下代码：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>4. 保留文件
5. 在浏览器中关上该文件，即可看到网页的成果
HTML 我的项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>
<fieldset>
<legend>What's your cat's personality?</legend>
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer>
<p>
No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
</p>
</footer>
</body>
</html>5. 编写 CSS 代码
应用 CSS 来丑化页面，设置字体、色彩、边框等款式属性。
6. 预览和测试
在浏览器中预览你的网页，并进行测试，确保它在不同设施和浏览器中都能失常显示。
本文由 mdnice 多平台公布
