HTML教学课程 (入门篇) 4个章节 - 由浅入深学习HTML

如果你刚接触编程，想建立网页/APP，HTML绝对是你第一个要学习的编程语言。

在这篇「HTML教学课程 (入门篇)」，你会学习到：

HTML基本概念：
开发环境、起始标签(Opening Tag) 、结束标签(Closing Tag)、属性 (Attribute)
进阶HTML：
div、span、iframe、src、background image、页面给构、table、form
我们会从新手角度，分开4个章节，由浅入深，教授你所有你要知道的HTML编程知识。

准备好了吗？我们开始吧！

第1章 HTML基本概念 - 开发环境

要编写一个网页，原来可以分为前台（Frontend)及後台（Backend)。

前台（Frontend）就是网页的外观。例如你看到的文字，图片，美丽的排版等等，通通都是前台（Frontend）。

而前台（Frontend）（网页的外观），是由3种编程语言组成。

• HTML: 主要是负责外观的结构。
• CSS: 负责把结构变得更美丽。
• Javascript: 负责外观元素的控制。

HTML是负责外观的结构。

就像写信一样，写信会有一个结构，
例如上款，标题，内文，下款等等。
网页的外观也有一个结构，而这个结构，就是HTML。

开发环境

首先，我们去学写Code之前，需要安装一些软件。

其实写网站不需要用很多软件的，有以下两个便可以。

第一个软件，是Chrome。

Chrome是一个Google的浏览器来的，你只需要去 google.com/chrome 就找到。

因为Chrome这个浏览器会有它自己可Debug的方式，所以我们会经常用到，

如果你没有，可以先去以上连结去安装。

第二个软件，是Visual Studio Code。

我们可以去Visual Studio Code下载这个软件，

由於我们写Website，是可以用一个notepad都写到的，

但是我们想syntax(句子文法)较易明白，或者有些提示，

我们都会用这个非常流行的软件，就是Visual Studio Code。

什麽是HTML？

首先安装好这两个软件，然後打开Chrome，

打开了Chrome後，尝试随便去一个网站，例如去 google.com 。

我们进入了google主页後，会看到这个很漂亮的画面。

其实这一个画面，是由一堆frontend(前端)的语言组成，

包括：

HTML
CSS
javascript
HTML 主要是负责 > 外观的结构。
CSS 负责 > 把结构变得更美丽。
Javascript 负责 > 外观元素的控制。

大家可以看看这个layout，这个样子到底是怎麽组成的？

我们随便在一个空位，用mouse按右键，按检视原始码(view page source)，

按入去後，就会看到一堆这样的东西。

这一堆原始码是什麽东西呢？就是HTML了。

浏览器就是将这一堆HTML的东西，变做我们看得明的样子(Google主页)。

这一堆东西就是我们去了google的server，经server解读後，而成的样子。

当我们的浏览器收到这一堆东西的时候，就会将它变成我们看得懂的网站主页。

如果你想了解更多有关frontend(前端)与backend(後端)，可以看看这编文章: 写网页课程 - 从零开始，学习网页设计。

第2章 起始标签(Opening Tag) 、结束标签(Closing Tag)

HTML是如何为网页的外观进行结构呢？

答案就是透过使用标签(Tag)，
来打造不同的外观结构。

HTML标记包含，起始标签(Opening Tag) 、
结束标签(Closing Tag)（及其属性）。

接下来， 我们来看看什麽是Opening Tag及Closing Tag吧！

什麽是Opening Tag & Closing Tag？

现在我们要学的第一个概念就是：

起始标签(Opening Tag) 与结束标签(Closing Tag)。

首先打开你的Visual Studio Code软件，

开一个New File，

尝试输入This is some content，

输入完後，请储存。

如果是手动的，可以按下图中的「File -> Save」来储存文件。

储存文件後，如果文件没有以「.html」作结尾，可自行加上「.html」来结尾。

储存完後，大家可以尝试一下用Chrome来打开这个File文件。

打开後，你会看到一段文字「This is some content」。

原来，我们第一样学到的东西就是，

当HTML被Browser演绎後，就会自动变成这个样子。

大家看到什麽不同呢？

你会看到原来这个HTML，会有一些与，
一进入到这个Chrome的浏览器，就会不见了。

为何会不见呢？

因为当浏览器演绎了这一堆的源码後，就会转变成一个大家都看得懂的Layout。

所以我们第一样要学的Program，就是这个Opening Tag和Closing Tag。

Opening Tag就是上图中的，Closing Tag就是上图中的

以上的输入法，到底代表着什麽呢？

其实是代表「开始」，代表「完结」，所以只要看见「斜」，便是完结句。

其实，开关引号里面正正是包着内容，所以p Tag就是代表Paragraph的内文，

意思就是我们要跟电脑说明，中间这一堆Content，就是一堆内文。

所以HTML要做的东西，就是用这些不同种类的Tag，来组成整个网站。

大家还记不记得，HTML是用来做结构的。

我们就是一直弄这些不同的Tag，再包着这些东西，

然後就告诉别人，这一堆东西到底是「内文」，还是「其他东西」。

Program的手势，内文p Tag

接着，我们尝试一下删除/更改一些内容後，你会看到下图中红圈位置有一个圆点。

圆点出现就代表更改内容後没有Save，所以大家要记得Save了。

你可以按「File -> Save」，

但是我们实际上很少每一次改动後，都去按「File -> Save」，因为这动作太麻烦了。

所以这时候，大家就要学懂用快捷键了，

MAC机会用「Command + S」，
或者 Window机会用「Ctrl + S」。

Save完後，再回到Chrome的浏览器，按一下Refresh看看。

你会发现，按Refresh也是挺慢的方法，所以这里同样地需要用快捷键，

MAC机会用「Command + R」，
或者 Window机会用「Ctrl + R」。

跟着，我们都需要学会编程的3步基本手势：

1 Visual Studio Code打完内容後，
2 就会习惯性地「Command + S」Save了它，
3 然後回到Chrome的浏览器「Command + R」。

编程的手势就是一直保持做这组动作。

回到主题，我们一起输入p tag，就会发现这个Code Editor很好，

当打 的Opening Tag後，它就会自然出现 的Closing Tag。

所以Opening Tag後，直接在这里打我们想要的东西就行了，是不是非常方便呢。

这里温馨提示大家！新手最常犯的错误，就是漏掉输入Closing tag。

所以这里要多加注意喔！

标题 h1-h6

到目前为止，我们学了第一个的Programming syntax。

第一个叫p Tag，正是代表内文的东西，跟着就要学习更多不同的Tag。

第二个常用的Tag，叫标题h1 Tag，

大家跟着我一起输入h1「This is heading」，之後再输入h2「This is heading」，

一直输入到h6为止(如下图)。

然後Save他们，然之後在Chrome里面Refresh，

你会发现，h1是最大，h6是最小的。

原来P就只有一个叫做p Tag的东西，没有其他的东西。

但是如果Heading的话，我们就会跟这个重要性来输入h1、h2、h3、h4、h5、h6。

而最重要的标题，当然就是h1，

第二重要的标题就是h2，

接着之後没那麽重要的，就是h3、h4、h5、h6这样。

这里要留意一下，这些p Tag跟heading tag是可以输入很多个的，

好比同一个h2、h3、h4等等，都是可以输入很多个的。

但是要注意，h1尽量只写一个就好了！
因为h1代表了你整篇的文章，或那一页中最重要的标题。

最重要的标题应该只有一个，所以我们只放一个h1就行了。

这里也带出另外一个很重要的概念，

很多时候我们编程时会发现，原来h1至h6，都有不同大小的字型。

其实字的大小，不是在HTML里转的，而是在CSS转的，是在做Layout的时候转的。

如果大小不在HTML设定，那为什麽还要分不同的Tag呢？

我直接把内容全部输入p Tag，然後用CSS调整大小不就行了吗？

其实这样做是不行的呢！

为什麽？

以下会为大家解答：

还记得这张图吗？

答案是：网站不光是给人看的，也要给电脑看的。

例如一些Google的Search Engine(搜索引擎)到你的页面时，

它不会看你的文字大小。反之，搜索引擎是透过分析你网页中，不同的TAG，去理解你的网页。

所以当我们做网站的时候，不要只求贪快，而全部只输入在p Tag里面。

要记住，标题要用h1 h2或者h3。

因为有些网站是比较SEO Friendly，Search Engine(搜索引擎)会value这些h1里面的字多一点，

所以，我们都会将一些Keyworld放进h1里面，令搜索引擎读懂其意思。

最後，大家必须要记住，写网站时，我们都要跟这个结构来输入喔。
Strong Tag

这次，我们一起输入一个叫做strong的Tag，再将这个strong的Tag包着这个「This」。

然後用一个i Tag包着is这个字。

Save这个HTML後，用Chrome打开它，你会见到这个样子：

「This」变了粗字体，
「is」就变了斜字体。

隔行 br Tag

跟着，我们会发现大部分的Tag，都会有Opening与Closing的。

但是也有一些Tag是没有Closing Tag的，例如br Tag。

我们尝试一下在h1这里加入一个br Tag，

然後Save这个HTML後，用Chrome打开它，你会见到这个样子：

然後Save这个HTML後，用Chrome打开它，你会见到这个样子：你会发现原来br Tag是很常用的东西，因为其功能就是用来隔行的。

原来在HTML这里隔行，是不可以直接输入Enter Enter来隔行⋯⋯这是错误的！

因为隔行的正确做法，是输入br Tag来实行，所以它才可以成功地隔行。

列点 ul Tag与li Tag

接着，我们学多两个Tag，就会学完这个：

起始标签(Opening Tag) 与结束标签(Closing Tag)的概念。

首先，大家跟我以下方法来输入，

开一个新Tag，叫ul Tag，

然後在ul Tag之间隔行，输入li Tag，

接着在li Tag内文中输入「List 1」「List 2」「List 3」。

其实，ul代表Unordered List，也就是一些列点。

Save这个HTML後，用Chrome打开它，你会见到这个样子：

你会见到一个Point的东西清单。

我们再从这个概念中，增加多一些内容。

原来，你会见到一个List，就会有一个ul。

一个List会在一个Unordered List，

里面每一个List ltem，都是用一个li包着。

那ul通常会用在那里呢？

原来ul通常会用来做例点，或者做navigation的时候，都很流行用ul Tag去做的。

让我们再深入了解一下：

你发觉到图中的li会靠右一点吗？它原来是会自动靠右去的。

为什麽要靠右呢？

原来我们在HTML里面有一个很重要的概念，
当一个li Tag是让另外一个Tag包着的话，
这一个Tag，是需要靠右边一点。

因为靠右的好处是，能分别到这个Tag(li)是在这个Tag(ul)里面。

只要当你分到一层一层来输入，

这样，我们写的Code，就会变得非常整齐。

因为有时候，你写一些大型Program计划时候，

是会有很多层去包着很多层⋯

如果不分层的话，後果就会写得很乱。

所以当你跟以上手法去做一个Syntax，自然容易看得懂整个编程的格式。

这样解说後，是否更容易明白了呢！

所以，看见上图你就会明白到，

原来ul是同一层的，li是同一层的，层次非常分明。

现在我们一起重新输入一次，看看正确的手法是怎样输入的。

首先，先打与，
必需确认出现了Opening Tag与Closing Tag。

然後我会在中间这里按Enter，

你会看到按了Enter马上就会给你Tab了。

万一没有Tab，我们也可以自行按Tab泊入。

然後我们再输入与，

输入内文List 1、List 2、List 3之类的。

记住千万不要输入了後就输入，这是错误的。

否则的话，你会很容易漏了的Closing Tag。

要记得先输入整个的Opening Tag与Closing Tag，

才去输入内层的东西，比如文内。

这样，才是正确的输入手法。

这次试一下在ul Tag上，将这个「ul」，改成了「ol」，

然後Save这个HTML後，用Chrome打开它，你会见到这个样子。

这个List就变成了：Point form 1 2 3了。

到底ol是代表什麽呢？

ol其实是代表了这个Ordered List，意思就是有列聚的列点。

学到这里，以上就是全部Opening Tag与Closing Tag的基本概念了。

你学懂了吗？记得多加练习呢！

第3章 Attribute(属性)

只有HTML的Tag(标签)，其实是不够的。

接下来，我们想给每个HTML标签更多的额外资料，便需要为他们加上「属性」。

Attribute(属性) 是我们今天会学的第二个概念，也是一个非常重要的概念。

让我们来详细看看，什麽是Attribute(属性)吧！

Attribute(属性)

当我们学习完Opening Tag与Closing Tag的基本概念後，

下一样需要学习的，便是Attribute(属性)。

我们一起打开Visual Studio Code後，再开一个新的File，

首先，一起输入a Tag，

a Tag的作用就是可以弄一个东西，能被人按到去别的网站，

我们在a Tag内输入一行字「Click here」，然後Save，

在Chrome打开後，你会看到是这样的。

你是否发现一个问题，就是按不了呢？

为什麽会这样的？

原因是因为我们还没有跟电脑讲，现在这个a Tag是需要去那一个Link。

所以这时候，我们就要用到Attribute这个概念了。

因为Attribute的作用，就是给你的HTML Element多加一些资料。

对於第一次编程属性的朋友，你会觉得这里有点混乱，

不过不用害怕，你先跟着我的方法来输入。

一起看看下图，你有否发现到，原来属性是需要写在Opening Tag里面的？

Attribute是输入在a的後面，然後隔一隔空格，打「href=’’」，

你会见到有个开引号及闩引号，

这里温馨提示一下，我们打单引号与双引号也可以的。

接着下来，我就会加入一条Link，例如：https://www.google.com/

我们成功地输入了属性，Save後，再去Chrome打开看看，

打开它後，你会发现，终於成功连到去google的主页了。

现在我再很generic地重新看一次，整个流程是怎样输入的。

首先会有一个「Tag」，
Tag里面有一个内容比如是「Content」，
然後在Tag的Opening Tag这里输入属性，例如是「Attribute=’’」，
引号内打一个「value」。

你会见到：
=
Click here = Content
href='' = attribute=''

这就是一个非常generic的写法。

不过，对於第一次输入属性的朋友，其实会经常输入错误，比如下图：

看看上图这样输入法，是不是很容易漏了这个的Closing Tag呢？

其次，更会漏了Opening Tag里面的「>」。

所以大家要注意一下正确的写法与流程：

首先，输入， 然後输入「Click here」内文，

之後，在内格一格空格，输入「href=''」，

跟着，在引号内输入「https://www.google.com/」连结。

为了让大家更熟练以上的输入手法，

我们一起重复5次这个写法，好让大家习惯一下正确输入方法：

原来这个属性，还可以放多过一个以上，

例如在attribute引号後面，隔一隔空格，输入attribute2=''。

如果你不断地在同一个Tag内隔一隔空格，其实可以放很多个attribute的。

当我们明白了这一点後，

我们尝试下在这里隔一隔(如图)，

然後输入「target=’_blank’」，Save看看Chrome会有什麽变化。

你是否发现到，这个Attribute可以利用一个新的Window去打开Link。

而旧的那些Tag，就会直接在Browser上面转换那个Link。

相片 img Tag

最後我们学多一个Tag，叫img Tag，

这个Tag比较特别，因为它不需要有Closing Tag。

就如br Tag一样，img Tag都是比较特别的Tag，是不需要有Closing Tag的。

输入後Save，再去Chrome看看，喔～原来什麽都没有？

不要紧，先跟着我一步步做下去，自然就会明白。

我们一起去Google搜寻「pig」，然後按去图片这里，

我们按右Click这张相片，按「在新分页中开启图片」，

你就会发现这张图片的Link了，再去看看副档名是不是.jpg，如果是，那便是图片了。

其实大家知不知道，图片到底有多少个副档名呢？

其实一共有5种：
.jpg
.jpeg
.png
.gif
.svg

以上5种是我们最常见的图片副档名，

.jpg与.jpeg其实都是JPG最常用的，它们可以压缩到这个File最小，

因为通常做网站相片都要小的，所以我们都会用JPG。

而.png会有一个透明的底层，最常用是做Logo，就会用到PNG。

.gif是会动的，例如GIF相片，

.svg也都是会动的，但是SVG是会用Vector来写入图片。

令到图片会动之外，放到很大都不会pixelate，
所以算是GIF的进化版。

回到正题，

我们这里随便找到一张图片，Copy图片的Link，

然後输入一个Attribute叫「src=''」

把图片的Link Copy去引号内。

Save後，在Chrome打开後，是不是成功看到了图片呢！

可是你会发现，这张图片实在太大张了，那怎麽办？

所以我们要再放另一个Attribute，

在图片连结後面，隔一隔空格，输入「Width='200'」

Save後，在Chrome打开後，你会看到图片成功变细了。

这里Width用的单位，我们会叫做px。

那px有多大呢？

你就当13寸的Mac机大概1300px，
21寸iMac的话大概2000多px，
手机大概就300-400px。

你看到我打了200後，相片是会按比例缩小的。

如果要弄一张相片小一点，直接输入这个宽度就行了。

如果你想输入高度的话，

可以再隔一隔，输入「height=''」，尝号引号内输入800高度。

Save後，在Chrome打开後，你会看到图片为什麽会变了形的？

就是因为你输入了宽度200px，高度800px。

所以通常来说，我们只会打宽度，那就不会令图片变形。

这里最後分享多一点就是，我们现在是用external(外部连结)的一张相片，

如果万一这条Link消失了，那你的网站就会下载不了这张相片，

所以，通常我们会将这张相片Save到自己的Local里面，

Save这个图片在HTML文件的同一个文件夹位置，就正确了。

我的这个HTML文件是放在桌面，所以我把相片都Save在这里便可以了。

那你会问，怎样储存相片的？

其实这张图片只需按右键「另存图片」去桌面便可以了。

之後，把这个Src里面，Value转成桌面这张图片的Link。

只需要输入图片名称便可以，

Save後，在Chrome打开後，你会看到图片成功连结了。

我们最後学习多一件事情，

其实图片通常不会赤裸裸地将相片放在html文件夹里便算。

我们会在html文件夹里开一个叫「Pictures」，然後将图片放进这里。

由於图片改变了位置，所以我们也要更改做「Pictures/pigpig.jpg」，

Save後，在Chrome打开後，你会看到图片又再一次成功连结了。

最後，这两个HTML基本概念：

包括Opening Tag与Closing Tag，及Attribute，

大家都学会了吗？

第4章 进阶HTML

接下来，就要学习进阶一点的html应用，

以下功能都是我们经常需要用到的东西来的。

包括：

div、span
iframe
放相
页面结构
table
form

准备好了吗？我们开始吧！

div、span

现在，我们要学习进阶一点的HTML应用，

首先，我们需要学习2个新Tag：

一个叫div Tag，
另一个叫span Tag。

对於刚才才学HTML的大家，这两个Tag虽然没有意思，但是你会经常看到它们。

原来这两个Tag的作用是做一些grouping，

div就是group着一些Element，

而span就是group着一堆字。(一起看看下图)

例如我要输入一些h1与p的内容，我就会用div Tag来grouping它们。

而span是用来输入文字的，

例如我用p Tag打「 I am Jack」，「Jack」这个名字可以用span Tag包着。

为什麽要这样做呢？

因为group着这些东西是有很多应用的。

它们可能有一些共同特性，

有可能是红色颜色、白色颜色，或者令某些事情触发一些特定效果。

所以，span Tag的概念，就是利用这一堆东西包在一起，去做某一类动作。

关於这一点，未来我再和大家深入分享。

其次，这里也会牵涉到另外一个概念。

这个概念分两部份，

第一部分叫Block Level，

第二部份叫Inline Level。

Block Level的Element，在Element和Element之间会隔行。

Inline Level的Element，在Element和Element之间不会隔行。

隔行的有什麽呢？

例如刚才的div Tag、h1 Tag、p Tag，
你会发现它们会自动隔行的。

而有些Tag本身是不隔行的，

例如span Tag、a Tag。

但这些特性是可以改的，这个问题我们迟一点去学。

因为之後学CSS转Style的时候，可以去更改这些属性的。

iframe Tag

接着下来，我们要学习第二个概念，就是iframe Tag。

iframe Tag是什麽？

iframe Tag的作用是在自家网站上，放上另一个网站，或是网站中的某一部分进来。

在写网站的时候，iframe是我们经常用到的功能之一。

比如YouTube、Google Map，都是经常用到iframe的方法，

去将一些Element放进我们的网站里面。

不如大家尝试一起动手试试，一起去YouTube找一些频道，
比如我这个频道：胡子Jack。

在频道当中，随便找一个段片，按入後按图中的「分享」，然後「嵌入」，

然後，你就会看见嵌入(Embed)这一堆编码，原来这就是html的iframe，

现在你应该明白到，这段东西就是html的一个iframe。

我们尝试把它Copy，放上Visual Studio Code中，

Save後用Chrome打开看看，是不是成功连结了YouTube去你的网站了呢。

是不是很简单呢？

原来它一直是用一些Attribute，

例如Width、Height来定这这个YouTube的Size。

现在，大家都学懂了怎样嵌入YouTube了吧。

接着下来，再看看另一个常用的东西，就是Google Map了。

我们一起在Google Map中随便找一个地方，

比如找「Time Square」，同样地按「分享」，然後「嵌入」，

我们Copy後，放上Visual Studio Code中，

Save後，再用Chrome打开看看，你会发现，又成功连结了Google Map去你的网站了。

好了，学到这里，大家都明白iframe Tag是怎样用吧！

CSS的Background

来到这里，我想分享多一点，有关於HTML放置相片的问题。

大家记不记得，之前教过大家放置相片是用对吗？

原来在HTML里面，放置相片还有另一个方法，

而这个方法不是用HTML，而是要用CSS去输入的。

其实，我们常通输入div Tag时候，里面会运行一个叫做Style的东西，

Style用法，我迟一些会在CSS的教学里，再与大家一一分享当中细节，

但是我们先记住，这个Style里面行CSS的方法。

原来在div Tag的Style里面运行CSS，

可以输入Background:url()，然後在(.jpg)里面再放入相片。

到这里，大家虽然目前还没有学识怎样去写，但是没有关系，我只想跟大家先分享这个概念。

其实，在Layout上面放相片，只会有以下两个方法：

第一个方法，就是用img Tag，
第二个方法，就是用CSS的Background。

为什麽要分享这个概念呢？

因为我发觉有些朋友或学生，从来都不会去学CSS，

就直接用HTML Template去做网页了。

如果到时候用HTML的Layout Template，想转换相片时，

最起码知道，放置相片是有这两种方法。

HTML 页面结构

我们再看看下一个概念，也是非常重要的。

当我们真的用HTML去写一个页面时，应该怎样做的呢？

我们一起来看看吧！

首先，我们会输入一个html Tag，而Tag里面就是代表了整个文件是HTML的内容，

然後在html Tag里面，

之後我们又会输入一个叫head Tag，

然後再输入一个叫body Tag。

这里温馨提示一下，

原来萤幕中所有看到的东西，全部都应该在body Tag里面打的，

那head Tag会放什麽呢？

其实head就是放一些萤幕看不到的东西，全部都是给电脑看的，

例如CSS，Meta Tag for SEO，Title Tag。

其实做任何HTML，我们都应该起一个这样的基本结构(Architecture)，

首先输入html Tag，
然後在html里面输入head Tag，
之後在html里面输入body Tag。

其次，我们才把想输入的内容在body Tag里面完成。

学到这里，大家掌握到基本结构的正确写法了吗？

记得努力练习吧。

table Tag

接下来，我们会学习另一个Tag叫table Tag。

首先，我们输入table Tag，

然後隔一隔数行，因为之後我们要输入其他东西来包着全部内容，

然後在table Tag的每一行，都会输入tr Tag，

tr的意思就是一个Row Table Row。

通常第一个table row就是th的东西，就是table head。

我们在th Tag随便打一些内容，

比如是Some Content或Some Content2。

接下来，我们输入多个tr Tag，里面输入td Tag，

我们在tr Tag随便打一些内容，比如是Details或Details2。

tr就是网站打横的内容，th就是table的标题，td就是打直的内容。

这样我们就成功地弄成一个Table出来了。

Form

这里，我们要学懂一个叫Form的东西。

Form就像中文的表格。

这是你的网站与Server沟通的一个方法。

比如你的网站，有一页叫做Contact Us，而Contact Us是让客户在上面填写资料，然後可以Summit。

这时候，就要用到Form的功能了。

首先，我们一起输入一个from Tag，然後里面输入input Tag，

你会发现input，原来与br与img一样，都是没有Closing Tag的。

虽然有点复杂，不过大家先跟我一起做。

我们输入input Tag，然後里面输入type=’text’，
而另一个input里面，输入type=’submit’。

Save後用Chrome打开看看，

你会看到，成功设计到一个简单的Texbox，可以让人按Submit按键。

如果你弄了一个Backend，接着就可以Submit这些资料给Server。

其实除此之外，我们还可以学其他不同的Input type，

比如有一个叫Password的input type。

Password的input type，文字是会变成了「密码」的样子，

是与text完全不同的，因为text打字时，是变成「文字」而不是「密码」。

接下来，还有选东西的Tag。

我们一起输入br Tag来隔一隔行，

之後输入MALE，然後radio隔一隔打name=’’。

Name可能叫gender，

因为我们可能有多个选项，要让人认得这堆选项，所以要这样输入。

所以最後是这样的：
<input type='radio' name='gender'〉MALE

然後打多个是FEMALE的选项：
FEMALE

Save後用Chrome打开看看，你看到有两个让人选择的选项了吧。

大家都学懂了吗？

Checbox & textarea

接着下来，我们要学习下一个叫Checbox的东西，

我们一起输入，

然後在前面文字打「Tick me?」。

Save後用Chrome打开看看，

你会看到，出现了一个让人Tick的Checbox了。

其实，还有另一个常用的Tag，就是select Tag，

一起输入select Tag，然後在里面输入option Tag，

跟我一样输入3次option。

Save後用Chrome打开看看，

你会看到，有一个按钮，按摩入去有3项选择的Option。

最後要学的是，就是叫textarea Tag。

textarea Tag作用是提供一个大位置，让你去输入一段文字。

学到这里，基本上整个Form的Element就学完了。

总结

HTML其实并不难学。

但要充分理解及运用，也需要花大量时间去练习，才会熟能生巧。

以上4个章节，由浅入深学习HTML，
已教授了你绝大部分你要知道的HTML编程知识。

大家好好学习吧！

加油！

原文连结：HTML教学课程 (入门篇) 4个章节 - 由浅入深学习HTML