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

2014/05/02

HTML 超連結特殊字元的 escape

測試 HTML parser 時,某段 HTML 一直被標記有誤,花了不少時間才找到原因。

在 W3 HTML spec 中有註明,「&」符號剛好用來作為 HTML entity 的起始字元,遇到該字元需要 escape。

舉例來說,有個超連結帶有參數:

<a href="search.php?val=keyword&category=3">search</a>

URL 中的「&」符號應該改為「&amp;」:

<a href="search.php?val=keyword&amp;category=3">search</a>

現今瀏覽器都很聰明,會自動辨識並修正人為錯誤,但既然有規範,還是注意一下。



為了找到 W3 HTML spec 中與這個問題有關的章節,實在吃了不少苦頭。後來發現 Firefox addon - Html Validator 可以偵測錯誤,並告知可以參考的 W3 spec 章節:



2012/09/01

jQuery 在表格新增一列

學 javascript 沒多久,剛開始只是很簡單的置換文字、為元素加上類別,短短幾行沒什麼感覺。到了開始動態新增表格資料時,javascript 程式碼裡面參雜 HTML 就越看越噁心。
function addRow( data ){
   $('#user-list > tbody ').append(
         '<tr> ' + 
            '<td>' + id + '</td>' +
            '<td>' + username + '</td>' +
            '<td>' + email + '</td>' +
         '</tr>'
      );
}

這樣的寫法除了可讀性很低以外,之後若修改表格結構以及 CSS 樣式時,必須同時修改樣板以及 javascript 內容,不容易維護。

今天翻了翻 jQuery docs,發現幾個方法拿出來用可以把 HTML 和 javascript 切割的頗乾淨。

先定義一列當作表格樣板,可以在 CSS 將這一列隱藏:
<table border="1">
  <tbody>
    <tr id="template" style="display: none;">
      <td class="id some-other-class"> </td>
      <td class="username"> </td>
      <td class="email"> </td>
    </tr>
  </tbody>
</table>

新增一列時,將 template 複製一份出來,再依照 class 名稱將資料填入不同欄位:
function addRow(){
  $('tr:last').after( $('#template').clone().removeAttr('id') );
  $('tr:last > td.id').text( id );
  $('tr:last > td.username').text( username );
  $('tr:last > td.email').text( email );
}


2011/06/11

轉貼:開元中最好的 web 開發資源

CoolShell.cn 網站上整理了不少網頁開發相關資源,包括:
  • 學習 HTML5 編成與設計
  • Server 端工具
  • PHP Framework 與工具
  • 資料庫
  • API 與即時資訊處理 (在線數據)
  • 線上軟體開發與媒體工具
  • 程式資源與版本管理工具
  • JavaScript Framework
  • JavaScript 移動與觸摸相關 framework
  • jQuery 外掛與相關資源
  • HTML5 視訊播放器
  • JavaScript 音訊處理與視覺化工具
  • JavaScript 2D、3D 圖形
  • JavaScript 與 HTML5 API (接口?)
  • 其他 JavaScript 工具
  • Client 端工具
  • CSS3 與字型資料
  • 網站樣板

忘了貼網址 XD

开源中最好的Web开发的资源