先睹為快即將到來的HTML6

文由掘金@天行天忌授權發布，前端晚間課對其內容進行微改。

HTML，超文本標記語言，是一種用于創建網頁的標準標記語言。自從引入 HTML 以來，它就一直用于構建互聯網。與 JavaScript 和 CSS 一起，HTML 構成前端開發的三劍客。

盡管許多新技術使網站創建過程變得更簡單、更高效，但 HTML 始終是核心。隨著 HTML5 的普及，在 2014 年，這種標記語言發生了很多變化，變得更加友好，瀏覽器對新標準的支持熱度也越來越高。而HTML并不止于此，還在不斷發生變化，并且可能會獲得一些特性來證明對 HTML6 的命名更改是合理的。

支持原生模式

該元素<dialog> 將隨 HTML6 一起提供。它被認為等同于用 JavaScript 開發的模態，并且已經標準化，但只有少數瀏覽器完全支持。但這種現象會改變，很快它將在所有瀏覽器中得到支持。

這個元素在其默認格式下，只會將光標顯示在它所在的位置上，但可以使用 JavaScript 打開模式。

<dialog>
  <form method="dialog">
    <input type="submit" value="確定" />
    <input type="submit" value="取消" />
  </form>
</dialog>

在默認形式下，該元素創建一個灰色背景，其下方是非交互式內容。

可以在 <dialog> 其中的表單上使用一種方法，該方法將發送值并將其傳遞回自身 <dialog>。

總的來說，這個標簽在用戶交互和改進的界面中變得有益。

可以通過更改 <dialog> 標簽的 open 屬性以控制打開和關閉。

<dialog open>
  <p>組件內容</p>
</dialog>

沒有 JavaScript 的單頁應用程序

FutureClaw 雜志主編 Bobby Mozumder 建議：

將錨元素鏈接到 JSON/XML、API 端點，讓瀏覽器在內部將數據加載到新的數據結構中，然后瀏覽器將 DOM 元素替換為根據需要加載的任何數據。初始數據（以及標準錯誤響應）可以放在標題裝置中，如果需要，可以稍后替換。

據他介紹，這是單頁應用程序網頁設計模式，可以提高響應速度和加載時間，因為不需要加載 JavaScript。

這個是一個比較有意思的提案，就有點類似我們以前沒有做前后端分離之前的混合編程的模式，HTML變成模板語言，通過JSON API請求數據，不一樣的是變成瀏覽器來默認解析，瀏覽器內部加載數據到新的數據結構中，然后瀏覽器將按需加載到的數據替換成 DOM 元素。

大家可以看一下InfoQ上的這篇文章《針對非正式 HTML6 提案“無需 JavaScript 的單頁應用”引發的論戰》，了解更多！

https://www.infoq.cn/article/2015/03/html6-without-javascript

自由調整圖像大小

HTML6 愛好者相信即將到來的更新將允許瀏覽器調整圖像大小以獲得更好的觀看體驗。

每個瀏覽器都難以呈現相對于設備和屏幕尺寸的最佳圖像尺寸，不幸的是，src 標簽 img 在處理這個問題時不是很有效。

這個問題可以通過一個新標簽 <srcset> 來解決，它使瀏覽器在多個圖像之間進行選擇的工作變得更加容易。

專用庫

將可用庫引入 HTML6 絕對是提高開發效率的重要一步。

微格式

很多時候，需要在互聯網上定義一般信息，而這些一般信息可以是任何公開的信息，例如電話號碼、姓名、地址等。微格式是能夠定義一般數據的標準。微格式可以增強設計者的能力，并可以減少搜索引擎推斷公共信息所需的努力。

自定義菜單

盡管標簽<ul>、<ol>非常有用，但在某些情況下仍有一些不足之處。可以處理交互元素的標簽將是一個不錯的選擇。

這就是創建標簽 <menu> 的驅動力，它可以處理按鈕驅動的列表元素。

<menu type="toolbar">
  <li><button>個人信息</button></li>
  <li><button>系統設置</button></li>
  <li><button>賬號注銷</button></li>
</menu>

因此 <menu>，除了能夠像普通列表一樣運行之外，還可以增強 HTML 列表的功能。

增強身份驗證

雖然HTML5在安全性方面還不錯，瀏覽器和網絡技術也提供了合理的保護。毫無疑問，在身份驗證和安全領域還有很多事情可以做。如密鑰可以異地存儲；這將防止不受歡迎的人訪問并支持身份驗證。使用嵌入式密鑰而不是 cookie，使數字簽名更好等。

集成攝像頭

HTML6 允許以更好的方式使用設備上的相機和媒體。將能夠控制相機、它的效果、模式、全景圖像、HDR 和其他屬性。

總結

沒有什么是完美的，HTML 也不是完美的，所以 HTML 規范可以做很多事情來使它更好。應該對一些有用的規范進行標準化，以增強 HTML 的能力。小的變化已經開始推出。如增強藍牙支持、p2p 文件傳輸、惡意軟件保護、云存儲集成，下一個 HTML 版本可以考慮一下。

端訓練營：1v1私教，終身輔導計劃，幫你拿到滿意的 offer。 已幫助數百位同學拿到了中大廠 offer。歡迎來撩~~~~~~~~

Hello，大家好，我是 Sunday。

說起 HTML 很多同學都會認為，這不就是小菜一碟嗎？這玩意有啥難度？你也太瞧不起我了吧！

不過看似越簡單的東西，我們越會忽略，同時它們還可以提供出令人驚艷的效果！

01：使用 Popover 屬性構建可訪問的原生彈出框元素

過去，我們經常使用本機瀏覽器窗口作為彈出框元素來顯示頂層內容（例如：常見的 dialog）。

可是這些默認的彈窗并不友好。所以后來，我們使用外部庫（Element、AntD 等）構建了頁面內的、經過CSS樣式化的彈出框，以好看的UI方式方式顯示此類內容。

不過現在，你可以使用純HTML創建彈出框，而無需編寫任何JavaScript代碼。現代Web標準通過Popover API提供了內置的彈出框支持。

看下面的源代碼：

<style>
  div[popover]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  div[popover] {
    padding: 12px;
    border: none;
  }
</style>

<div id="pop" popover>
  我是彈出的內容
</div>

<button popovertarget="pop">展示 popover</button>

上述HTML使用了 popover 屬性來實現一個簡單的彈出框元素。

它使用 popovertarget 屬性來在不使用JavaScript的情況下顯示彈出框元素。此外，我們使用了 ::backdrop 偽元素來樣式化彈出框的背景：

你可以使用 @starting-style 為原生彈出框添加動畫，正如 MDN 文檔（https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style）中所解釋的那樣。

02：在對話框和頁面中使用 autofocus 屬性

HTML標準提供了 autofocus 屬性，用于在頁面加載和對話框/彈出框顯示狀態下自動聚焦表單元素。

看下面的示例模態框，它在第一個輸入已經預填充的情況下自動將焦點設置到第二個文本輸入框上：

<dialog id="dlg">
  <form method="dialog">
    <input type="text" placeholder="Firstname" value="張" />
    <div style="height: 8px"></div>
    <input type="text" placeholder="Lastname" autofocus />
    <div style="height: 8px"></div>
    <button>保存</button>
  </form>
</dialog>
<button onclick="document.getElementById('dlg').showModal()" autofocus>點我</button>

上面的HTML在兩個地方使用了 autofocus 屬性：

在顯示模態框的按鈕元素中，在頁面加載事件后聚焦它。
在第二個文本輸入框中，自動將焦點設置到它，因為第一個文本輸入框已經預填充。

此外，我們還使用了 method="dialog" 屬性來設置關閉對話框而無需使用JavaScript代碼。

03：使用 pattern 屬性在文本輸入框中進行原生驗證

表單校驗是日常開發的常見需求。不過當我們脫離了 Element、AntD 這些組件庫之后，你還知道如何實現表單校驗嗎？

其實對于 HTML的 input 元素來說，它是有 pattern 屬性的

假設我們需要驗證一個產品標識符，它包含兩個英文字母和六個數字，用連字符連接，即 GR-100200。

以下HTML片段實現了上述要求的驗證功能的文本輸入框：

<form>
  <label for="productID"> ID:</label>
  <input type="text" id="productID" name="productID" pattern="[A-Za-z]{2}-\d{6}" title="Please enter a valid product identifier (e.g., GR-100200)" required>
  <button type="submit">Submit</button>
</form>

在上面的示例中，我們使用 pattern 屬性設置了一個正則表達式，用于驗證產品標識符。此正則表達式要求兩個英文字母（不區分大小寫）后跟一個連字符，然后是六個數字。另外，我們還添加了 title 屬性，以提供關于輸入格式的說明。最后，我們將 required 屬性添加到輸入元素上，以確保用戶輸入有效的產品標識符。

這里，pattern 屬性通過顯示瀏覽器特定的驗證消息來阻止表單提交無效輸入。但是他必須要在點擊了提交按鈕之后才可以進行校驗。

如果我們想要進行實時校驗（根據輸入內容實時校驗）怎么辦呢？

04：使用 :valid 和 :invalid CSS 偽類來實現 pattern 的實時驗證

我們可以使用 :valid 和 :invalid CSS 偽類來實現 pattern 的實時驗證，如下所示的 HTML 代碼片段所示：

<style>
  input[type=text] {
    border: #000 1px solid;
    border-radius: 4px;
    outline: none;
    padding: 6px;
  }

  input[type=text]:invalid {
    border: red 1px solid;

    +span::before {
      content: '?';
      display: inline;
      color: red;
    }
  }

  input[type=text]:valid {
    border: green 1px solid;

    +span::before {
      content: '?';
      display: inline;
      color: green;
    }
  }
</style>

<input type="text" placeholder="i.e., GR-100200" pattern="[A-Z]{2}-[0-9]{6}" required />
<span></span>

上面的HTML片段使用CSS代碼根據驗證狀態設置樣式。無效輸入會將輸入框邊框設置為紅色，并顯示紅色的叉號。與此同時，有效輸入會呈現綠色邊框和綠色的勾號符號：

05：處理移動虛擬鍵盤模式的 inputmode 屬性

手機通過虛擬鍵盤進行輸入，這個鍵盤有幾種模式。

例如，它可能僅顯示數字鍵用于數字輸入元素，對于一般的字符串輸入則顯示完整的鍵盤界面。移動瀏覽器會根據輸入類型自動更改虛擬鍵盤模式，但開發人員也可以使用 input 元素的 inputmode 屬性進行自定義。

<input type="text" pattern="[0-9]{6}" inputmode="numeric" maxlength="6">

在上面的示例中，我們使用了 inputmode 屬性來指定虛擬鍵盤的模式為 numeric，以便在移動設備上只顯示數字鍵盤。同時，我們還使用了 pattern 屬性來限制輸入只能是六位數字。maxlength 屬性限制輸入的最大長度為六位。

06：使用 loading 屬性實現瀏覽器級別的圖片懶加載

圖片懶加載是日常開發中的常見需求。我們在實現懶加載時大多數會使用一些現成的庫或者基于 Intersection Observer API 進行處理

不過很多同學不知道的是：img 標簽的 loading 屬性可以讓你在不編寫JavaScript代碼或使用第三方庫的情況下啟用瀏覽器級別的圖片懶加載。

看下面的源代碼：

<div style="height: 2000px"></div>

<img src="https://gips3.baidu.com/it/u=45328832,131546734&fm=3039&app=3039&f=JPEG?w=1024&h=1024
" loading="lazy" />

以這種方式實現圖片懶加載的功能，當頁面往下滾動的時候，圖片動態加載：

點擊按鈕時modal的位置看起來很不舒服，解決辦法總結有兩：

1.使用modal 彈出事件方法；

從官方文檔中可以了解到， modal組件有不少事件接口：

其中 “shown.bs.modal”可以在彈窗框出現后做一些處理，更改彈出框的樣式當然是可以的：

$(function(){

// dom加載完畢

var $m_btn = $(‘#modalBtn‘);

var $modal = $(‘#myModal‘);

$m_btn.on(‘click‘, function(){

$modal.modal({backdrop: ‘static‘});

});

// 測試 bootstrap 居中

$modal.on(‘shown.bs.modal‘, function(){

var $this = $(this);

var $modal_dialog = $this.find(‘.modal-dialog‘);

var m_top = ( $(document).height() - $modal_dialog.height() )/2; $modal_dialog.css({‘margin‘: m_top + ‘px auto‘});

});

</script>

該實現方式彈出框是居中了，但彈出時有一些遲疑后抖動到中部；不是特別理想，接下來試試第二種方式；

2.修改bootstrap.js 源碼；

帶著問題讀js庫源碼，往往能學到不少知識；本著怎樣讓 modal組件自動居中目的，開始跟蹤組件彈窗時對應的事件；

打開bootstrap.js ctrl+f 找到 modal對應代碼：

彈出框出現時，調用的自然是 Modal.prototype.show() 方法，而show 方法中又調用了 that.adjustDialog() 方法：

以上代碼看來，官方要實現垂直居中簡直太容易，而他們沒有，只能說國外同行網站布局觀跟俺們還是有區別的。加上少量代碼：

Modal.prototype.adjustDialog = function () {

var modalIsOverflowing=this.$element[0].scrollHeight> document.documentElement.clientHeight

this.$element.css({

paddingLeft:!this.bodyIsOverflowing&&modalIsOverflowing?this.scrollbarWidth:'',

paddingRight: this.bodyIsOverflowing &&!modalIsOverflowing?this.scrollbarWidth:''

})

// 是彈出框居中...

var $modal_dialog = $(this.$element[0]).find(' .modal-dialog' );

var m_top = ( $(document).height() - $modal_dialog.height() )/2; $modal_dialog.css({'margin' : m_top + 'px auto'});

}

然后就實現modal垂直居中了，效果圖：

在線咨詢

上一篇：前端開發如何寫出優秀的CSS？大神的10種最佳做法你看了嗎？
下一篇：肥豬游戲確認出席第四屆HTML5峰會并做專題演講

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商