共计字数:3k 预计阅读用时:11 分钟

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

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

本文仅在小萧的个人博客发布,禁止转载!

序言

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

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

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

什么是 HTML?

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

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

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

基本概念

元素

首先,这是一个元素:

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

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

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

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

1
<br/> <hr/>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
<p>
<h2>
HTML 教程
</h2>
By
<a href="/">
SteveXMH
</a>
<p>
这是一个小萧写的 HTML 教程~
</p>
</p>

效果应该是这样的:

HTML教程

BySteveXMH

这是一个小萧写的HTML教程~

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

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

属性

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

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

实际展示效果是这样的:

全球最大同性交友网站!点我约炮→

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
<style scoped>
div {
color: red;
}
</style>
<div>
只有我的文字是红色的!
</div>
</div>
<div>
后面会讲到 CSS 是什么的,我们只要注意到上面的 style 元素的 scoped 这个属性没有特定的值就可以了。
</div>

注释

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

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

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

一些常见的元素

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

  • a 元素能创建超链接,点击会跳转到 href 属性所对应的链接,例:<a href="baidu.com">Baidu</a>
  • b 元素使文本粗体,例:<b>IMPORTANT!</b>
  • i 元素使文本斜体,例:<i>MDN</i>
  • br 元素能换行
    这是空元素,例:I'm in the first line.<br/>I'm in the second line.
  • p 元素构造一个自然段,每一段都会自动换行,例:<p>I'm the first paragraph.</p><p>I'm the second</p>
  • 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>span</span> container.
  • div 元素是一种块状容器,本身无特别效果,后面会详细说到用法和区别,例:<div>I'm in a div container</div>

让我们再深入一些

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

网页的标准模板

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

1
2
3
4
5
6
7
8
9
10
11
12
<!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 之后是可以任意调整的,这里只是初步了解一下就好。目前有两个最常用的,只用作容器的元素是 divspan,两者代表的分别是块状容器和行内容器(当然也可以被 CSS 任意调教),通常用于布局:

1
2
3
4
5
6
<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) 元素,标题的字会更粗一些,方便辨认。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

效果应该是这样的:

TodoStatus
HTML TutorialFinished
CSS TutorialWorking
JS TutorialWorking

结尾

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

啥?你还觉得不好看?

我也是这么觉得的!

为了装饰我们的网页,还得学习 CSS(Cascading Style Sheets,层叠样式表) 呢!

那么我们第二套再会!

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