標籤: HTML 頁1

教學

瀏覽器原生的 lazy-loading 方法

以往我們想用圖片緩讀的話都會掛一隻 lazyload 的 js,現在 Chrome 宣布在版本 75 將有機會直接用 web 原生作照片緩讀的功能。

教學

HTML 的 progress 標籤,與自訂樣式的方法

progress 是 HTML5 之後提供的一個新的標籤,使用方法就是在上面設定 value 跟 max,就能自動顯示進度條百分比了。

教學

HTML 的 meter 標籤

認識一下 HTML 比較冷門的一個標籤 meter。

教學

HTML5 透過 accept 屬性設定上傳檔案的格式限制

HTML5 可以直接在 input 欄位設定可以接受的檔案格式,只要在 accept 屬性裡加上允許的檔案格式副檔名就好了。

教學

使用 HTML 原生的 dialog,讓製作彈出視窗更簡單

HTML 的 dialog 是一個新的標籤,如同其語意,可以讓我們更輕鬆製作可以和使用者互動的提示訊息框。

網路資源

GDB online Debugger- 好用的線上撰寫程式與編譯工具,支援大多數熱門程式語言

GDB online Debugger 是一個可以撰寫一些常見的程式語言像是 C, C++, Python, PHP, Ruby, C#, VB, Perl, Swift, Prolog, Javascript, Pascal, HTML, CSS, JS 的網站。

教學

在 HTML 裡把圖片加上超連結的方法

說明在 HTML 裡圖片加超連結的方法。

教學

HTML 文字相關標籤的語意關係

在 HTML 內設定文字的樣式時,會有一些標籤可以使用,比如說要讓文字有底線的話可以使用 u 的標籤,要粗體則可以使用 b 的標籤,只是在 HTML 內跟文字有關的標籤可以區分為有語意跟沒語意,在使用的時候可以考預是否要有使用有語意的,對應的關係與說明如下。

網路資源

Interneting Is Hard- 教你一些跟網頁相關的基礎開發知識

Interneting Is Hard 是一個打著 XX 是困難的,但是可以克服口號的網站,上面目前有基礎的 CSS 跟 HTML 教學,有興趣的可以看看,或者可以補充一些基本觀念。

教學

網頁小知識#2- 網站的相對路徑關係

關於網站相對路徑,你應該要認識的事。

教學

網頁小知識#1- html 檔名設為 index 的目的

設為 index 的話就可以不用輸入檔名,輸入到路徑那層就可以開啟頁面了。

教學

解決 iOS 上當下拉式選單(select)內 option 的文字太長,內容會被截斷的問題

解決 iOS 內下拉式選單(select) option 文字過長會被截斷的問題。

網路資源

Emmet- 前端開發輔助神器,讓你在撰寫 HTML 與 CSS 上可以更輕鬆

Emmet 是一個可以讓你在撰寫 HTML 與 CSS 上可以更輕鬆的套件,已支援許多網頁開發編輯器,可以透過這份官方文件清楚知道有哪些熱鍵可以使用。

網路資源

W3Schools- 非常老牌且豐富的網頁教學網站

W3School 是一個非常老牌的網頁技術教學網站,在這邊可以學到各種網頁技術,舉凡 HTML、CSS、javascript、PHP、Python...等非常豐富,網站內也有語法教學與線上測試工具。

教學

自訂 facebook 分享資訊(og:meta data)與更新分享資訊的方法

目前要做網站的話,一定都要做好社群網站的分享,台灣最主要就一定是要做好 facebook 的分享設定,沒有做好設定的話 fb 會自動幫你抓到一些圖跟內文,但可能成效會很差,加的方法很簡單,只要在每個頁面加上以下這些就可以了。

教學

HTML 的 output 標籤

認識一下 HTML 的 output 標籤,這個標籤可以直接把輸入的內容輸出。

教學

HTML 的 datalist 標籤

datalist 是 HTML5 新增的滿有趣的標籤,這邊簡單說明一下用法。

教學

script 標籤中的 async 與 defer 的差別

而在 HTML 5 之後,我們可以利用在 script 讀取外部資源的事後加上 async 或 defer 來幫我們優化頁面渲染的時間點,這邊就這兩個的差別簡單的說明一下。