文由掘金@天行天忌授權(quán)發(fā)布，前端晚間課對(duì)其內(nèi)容進(jìn)行微改。

HTML，超文本標(biāo)記語言，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。自從引入 HTML 以來，它就一直用于構(gòu)建互聯(lián)網(wǎng)。與 JavaScript 和 CSS 一起，HTML 構(gòu)成前端開發(fā)的三劍客。

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

支持原生模式

該元素<dialog> 將隨 HTML6 一起提供。它被認(rèn)為等同于用 JavaScript 開發(fā)的模態(tài)，并且已經(jīng)標(biāo)準(zhǔn)化，但只有少數(shù)瀏覽器完全支持。但這種現(xiàn)象會(huì)改變，很快它將在所有瀏覽器中得到支持。

這個(gè)元素在其默認(rèn)格式下，只會(huì)將光標(biāo)顯示在它所在的位置上，但可以使用 JavaScript 打開模式。

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

在默認(rèn)形式下，該元素創(chuàng)建一個(gè)灰色背景，其下方是非交互式內(nèi)容。

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

總的來說，這個(gè)標(biāo)簽在用戶交互和改進(jìn)的界面中變得有益。

可以通過更改 <dialog> 標(biāo)簽的 open 屬性以控制打開和關(guān)閉。

<dialog open>
  <p>組件內(nèi)容</p>
</dialog>

沒有 JavaScript 的單頁應(yīng)用程序

FutureClaw 雜志主編 Bobby Mozumder 建議：

將錨元素鏈接到 JSON/XML、API 端點(diǎn)，讓瀏覽器在內(nèi)部將數(shù)據(jù)加載到新的數(shù)據(jù)結(jié)構(gòu)中，然后瀏覽器將 DOM 元素替換為根據(jù)需要加載的任何數(shù)據(jù)。初始數(shù)據(jù)（以及標(biāo)準(zhǔn)錯(cuò)誤響應(yīng)）可以放在標(biāo)題裝置中，如果需要，可以稍后替換。

據(jù)他介紹，這是單頁應(yīng)用程序網(wǎng)頁設(shè)計(jì)模式，可以提高響應(yīng)速度和加載時(shí)間，因?yàn)椴恍枰虞d JavaScript。

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

大家可以看一下InfoQ上的這篇文章《針對(duì)非正式 HTML6 提案“無需 JavaScript 的單頁應(yīng)用”引發(fā)的論戰(zhàn)》，了解更多！

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

自由調(diào)整圖像大小

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

每個(gè)瀏覽器都難以呈現(xiàn)相對(duì)于設(shè)備和屏幕尺寸的最佳圖像尺寸，不幸的是，src 標(biāo)簽 img 在處理這個(gè)問題時(shí)不是很有效。

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

專用庫

將可用庫引入 HTML6 絕對(duì)是提高開發(fā)效率的重要一步。

微格式

很多時(shí)候，需要在互聯(lián)網(wǎng)上定義一般信息，而這些一般信息可以是任何公開的信息，例如電話號(hào)碼、姓名、地址等。微格式是能夠定義一般數(shù)據(jù)的標(biāo)準(zhǔn)。微格式可以增強(qiáng)設(shè)計(jì)者的能力，并可以減少搜索引擎推斷公共信息所需的努力。

自定義菜單

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

這就是創(chuàng)建標(biāo)簽 <menu> 的驅(qū)動(dòng)力，它可以處理按鈕驅(qū)動(dòng)的列表元素。

<menu type="toolbar">
  <li><button>個(gè)人信息</button></li>
  <li><button>系統(tǒng)設(shè)置</button></li>
  <li><button>賬號(hào)注銷</button></li>
</menu>

因此 <menu>，除了能夠像普通列表一樣運(yùn)行之外，還可以增強(qiáng) HTML 列表的功能。

增強(qiáng)身份驗(yàn)證

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

集成攝像頭

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

總結(jié)

沒有什么是完美的，HTML 也不是完美的，所以 HTML 規(guī)范可以做很多事情來使它更好。應(yīng)該對(duì)一些有用的規(guī)范進(jìn)行標(biāo)準(zhǔn)化，以增強(qiáng) HTML 的能力。小的變化已經(jīng)開始推出。如增強(qiáng)藍(lán)牙支持、p2p 文件傳輸、惡意軟件保護(hù)、云存儲(chǔ)集成，下一個(gè) HTML 版本可以考慮一下。

雖然WebDriver提供了操作瀏覽器的前進(jìn)和后退方法，但對(duì)于瀏覽器滾動(dòng)條并沒有提供相應(yīng)的操作方法。在這種情況下，就可以借助JavaScript來控制瀏覽器的滾動(dòng)條。WebDriver提供了execute_script()方法來執(zhí)行JavaScript代碼。

　　一般我們想到的必須使用滾動(dòng)條的場(chǎng)景是：注冊(cè)時(shí)的法律條文的閱讀。判斷用戶是否閱讀完的標(biāo)準(zhǔn)是：滾動(dòng)條是否拉到頁面底部。當(dāng)然，有時(shí)候?yàn)榱耸共僮鞲咏脩粜袨橐矔?huì)使用滾動(dòng)條，例如用戶要操作的元素在頁面的第二屏，一般用戶不會(huì)對(duì)看不到的二元素進(jìn)行操作，name就需要先將滾動(dòng)條拖動(dòng)到頁面的第二屏再進(jìn)行操作。

　　用于調(diào)整瀏覽器滾動(dòng)條位置的JavaScript代碼如下：

　　window.scrollTo()方法用于設(shè)置瀏覽器窗口滾動(dòng)條的水平和垂直位置。方法的第一個(gè)參數(shù)表示水平的左間距，第二個(gè)參數(shù)表示垂直的上邊距。其代碼如下：

　　通過瀏覽器打開百度進(jìn)度搜索，并且提前通過set_window_size()方法將瀏覽器窗口設(shè)置為固定寬高顯示，目的是讓窗口出現(xiàn)水平和垂直滾動(dòng)條。然后通過execute_script()方法執(zhí)行JavaScript代碼來移動(dòng)滾動(dòng)條，如下圖：

　　當(dāng)然，JavaScript的作用不僅僅體現(xiàn)在瀏覽器滾動(dòng)條的操作上，還可以用它向頁面中textarea文本框輸入內(nèi)容.

　　雖然我們可以通過class的方式將其進(jìn)行定位，但卻不能通過send_keys()向文本框中輸入文本信息。這種情況下，就需要借助JavaScript代碼完成輸入

　　首頁定義了要輸入的內(nèi)容text，然后將text與JavaScript代碼通過“+”進(jìn)行拼接。這樣做的目的是為了使輸入內(nèi)容變得可自定義。最后，通過execute_script()執(zhí)行JavaScript代碼。

tml開發(fā)環(huán)境搭建

有一個(gè)好的編輯器我們可以方便地的開發(fā)項(xiàng)目，編寫代碼，配置和管理我們的項(xiàng)目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。

基于html項(xiàng)目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費(fèi)的，也有收費(fèi)的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡(jiǎn)單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫html的步驟是首先新建一個(gè)文本文檔，按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運(yùn)行結(jié)果。

雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項(xiàng)目，編寫代碼和管理項(xiàng)目。

常用html代碼編寫的免費(fèi)軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網(wǎng)下載地址：

https://www.dcloud.io/hbuilderx.html

vs code的官網(wǎng)下載地址：

https://code.visualstudio.com/

Sublime Text官網(wǎng)下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學(xué)們的學(xué)習(xí)方便，對(duì)HBuilderX的下載和安裝做詳細(xì)的教程。

一，下載

首先訪問HBuilderX的官網(wǎng)網(wǎng)址：

https://www.dcloud.io/hbuilderx.html

打開上面的HBuilderX下載網(wǎng)址后點(diǎn)擊頁面上download，在彈出的對(duì)話框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環(huán)境下下載后的文件是一個(gè)壓縮的.zip文件。

二，安裝

鼠標(biāo)右擊下載下來的壓縮文件進(jìn)行解壓。

解壓完成后是一個(gè)名為HBuilderX的文件夾。

解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：

雙擊運(yùn)行名為HBuilderX.exe的應(yīng)用程序文件即可啟動(dòng)HBuilderX編輯器：

因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動(dòng)程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

小百科：

綠色軟件指一類小型軟件，多數(shù)為免費(fèi)軟件，最大特點(diǎn)是軟件無需安裝便可使用，可存放于閃存中，移除后也不會(huì)將任何記錄留在本機(jī)計(jì)算機(jī)上。通俗點(diǎn)講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會(huì)在注冊(cè)表中留下注冊(cè)表鍵值，所以相對(duì)一般的軟件來說，綠色軟件對(duì)系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。

三，新建項(xiàng)目

HBuilderX編輯器初次啟動(dòng)時(shí)的默認(rèn)界面是下圖所示：

按照下圖所示可以創(chuàng)建一個(gè)新的名為demo1空白項(xiàng)目：

名為demo1的空白項(xiàng)目創(chuàng)建成功后的界面如下圖所示：

接下來在剛我們新建的demo1項(xiàng)目下創(chuàng)建名為helloworld的html文件

鼠標(biāo)右擊創(chuàng)建的demo1項(xiàng)目選擇新建在選擇.html文件：

在彈出的對(duì)話框里填入html文件的名稱：

編寫一段代碼：

運(yùn)行：

在瀏覽器上觀察效果：

好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。

下面再給大家教一下怎樣修改HBuilderX的主題風(fēng)格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風(fēng)格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。

按照以下步驟可以修改HBuilderX的主題，默認(rèn)主題是綠柔，我們可以改成雅黑，雅藍(lán)或者自定義主題：

雅黑主題：

雅藍(lán)主題：

好了本節(jié)全部?jī)?nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對(duì)你有所幫助

你的支持是我的最大動(dòng)力，若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c(diǎn)贊加關(guān)注！謝謝！