分類: 技術分享

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）引用，但請附上原始連結，尊重作者著作權。