小萧的网页三件套入门之第一套：HTML

SteveXMH大约 10 分钟

2020/1/29，在 Scratch 群里人的要求下撰写此文，如果有误请在评论区指出，万分感谢！

本文仅在小萧的个人博客open in new window发布，禁止转载！

序言

网络教程千千万，来让小萧教教看（bushi），网络的发达让程序员们越来越关注于网页编程上，甚至网页三件套中的 JavaScript 已经可以通过 NodeJS 运行在服务器上，似乎三件套的运用已经扩展到了全栈开发上。

那么面对这股潮流，学习网页开发似乎是不可避免的了（如果你喜欢 C++ Java Kotlin 也可以现在关掉本文了）。那么作为三件套，每一样都不可或缺，本文我们主要关注的是 HTML（Hyper-Text Markup Language）

当然，如果你觉得这篇教程太蔡了，可以选择更有权威的 MDN 开发文档open in new window 然后关闭本教程，希望你学的开心！

什么是 HTML？

网页五花八门，单单文字显得十分单调。就好比现在你看到的本文，有大标题，引用，段落，代码，都是文字无法清晰展示的。因此，必须要有一个能“超越文本”的表达能力的语言，而且还要好写（其实越多越难看）。于是先人们就发明了超文本标记语言（Hyper-Text Markup Language）来作为网页的主用语言来装饰我们的网页。为了简单，这个语言有这些特点：

HTML 是可以阅读的，它不会变成机器码，也不会变成难懂的代码（Script 元素除外）。
这是一种标记语言，不是编程语言，所以不用担心~~掉光头发~~学习门槛高。
这种语言用标记的方式来描述我们的网页布局，层次会很清晰（除了那些迷惑网页布局）。
HTML 不会关心你的大小写（即不敏感大小写），未来的 XHTML 甚至要强制小写（元素内容除外）。
HTML 真的很简单！！！！！

介于 HTML 是采用了 XML 的标记方式，那么下面会从 XML 的基本语法开始教起：

基本概念

元素

首先，这是一个元素：

<p>
    我是一个元素里的文本
</p>

称作一个元素的开头，也叫作开始标签（Opening Tag）。这个标签会用<>两个符号括在一起，里面的开头会写上这个元素的名称（也就是p），通常名称后面还会写一些关于这个元素的一些属性，后面会说到。

是这个元素的结尾，也叫作闭合标签（Closing Tag）。和开始标签类似，但是元素名称的开头需要带一个斜杠（/）表示这是个闭合标签，闭合标签里面除了名称什么都不能包含。

但是有这么一种特别的元素，它并不需要闭合标签，也就是这个元素里面不会有内容出现，它在一开始就关上了（误）：

<br/> <hr/>

这样的元素称之为空元素，也就是没有内容的元素，他的行为依照下文的属性而定。

除去空元素，一个元素的两个标签之间可以写入任何你喜欢的文字，而且可以任意嵌套你想要的的各种元素：

<p>
    <h2>
        HTML 教程
	</h2>
	By
	<a href="/">
        SteveXMH
	</a>
	<p>
        这是一个小萧写的 HTML 教程~
	</p>
</p>

效果应该是这样的：

<p><h2>HTML教程</h2>By<a href="/">SteveXMH</a><p>这是一个小萧写的HTML教程~</p></p>

被一个元素所包含的元素称之为那个元素的子元素，反过来说，这个包含了某个元素的元素称作这个元素的父元素（禁止套娃）。一个元素可以有很多个子元素，但是每个子元素只有一个父元素。

有人说写网页难，是因为元素种类太多，但是我们都可以在 MDN（Mozilla Developer Network）open in new window网页找到任何有关网页开发（比这个教程好了不知道多少）的教程和文档（绝大多数都是社区翻译的简体中文）。那么我们继续基础概念：

属性

一般来说，元素的开始标签可能会有很多属性（Attribute）来修饰这个元素的一些特点，通常和 JavaScript 配套使用，效果最佳（√）。通常以 属性名="属性值" （也有属性值用单引号来标注的，甚至引号也不用的，但是最好用双引号）来定义，如果有很多个属性就用空格分隔：

<a href="https://github.com/" id="github-link" style="color: white; background-color: red;">全球最大同性交友网站！点我约炮→</a>

实际展示效果是这样的：

<a href="https://github.com/" id="github-link" style="color: white; background-color: red;">全球最大同性交友网站！点我约炮→</a>

这里用了点 CSS 风格，后面我们也会讲到，能够让你的网页风格更加突出。当然这些都是通过属性加以修饰之后才能实现的行为，比如你点击了上面的文字后，会跳转到这个~~同性交友~~网站，是因为这个 a 元素有了 href 这个属性后点击时会跳转到这个值对应的链接。

有的时候，属性不一定需要值，当不使用属性值的时候，这个属性则默认取 JavaScript 中的 true 值：

<div>
    <style scoped>
        div {
            color: red;
        }
	</style>
    <div>
        只有我的文字是红色的！
    </div>
</div>
<div>
    后面会讲到 CSS 是什么的，我们只要注意到上面的 style 元素的 scoped 这个属性没有特定的值就可以了。
</div>

注释

注释就很简单了，符合下面的格式即可：

<!-- 感叹号和两个横杠开头
然后中间全部是注释~
结尾再加两个横杆一个大于就OK了 -->

网页在外表是给人看的，写的时候也是给人看的，多加注释有助于帮自己回忆当时的做法，也方便别人理解的你的网页布局。

一些常见的元素

元素的基本概念了解了，那么我们来看下能用上的各种自带元素吧。

a 元素能创建超链接，点击会跳转到 href 属性所对应的链接，例：<a href="baidu.com">Baidu</a>
b 元素使文本粗体，例：IMPORTANT!
i 元素使文本斜体，例：MDN
br 元素能换行
这是空元素，例：I'm in the first line. I'm in the second line.
p 元素构造一个自然段，每一段都会自动换行，例：I'm the first paragraph.I'm the second
img 元素显示一个图片，可显示 src 属性指向的链接的图片，如果还在加载就会显示 alt 属性的文字，例：<img src="https://developer.mozilla.org/media/examples/grapefruit-slice-332-332.jpg" alt="Grapefruit slice atop a pile of other slices">
span 元素是一种行内容器，本身无特别效果，后面会详细说到用法和区别，例：I'm in a span container.
div 元素是一种块状容器，本身无特别效果，后面会详细说到用法和区别，例：<div>I'm in a div container</div>

让我们再深入一些

学会了基础，希望大家还是接受得了的，HTML 其实真的是元素种类多才看起来难。接下来的许多说明就要建立在基本概念之上了，所以请务必跟上~

网页的标准模板

我们接下来要开始了解网页的大概构造了，首先是现代网页的标准模板：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我是网页标题，显示在标签页上的那个</title>
    </head>
    <body>
        <!-- 里面就是网页本体了 -->
        <h1>我的一级标题，字很大很大的</h1>
        <p>第一段，写些啥吧？</p>
    </body>
</html>

首先开头的一个元素有些特别，当然就它特别点而已。<!doctype html>是用来注明这个文本是个 HTML 网页（我不是普通的文字！），方便某些老掉牙的浏览器识别网页。虽然现代浏览器都是通过 HTTP 的 Content-Type 头来判断文件类型的（扯远了，这不是三件套的内容，了解就好），但我们还是要养成写 doctype 的习惯。

接着的元素就是 Html 的本体了，Html 元素的内容除了注释还有两个必不可少的子元素：head 和 body。

Head 元素用来描述网页的基本属性，比如标题（title 元素），元数据（meta 元素），要加载的脚本，要加载的资源文件等等。

Body 元素就是浏览器上所显示的内容了，里面写的元素都会显示在我们的网页里。

一般来说只要按照上面的模板，网页都可以在大部分浏览器里正常显示。

块状元素和行内元素

你可能会发现一个问题，有些元素可以换行，但有些元素不会自己换行。通常我们把这类会自己换行的元素称作块状元素，反之称之为行内元素。这个特性我们后面学习了 CSS 之后是可以任意调整的，这里只是初步了解一下就好。目前有两个最常用的，只用作容器的元素是 div 和 span，两者代表的分别是块状容器和行内容器（当然也可以被 CSS 任意调教），通常用于布局：

<div>
    Chunk 1
</div>
<div>
    Chunk 2 with <span>span element</span>
</div>

表格

网页有时候是服务于办公的，表格是显示数据的绝佳方式，那么在网页里如何制作表格呢？

表格的英文名是 Table，那么用于表达表格的元素自然是 table 元素了。
我们数据的英文名是 Data，那么用于表示表格内数据的元素也自然是 td(Table Data) 元素了。
表格由行拆分，行的英文名是 Row，所以每行的数据都要在 tr(Table Row) 元素内才会换行。
表格的首行都会写上这一列代表什么数据，也就是表头单元格，即 th(Table Headline) 元素，标题的字会更粗一些，方便辨认。

综上所述，我们便可以按照如下格式创建表格了：

<table>
    <tr>
        <!-- 第一行可以先写标题 -->
        <th>Todo</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>HTML Tutorial</td>
        <td>Finished</td>
    </tr>
    <tr>
        <td>CSS Tutorial</td>
        <td>Working</td>
    </tr>
    <tr>
        <td>JS Tutorial</td>
        <td>Working</td>
    </tr>
</table>

效果应该是这样的：

<table>
    <tr>
        <!-- 第一行可以先写标题 -->
        <th>Todo</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>HTML Tutorial</td>
        <td>Finished</td>
    </tr>
    <tr>
        <td>CSS Tutorial</td>
        <td>Working</td>
    </tr>
    <tr>
        <td>JS Tutorial</td>
        <td>Working</td>
    </tr>
</table>

结尾

其实 HTML 学会了概念，其余的元素的使用也都是套标准（其实俺就是一个字，懒）。绝大多数的 HTML 教程都可以从 MDNopen in new window 里找到，本文也有部分内容借鉴了 MDN（来找找看？）。那么祝大家做出属于自己的网页！

啥？你还觉得不好看？

我也是这么觉得的！

为了装饰我们的网页，还得学习 CSS（Cascading Style Sheets，层叠样式表）呢！

那么我们第二套再会！

顺带一提，有自己博客的群友，想要加友链的可以在下方回复哦~

小萧的网页三件套入门之第一套：HTML

# 序言

# 什么是 HTML？

# 基本概念

# 元素

# 属性

# 注释

# 一些常见的元素

# 让我们再深入一些

# 网页的标准模板

# 块状元素和行内元素

# 表格

# 结尾

序言