整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文由掘金@天行天忌授權發布，前端晚間課對其內容進行微改。
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>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 版本可以考慮一下。
雖然WebDriver提供了操作瀏覽器的前進和后退方法，但對于瀏覽器滾動條并沒有提供相應的操作方法。在這種情況下，就可以借助JavaScript來控制瀏覽器的滾動條。WebDriver提供了execute_script()方法來執行JavaScript代碼。
一般我們想到的必須使用滾動條的場景是：注冊時的法律條文的閱讀。判斷用戶是否閱讀完的標準是：滾動條是否拉到頁面底部。當然，有時候為了使操作更接近用戶行為也會使用滾動條，例如用戶要操作的元素在頁面的第二屏，一般用戶不會對看不到的二元素進行操作，name就需要先將滾動條拖動到頁面的第二屏再進行操作。
用于調整瀏覽器滾動條位置的JavaScript代碼如下：
window.scrollTo()方法用于設置瀏覽器窗口滾動條的水平和垂直位置。方法的第一個參數表示水平的左間距，第二個參數表示垂直的上邊距。其代碼如下：
通過瀏覽器打開百度進度搜索，并且提前通過set_window_size()方法將瀏覽器窗口設置為固定寬高顯示，目的是讓窗口出現水平和垂直滾動條。然后通過execute_script()方法執行JavaScript代碼來移動滾動條，如下圖：
當然，JavaScript的作用不僅僅體現在瀏覽器滾動條的操作上，還可以用它向頁面中textarea文本框輸入內容.
雖然我們可以通過class的方式將其進行定位，但卻不能通過send_keys()向文本框中輸入文本信息。這種情況下，就需要借助JavaScript代碼完成輸入
首頁定義了要輸入的內容text，然后將text與JavaScript代碼通過“+”進行拼接。這樣做的目的是為了使輸入內容變得可自定義。最后，通過execute_script()執行JavaScript代碼。
有一個好的編輯器我們可以方便地的開發項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發環境。
基于html項目的開發和代碼編寫現在網上有很多編輯器，也有免費的，也有收費的編輯器。基于在Windows系統環境下開發和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。
使用記事本編寫html的步驟是首先新建一個文本文檔，按照html的語法規則編寫相關的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運行結果。
雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業的編輯器來開發項目，編寫代碼和管理項目。
常用html代碼編寫的免費軟件有HBuilderX，vs code，Sublime Text 等等。
HBuilderX官網下載地址：
https://www.dcloud.io/hbuilderx.htmlvs code的官網下載地址：
https://code.visualstudio.com/Sublime Text官網下載地址：
http://www.sublimetext.com/我們以后的教程都使用HBuilderX，所以下面為了同學們的學習方便，對HBuilderX的下載和安裝做詳細的教程。
一，下載
首先訪問HBuilderX的官網網址：
https://www.dcloud.io/hbuilderx.html打開上面的HBuilderX下載網址后點擊頁面上download，在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。
在Windows10環境下下載后的文件是一個壓縮的.zip文件。
二，安裝
鼠標右擊下載下來的壓縮文件進行解壓。
解壓完成后是一個名為HBuilderX的文件夾。
解壓完成后鼠標雙擊HBuilderX文件夾：
雙擊運行名為HBuilderX.exe的應用程序文件即可啟動HBuilderX編輯器：
因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序，我們可以右擊HBuilderX.exe文件創建桌面快捷方式。
小百科：
綠色軟件指一類小型軟件，多數為免費軟件，最大特點是軟件無需安裝便可使用，可存放于閃存中，移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值，所以相對一般的軟件來說，綠色軟件對系統的影響幾乎沒有，所以是很好的一種軟件類型。
三，新建項目
HBuilderX編輯器初次啟動時的默認界面是下圖所示：
按照下圖所示可以創建一個新的名為demo1空白項目：
名為demo1的空白項目創建成功后的界面如下圖所示：
接下來在剛我們新建的demo1項目下創建名為helloworld的html文件
鼠標右擊創建的demo1項目選擇新建在選擇.html文件：
在彈出的對話框里填入html文件的名稱：
編寫一段代碼：
運行：
在瀏覽器上觀察效果：
好了，到這里html的開發環境搭建和HBuilderX的安裝教程結束了。
下面再給大家教一下怎樣修改HBuilderX的主題風格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風格。在喜歡自己喜歡的環境下做開發也是令人羨慕的一件事。
按照以下步驟可以修改HBuilderX的主題，默認主題是綠柔，我們可以改成雅黑，雅藍或者自定義主題：
雅黑主題：
雅藍主題：
好了本節全部內容全部結束了，希望我準備的內容對你有所幫助
你的支持是我的最大動力，若覺得我的教程還可以或對你有幫助為我點贊加關注！謝謝！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
