取消IPHONE把數字改成電話號碼

Meta標籤中的format-detection屬性及含義

format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html裡的一些格式的，那關於meta的format-detection屬性主要是有以下幾個設置：

<meta name="format-detection" content="telephone=yes"/>   #預設把號碼轉換成為撥號

<meta name="format-detection" content="telephone=no"/>

<meta name="format-detection" content="email=no"/>

<meta name="format-detection" content="adress=no"/>

一、telephone

你明明寫的一串數字沒加鏈接樣式，而iPhone會自動把你這個文字加鏈接樣式、並且點擊這個數字還會自動撥號！想去掉這個撥號鏈接該如何操作呢？這時我們的meta又該大顯神通了，代碼如下：

telephone=no就禁止了把數字轉化為撥號鏈接！

telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在默認是情況下就是開啟！

二、email

告訴設備不識別郵箱，點擊之後不自動發送

email=no禁止作為郵箱地址！

email=yes就開啟了把文字默認為郵箱地址，這個meta就不用寫了,在默認是情況下就是開啟！

三、adress

adress =no禁止跳轉至地圖！

adress =yes就開啟了點擊地址直接跳轉至地圖的功能,在默認是情況下就是開啟！

把數值轉成電話，要自己添加語法

<a href="tel:0212345678">02-1234-5678</a>

[ HTML ] Chrome 最小字型

但新版 Chrome 已經不支援 -webkit-text-size-adjust
所以目前改用 -webkit-transform 的方式來達到，
使用 transform 要視情況以 display:inline-block 來進行
scale(0.91) 裡面的數值是以 chrome
最小字型 12px 去計算轉換倍率，例如：9px 為
9/12 = 0.75 這樣。

<div style="font-size:18px; "> 18px 字型大小</div>
<div style="font-size:16px; "> 16px 字型大小</div>
<div style="font-size:14px; "> 14px 字型大小</div>
<div style="font-size:12px; "> 12px 字型大小</div>
<div style="font-size:11px; -webkit-transform:scale(0.91); display:inline-block"> 11px 字型大小</div>
<div style="font-size:10px; -webkit-transform:scale(0.83); display:inline-block"> 10px 字型大小</div>
<div style="font-size:9px; -webkit-transform:scale(0.75); display:inline-block"> 9px 字型大小</div>
<div style="font-size:8px; -webkit-transform:scale(0.66); display:inline-block"> 8px 字型大小</div>

18px 字型大小

16px 字型大小

14px 字型大小

12px 字型大小

11px 字型大小

10px 字型大小

9px 字型大小

8px 字型大小

[ HTML ] 核取方塊 按後面的字可以勾選

<input id="AAA" type="checkbox" name="" value="1">
<label for="AAA">按字可以勾選</label>

按字可以勾選

在 label 的 css 要加 cursor: pointer;
(鼠標換成手指)

[ HTML ] HTML5 基礎多媒體篇

1. iframe元素
   iframe稱為線內框架，就是把另一個網頁嵌到自己的網頁，這也可以用在嵌入youtube的影片
   這個元素的style為自己設定的，這也是為了達到自適應 (RWD響應式網頁設計) 的效果。而frameborder="0"這個東東是要必免讓這個東東外面有框框，如果沒有多做設定就會有框框。
2. audio元素
   src為載入網址
   controls="controls"為是否顯示控制面版，建議顯示，若沒設定則預設為不顯示
   preload是設定文檔是否先載入，有關網頁載入速度，如果設定preload="metadata"代表「當網頁載入時，僅先載入檔案的資訊 (大小、長度)」，如果設定preload="none"代表「當網頁載入時，不要同時加載檔案」，如果設定preload="auto"或不做設定，代表「當網頁載入時，同時加載檔案」
   其他可用屬性
   loop：
   loop="loop"為重覆播放，不多加設定為不重覆播放
   autoplay：
   autoplay="autoplay"為自動播放，不多加設定為不自動播放
3. video 屬性
   影片元素，這個元素是html5新增的
   某些瀏覽器並不支援所有影片格式，所以就會使用<source>來做複數指定。<source>不用結尾有人記做<source/>
   例如：
   <source src="example-video.ogg" type="video/ogg"/>
   <source src="example-video.mp4" type="video/mp4"/>
   其他可用屬性
   
   • autoplay(自動播放)：你可以輸入"autoplay"(開啟自動播放)、"" (空白字串，開啟自動播放)、或不輸入(開啟自動播放)。
   • preload(預先載入)：你可以輸入"none"(關閉預先載入)、"metadata"(開啟預先載入)、"auto"(自動)、"" (空白字串，開啟預先載入)、或不輸入(開啟預先載入)。
   • contruls(控制按鈕)：你可以輸入"contruls"(開啟控制按鈕)、"" (空白字串，開啟)、或不輸入(開啟)。
   • 瀏覽器預設是沒有其他控制項目的，如果你開啟，你可以提供一些播放控制元件，播放、暂停、定位、音量、全螢幕、字幕（如果可用）、聲道（如果可用），這些可以透過額外的Javascript來完成。
   • loop(播放循環)：你可以輸入"loop"(開啟循環)、"" (空白字串，開啟)、或不輸入(開啟)。
   • poster(預覽圖片)：用來選擇影片播放前，所顯示的圖片，不能空白，若要使用此屬性則請輸入圖片網址。
   • height(影片高度)：請輸入非負的整數，不需輸入單位(px，pixel)。
   • width(影片寬度)：請輸入非負的整數，不需輸入單位(px，pixel)。
   • muted(靜音)：你可以輸入"muted" (開啟靜音)、"" (空白字串，開啟)、或不輸入(開啟)。
   • src(影片位置)：放置影片原始檔的網址，或相對位址。

   所以上面提供的範例意思是「這個影片我要有控制按鈕，要預先載入影片，然後影片結束之後要循環播放，在開始播放之前，顯示預覽圖片，寬是640px，高是360px」。

   再來是中間的<source … />標籤，意思是影片的原始檔位置與類型。

   • 檔案位置請用「src="檔案位置"」，這個屬性，如果影片和網站在相同的資料夾，則在「檔案位置」中直接輸入影片檔名(主檔名+副檔名)，如果不是，你可以直接輸入網址如<source src="https://…/~.mp4" />，例如：<source src="https://example/html5-video-tag/Yif-Magic.mp4" />
   • 類型的選擇請用「type="video/檔案類型"」，例如，如果附檔名是「.mp4」，則類型的選擇請寫「type="video/mp4"」；如果是「.webm」，則寫「type="video/web"」；注意，如果是「.ogv」，則類型的選擇請寫「type="video/ogg"」，不要問我為什麼，因為我也不知道這個地方就會不一樣。如果想知道個多可以上網Google。
   參考網站：https://twweeb.org/html5-video-tag/

[ HTML ] Atom 編輯器

Atom 編輯器
https://atom.io/

Atom 編輯器繁體中文化：主功能選單、右鍵選單以及大部分的偏好設定
https://atom.io/packages/cht-menu

[ HTML ] HTML5讓瀏覽器能更正確的解析與編碼

<!DOCTYPE html>
<html  lang="zh-Hant-TW">
<head>
<title>page title</title>
</head>
<body>
</body>
</html>

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

六十種社群按鈕HTML CSS3

60 Free HTML CSS3 Social Media Buttons For Your Website

IE啟動初始版本

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

HTML標籤和CSS樣式常用訣竅

1. 轉換元素型態：
   inline 行內元素
   block 區塊元素
   inline-block 行塊元素
   table, table-row, table-cell 表格元素
2. 擅用橫向排列法：
   利用inline-block或float來達成
3. 做好HTML標籤架構：
   利用標籤將網頁內容分門別類
   header, footer
   article, section, aside,
   h1~h6
   ul, ol
   p, span, strong, em, i
   a
   div
4. 熟悉CSS定位方法
   position屬性:
   static 預設
   relative 相對
   absolute 絕對
   fixed 固定
5. 調整間距及位置
   margin, padding, top, left, right, bottom
6. 其他樣式
   width, height
   color, background, border
   …

[ MAP ] google map api 顯示語言設定

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=語系"></script>

地區當地語系化
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja" type="text/javascript">
key=YOUR_API_KEY 這段可以不用

Unicode 地區子標記識別碼
http://www.unicode.org/reports/tr35/#Unicode_Language_and_Locale_Identifiers

Ex：
http://test.grnet.com.tw/bliksen/tw/contact.php
http://test.grnet.com.tw/bliksen/en/contact.php
http://www.fushin-hotel.com.tw/taipei/en/location.php


zh-CN 簡中
zh-TW 繁中
EN 英文
en-US 美國
ja-JP 日本

https://developers.google.com/maps/documentation/javascript/basics?hl=zh-tw
https://developers.google.com/maps/documentation/embed/guide?hl=zh-tw
https://developers.google.com/maps/documentation/embed/start

iframe引入的方法
<iframe src="https://maps.google.com.ua/maps?q=231新北市新店區民權路52號&hl=en&output=embed" allowfullscreen></iframe>
Ex：
http://test.grnet.com.tw/pixon/en/contact_us.php
hl=語系，用 output=embed 方式開
參考：
https://stackoverflow.com/questions/22503945/set-language-for-google-maps-iframe

簡易Google Map 置入方式，非API模式
http://jbear.net/blogs/black/archive/2009/05/18/google-map-api.aspx
<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=輸入查詢的地址&z=比例大小&output=embed&t=地圖模式></iframe>
其中包含了幾個重要的參數可做修改
width=寬度
height=高度
q=輸入查詢的完整地址或經緯度，如果需要標明可在結尾加上()，於()中輸入表示名稱
z=地圖比例大小，可輸入 1-18
t=模式，沒輸入值時為預設地圖；h為衛星圖加路線；p為地形圖
output=embed 指定Google Map為崁入模式

select 語系選單

繁中 EN

<div class="nav-lang">
  <select name="lang" onChange="location.href=this.value">
    <option value="../zh-tw/" selected>繁中</option>
    <option value="../en/" selected>EN</option>
  </select>
</div>

[html語法] 下拉式選單的html語法

原視窗開啟
<select onChange="location.href=this.value">
  <option value="../en/" selected>EN</option>
  <option value="../zh-tw/" selected>繁中</option>
</select>

新視窗開啟
<select onChange="window.open(this.value)">
  <option value="../en/" selected>EN</option>
  <option value="../zh-tw/" selected>繁中</option>
</select>

轉址方法

無法查看此摘要。請 按這裡查看文章。

Best HTML and CSS 小抄

開發人員經常在工作流程中使用HTML和CSS的小抄，是工作流程的最佳參考幫助。

這些小抄包含類似的基本要素HTML標記，CSS值和屬性，能一目了然的所有基本要素。

Best HTML & CSS Cheat Sheets

HTML Cheat Sheet

https://www.gosquared.com/resources/html-cheat-sheet/

Periodic Table Of HTML5 Elements

http://www.calcresult.com/reference/development/HTML5-periodic-table.html

CSS2 Cheat Sheet

http://www.cheatography.com/davechild/cheat-sheets/css2/

CSS3 Cheat Sheet (PDF)

https://www.gosquared.com/resources/css-cheat-sheet/

CSS3 Animation Cheat Sheet

http://www.justinaguilar.com/animations/index.html

CSS 2.1 And CSS 3 Help Cheat Sheets (PDF)

https://www.smashingmagazine.com/2010/05/css-2-1-and-css-3-help-cheat-sheets-pdf/

jQuery 教程

jQuery UI
http://jqueryui.com/

菜鳥教程 - 學的不僅是技術，更是夢想！
http://www.runoob.com/ 

jQuery UI的API文檔|菜鳥教程
http://www.runoob.com/jqueryui/jqueryui-api.html

製作favicon

製作favicon
http://www.favicon.cc/

Png to Icon
https://iconverticons.com/online/

放在
<head>........</head>
<link href="favicon.ico" rel="icon">
<link href="favicon.ico" rel="shortcut icon">