Web 简史
Web 开发人员使用三种不同的语言来开发网站
HTML
,超文本标记语言,描述内容
和网站的结构
。
CSS
,样式表,描述网站的样子
。
JS(JavaScript)
,处理所有的交互
。
HTML 和 CSS 都是标记语言,换句话说,它们只适用于描述的其它文件。JavaScript 完全是一个编程语言,它允许开发人员变更内容以及即时的改变网站的风格。
JavaScript 是 Java 编程语言的一个分支,因为它们有相似的名称。但事实上 Java 和 JavaScript 没有丝毫关系
,虽然有些语法很相似。这只是一个营销策略,是为了搭 Java 的顺风车而起的名字。
最重要的不是学习知识本身,而是怎么更新自己的知识,紧跟技术的潮流。对新到来的科技有自己的观点,同时继续学习新东西(keep learning),继续开发(keep building websites),并从中获得快乐(keep having fun)。
现实中一个很好的开发者的标志,不是非常聪明,而是解决问题并能够持之以恒。
树型结构
(shap of trees)是贯穿 web 开发生涯的一个术语。数就是计算机科学中的一种数据结构,用它们来表示具有层级关系的数据,也就是属于双方的一些信息。元素会相互属于对方或者从一个元素中派生出另一个,子节点有它的父节点,并且子节点也可以有子节点。
服务器具有任何人都可以访问的外部路径
,这也正是 Web 的工作原理。
HTML 语法
环境
开发环境主要分为两个方面,浏览器和文本编辑器。
文本编辑器
富文本
是由字体、样式、颜色等组成的,如微软word文档编辑器。而我们需要使用纯文本
来编写代码,它是一组 ASCII 字符
。
IDE
(Integrated Development Environment)集成开发环境,可以看作是增强版的文本编辑器,出了允许编写代码,还可以编译运行。
Sublime Text 快速、轻量而且易于定制。拥有众多快捷键,多重选取功能和巨大的插件扩展系统,你可以创建完美的工作流。
Atom 由 GitHub 提供,进军文本编辑器市场的时间相对较晚, 其外观和使用与 Sublime Text 类似。二者均支持多重选取的功能, 并且它们共享许多相同的快捷键。同样与 Sublime Text 极为相似, Atom 拥有丰富的包扩展系统,你可以随心所欲地定制你的编辑器。
Atom 和 Sublime Text 都非常受欢迎,你接触到的大多数 Web 开发者大多在使用这两种编辑器之一。
HTML 查找
HTML 结构
HTML 文档
在 HTML 结构中有些代码并不显示,那它们是用来做什么的呢?
你可以将它当作一个模版
,按照该模板将有助于确保页面按开发人员(也就是你) 预期的形式显示。它不仅表达应该显示什么,还包括告知浏览器如何显示的相关信息
。
此模板可分解为 3 个部分:
DOCTYPE
:描述 HTML 的类型
。尽管技术上存在不同的类型,但对于你将要编写的 99.999% 的 HTML 来说, 是不错的选择。<head>
:描述有关站点的元信息
(例如标题),并提供网页正确渲染和交互
,所需的脚本和样式表链接
。<body>
:描述用户将看到的网页上的实际内容
。
省略其中的一些信息并不意味着不能正常显示页面。实际上,即使你无意中遗漏了某些信息,浏览器也会假设模板缺失的部分已经存在
,为你创建并添加完整其它信息。
理论上会是这样,但这是不确定的行为。较低版本的浏览器可能无法帮你补全 HTML 的结构,而你不知道用户会使用哪种浏览器。因此,最好的做法是写上模板中所有的基本部分来使你的页面正常显示
,而不必依靠浏览器毫无保障的假设。
HTML 文档类型
HTML 文档通常以类型声明
开始(这不是标签,所以不应该有结束标签)。该声明将帮助浏览器确定其尝试解析和显示的 HTML 文档类型。
一些较老的网站文档类型如下所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd">
(触发标准模式,但指定旧形式的验证。)
或者根本没有文档类型的声明。
但是较新的网站(以及你的网站!)将具有如下所示声明:
<!DOCTYPE html>
(拥有所有最新功能的触发标准模式。)
浏览器查找该文档类型声明来确定使用哪种渲染模式来渲染该站点
。通常,较新的站点遵循标准 HTML 规范。当前的标准 HTML 规范被称为 HTML5(即你正在学习的内容!)。另一方面,在 HTML 标准发布之前创建的较早站点,可能使用不同的渲染模式模拟较早浏览器的行为。
如果你有兴趣阅读更多有关文档类型声明和不同渲染模式的内容,可以在 此处 进行了解。
一旦你声明了文档类型,HTML 文档的下一部分就是 <html>
标签,告知浏览器应将括在 <html> ...</html>
内的所有内容解析为 HTML。然后是 HTML 文档的两个主要部分:<head>
和 <body>
。
<head>
和 <body>
<head>
将包含有关页面的常规信息和元数据
,而 <body>
将包含显示在该页面上的内容
。
另一方面,<head>
是始终不可见的,但是其中描述页面的信息和指向其它文件的链接都是浏览器正确渲染网站所需要的。例如,<head>
负责:
- 文档的标题(浏览器标签中显示的文本):
<title>About Me</title>
- 相关的 CSS 文件(针对样式):
<link rel="stylesheet" type="text/css" href="style.css">
- 相关的 JavaScript 文件(更改渲染和行为的多用途脚本):
<script src="animations.js"></script>
- 网页使用的字符集(文本的编码):
<meta charset="utf-8">
- 关键字、作者和描述(通常对搜索引擎优化(SEO) 起作用):
<meta name="description" content="This is what my website is all about!">
HTML 验证程序
HTML 验证程序 会分析你的网站并验证你是否在编写有效的 HTML。
读懂文档,查找新的技术技巧是所有 Web 开发者的重要工作内容之一。
文章只是作为个人记录学习使用,如有不妥之处请指正,谢谢。