# 2023-2-15 HTML
###### tags: `HTML` `CSS`
## anchor超連結

<!--href可以是：檔案、網址、錨點、錨點＋網址 -->
<!-- target="_blank"開新視窗，target=""不開新視窗-->

<a href="https://google.com" target="_blank">google網址</a>
<a href="https://yahoo.com" target="">yahoo網址</a>
<a href="page02.html">連到某個html頁面</a>
<a href="pic/pic02.jpg">開啟相對路徑的檔案pic02</a>
<a href="#ID名稱">連到某個錨點</a>
<a href="page02.html#ID名稱">連到某個html頁面的某個錨點</a>

## div & span
div是區塊的容器，span是行內區段的容器

<p>
    <span>$</span><span>2000</span>
</p>

## main & header & footer
一個頁面只能有一個`<main>`
header首
footer尾

## aside
`<aside>`和頁面主體內容無關的部分

## nav
`<nav>`主要連結區

<!-- 導覽列寫法（清單可使用可不使用） -->
<nav>
    <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</nav>

<!-- 巢狀清單 -->
<ul>
    <li>
        第一條..........
        <ul>
            <li>
                第一項..........
                <ul>
                    <li>
                        第一節..........
                    </li>
                </ul>
            </li>
            <li>
                第二項..........
                <ul>
                    <li>
                        第一節..........
                    </li>
                </li>
            </ul>
        </ul>
    </li>
    <li>
        第二條..........
        <ul>
            <li>
                第一項..........
                <ul>
                    <li>
                        第一節..........
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

## article & section
`<article>`內建議要有`h`
`<article>`巢狀使用時，內部的`<article>`會和外部`<article>`有關
可以把`<article>`當作文章，把`<section>`當作章節，兩者可以互包

## 關於HTML切版
考量程式的簡潔程度、後期複用的彈性、語意等


<section>
    <div class="section-title">
        <h1>不只停留在教你釣魚，更引領你乘風破浪</h1>
        <p>我們不藏私的教學，讓所有人都能發揮超越五倍的價值</p>
    </div>
    <div class="section-content">
        <div class="card">
            <img src="https://fakeimg.pl/300x200/200">
            <h2>鍛鍊實力，主導學習</h2>
            <p>搭配最新技術版本，掌握業界脈動 <br> 與需求緊密結合，鍛鍊程式實力。</p>
        </div>
        <div class="card">
            <img src="https://fakeimg.pl/300x200/200">
            <h2>完整規劃，絕不漏接</h2>
            <p>線上補課、線下討論與社群活動 <br> 確保學員擁有充份且多元的學習資源和支持系統。</p>
        </div>
        <div class="card">
            <img src="https://fakeimg.pl/300x200/200">
            <h2>挑戰困境，突破職涯</h2>
            <p>無論新手跨領域轉職，或在職工程師深度進修 <br> 讓五倍為你解構學習，突破困境。</p>
        </div>
    </div>
</section>


<section>
    <div class="section_title">
        <h1>講師陣容</h1>
        <p>我們的講師長期專注於網站開發技術領域，透過研討會、社群演講及授課方式將技術知識分享給更多人知道，讓更多人了解各個技術的美好之處。</p>
    </div>
    <div class="section_content">
        <div class="teacher">
            <div class="teacher_info">
                <img src="https://fakeimg.pl/300x200/200">
                <h2>
                    <span>HTML / CSS 講師</span>
                    <span>李建杭 (Amos Lee)</span>
                </h2>
                <ul>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                </ul>
            </div>
            <p>從視覺設計轉職前端的斜槓開發者，活躍於臺灣各大技術研討會，熟稔 HTML & CSS、Bootstrap、RWD、CSS3 等，為國內知名前端技術講師。 <br> 
            2018 年成為 <a href="">Youtuber</a> ，致力於使用簡單易懂的方式讓新手能夠輕鬆學習前端開發技能。
            <a href="">iT 邦幫忙鐵人賽</a>連續三屆冠軍、連續兩屆優選，於 2020 出版「金魚都能懂的 CSS 選取器：<a href="">金魚都能懂了你還怕學不會嗎（iT邦幫忙鐵人賽系列書）</a>」一書，除了熱衷於牛排的熟成，目前日益精進於釣魚技能。
            </p>
            <div class="teacher_info">
                <img src="https://fakeimg.pl/300x200/200">
                <h2>
                    <span>Ruby / Git 講師</span>
                    <span>高見龍 (Eddie Kao)</span>
                </h2>
                <ul>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                    <li><img src="https://fakeimg.pl/20x20/200"></li>
                </ul>
            </div>
            <p>五倍紅寶石程式資訊教育股份有限公司負責人，在國內外各大型技術研討會擔任講者，參與過日本 RubyKaigi、日本 Ruby World Conference、臺灣微軟 Azure Developer Day 、RubyConf Taiwan、JSDC、WebConf 等。有二十年程式開發經驗和十多年的教學經驗，在臺灣推廣 Ruby 及 Git 多年，在各大專院校與企業開課，深受學員喜愛。<br>
            雖非資訊本科系出身，但喜歡寫程式，而且希望可以寫一輩子程式的電腦阿宅。著有「<a href="">為你自己學 Git</a>」與「<a href="">為你自己學 Ruby on Rails</a>」暢銷技術書。
            </p>
        </div>
    </div>
</section>

## Visual Studio Code
### 快捷鍵(Shortcuts)
| Mac | Win | 執行結果 |
| -------- | -------- | -------- |
| `Command`+`←` | `Home` | 游標移到行首 |
| `Command`+`→` | `End` | 游標移到行尾 |
| `Option`+`←` | `Alt`+`←` | 游標往前跳一個word |
| `Option`+`→` |`Alt`+`→` | 游標往後跳一個word |
| `Command`+`d` |`Ctrl`+`d` | 選取下一個同名word |

# HTML 超連結
## 標籤
<a> 加入連結
## 屬性
href 定義網址
target="_blank" 設定開啟模式
_blank 在新分頁開啟
_self 在原分頁開啟

# HTML 區塊
<div> 區塊(block-level)，用於一開始設定，可容納多元素

<span> 區塊(inline)，用於段落內、<h><p>中

# 巢狀元素 (Nesting Element)
前面有提到 HTML 文件結構是一種巢狀結構，而 HTML 元素裡面可以放進其他的 HTML 元素，我們稱之為巢狀元素 (nesting element)。

例如下面這個句子：

<p>My cat is very cute.</p>
如果我們想 "強調" very cute，我們可以把 very cute 這幾個字加上強調的 strong 標籤 (在瀏覽器中會被顯示為粗體字)：

<p>My cat is <strong>very cute.</strong></p>
在瀏覽器中呈現的結果如下：

My cat is very cute.

要特別注意，巢狀標籤是一層接著一層的包覆，不同層的起始和結束標籤間不可以互相錯置。例如下面的寫法是錯誤的：

<p>My cat is <strong>very cute.</p></strong>
因為 strong 標籤是被用在 p 元素的內容中，所以整個 strong 元素包含它的起始和結束標籤，都必須「被包」在 p 標籤裡面，才能形成一個正確的巢狀關係。