有些程序员说什么都没事，就是说 HTML 是一门编程语言，他马上跳起来跟你吵，非说 html 不是图灵完备啊，html 是标记语言啊之类的。笔者对此不表达任何立场。不过 HTML 确实是一门颇有意思的技术。
简简单单
今天的内容不简单哦，建议多读几次好好地消化。回复 html 可以获取更多阅读资源哦！
游览器拿到了 html, css, js 文件，就开始展示了。其中 html 文件是整个网页的骨架。没有它啥都不会显示出来。它一般都长这样：
<html> <head> <title>Titletitle> <link rel="stylesheet" type="text/css" href="./style.css" /> <script src="src/index.js">script> head> <body> <p> Hello World p> body>html>有没有看晕了？其实很简单。HTML (HyperText Markup Language)是一种标记语言(Markup Language)，全称 超文本标记语言。标记语言还有有很多其它种，比如 xml, svg 等都是标记语言。可以看下图了解何为标记语言。
每个标记语言都由标签组成。标签可以有属性与值，内容，子标签等。有些特殊的标签比如 是注释。要注意在 html 中，我们一般把标签叫成元素 (element)。html 有两个元老级属性，在任何标签上都可以加(除了少数比如 注释)。它们就是 class 和 id 。CSS 和 JS 还会遇到它哦！
<html> <head> <title>Titletitle> <link rel="stylesheet" type="text/css" href="./style.css" /> <script src="js/index.js">script> head> <body> <p> Hello World p> body>html>再回到前面的例子。!DOCTYPE 标签声明了这是 html，而不是 svg、xml 之类的。html标签是将一切包裹起来的根元素，它的子元素永远是 head 和 body 。head声明了一些元信息，比如 title 就是网页标签页的名字。比如百度的title就是 百度一下，你就知道。
link 定义文档与外部资源的关系。它的属性 rel ，全名relationship，顾名思义就是规定当前文档与被链接文档之间的关系。type 是规定被链接文档的 MIME 类型。MIME 类型五花八门，只要知道它是一种表示文件性质和格式的标准。
script 就是脚本标签，它里面没写东西，而是用 src 属性指向了 js/index.js。script 里面也可以写 Javascript，如以下示例：
<script> console.log('Hello World');script>(以后肯定会讲到 JavaScript，它可是重头戏！)
现在我们从head里面出来了，body 里面只有两个元素。注释不用管它，就一个p元素。它的全名是 paragraph，也就是段落的意思。它就像 Word 里面的段落，单纯显示文字的。把上述代码打出来，在游览器打开，就可以看到如下效果：
学废警告！非战斗人员请撤离！
你可能会奇怪为什么 script 的标签和 link 标签 。
其实网站可以想象成一个文件夹，网址 URL 的格式可以这样总结：
hostname 就是平时说到的域名，path 就是文件路径。关于这张图以后会详细讲解。
大部分网站，没有指定路径时，默认是根目录下的 index.html 文件。这里根目录是服务器所服务的 ”文件夹“ 的根目录。
题外话，这个 ”文件夹“ 为什么打引号？因为它不一定是真正意义上的文件夹，可以是经过服务器处理后返回的文件，而这个路径只是传给服务器的参数。但是这并不妨碍我们当它是一个文件夹。
假设这个文件夹叫 www ，输入它的网址就得到 index.html。
> www|> js| | index.js||index.html|style.cssjs 是一个文件夹，它底下有一个 index.js 。因此 script 标签的 src 属性 js/index.js 就是指向这个文件夹。而 ./style.css 则是指向与 index.html 同目录的 style.css 文件。这个 . 就代表当前目录，而 /代表去到接下来的路径。为什么js/index.js没有 ./开头？其实带不带 ./ 都是一样的，也就是说 style.css 也是 link 的合法 href 属性。
当 html 被解析后，它可以被看成一棵树。树是一种计算机数据结构，其实也很像平时看到的树。这里就不展开了。树是有层级概念的，这个概念在接下来理解 CSS 和 JS 用处很大。请看一下例子(head 部分省略掉了，直接看 body里面的内容)：
<body> <div class="title">Logindiv> <form action="login" id="login-form"> <div class="field"> <label for="username">User: label> <input type="text" name="username"> div> <div class="field"> <label for="password">Password: label> <input type="text" name="password"> div> <button type="submit">Loginbutton> form>body>这是一个很简单的登录界面，有很多值得探讨的。假设这颗”树“ 的根节点是 body，那 body节点就有两个子节点：div 和 form。其中 div 的 class 是 title，有时这个 div可以被写成 div.title。form 有个 id 属性 login-form。它可以被写成 form#login-form。所以 # 后面跟的是 id，而 . 后面跟的是 class。是不是很简单？
form#login-form和 div.title是兄弟节点。div.field是form#login-form的子节点。input[type="text"]是form#login-form的孙子节点，是div.field的子节点。没错，可以通过tag[attr="value"]的方式得到某属性 attr 值为 value 的元素。这部分在 CSS 选择器章节将详细描述。
说了这么多，咱们来看一下上面代码的效果吧：
是不是很简单？接下来的几篇文章将一步步地完善这个登陆界面，不仅漂亮，还好用哦！敬请期待！(咕咕咕)建议自己做一遍哦。在公众号后台回复 html可以获取源代码压缩包，并且许多其它扩展阅读资源！
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
