Getting started with the Web
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
1. 工欲善其事必先利其器
我们需要什么工具 mark2. 第一步一定是先规划
首先思考一下问题
- 你的网站将于来干什么(主题/目的)
- 你的网站将用来呈现哪些信息(内容)
- 你的网站外观应该是什么样的(表现形式)
一些细节问题
- 整体布局
- 颜色
- 字体
- 图片
拐个弯 How do I start to design my website?
3. 文件管理
我们在自己计算机本地上应该把所有相关文件组织在一起,这些文件的(相对)路径要和他们最终在网络服务器上的一致(这样会非常有利于我们通过 FTP 向服务器提交文件)
-
文件命名规则
一律使用小写,不要包含空格(用下划线_
或者连字符-
):主要是由于
a). 网络服务器一般是对大小写敏感的;
b). 浏览器、网络服务器、编程语言对空格的处理不一致。 -
文件组织结构
4. HTML基础
HTML (Hypertext Markup Language) is not a programming language; it is a markup language
4.1. HTML 是由一系列 元素 组成的
我们来看一下这些元素,以双标签 <p>
为例:
再来看一下单标签<img>
: <img src="images/my_logo.png" alt="My Logo">
单标记是没有 content 的
4.2. HTML 文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
</head>
<body>
</body>
</html>
5. CSS基础
CSS(Cascading Style Sheet) 同样也不是一门编程语言,它是一种 “样式表语言”
这个太基础了,不想写了。。。。。。。
6. JavaScript 基础
是一门 编程语言
JavaScript ("JS" for short) is a full-fledged dynamic programming language that, when applied to anHTML document, can provide dynamic interactivity on websites. It was invented by Brendan Eich, co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation.
通常来讲,我们看到的 js 脚本都是放在 靠近 </body>
的地方的
The reason we've put the <script>
element near the bottom of the HTML file is that HTML is loaded by the browser in the order it appears in the file. If the JavaScript is loaded first and it is supposed to affect the HTML below it, it might not work, as the JavaScript would be loaded before the HTML it is supposed to work on. Therefore, putting JavaScript near the bottom of the HTML page is often the best strategy.
7. 发布网站
发布网站的方式有很多种
If you want total control over your published website, then you'll probably need to spend money to buy:
- Hosting — rented file space on a hosting company's web server. You put your website files on this space, and the web server serves the content to web users who request it.
- A domain name — the unique address where people can find your website, likehttp://www.mozilla.org, or http://www.bbc.co.uk. You rent your domain name for so many years from a domain registrar.
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_much_does_it_cost#Software
Further reading
- What is a web server
- Understanding domain names
- How much does it cost to do something on the web?
- Deploy a Website: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.
- Cheap or Free Static Website Hosting by Scott Murray has some useful ideas on available services.
HTML 代码应该如何调试
请牢记:HTML 是一种标记型语言。
这里至少提供了两种方式: 浏览器的开发者工具、W3C的在线标记语言检测工具。前者适合于比较小的项目,后者可用于较大型项目的检验。