Day 02：专案01 - 超简单个人履历01 | HTML简介

专案介绍

这个专案会带你使用HTML和CSS，打造专属於你的个人履历网页。

预览图：

首先，我们从HTML入门吧!

HTML是什麽?

HTML全名是HyperText Markup Languag，中文是超文本标记语言，是一种用於建立网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用於设计网页、网页应用程序以及行动应用程序的使用者介面。网页浏览器可以读取HTML档案，并将其渲染成视觉化网页。

简单来说，HTML就像是网页的骨架，决定了网页该长什麽样子。CSS则像网页的衣服，决定了网页的颜色以及图案，而JavaScript则像大脑，处理更复杂的逻辑运算和触发事件。

因此我们要做网页的第一步就是要先将骨架打造出来。

ps. HTML只是一种标记语言，并不是程序语言! 以後别人问你会什麽程序语言，千万别说HTML，这可是会被笑的...

HTML元素

HTML全部都是由 元素(elements) 所组成的，而元素包含了 标签(tags) 与 内容(content)。

元素就像一块块积木一样，组成了整个网页架构，以下是单一一个元素：

  1. Opening tag：起始标签，<>内放入标签名称。
  2. Closing tag：结尾标签，<>内放入和起始标签一致的标签名称，而且要在名称前加上/符号，和Opening tag形成一对。
  3. Content：标签内容。

属性

加入属性可以为元素提供更多资讯，ex：字型、颜色等等...。

格式为: "属性名称" = "属性值"

这边的class属性是将标签分类(就想成放在同一个箱子里)，之後爬虫经常会用到，就先记起来吧!

HTML架构

一个网页的基本架构如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>my first html</title>
  </head>
  <body>
    <p>Hello, HTML!</p>
  </body>
</html>
  1. <head>：标头，包含网页的基本设置，不会显示在画面上，ex：网页标题、字元编码...。
  2. <body>：主体，包含了所有会显示於网页浏览者眼前的内容，ex：文字、图片...。

在浏览器上的显示结果为：

DOM tree

看完刚才的HTML架构後，你可能会发现这有点像树状的结构，没错! 其实这个有点像树状的结构就被称为DOM tree。

DOM全名为Document Object Model，中文是文件物件模型。实际上就是将所有HTML所有的元素(包括文字、图片、容器)视作树上的节点，最後结合成树状的结构，就像下图这样。

通常有四种节点：

  1. Document：所有HTML文件的起点，就像是树的树根。
  2. Element：所有的元素，像是<body>、<p>都是。
  3. Text：被元素所包起来的文字。
  4. Attribute：元素所拥有的属性，像是class、style等等。

节点底下包含的节点我们称为该节点的子节点，而上一层的节点称为该节点的父节点。

所以说上图<body>的子节点是<a>和<h1>，而父节点是<html>。

HTML基本元素

对架构有了解後，接下来介绍几个经常用到的HTML元素，这些元素都是放在<body>中。

<h1>~<h6>

标题，从标题一到标题六，文字从大到小，通常用於文章的主标题和副标题。

<h1>This is heading1</h1>
<h2>This is heading2</h2>
<h3>This is heading3</h3>
<h4>This is heading4</h4>
<h5>This is heading5</h5>
<h6>This is heading6</h6>

显示结果为：

<p>

段落，通常用於文字内容，优点在於文章超出边界时会自动换行。

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id felis a lectus scelerisque bibendum. Donec
    mollis mollis rhoncus. Integer nec molestie lacus. In dapibus velit non augue pulvinar eleifend. Ut sit amet
    lobortis dui, ut facilisis elit. Quisque vulputate felis at arcu hendrerit eleifend. Donec elementum vel massa a
    fermentum. Vivamus eget cursus massa. Morbi elementum metus a eros euismod elementum. Nunc commodo felis urna,
    vel lacinia velit lobortis vel. Mauris efficitur augue nec aliquet consequat. Vestibulum sed convallis purus,
    vel tempor urna. Cras ornare ex est, eu malesuada diam suscipit nec.
</p>

显示结果为：

范例文字是使用很经典的英文乱文产生器产生出来的。

<br>

换行，基本上就等同於 "\n"。

<p>
    Hi!<br>
    Hello<br>
    你好<br>
</p>

显示结果为：

这时你可能会觉得奇怪，前面不是说要一个起始标签搭配一个结尾标签吗? 怎麽这里只有一个标签?

事实上，有些HTML标签的确只有一个标签而已，待会还会再看到更多例子。

<a>

超连结，用於连结其他网址，href属性加上连结网址。

<a href="https://ithelp.ithome.com.tw/">IT邦帮忙首页</a>

显示结果为：

点击之後会传到IT邦帮忙的首页。

<div>

区块，或者说一个空的容器，可以在区块中加入其他元素。

<div style="background-color:blue; color:white; width:400px; height:200px;">
      <p>inside the div</p>
</div>

显示结果为：

设定一个高200px、宽400px、背景蓝色、文字白色的区块。

<span>

文字的区块，包住文字并提供更多资讯。

<p>this color is <span style="color: blue;">BLUE</span></p>

只有将 "BLUE" 设为蓝色，其他字依然是黑色。

<hr>

分隔线，通常用於分隔区域。

<hr style="background-color:blue; height: 2px">

显示结果为：

一条蓝色宽度为2px的分隔线。

小结

今天的部分就到这边，稍微总结一下今天学了什麽。首先从HTML的基本架构开始，知道了HTML是由各种元素所组成的，接着介绍了几个常用的元素，像是标题、段落、超连结...等等。

明天我会再介绍更多的HTML元素，以及补充介绍VScode的实用套件，就让我们拭目以待~~

如果喜欢这系列文章麻烦帮我按Like加订阅，你的支持是我创作最大的动力~

本系列文章以及范例程序码都同步更新在GitHub上，後续会持续的更新，如果喜欢也麻烦帮我按个星星吧~

有任何问题或建议，都欢迎在底下留言区提出，还请大家多多指教。


<<:  .NET Core第7天_MVC专案跟空专案创建出来比较_跟.net MVC专案做小比较

>>:  Day5 State vs Props

Ruby解题分享-Maximum Subarray

这题反正就是要more and more... Maximum Subarray 题目连结:http...

Day29 MANO开源专案使用之kube5gnfvo - 样板介绍篇

相信在前两天介绍的OSM部分，有观看的大概了解了关於Network Slicing(NS)实例化所需...

高档爆大量，请提高警觉

在入场，且获利後，第一件事就是要保护获利，而不是不要赔钱。 通常有几个转折点需要注意，其中高档爆大量...

[13th][Day15] nil

nil 空值 什麽？ nil 是一种资料型态？ 还是 nil 值？ 你在跟我开玩笑吗？ 不只是 go...

[Day 11] Leetcode 152. Maximum Product Subarray (C++)

前言 先来个之前写过觉得还算值得练习的DP题目~152. Maximum Product Subar...