先睹为快即将到来的HTML6
myzbx 2024-12-13 15:03 25 浏览
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。
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 版本可以考虑一下。
- 上一篇:html简单的二级菜单制作
- 下一篇:学用系列|一页一记,小而美的网页标记工具
相关推荐
- Fabric.js使用说明详解(fabric nodejs)
-
Fabric介绍简介:Fabric是一款基于HTML5Canvas的开源绘图库,它提供了丰富的API和工具,可以轻松地创建交互式的绘图应用程序和游戏。功能特点:介绍Fabric的核心功能,如图形绘制...
- 如何才能快速将照片变成漫画?(如何才能快速将照片变成漫画风格)
-
本文分享8个超级详细的照片变漫画教程,让你秒变绘画大师,跟着教程就能亲手将自己的照片制作成精美的漫画,快来一起试试吧~1、PS一款专业的图像处理软件,具备出色的图像处理功能,提供了强大的编辑工具和广...
- 很少人知道的20个最好用的免费设计软件
-
不是每个人都能花重金去购置昂贵的软件来装备自己,特别是在刚开始涉足设计这个行业的新手们。我们知道adobe系列软件正版是收费的,而且很贵,虽然说我们国内已经能破解使用,很多人都认为adobe的那些软件...
- 13个免费的信息图表制作软件推荐(如何制作信息表)
-
制作信息图表涉及大量的工作,如:数据收集,数据排列,选择和规划信息图表的格式和设计信息图表。在设计信息图表时,选择适当的制图软件是一个非常艰巨的任务。下面为大家推荐13个最好的免费信息图表制作软件。A...
- 怎么转换图片的格式?(怎么转换图片的格式)
-
我们日常用到最多的图片格式是JPG/JPEG格式的,其他常见的图片格式包括有bmp,png,tif,gif,svg,cdr,ai,raw,webp等,由于图片的使用场景不同,所以要求的具体格式也会有所...
- Adobe的各种图形处理软件分别是做什么的
-
Adobe公司的Ps,Pr,Ae,An,Ai软件分别的用来做什么的?PS:AdobePhotoshop的简称,用于图像处理、编辑、通道、图层、路径综合运用,图像色彩的校正,各种特效滤镜的使用、特效字...
- 前端开发中,对图片的优化技巧有哪些?
-
按照先后顺序有以下:1.去掉无意义的修饰。嗯,我会瞎说吗?除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,...
- Adobe软件的最佳Linux替代品有哪些?这几款工具不容错过
-
如果你是一名平面设计工作者,那么估计很多与你职业相同或者是喜欢并正在学习平面设计的小伙伴们,而如果恰巧你们都是Linux用户的话,那么估计很多的小伙伴都在寻找Adobe的Linux替代品吧。但是,...
- 精心收集几个免费绘图、修图与照片编辑软件分享一下
-
本次为大家介绍几款绘图、修图与照片编辑软件,都可以免费授权个人与教育使用,有些开源软件甚至可以在工作上商业使用。其中大多数的绘图软件都是跨平台的,可以在Windows或Mac上安装,对个人照片...
- UI设计入门干货!八大软件+技能+素材网站
-
随着互联网行业的发展,UI设计师越来越多的被提及,UI设计师大火,需求岗位越来越多,也有越来越多的人转行投身UI设计师。UI设计是什么?一般所说的UI设计多指UI视觉设计,主要负责APP、Web、H5...
- 干货!一文读懂10种主流的图片格式
-
JPG、PNG、GIF,这些在我们生活中常见的图片格式,你真的了解它们吗?你知道除了这3种图片格式外,还有十多种主流的图片格式吗?每一种图片格式都有自己的特点和适用场景,选择正确的图片类型不仅能提升视...
- 最佳设计:A-Frame,阅读进度指示器,Colorify.js,交互式讲故事
-
最佳设计和开发好东西的综述以及一些新版本-第44期(2015年最后一期),包括A-Frame,阅读进度指示器,Colorify.js,交互式讲故事的动画地图路径,简单的Ionic侧菜单过渡等。摇滚...
- 当爆火的“粘土风”吹进铁路......
-
展播开始啦⑨<animateattributeName="opacity"begin="0s"dur="0.01"fill="freeze"from="1"to="1"/>&l...
- 日日是好日:书法艺术文字T恤定制,陶冶性情、现代生活新平衡
-
书法,心情和思想都融入文字的意境当中,对眼前或身边发生的不愉快事情视而不见、听而不闻,从而进入既轻松又舒适的状态,没有了妄念和烦恼,精神获得享受。本文节选自《DIYSKU个性化定制设计按需印刷行业出海...
- 从默默无闻到无可替代,Photoshop背后藏着多少不为人知的故事 ?
-
1990年2月推出了photoshop1.0。当时Photoshop只能在Mac计算机上运行,功能上也只有“工具”面板和少量的滤镜。1991年2月推出了photoshop2.0。该版本发行引发了桌...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)