About HTML

mrcode發表於2019-02-16
HTML

HTML 簡介

HTML 歷史

最初的 HTMl 是由 CERN 負責制定的，後來轉交給 IETF。

在 1990-1995 年期間， HTML 經歷了許多次的版本修改與擴充；

1995 年的時候 HTML 的版本更新到了 HTML3.0；1997 年又完成了 HTML3.2；

同年也完成了 HTML4；次年，W3C 決定停止發展 HTML，轉向和 XML 等效的 XHTML，XHTML1.0 在 2000 年制訂完成；

釋出了 XHTML1.0 後，在 XHTML 模組化的旗幟下，W3C 釋出了與 HTML 和 XHTML 不相容的 XHTML2.0；

在 2003 年，XForms 的釋出重新點燃了人們對於 HTML 的興趣，人們意識到 XML 僅僅適合被用作新技術（如 RSS，Atom）的載體，而不適合用來替換現有的技術（如 HTML）；

2004 年的 W3C 的研討會上一些 HTML5 的早期提案被提交給 W3C，但是被 W3C 以該提案與其發展理念相沖突為由給拒絕，於是 W3C 決定繼續開發 XHTML；

隨後 Apple，Mozilla 和 Opera 一起建立了 WHATWG，版權為三個創始公司所有，WHATWG 的幾個基本原則：保持向下相容，修改規範而不是實現，規範必須足夠詳細防止實現規範的公司互相去逆向；WHATWG 要求 HTML5 規範包括 HTML4，XHTML1.0 和 DOM2HTML；

2006 年 W3C 表示了對 HTML5 開發的興趣，在 2007 年和 WHATWG 組建了一個工作組來開發 HTML5 規範，WHATWG 的三個創始人公司也允許 W3C 將 HTML5 規範掛到 W3C 的名義下；

兩個團隊一起工作了多年，直到 2011 年，兩個團隊出現了分歧，W3C 希望將 HTML5 定位為 HTML 系列的最後一個規範，而 WHATWG 希望繼續改進和迭代 HTML5 規範。兩個團隊也一起工作到現在。

HTML 的可擴充套件性

HTML 提供了很廣泛的擴充套件性支援來為 HTML 文件增添語義化的支援：

  • 使用 class 屬性來擴充元素的含義與行為，但是使用更加符合語義的元素可以幫助遊覽器以及其它外掛更好的識別出元素所代表的含義與行為。

  • 使用 data-*=”” 來將資料繫結到元素上，HTML 也提供了相應的 API 來查詢和修改這些資料。

  • 使用 <meta name=”” content=””> 來定義後設資料。

  • 使用 rel=”” 註明擴充套件文件的預定義型別。

  • 使用 <script type=””> 可以嵌入原始資料，可以選擇內聯文件和外部文件。

  • 通過 embed 標籤建立和使用外掛，這也是 Flash 工作的原理。

  • 可以通過 JavaScript 的原型機制來擴充 API，許多指令碼庫就是這樣設計的。

HTML 基本語法

一個經典的 HTML 程式碼如下：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

  1. HTML 文件是由一些元素和文字組成的，非閉合元素必須包括開始標籤和結束標籤，閉合元素可以省略結束標籤。

在 HTML 中，html 元素就是 window.document。這是一個文件元素，他包括 head 和 body 兩個元素；像上面程式碼中的 h1 裡的文字會被解析成文字節點，包括像一些換行和空格等字元也會被解析成文字節點。

Note：head 開始標籤之前的文字節點會被使用者代理直接忽略掉，而 body 的結束標籤之後的文字節點則會被插入到 body 結束標籤之前。

head 標籤包括一個 title 元素，title 包括一個文字節點。

  1. 元素如果包含元素只能包含完整的元素，而不能是其一部分。比如：

<p>This is <em>very <strong>wrong</em>!</strong></p>

  1. 元素可以通過設定其屬性來控制其樣式和行為；比如：

    <a href="demo.html">simple</a>

​

遊覽器解析的時候會認為這是一條超連結，並且給它加上下劃線和顏色來突出這個元素。

屬性的語法是鍵值對的形式，key 和 value 用等號分隔，value 推薦用單引號或雙引號括起來；value 如果不包含空格或反單引號，單引號，雙引號，等號可以不寫單引號或雙引號。

對於空屬性可以只寫屬性名，省略等號。

DOM 與 CSS

DOM 提供了一些 API 給指令碼語言（如：JavaScript）來修改 DOM。比如：

<form name="main">
 Result: <output name="result"></output>
 <script>
  document.forms.main.elements.result.value = `Hello World`;
 </script>
</form>

<script>
  var a = document.links[0]; // obtain the first link in the document
  a.href = `sample.html`; // change the destination URL of the link
  a.protocol = `https`; // change just the scheme part of the URL
  a.setAttribute(`href`, `https://example.com/`); // change the content attribute directly
</script>

HTML 本身是獨立於與其互動的媒體的。HTML 可能會被渲染到螢幕，語音合成器，或者在盲文螢幕上。為了控制在不同的媒體上需要 HTML 被展示成什麼樣子，你需要樣式語言（如：CSS）。

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample styled page</title>
  <style>
   body { background: navy; color: yellow; }
  </style>
 </head>
 <body>
  <h1>Sample styled page</h1>
  <p>This page is just a demo.</p>
 </body>
</html>

HTML 安全

HTML 在樣式語言和指令碼語言的作用下變得可以互動之後，一堆安全問題也隨之出現；Web 安全模型是基於源（”origins”）的概念；許多 Web 攻擊都是和跨域相關。

  1. XSS 攻擊和 SQL 注入攻擊。

XSS 通過向 HTML 注入指令碼或其他使用者代理能識別的資訊來改變 HTML；如果這段注入能被儲存的話，其他使用者會受到降維打擊；

SQL隱碼攻擊 常常利用表單的提交將輸入資訊提交到 Web 伺服器後，在將資訊儲存到資料庫時，由於程式碼沒有過濾輸入可能會導致攻擊者修改資料庫中的資訊。

​

解決方法：過濾使用者輸入，以及使用者資訊的輸出。

  1. CSRF 攻擊

由於 HTML 表單的提交可以發生在任意的站點上，並且提交會附帶上對應站點的 cookie；因此當使用者訪問某些惡意站點時，站點可以偷偷提交使用者訪問過的一些網站（如購物網站）的 HTML 表單；使得使用者在無意識中受到降維打擊。

​

解決方法：Web 伺服器檢查提交的站點的 Origin 欄位是否來自於收信任的站點，否則應該拒絕；由於攻擊方只是利用使用者代理在提交表單時會提交 cookie，本身並不知道 cookie 的值，因此可以在表單里加上一段隱藏 token 來來驗證是否是本站點的提交，隱藏 token 可以是 cookie 雜湊後得到。

  1. 點選劫持

惡意佔地那利用一些資訊誘導使用者點選，然後觸發一些使用者不希望看到的行為。

如：使用者進入一個網站，顯示一個遊戲，有一個開始按鈕，當使用者點選後可能被誘導至購物網站；或者將受害網站放在一個 iframe 裡，當使用者點選時，迅速將 iframe 移動至滑鼠下方。

解決辦法：可以判斷 top 和 window 是否相等來判斷站點是否處於 iframe 中。

最後

荊軻刺秦王~

相關文章