HTML 标签与架构
所有的网页的 HTML 内容都是由标签组成，呈现的“基本架构”也都差不多，差别只在于内容组成、编排、框架、样式...等的不同 ( 就像每个人类的身体骨架结构都相同，差别在于外貌、才智、个性...等 )，这篇文章会介绍 HTML 的标签以及架构组成。
快速导览：
HTML 标签
HTML 里所有元素都是透过“标签”组成，而元素又分成基本元素、空元素和巢状元素，元素的标签组成关系如下图所示：
HTML 的大部分元素都是“基本元素”，又可称作“容器标签”，其架构如下表所示：
| 写法 | 功能 | 说明 |
|---|---|---|
<tag> |
起始标签 ( Opening tag ) | 在“大于、小于”符号的中间放入元素名称，代表这个元素从这里开始。 |
</tag> |
结束标签 ( Closing tag ) | 在“大于、小于”符号的中间放入元素名称，但前方需要加上斜线，代表这个元素在这里结束。 |
| 内容 ( Content ) | 在起始标签和结束标签中间的内容。 | |
| 元素 ( Element ) | 由起始标签、结束标签和内容所组合成。 |
下方的 HTML 在网页打开后，会在网页里出现一个 <h1></h1> 大标题元素以及 <p></p> 内容元素。
<h1>我是大標題</h1>
<p>我是內容</p>
“没有内容”的元素称作“空元素”( 例如图片<img>)，也可称作“单一标签”，使用时只要直接使用即可，下方的 HTML 在网页打开后，会在网页里出现一张图片。
<img src="oxxostudio/demo.jpg">
如果元素里面还有其他元素，可以称作“巢状元素”，所架构出的结构称为“巢状结构”，下方的 HTML 会在 <p></p> 元素里使用 <strong></strong> 标签，将想要强调的文字框住，使其变成默认粗体字的新元素。
<p>大家好，我是 <strong>OXXO.STUDIO</strong></p>
HTML 元素属性
HTML 所有的元素都可以设定“属性 ( Attribute )”，属性包含“名称与值”，除了可以使用默认的属性，也能使用自订名称的属性，透过属性的设定，能够替元素增加更多不同的特色 ( 例如色彩、对齐方式、图表的格线...等 )，属性基本写法如下 ( 更多属性可以参考：HTML 元素属性 )：
- 元素名称和属性之间必须有一个空格（ 如果有多个属性，属性之间也需要有空格 ）。
- 属性名称后面接着等于符号“
=”，等于符号后方表示属性的内容 (值 )，需要使用双引号“"”包覆。
透过网页打开下方的 HTML，会在网页里出现一个超链接，超链接的链接属性 src 指向 Google 搜索的网页。
<a href="https://www.google.com">連結到 Google 搜尋</a>
网页的各个元素都会有各自的属性，当中最常使用的是“id”和“class”属性，id 表示“唯一的名称”，class 表示“类别”，相关说明如下：
| 属性 | 说明 |
|---|---|
| id | 元素在网页中的唯一名称，网页中每个 id 只会“出现一次”，如果出现多次，则以最后一个为主。 |
| class | 元素在网页中的类别，一个元素可以有多个类别，多个类别之间需要用一个空白隔开，不同元素也可以使用相同名称的类别。 |
下方的 HTML 里的<h1></h1>具有 id 和一个 class，<p></p>则具有两个 class。
<h1 id="title" class="red">大標題</h1>
<p class="red small">我是內文</p>
HTML 基本架构
一个网页的基本架构主要由<!DOCTYPE html>和三个主要元素所构成，这些元素都是“必须存在”且“不可更改其标签”，相关说明如下：
| 元素 | 说明 |
|---|---|
<!DOCTYPE html> |
定义 HTML 的类型（ doctype ），只要是网页都会需要放入这段程序码。 |
<html></html> |
根元素，包含了所有显示在这个页面上的内容。 |
<head></head> |
head 元素，网页不会被用户看到，但却是必须具备的重要信息 ( 例如网页标题、页面说明、CSS...等 )。 |
<body></body> |
body 元素，所有要让用户看到的内容。 |
下方的 HTML 表示一个网页的基本架构，<head></head>里会包含其他许多像是<meta>等不会被看到的信息 ( 提供给浏览器或搜索引擎看的 )，<body></body>里则是要给用户看到所有内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<h1>OXXO.STUDIO</h1>
<a src="https://www.google.com">連結到 Google 搜尋</a>
</body>
</html>
HTML 的树状结构
从 HTML 的架构可以观察到 HTML 其实是个层层包覆的“树状结构”，在树状结构里，处于外层的元素称作“父元素”，内层元素称为“子元素”，父元素和子元素是一个“相对关系”，在身为别人的父元素的同时，可能也是另外一个元素的子元素，然而除了父元素和子元素，还有“子孙元素”、“祖先元素”和“兄弟元素”...等相对元素，例如下图，将上述网页的架构，采用树状结构的方式呈现：
小结
不论是哪种网页编辑软件，产生的网页基本架构几乎都是相同，就算是自行撰写 HTML，也必须要遵照基本的架构写法，熟悉 HTML 架构后，就可以开始正式进行网页的编辑。
微信扫码关注
抖音扫码关注