Day 4：认识HTML＋HTML架构

建立HTML档案

打开VSCode > 档案 > 另存新档为html档＋命名 > 回到档案 > 开始写程序码

认识HTML

HTML，全名是"Hypertext Markup Language"，中文全名是“超文字标示语言”，又能说是一种标记语言，那HTML是程序语言吗？答案是：不是。简单来说，HTML就是网站的基础，而网页本身就是一个HTML文件，只是附加了CSS（美化）与JS（互动）而已。另一种说法是：HTML能建立网站的内容（例如文字和按钮等）及资讯（网站标题和通行码等）。顺便说，服务器在载入网站时，会取得你在HTML输入的资讯，并显示在网站上。这就是HTML的作用～

HTML的层层架构

个人认为HTML不难懂，因为HTML的架构分很多层，能一目了然～且每一层的作用都不一样，HTML的架构主要分为四层，分别是：

<!DOCTYPE html>
<html>
<head>
<body>

成对的tag？单身的tag？

刚刚列出来的四个层次tag中，除了<!DOCTYPE html>，其他的都是成对的tag（由< >包起来的叫做标签或tag），有分起始标签与结束标签的tag我们就称它为成对或一对的tag，起始标签放在前面，结束标签放在後面，结束标签的特点是<後面会放斜线(/)，成对的tag不能缺少起始标签或结束标签中的任何一个！不过，并不是所有的tag都是成对的哦！
举例说明「起始标签与结束标签」（成对的tag）：

<起始标签>
...
</结束标签>

举例说明「仅有起始标签，无结束标签」（单身的tag）：

<起始标签>
...

`<!DOCTYPE html>`

<!DOCTYPE html>是一个非常非常重要的起头标签！通常都会放在程序码的第一行。<!DOCTYPE html>这段程序码的工作是要告诉服务器，这是一个用HTML5语法所写成的网站。据我所知，HTML5是目前最新的HTML版本，<!DOCTYPE html>这段程序码能排除过时的语法跟技术，还能排除及减少网站出错的机会！
例如，如果一个网站用了过时的程序码，<!DOCTYPE html>就会请服务器不要将已过时的程序码显示在网站上，避免出错及造成不必要的问题。
再举个例子：如果一个餐厅(HTML)停止供应生鱼片这道餐点(过时的语法)，那餐厅就会在门口公告(<!DOCTYPE html>)这件事，否则会有客人以为餐厅还有供应生鱼片，最後造成不必要的问题(网站出错/无法显示)。
整理一下～<!DOCTYPE html>是用来告诉服务器，这个网站是用HTML5写的！

✿ <!DOCTYPE html>没有结束标签哦！

像这样写，<!DOCTYPE html>要放在程序码的第一行～

<!DOCTYPE html>
...

`<html>`

<html>和<!DOCTYPE html>有些类似，唯一不同的是，<html>只是用来告诉服务器，这个网站是用HTML写的，但<!DOCTYPE html>是告诉服务器，这个网站是用HTML5写的，

这里整理一个表格给大家参考～

╳	有无指定宣告为谁？	宣告网站为...	有无排除过时语法？
`<html>`	无	HTML	不一定
`<!DOCTYPE html>`	有	HTML5	有

✿ <html>对应的结束标签是</html>哦！

像这样写，<html>要放在<!DOCTYPE html>的下一行～

<!DOCTYPE html>
<html>
    
        
        
       
      
      
  
  
     
 
</html>

`<head>`

<head>内被用来放置网站的基本资料，就像身分证一样，以下列出几种比较常用的tag～

<meta charset = 'utf-8'>（通行码）
<meta charset = 'utf-8'>这行程序码的作用是要告诉服务器，这是用utf-8编码写的，那如果没有写的话会怎麽样？那网站里的内容极有可能会变成乱码！所以这行程序码非常重要，千万不能漏写哦！
<title>（网站标题）
<link rel = icon href = '图片档案连结'>（网站图标）
<link rel = stylesheet href = 'CSS档案路径'> （导入CSS档案）
<script src = 'JS档案路径'> （导入JS档案）

✿ <head>对应的结束标签是</head>哦！

像这样写，<head>要放在<html>的下一行～

<!DOCTYPE html>
<html>
    <head>
        .
        .
        .
        .
        .
    </head>
</html>

`<body>`

<body>内通常放的都是网站的内容，像文字、图片及按钮等等，<body>内的内容都会呈现在网站上，如果<body>里面是空白的、没写任何东西，那网站也会是空白的哦！以下列出几种比较常用的tag～

<h数字>文字内容</h数字>（用来显示文字）
<div>文字内容<span>（用来显示文字）
<span>文字内容<span>（用来显示文字）
<img src = '图片档案连结'>（用来显示图片）
<video src = '音档档案路径'></video>（用来显示影片）
<audio src = '音档档案路径'></audio>（用来显示音乐播放器）

像这样写，<body>要放在</head>的下一行～

<!DOCTYPE html>
<html>
    <head>
        .
        .
        .
        .
        .
    </head>
    <body>
        .
        .
        .
   </body>
</html>

重点整理

再来回顾一下这张图吧～个人觉得其实HTML架构很好理解，因为HTML架构其实就像汉堡一样，材料(tag)都是成对的。如果还是一头雾水，可以再看看这张汉堡架构～
（有件事忘了说，src是路径的意思哦～）

实作

首先，先建立一个HTML架构：

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
     
   </body>
</html>

接着在<head></head>里加上网站的基本资讯：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>（网站标题）</title>
        <link rel="icon" href="（图片路径）">
        <link rel="stylesheet" href="（CSS档案路径）">
        <script src="（JS档案路径）"></script>
    </head>
    <body>
     
   </body>
</html>

最後，在<body></body>里，用<h数字></h数字>加上「Hello World!」这段字（也就是你想呈现在网站上的文字内容～）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的网站</title>
        <link rel="icon" href="???.png">
        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>
    </head>
    <body>
      <h1>Hello World!</h2> //初次见面！我是单行注解～
      /***初次见面～
      我是多行注解！***/
   </body>
</html>

最後的最後，用浏览器打开档案..
酱酱～你成功用HTML做出了你的第一个网页啦～！

下篇预告：CSS

<<: 【Day04】执行环境与执行堆叠

>>: html表格

Day 4：认识HTML＋HTML架构

建立HTML档案

认识HTML

HTML的层层架构

成对的tag？单身的tag？

`<!DOCTYPE html>`

`<html>`

`<head>`

`<body>`

重点整理

实作

[python] TFT Display测试心得碎念(拿st7735的经验拯救ili9341)

D28 - 如何打包 Apps Script 的程序码？（一）变成扩充功能似的 UI 按键

认识 React Hooks 之三

Day2-看看JDK内有些什麽好用的工具！

【Day 25】- 什麽几百张几千张的猫猫图片，戳一戳就结束了(实战 requests 向 API 请求获得回应)

Day 13 - PHP SDK: 查询订单状态

[Day 07] 特徵图想让人分群～模型们的迁移学习战～第二季 (k-means 实作篇)

Day19 Plugin 从零开始到上架 - 取得授权码(Android)

LiteX/VexRiscv 简介与使用 (二点五) 天地分隔

Day04：原来早就在这里有共享经济了