HTML5基礎學習 05-HTML5新功能

單

- Web Forms 2.0規范允許創建更強大的表單和更引人注目的用戶體驗。

- 添加了日期選擇器，顏色選擇器和數字步進器控件。

- 輸入字段類型現在包括電子郵件，搜索和URL。

- 現在支持PUT和DELETE表單方法。

集成API（應用程序編程接口）

- 拖放

- 音頻和視頻

- 離線Web應用程序

- 歷史

- 本地存儲

- 地理位置

- Web消息

Forms

- The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user experiences.

- Date pickers, color pickers, and numeric stepper controls have been added.

- Input field types now include email, search, and URL.

- PUT and DELETE form methods are now supported.

Integrated API (Application Programming Interfaces)

- Drag and Drop

- Audio and Video

- Offline Web Applications

- History

- Local Storage

- Geolocation

- Web Messaging

內容模型列表

在HTML中，元素通常屬于塊級或內聯內容模型。HTML5引入了七個主要內容模型。

- 元數據

- 嵌入式

- 交互式

- 標題

- 短語

- 流程

- 分割

The List of Content Models

In HTML, elements typically belonged in either the block level or inline content model. HTML5 introduces seven main content models.

- Metadata

- Embedded

- Interactive

- Heading

- Phrasing

- Flow

- Sectioning

Content Models 內容模型

Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document.

元數據：設置其余內容的演示或行為的內容。這些元素位于文檔的頭部。

Elements:<base>, <link>, <meta>, <noscript>, <script>, <style>, <title>

Embedded: Content that imports other resources into the document.

嵌入：將其他資源導入文檔的內容。

Elements:<audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>

Interactive: Content specifically intended for user interaction.

互動：專門用于用戶互動的內容。

Elements:<a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>

Heading: Defines a section header.

標題：定義標題。

Elements:<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

Phrasing: This model has a number of inline level elements in common with HTML4.

短語：該模型具有與HTML4相同的多個內聯級元素。

Elements:<img>, <span>, <strong>, <label>, <br />, <small>, <sub>, and more.

The same element can belong to more than one content model.

相同的元素可以屬于多個內容模型。

Flow content: Contains the majority of HTML5 elements that would be included in the normal flow of the document.

流內容：包含在文檔正常流中的大多數HTML5元素。

Sectioning content: Defines the scope of headings, content, navigation, and footers.

分割內容：定義標題，內容，導航和頁腳的范圍。

Elements: <article>, <aside>, <nav>, <section>

為了方便用戶更好使用web組態，最近提供了用戶自定義組件的功能。在實施項目中就可以使用自己的組件了！

首先我們登陸系統就會看到新增的組件管理選項如下圖：

點擊添加組件選擇2D組件我們就可以建立一個自己的組件了

《組件設計器》由基礎設置（包括名稱 code 類型狀態 icon 次序號）HTML編輯區域 CSS編輯區域 JS編輯區域和預覽區域組成。

首先我們給組件起一個‘名字’ 和 ‘code’，在url輸入框中可以給組件設置一個icon。點擊保存系統會為我們建立一個組件模板。

由于web組態是由vue開發的所以開發組件也需要vue的的基礎知識。建議去看下vue的教程及生命周期，以方便開發組件。以下我附上vue生命周期圖及組件代碼。

我們就開始設計一個炫酷的按鈕作為例子

HTML代碼如下：

<a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>

這里:

style="imrstyle"：樣式在web組態設計器中呈現的樣式

v-show="controlProp.commProp.visible"：可見性在web組態設計器中可實現顯示或閃爍

{{controlProp.textProp.text}}：文本對應組件的文本屬性

更多屬性請參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

CSS代碼如下：

.btn123 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      z-index: 1;
    }
    
    .btn123:hover {
      animation: animate 8s linear infinite;
    }
    
    @keyframes animate {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 400%;
      }
    }
    
    .btn123::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      z-index: -9999;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
      border-radius: 40px;
      opacity: 0;
      transition: 0.5s;
    }
    
    .btn123:hover::before {
      filter: blur(20px);
      opacity: 1;
      animation: animate 8s linear infinite;
    }

JS代碼如下：

export default {
  props: {
    controlProp: Object //作為web組態設計器的繼承屬性
  },
  data() {
    return {
    }
  },
  computed: {
    imrstyle: function () {  //imrstyle 作為web組態設計器的控制樣式
      let maxWidth=this.controlProp.commProp.width
      let maxHeight=this.controlProp.commProp.height
      if (this.controlProp.textProp && this.controlProp.textProp.padding) {
        maxWidth=maxWidth - this.controlProp.textProp.padding * 2
        maxHeight=maxHeight - this.controlProp.textProp.padding * 2
      }
      return {
        // 'max-width': maxWidth+ 'px',
        // 'max-height': maxHeight+ 'px',
        width: '100%',
        height: '100%',
        'box-sizing': 'content-box',
        background: 'transparent',
        'color': this.controlProp.textProp ? this.controlProp.textProp.fontcolor : '',
        'font-size': this.controlProp.textProp ? this.controlProp.textProp.fontsize + 'px' : '',
        'text-align': this.controlProp.textProp ? this.controlProp.textProp.horizonalign : '',
        'line-height': maxHeight + 'px',
        'vertical-align': this.controlProp.textProp ? this.controlProp.textProp.verticalalign : '',
        'font-family': this.controlProp.textProp ? this.controlProp.textProp.fontfamily : '',
        'font-weight': this.controlProp.textProp ? (this.controlProp.textProp.fontweight ? 600 : 500) : '',
        'font-style': this.controlProp.textProp ? (this.controlProp.textProp.fontitalic ? 'italic' : 'normal') : ''
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initImports() {
      return {

      }
    },
    initProp() {   //初始化狀態 （基礎屬性 特殊屬性 文本屬性）
      return {
        commProp: { // 基礎屬性  
          width: 80,
          height: 30,
          borderwidth: 0,
          backgroundColor: 'linear-gradient(90deg, #03a9f4, #00FFFF)',
          borderradius:5
        },
        spProp:{ // 特殊屬性
          },
        textProp: { // 文本屬性
          text: 'Button',
          fontsize: 12,
          fontcolor: 'black',
          horizonalign: 'center',
          verticalalign: 'middle',
          padding: 0,
          margin: 0
        },
        spPropSetting: [ // 特殊屬性 textinput/numberinput/switch/select/colorPicker/codeInput/dateInput/imgSelect/setup
        ]
      }
    }
  }
}

這里需要注意：

initProp()：方法中實現對組件的基礎屬性文本屬性特殊屬性的初始化配置

更多屬性配置參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

點擊保存這樣我們設計的組件就顯示出來了！是不是很簡單。

這樣在我們的web組態中就可以使用我們自定義的組件了！[大笑][大笑][大笑]

月 9 日，微軟在其官方博客上正式發布了基于 Chromium 的第一個 Dev 和 Canary 版本的 Edge，據了解，Dev 頻道周更，Canary 頻道每天都會更新，現在，你可以在 Windows 10 上使用它們，Beta 版本還尚未發布。

鏈接：

https://www.microsoftedgeinsider.com/en-us/?from=timeline&isappinstalled=0

你可以選擇并行安裝多個頻道以進行測試，這些頻道將擁有各種獨立的圖標與名稱，以方便用戶朋友們加以區分。不久的將來，微軟還將陸續推出支持其它操作系統平臺的版本，包括 Windows 7、Windows 8.1 以及 MacOS 等等。

微軟說他們會從 Microsoft Edge 的用戶體驗與連接服務出發，提供世界一流的網絡瀏覽體驗。但在改進 Web 平臺方面，他們將把主要精力放在 Chromium 項目的貢獻身上。

從去年 12 月加入這個社區開始，微軟已經向 Chromium 項目做了 275 次提交，同時，他們也在一些重點關注的領域取得了重大進展：

可訪問性

微軟表示，Microsoft Edge 是目前唯一能夠在 HTML5Accessibility 瀏覽器基準測試中獲得滿分的瀏覽器，他們希望能把這些貢獻帶到 Chromium 項目中并改善所有用戶的 Web 體驗。

現代輔助功能的 API，為了給屏幕輔助工具（例如 Windows Narrator、放大鏡、盲目顯示器以及其它輔助工具）提供更出色的可訪問性體驗，他們向 Chromium 分享了為微軟 UI 自動化界面提供支持的計劃——這是一套現代化程度更高、也更加安全的 Windows 可訪問性框架。他們正在和谷歌的輔助功能團隊及其他 Chromium 工程師合作，希望能夠在今年晚些時候完成全部預期功能。
高對比度，為了確保客戶獲得最佳的訪問體驗，他們還在 W3C CSS 工作組中嘗試，努力實現標準化高對比度的 CSS Media 查詢。這方面成果也將被引入 Chromium 項目當中。這意味著客戶將能夠使用 Windows 輕松在訪問設置中選定首選顏色對比度設置，從而提高 Windows 設備上的內容可讀性。
HTML 視頻字幕樣式。微軟與 Chromium 工程師們開展合作，希望為 Windows Ease of Access 設置提供支持，從而改善 Windows 10 上的字幕顯示效果。
光標瀏覽。對于使用鍵盤進行 Web 導航并選定文本內容的用戶，他們還在 Chromium 項目中共享了光標瀏覽功能。
他們開始與 Chromium 同行們合作，旨在改善媒體與輸入控件等本地 Web 控件的可訪問性水平。

ARM64

微軟表示，他們正在與谷歌工程師合作，努力使得 Chromium 能夠通過 Chromium 73 在 ARM 設備上以原生方式運行在 Windows 當中。憑借這些貢獻，基于 Chromium 的瀏覽器將很快能夠在采用 ARM 芯片的 Windows 10 PC 設備上實現本機運行，從而顯著改善性能表現與電池續航水平。

觸控

為了幫助觸控設備用戶獲得最佳體驗，微軟在 Chromium 當中實現了對 Windows 觸控鍵盤的支持，現在你可以在鍵入內容時享受觸控文本建議與“手勢書寫”，即通過滑動鍵盤來輸入內容，而不必反復抬起手指。

滾動

Microsoft Edge 一直以先進的滾動體驗而聞名于 Web 瀏覽器領域。微軟正在與 Chromium 工程師密切合作，盡可能提升觸控板、觸控屏、鼠標滾輪、鍵盤以及側邊欄的滾動順暢度。這項工作目前還處于早期階段，但已經開始分享一些與此有關的設計思路。

Media

為了向用戶提供最高級別的兼容性并為 Web 開發人員帶來更多技術選項，Microsoft Edge 現在已經能夠支持微軟 PlayReady 與谷歌 Widevine DRM 系統。

雖然 Microsoft Edge 憑借著強大硬件支持下的微軟 PlayReady DRM 實現了最高分辨率與比特率的視頻播放能力，但某些網站目前仍然僅支持谷歌 Widevine DRM 系統。在 Microsoft Edge 之上，依賴硬件支持的 PlayReady DRM 站點將能夠繼續使用高動態范圍（簡稱 HDR）或 Dolby Vision 實現 1080p 或 4k 媒體的傳輸，而僅支持 Widevine 的站點如今也能夠在 Microsoft Edge 當中正常運行。

Windows Hello

Microsoft Edge 支持 Windows Hello 驗證器，從而在 Web 之上利用生物識別身份驗證以實現無密碼及雙因素身份驗證方案，且具體方式更加安全也更具個性化特色。微軟與 Chromium 團隊合作，共同在最新 Windows 10 Insier 預覽版當中將 Web 驗證 API 添加至 Chromium 73+ 當中。

HTML 模塊

微軟最近提出了 HTML 模塊提案，該提案目前正在由 W3C 以及 WHATWG Web 組件孵化組負責開發。

起因是他們意識到不少 Web 開發人員抱怨稱，雖然 ES6 腳本模塊確實能夠幫助他們更好地組裝代碼并構建起更出色的依賴性管理系統，但現有方案卻無法幫助到使用聲明性 HTML 標記的開發者。這意味著他們必須重新編寫代碼以實現標記的動態生成。

因此，微軟從 HTML Imports 身上吸取到經驗教訓，并推出了 ES6 腳本模塊系統的擴展方案，從而將 HTML 模塊納入進來。考慮到他們在標準討論階段得到了各參與方的支持，因此微軟決定將此項功能同樣交付給 Chromium 項目。

用戶代理字符串

由于 Microsoft Edge 采用 Chromium 內核，微軟也開始將用戶代理字符串盡可能與 Chromium 的用戶代理字符串靠攏。此外，他們還添加了“Edg”令牌。如果你希望阻止指向用戶代理字符串的站點訪問，請更新你的邏輯以將此字符串作為其它基于 Chromium 的瀏覽器。

以下是用于 Microsoft Edge 最新 Dev 頻道 build 的用戶代理字符串：

復制代碼

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.48 Safari/537.36 Edg/74.1.96.24

之所以選擇使用“Edg”令牌，是為了避免使用“Edge”字符串可能導致的兼容性問題——基于 EdgeHTML 的當前版本 Microsoft Edge 正在使用該字符串。不過，“Edg”令牌仍然與 iOS 以及 Android 上的現有令牌一致。建議開發人員盡可能進行功能檢測并避免通過用戶代理字符串進行瀏覽器版本檢查，因為這種作法可能提升維護負擔并降低代碼穩定性。

用戶體驗

微軟將致力于通過差異化的用戶體驗功能與連接服務，利用 Microsoft Edge 的優勢打造出世界一流的瀏覽器方案。通過這套初始版本，他們對用戶界面做出了一系列調整，從而盡可能使 Chromium 項目在外觀上更接近 Microsoft Edge。

隨著時間的推移，微軟將不斷發布新的功能并進行試驗，用以衡量用戶的興趣與滿意度，同時評估有必要推出的后續新功能與改進效果。這將確保每一項新功能都能以最佳方式滿足客戶需求，同時切實符合自身的質量標準。

與微軟服務相集成

雖然下一版 Microsoft Edge 將基于 Chromium 內核，但微軟希望盡可能使其繼承微軟現有的種種優勢，包括其服務集成能力。其中一部分集成服務包括：

在默認情況下，由 Bing Search 提供搜索與地址欄建議功能；
在導航至站點并下載內容時，由 Windows Defender SmartScreen 提供強大的網絡釣魚與惡意軟件防護功能；
Microsoft Account 服務與 Azure Active Directory 現在可用于登錄瀏覽器，以幫助你輕松管理自己的個人與工作賬戶，甚至可以在不同的瀏覽器會話當中同時使用多個身份；
Microsoft Activity Feed Service 能夠在 Microsoft Edge 預覽 build 之間實現同步，目前已經能夠在運行有 Microsoft Edge 預覽 build 的 Windows 10 桌面設備之間進行個人偏好同步。在未來的 build 版本當中，微軟還將逐步實現密碼、瀏覽歷史以及其它設置內容的同步，且將面向 iOS 以及 Android 等全部受支持系統的平臺。

Microsoft News 服務將為新的標簽機制提供支持，允許你選擇配有生動 Bing 圖像的主題，直奔自己最關注的相關主題內容，或者瀏覽更多以新聞為主體的信息主題。

反饋意見

如果你在 Chromium 當中遇到了重復出現的問題，請將其以 bug 形式提交。對于現有版本中的 Microsoft Edge 中存在的問題，大家則可繼續使用 EdgeHTML Issue Tracker 進行反饋：

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/

原文鏈接

https://blogs.windows.com/msedgedev/2019/04/08/microsoft-edge-preview-channel-details/#LURvLHSfTVD7T4zU.97

在線咨詢

上一篇：產品新人項目總結第1期：Wi-Fi貼紙
下一篇：2022 年頂級道德黑客最愛用的10大工具

您的項目需求

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

整合營銷服務商