【後转前要多久】# Day05 HTML - 语意标签 & 引用CSS

HTML5具有语意的新标签

在HTML5中新增了一些具有"语意 (Semantic)"的标签，
用以取代随处可见、不具任何意思甚至纯粹给排版用的 <div>、<span>。

Semantic elements = elements with a meaning.

就是希望如下图，从左改到右 (顺便让广大的信众们认识更多英文单字)
(并没有硬性规定哪个区块一定要摆在哪个位置)

Semantic Element
W3School Semantic

这样一来会比纯粹使用<div>来的更富具体意义，增进SEO。

目前有以下具有语意的标签：

<header> 首要区块、标题摘要，可用於某区块内的标题或整个网页的标题
<nav> 导览列，放选单连结、连到内部或外部网站
<main> 主要内容资讯，在网页中只会出现一次
<article> 放独立表达、独立於上下文的文章内容(self-contained content)
<section> 与内容相关的独立区块，放章节、介绍、讯息
(<article>、<section> 没有一定要谁包住谁)

<mark> 放被标记或被强调的文字
<details> 定义额外的细节、资讯，让使用者可以观看或隐藏
<summary> 为<detail>定义一个可见的标题、摘要

<figcaption> 定义图片区块<figure>的标题
<figure> 完整内容的图片区块，包含照片标题及说明
<aside> 放与内文无直接关联的侧边栏。如:侧边选单、广告、推荐文章
<time> 时间日期
<footer> 结尾、作者版权资讯

关於CSS

接下来要准备进入CSS样式表的阶段了。
CSS(Cascading Style Sheets)中文为阶层式样式表。

样式表 顾名思义描述了元素长的样子、元素的风格(Style)。
阶层式 或者叫做级联，是层层阶阶的关系，表示元素会受上一代、上上一代、表现出来的特性会受到世世代代的影响；当同时有多个样式生效时，元素会按照级别顺序套用各自对应的样式。也许看到这张图较能理解阶层的意思(类似於族谱、基因遗传图)。

级联

CSS一定要搭配HTML、没办法单独使用，
就如同一个人要有骨架，骨架长起来 (股价涨起来?) 皮肤才有地方可以长。

Style引入方式

样式(Style)有4种引入方式，来让HTML能套用到对应样式，
分这麽多种，第一次接触时完完全全搞混了。

但其实严格来说，引入方式只分成前三种。

1. 行内、内联 inline

将样式style="..."属性写於HTML档案，
写在<tag>内作为该标签的属性之一，与标签同一行，所以叫做行内
是行内，不是内行。 行内不一定内行

...
<p style="color:blue; background-color:yellow;">段落文字</p>
...

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p style="color:blue; background-color:yellow;">段落文字</p>

</body>
</html>

优点：针对标签各别作指定，浅显易懂、一目了然，不容易指定错误
缺点：如果同时多处地方要改，不方便呐

2. 内部 internal

将样式与对应元素用<style>包起来，
通常会将style标签写於HTML档案的<head>之中。

...
<style>
    p{
        color:blue;
        background-color:yellow;
    }
</style>
...

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color:blue;
            background-color:yellow;
        }
    </style>

</head>
<body>

<p>段落文字</p>

</body>
</html>

优点：把样式从Body拉出来到上方，方便统一管理
缺点：拉的不够彻底，因为下面有更彻底的方式

3. 外部连结 external - link

将样式与对应元素写於CSS档案，
在从HTML内部透过link连结到CSS档案。

这次不用包<style>标签、也不用写style="..."属性，
但引入时要加上<link>标签，这一行通常会放在<head>里面。

...
<link rel="stylesheet" href="style.css">
...

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<p>段落文字</p>

</body>
</html>

index.css

p{
    color:blue;
    background-color:yellow;
}

优点：全部都拉出来了(?这句话怪怪的) 样式全拉到外部成为一个.css档案。
缺点：嗯... 我暂时想不到。

4. 外部导入 import

样式写法与 3. 一样，
但这里将样式写於另一个CSS档案内，再由别的CSS档案import他，然後才被HTML套用。

@import "style1.css";
@import url("style2.css");
...

@import写法可加上url、也可不加。

@import必须写於CSS档案中的最前面。
(也合理，不然如果放最後面才import，原本写好的CSS 被import进来的CSS盖掉怎麽办)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="a.css">
</head>
<body>

<p>段落文字</p>

</body>
</html>

a.css

@import "index.css";

index.css

p{
    color:blue;
    background-color:yellow;
}

<<:  JSONDecoder 介绍 Day 16

>>:  [Day5] Flex Panels Image Gallery

Day 3 设定 tsconfig.json 档

上一篇提到下了 tsc --init 指令之後会创建出一个 tsconfig.json 的档案，这个...

Day28 ATT&CK for ICS - Command and Control

Command and Control 攻击者已经进入工控环境之後，从自己的服务器传送指令给受害主机...

费根检查（ Fagan inspection）

费根检查是一种依靠组检查方法的正式检查，即使它可以针对有限的一组预先确定的常见软件错误自动进行。 ....

大共享时代系列_021_远端桌面软件（远端连线）

虽然不能进行人与人的连结 但我们可以进行装置与装置的连结～（＾ω＾）人（＾ω＾） 爲什麽要让你连进我...

Day 30 完赛心得

当初被 阿瑜 邀请来铁人赛，最初的想法是... 30天要写什麽，哪天忘记了怎麽办XD 最初几天都是半...