標籤: html

HTML5的lang速查 ( 注意：繁體中文不是zh-TW喔 )

在 HTML5 的 <html> 中可增加 lang= 來標註網頁的語系，讓瀏覽器能更正確的解析與編碼，但從 XHTML 1.0 以來 lang=??? 就不斷演進中，而在 HTML5 的時代究竟要怎麼定義？

目前最主要的規範是依照 IETF(Internet Engineering Task Force 國際網路工程研究團隊)的 RFC 4646 的 Tags for Identifying Languages 所定義。它的要求為 language-script-region-variant-extension-privateuse 就是 語言 – 字體 – 地區 – 方言 – 特殊附加資訊。

以台灣繁體中文標示即為 zh-Hant-TW 不是以往認知的zh-tw囉

使用範例：

速查表 zh-Hans

繁體中文：

zh-Hant繁體中文zh-Hant-TW臺灣使用的繁體中文zh-Hant-CN大陸地區使用的繁體中文zh-Hant-HK香港地區使用的繁體中文zh-Hant-MO澳門使用的繁體中文zh-Hant-SG新加坡使用的繁體中文

簡體中文 zh-Hans：

zh-Hans簡體中文zh-Hans-CN大陸地區使用的簡體中文zh-Hans-HK香港地區使用的簡體中文zh-Hans-MO澳門使用的簡體中文zh-Hans-SG新加坡使用的簡體中文zh-Hans-TW臺灣使用的簡體中文

參考：

[……]

閱讀更多

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link)，換頁或不換頁，都可以把瀏覽器卷軸自動捲到錨點位置，但如果網頁上方有一個黏頭的Header (sticky header)，RWD手機版本則習慣使用(sticky header)，Header 懸浮本文之上，可能會把錨點的元素內容遮蔽，這時我們則需要偏移(sticky header)的高度，避免錨點元素被遮蔽。[……]

閱讀更多

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

閱讀更多

在網頁中加入 icon 小圖示

在網頁中加入icon (如圖)

1.
製作一個16*16px 或 32*32px 的圖片，將圖片轉存成 icon格式，但icon的圖片格式必需為.icon的格式，其餘檔案格式則無法正確顯示icon，圖片轉存 icon 的方式請見文章下方延伸閱讀。

2.
在 head 中加入下方link標籤，紅色為 icon 圖片路徑，相對路徑絕 / 對路徑都可，但icon的圖片格式必需為.icon的格式，其餘檔案格式則無法顯示icon

<head>
    <link href=”templates/img/icon.ico” rel=”Shortcut Icon” type=”image/x-icon”></link>
</head>

延伸文章：
Photoshop支援ico檔 – Photoshop直接另存ico檔

[……]

閱讀更多

href=”javascript:void(0);” 設定無作用連結 – a 標籤 href 不作任何動作

有時候我們需要用a標籤去綁定一些Javascript or JQuery事件，不是真的要做為連結之用，但是a標籤又必需設定 href ， 這時大部份人就會在href加#號，但其實加#號仍然是連結，等同換了另一頁，網址末端也會加上#號(如：http://www.aaa.com#)，這並不是最理想的狀況，我們不希望它做任何動作，以下寫法a標籤緊會執行javascript的事件，除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。

javascript 寫在行內

<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>

<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>

jQuery解法

html：

<a href="#">沒有作用</a>

jQuery

/**
* VECTOR COOL
* https://vector.cool
*/
$(document).ready(function(e) {
    $('a').click(function(e){
	e.preventDefault();
    });
});

 [……]

閱讀更多