Try   HackMD

HTML 2. - anchor tag 建立超連結

  • anchor tag:

    如何開始設定超連結?

// 這是一個連結到 food panda 的網址:

// href 是指你要連結到的網址 <a>標籤則是顯示的標題：

<a href="https://www.foodpanda.com.tw/">food panda</a>

  • 但這個直接設定錨點的方式會有一個問題，那就是點了連結之後，網站就會跳轉到目標，而本身的網頁就離開了。

  • 我們更希望的是，保留本身的網頁，而使用者可以透過點下產生出一個新的分頁，該如何執行?

  • anchor tag 的屬性 target="_blank"，參考 MdN doc

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

透過 base 來設定，可直接使整個網頁的超連結都開啟新分頁

  • 此做法可以讓你省去或是避免遺忘某個連結沒設定到超連結：
// 直接放在 head 裡，設定 base target 
<head>
    <base target="_blank" />
</head>
tags: 2022 網頁開發全攻略教程
Last changed by 
 
Wilson Chen
0
301

Read more

CSS 34. Opacity / 透明度設定與簡介

&#x4F7F;&#x76EE;&#x6A19;&#x5143;&#x7D20;&#x900F;&#x660E;&#x5EA6;&#x6539;&#x8B8A; opacity &#x53EF;&#x8A2D;&#x5B9A;&#x7BC4;&#x570D;: 0 ~ 1.0 // 0 &#x70BA;&#x5B8C;&#x5168;&#x900F;&#x660E;&#x3002; <h1>&#x6A19;&#x984C;&#x6E2C;&#x8A66;</h1> h1 { display: inline-block; background: red; }

Dec 10, 2022
CSS 33. table styling / 表格樣式設計

border-collapse: &#x5047;&#x8A2D;&#x6211;&#x6709;&#x500B;&#x8868;&#x683C;&#x9577;&#x9019;&#x6A23;: <table> <tr> <th>&#x6A19;&#x984C;&#x4E00;</th> <th>&#x6A19;&#x984C;&#x4E8C;</th> <th>&#x6A19;&#x984C;&#x4E09;</th> </tr>

Dec 10, 2022
CSS 32. List Styling / ul,ol Tag

&#x5728; CSS &#x88FD;&#x4F5C;&#x6642;&#xFF0C;&#x53EF;&#x4EE5;&#x88AB;&#x7DE8;&#x8F2F;&#x7684;&#x9805;&#x76EE;&#x6A23;&#x5F0F;: &#x4EE5;&#x6B64; HTML ul &#x505A;&#x7BC4;&#x4F8B;: <ul> <li>2008:&#x5718;&#x5718;&#x5713;&#x5713;&#x5230;&#x53F0;&#x7063;</li> <li>2013:&#x5713;&#x4ED4;&#x51FA;&#x751F;</li> <li>&#x9084;&#x6C92;&#x6709;&#x5176;&#x4ED6;&#x718A;&#x8C93;</li> </ul>

Dec 10, 2022
CSS 31. CSS default value

&#x4EC0;&#x9EBC;&#x662F; default value &#x6307; HTML Tag &#x672C;&#x8EAB;&#x5177;&#x5099;&#x7684; CSS &#x6548;&#x679C;: <h1>&#xFF0C;&#x672C;&#x8EAB;&#x7684;&#x6587;&#x5B57;&#x5927;&#x5C0F;&#x5C31;&#x6BD4;&#x8F03;&#x5927;&#xFF0C;font-size &#x5C31;&#x975E;&#x5E38;&#x660E;&#x986F;&#x3002; <div>&#xFF0C;&#x672C;&#x8EAB;&#x5177;&#x5099; - display:block;&#x7B49;&#x3002; &#x900F;&#x904E; box-model &#x700F;&#x89BD;&#x4E26;&#x4E14;&#x89C0;&#x5BDF; Tag &#x672C;&#x8EAB;&#x7684; default styling

Dec 10, 2022
Read more from Wilson Chen
Published on HackMD