HTML6 展望

简介: HTML6 规范还未发布,本文原作者 Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望,或者说他希望 HTML6 能够支持的一些新特性。

image.png

HTML5 概述

HTML5 是 HTML 语言最受欢迎的版本之一,它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了<article>, <section>, <header>这样的标签来帮助开发者更好地组织页面内容。然而 HTML5 规范仍然没有最后定稿,并且它并不是一个真正意义上的语义标记语言。


HTML6 展望

你有没有曾经希望能在 HTML 中使用自定义标签?比如:使用<logo>来显示你的网站logo,还有使用<toolbar>来显示工具栏等等。我们经常使用<div id=”container”>和<div id=”wrapper”>来组织页面,在 HTML6 里我们希望可以直接使用象<container>和<wrapper>这样的自定义标签。

和 XML 一样,HTML6 应该支持 namespace(命名空间),如:xmlns:xhtml=”http://www.w3.org/1999/xhtml

HTML6 代码样例:

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 <html:metatype="title"value="Page Title">

 <html:metatype="description"value="HTML example with namespaces">

 <html:linksrc="css/mainfile.css"title="Styles"type="text/css">

 <html:linksrc="js/mainfile.js"title="Script"type="text/javascript">

 </html:head>

 <html:body>

 <header>

 <logo>

 <html:mediatype="image"src="images/xyz.png">

 </logo>

 <nav>

 <html:ahref="/img1">a1</a>

 <html:ahref="/img2">a2</a>

 </nav>

 </header>

 <content>

 <article>

 <h1>Heading of main article</h1>

 <h2>Sub-heading of main article</h2>

 <p>[...]</p>

 <p>[...]</p>

 </article>

 <article>

 <h1>The concept of HTML6</h1>

 <h2>Understanding the basics</h2>

 <p>[...]</p>

 </article>

 </content>

 <footer>

 <copyright>This site is © to Anonymous 2014</copyright>

 </footer>

 </html:body>

 </html:html>

在上面的代码中,你也许注意到了一些奇怪的<html:x>标签,它们是 W3C 和 HTML6 规范中在命名空间里定义的标签。例如:<html:title>负责设定你浏览器的标题栏文字,<html:media>负责显示图片等等。用户可以自己定义标签以便 JavaScript 和 CSS 识别和处理,这样页面代码会更易读,语义更清晰。


HTML6 APIs

HTML6 的标签前带有命名空间,如:<html:html>, <html:head>等等。

1.<html:html>

<!DOCTYPE html>

 <html:html>// this is equivalent to <html> tag written in previous HTML versions

 <!-- sample of HTML document -->

 </html:html>

2.<html:head> 和 <head> 标签一样。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <!-- Main content would come here, like the <html:title> tag -->

 </html:head>

 </html:html>

3.<html:title> 和 <title> 标签类似。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 </html:head>

 </html:html>

4.<html:meta> 和 <meta> 标签类似,不同之处在于,在 HTML5 中你只能使用标准的元数据类型,如:”keywords”, “description”, “author”等,而在 HTML6 中你可以使用任何元数据类型。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 <html:metatype="description"value="HTML example with namespaces">

 </html:head>

 </html:html>

5.<html:link> 和 HTML6 之前版本的 <link> 标签类似。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 <html:linksrc="js/mainfile.js"title="Script"type="text/javascript">

 </html:head>

 </html:html>

6.<html:body> 和 <body> 标签一样。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 </html:head>

 <html:body>

 <!-- This is where your website content is placed -->

 </html:body>

 </html:html>

7.<html:a> 和 <a> 标签类似,区别是 <html:a> 只有 “href” 一个属性。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 </html:head>

 <html:body>

 <html:ahref="http://siteurl">Go to siteurl.com!</html:a>

 </html:body>

 </html:html>

8.<html:button> 和 <button> 及 <input type=”button”> 一样。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 </html:head>

 <html:body>

 <html:button>Click Here</html:button>

 </html:body>

 </html:html>

9.<html:media> 涵盖 <img>, <video>, <embed> 等标签的所有功能。<html:media> 的好处是你不用根据不同的媒体文件类型使用不同的标签,媒体的类型由浏览器从文件内容(类型属性,扩展名,和MIME type)中来判断。

<!DOCTYPE html>

 <html:html>

 <html:head>

 <html:title>A Look Into HTML6</html:title>

 </html:head>

 <html:body>

 <!-- Image would come here -->

 <html:mediasrc="img1/logo.jpg"type="image">

 <!-- Video doesn't need a type -->

 <html:mediasrc="videos/slide.mov">

 </html:body>

 </html:html>


标签类型(Tag types)概述

和 HTML5 一样, HTML6 也有两种标签类型:单标签(single tag) 和双标签(double tag)

 <html:meta type="author"content="single tag">

 <html:meta type="author"content="double tag" />

单标签不需要结束符’/’


结语

HTML6 规范还未发布,本文原作者 Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望,或者说他希望 HTML6 能够支持的一些新特性。

相关文章
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
1169 0
|
Rust 安全 编译器
如何在 Fedora 上安装 Rust?
如何在 Fedora 上安装 Rust?
301 0
如何在 Fedora 上安装 Rust?
|
SQL 存储 运维
Flyway基本介绍及基本使用
使用5W1H方式介绍一下在Java项目开发中使用Flyway来管理数据库版本。。
10055 0
Flyway基本介绍及基本使用
|
12月前
|
移动开发 物联网 API
HTML6的最新消息
截至2023年10月,HTML6 仍处于提议和讨论阶段,尚未正式发布。W3C 和 WHATWG 等组织正不断迭代和改进 HTML 规范,采用“增量更新”策略。HTML6 的潜在新特性包括:改进的语义和结构元素、增强的 Web 组件支持、更强大的 API、多媒体功能升级、更好的可访问性和性能优化,以及对物联网的支持。这些改进将使开发者能够创建更复杂、高性能且符合无障碍标准的网页。然而,HTML 的发展是非线性的,新版本没有明确的发布时间,开发者应关注官方动态获取最新信息。
|
关系型数据库 数据库 PostgreSQL
PostgreSQL 内存表可选项 - unlogged table
标签 PostgreSQL , 内存表 , unlogged table 背景 内存表,通常被用于不需要持久化,变更频繁,访问RT低的场景。 目前社区版本PostgreSQL没有内存表的功能,postgrespro提供了两个插件可以实现类似内存表的功能。
3675 0
|
9月前
|
机器学习/深度学习 人工智能 编解码
【AI系统】GhostNet 系列
本文介绍了GhostNet系列网络,重点讲解了GhostNet V1和V2的改进。V1提出了Ghost Module,通过廉价操作生成更多特征图,构建轻量级网络。V2在此基础上引入了解耦全连接注意力(DFC)机制,增强了模型捕捉长距离依赖的能力,同时保持了高效的计算性能,特别适合移动设备。文章详细对比了V2与V1的区别,包括结构改进和性能提升。
358 4
【AI系统】GhostNet 系列
|
11月前
|
机器学习/深度学习 网络架构 计算机视觉
目标检测笔记(一):不同模型的网络架构介绍和代码
这篇文章介绍了ShuffleNetV2网络架构及其代码实现,包括模型结构、代码细节和不同版本的模型。ShuffleNetV2是一个高效的卷积神经网络,适用于深度学习中的目标检测任务。
250 1
目标检测笔记(一):不同模型的网络架构介绍和代码
|
SQL 存储 NoSQL
. NoSQL和SQL的区别、使用场景与选型比较
【7月更文挑战第30天】. NoSQL和SQL的区别、使用场景与选型比较
280 15
LabVIEW创建自定义输入控件、显示控件和自定义类型2
LabVIEW创建自定义输入控件、显示控件和自定义类型2
595 2
|
Web App开发 Rust 安全
一名C++程序员的Rust入门初体验
作者最近尝试写了一些Rust代码,本文主要讲述了对Rust的看法和Rust与C++的一些区别。