顯示具有 Html 標籤的文章。 顯示所有文章
顯示具有 Html 標籤的文章。 顯示所有文章

2014年9月29日 星期一

利用標籤 a 來達成點擊時使用郵件(Email)管理軟體來寄信

如果今天我們的 link 是個信箱想要讓別人點了連結就能直接開啟他的郵件管理軟體(如:outlook...等),其實非常簡單,只需要在 <a> 標籤 的 href 屬性前面加上 mailto: 即可,以下就附上範例:
  1. <a href="mailto:test5566@gmail.com">連絡我</a>

2014年8月30日 星期六

HTML 上傳檔案(Input file)的類型(Mimetype)的選擇限制

一般我們要讓使用者上傳檔案,通常會使用 <input type='file'> 來達成,但如果想要讓使用者點擊下去的時候自動顯示指定的檔案類型該怎麼辦呢? 答案就是要靠 accept 這個屬性啦! 以下就附上範例:

2014年3月12日 星期三

HTML Textareas 設定 100% width 的 overflow(設定寬度 100% 顯示不正確)

最近在發現在使用 Textareas 的時候,把它的寬度(width)設為 100% 它竟然會超過父容器,而對它下 overflow 的屬性看起來也不太對,問題如下:

overflow  
  1. <div style="background-color: #ffbbbb; margin: 0px auto; width: 50%;">
  2.     overflow
  3.     <textarea style="width: 100%;"></textarea>
  4. </div>

2014年1月6日 星期一

HTML 特殊字元 (符號)

在寫 HTML 的時候我們常常會找一些免費的小圖示來讓畫面更好看,但其實有時候可以用簡單的方式來解決一些小圖示。這個時候就可以利用 HTML 的特殊字元來達成囉!

2013年10月14日 星期一

HTML 使表格欄位跨行(跨列)

在 HTML 中,我們常常會用表格來顯示資料,而有時候有些欄位可能需要跨行或是跨列,這時候就可以用以下程式碼來控制了這些欄位了:

2013年9月27日 星期五

HTML 滑鼠游標移動到元素上顯示文字說明

當我們在Html上放置一些圖片的時候,如果想要讓使用者將滑鼠指標移動到圖片上時浮出說明的話,可使用"title"屬性來設定說明文字,如以下程式碼:
在HTML中我們可以在標籤<head>中添加一些meta資訊,以下的程式碼會介紹一些簡單的meta data之使用方式:

使用HTML5播放影片

在Html5中,開始支援了<video>元素,讓開發者能方便的將影片直接在Html中播放,
每個瀏覽器呈現的方式不太一樣(不過介面都有點陽春就是了...),如下段程式碼:

2013年9月26日 星期四

HTML輸入欄位提示字串資訊 (Form list)

在Html的form表單中,我們常常會使用<input type="text">來讓使用者輸入資料,
若想要使用者點擊欄位就出現曾經輸入過的資訊可以透過 autocomplete 這個屬性的 on/off來控制,而若是開發者想要自訂提示資訊可以透過datalist來達成,如下面程式碼:

2013年9月25日 星期三

HTML滑鼠游標大全

我們有時候可能希望當使用者滑鼠游標移到某張圖片或是某個元素時會有不同的游標圖示,
這時候就可透過cursor這個屬性來設定游標的圖示,我挑了幾個比較常用到的游標圖示,如以下的程式碼:

設定HTML在瀏覽器上所呈現的字體

若我們想在網頁上使用不同的字體,通常會設定font-family來達成效果,
但若Client端(一般使用者)沒有我們所設定的字體的話就看不到效果了,

使用HTML5播放音訊

我們在寫HTML的時候,元素的內容常常會包含中文字,如下段程式碼

HTML中顯示中文變成亂碼

我們在寫HTML的時候,元素的內容常常會包含中文字,如下段程式碼

HTML中id與name的差別

在Html中我們常會用到id和name這兩個屬性,
但因為常常分不清到底什麼時候該用哪個,所以會產生一些奇怪的bug,