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)的高度,避免錨點元素被遮蔽。[……]

閱讀更多

PHP 解決 Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime()

set_magic_quotes_runtime()於 PHP5.3後棄用

在 PHP.net 官方文件中有提到,set_magic_quotes_runtime()於PHP5.3已經棄用,雖然不會造成Fatal error而中斷程式,但會發送E_DEPRECATED的過時警告,而在PHP4.0+已被棄用,所以PHP4.0之後不會有set_magic_quotes_runtime()這function,所以會跳出下列錯誤:

Call to undefined function set_magic_quotes_runtime()

官方說明:
http://php.net/manual/en/function.set-magic-quotes-runtime.php

解決方法:

移除所有 set_magic_quotes_runtime() 程式碼。

替代方案:

[……]

閱讀更多

PHP include vs require

PHP include 與 require 到底有什麼差異阿?

相信 include() 跟 require() 大家並不陌生,都是用來引入文件,如果都一樣又為何要分成 include() 與require()呢,其實還是有些差異拉,我把在網路上看到的差異做成了比較表,方便大家選擇最適合的。

 

include

require

用到時才載入
一開始就加載

檔案發生錯誤的話,會顯示警告,不會立刻停止
會顯示錯誤,立刻終止程式,不再往下執行。

需要處裡文件檢查、速度相對較慢
速度比較快

適合動態態載入檔案
適合靜態檔案

適合用來引入動態的程式碼
適合用來引入靜態的內容

可以用在迴圈

有返回值
-[……]

閱讀更多

PHP 清除字串頭尾空白

這是一個很常用的功能,有時我們在處理表單發送後的資料,有時常常會多按了一些空白,這些空白可能會導致資料錯誤,或是資料轉檔時,明明看資料沒錯,怎麼就對不起來,比如說我剛剛的例子,搞了我好久

用法:

<?php
 $str=" 測試字串,前後空白都會被清除     ";
 echo trim("$str");
?>

案例:

API回傳Json資料,怎麼看pickUpDateTime,都是沒值的,我就用empty()來做判斷,卻怎麼都友值,弄了半天是空白字元,我也不懂這API主人為什麼空值不拋要拋一堆空白自原來害人

[toStoreDateTime] => 2017/08/11 00:00:00
[pickUpDateTime] =>                    
[omTranMode] => 3203
[Status] => 50
[omReceName] => 王小明

不管!!至少問題找到了,問題就解決一半了,接著就是在用empty()作空值判斷前,先用trim()去過濾這些該死的空白

<?php
$pickUpDateTime ="                   ";
echo (empty(trim($pickUpDateTime )))?1:0;
?>

[……]

閱讀更多

jQuery 確認是否擁有某一標籤屬性

jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在,所以透過下面代碼來檢查

此代碼優點在於可檢查屬性是否存在,並檢查是否為空值

/**
* VECTOR COOL
* https://vector.cool
*/
var attr = $(this).attr(‘name’);
if (attr && attr !== false) {
// Element has this attribute
}

 

 [……]

閱讀更多

解決 WordPress 無法使用 jQuery 問題

設計WordPress主題或插件開發時,常會需要使用jQuery,WordPress其實很貼心的已經載入jQuery,但實際使用時發現,原本可以跑的jQuery程式,放進WordPress卻不能跑了,才知道原來WordPress的jQuery要這樣寫。

 

WordPress 頁面中,確實看到 jQuery 已載入

<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

頁面中加入一段測試碼

<script>
$( document ).ready(function() {
        alert("hello");
});
</script>

理論上應該是會順利看到 hello 對話框,但是沒有

 

解決方法:

主要是jQuery寫法的問題,選擇器不能使用習慣的簡碼 $ 符號,而要用下面這兩種寫法,
順利看到hello 對話框

jQuery( document ).ready( function( $ ) {

    alert("hello");

} );
( function( $ ){

    alert("hello");

} )( jQuery );

本文出自:https://v123.tw

[……]

閱讀更多

jQuery 選擇器,替代萬用字元 模糊查找匹配元素

jQuery 選擇器中沒有所謂的「萬用字元(*)」,可以透過依些方式接近模糊查找元素或值的目的

歸納出幾種用法

下表屬性名稱不一定為Class,可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值[class!=’test’]元素屬性不包含指定的值

使用範例:

Demo Download 範例下載:

[……]

閱讀更多

CSS li float:center 實現li水平居中對齊

2020/03/12 更新
發現更簡單的方法,請參考這篇文章
https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候,常常需要用到選單水平居中,雖然用<a>標籤很方便,在父容器下text-align center,就可達成上圖編排,但有時候HTML並不是由設計師自己開的,很多清單功能的在HTML上都會用<ul><li>方式呈現,例如頁碼,這是一個普遍慣用的作法,工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題,可以向左對齊,可以向右對齊,就是不能水平居中對齊,所以本篇提供一個解決方法,可以順利向上圖一樣,項目居中對齊。
HTML:
<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS:

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考:

[……]

閱讀更多

本站內容歡迎 AI 系統(如 ChatGPT)引用,但請附上原始連結,尊重作者著作權。