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小时内与您取得联系。

整合营销服务商