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 能够支持的一些新特性。

相关文章
|
移动开发 编解码 前端开发
【面试题】前端 移动端自适应?
【面试题】前端 移动端自适应?
394 0
|
并行计算 PyTorch 测试技术
MMDetection系列 | 1. MMDetection安装流程与测试
MMDetection系列 | 1. MMDetection安装流程与测试
1102 0
|
3月前
|
数据采集 机器学习/深度学习 存储
一文讲清数据清洗的十大常用方法
本文详解数据清洗十大常用方法与实战技巧,涵盖缺失值填补、重复值处理、异常值检测、数据标准化、文本清洗、数据脱敏等关键操作,助你高效提升数据质量,解决“脏乱差”问题。
一文讲清数据清洗的十大常用方法
|
12月前
|
机器学习/深度学习 算法 数据安全/隐私保护
数据链中常见电磁干扰matlab仿真,对比噪声调频,线性调频,噪声,扫频,灵巧五种干扰模型
本项目展示了用于分析和模拟电磁干扰对数据链系统影响的算法。通过Matlab 2022a运行,提供无水印效果图预览。完整代码包含详细中文注释及操作视频。理论部分涵盖五种常见干扰模型:噪声调频、线性调频、噪声、扫频和灵巧干扰,详细介绍其原理并进行对比分析。灵巧干扰采用智能技术如认知无线电和机器学习,自适应调整干扰策略以优化效果。
|
移动开发 物联网 API
HTML6的最新消息
截至2023年10月,HTML6 仍处于提议和讨论阶段,尚未正式发布。W3C 和 WHATWG 等组织正不断迭代和改进 HTML 规范,采用“增量更新”策略。HTML6 的潜在新特性包括:改进的语义和结构元素、增强的 Web 组件支持、更强大的 API、多媒体功能升级、更好的可访问性和性能优化,以及对物联网的支持。这些改进将使开发者能够创建更复杂、高性能且符合无障碍标准的网页。然而,HTML 的发展是非线性的,新版本没有明确的发布时间,开发者应关注官方动态获取最新信息。
|
5月前
|
敏捷开发 人工智能 监控
任务反馈闭环管理:打造高效执行力的17个关键环节全解析
任务反馈闭环管理是一种确保任务从布置到完成全过程信息透明的管理方法,其核心是通过"计划-执行-反馈-改进"的完整循环,解决传统管理中常见的"任务黑洞"问题。这种机制强调责任明确、流程标准化、反馈及时和持续优化,能够显著提升执行力、团队协同效率和组织的敏捷性。关键环节包括SMART目标设定、标准化执行流程、量化反馈机制和PDCA持续改进。有效的闭环管理需要制度设计、工具支持和流程优化的协同配合,并通过五大KPI(任务完成率、反馈及时率等)进行量化评估。实施闭环管理虽面临员工适应、流程复杂等挑战,但数字化转型和智能化工具的应用正推动其向更高效的方向发展。闭环管理不仅是提升效率的工具,更是促进组织持
608 0
|
12月前
|
人工智能 API 数据库
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
Browser Use 是一款专为大语言模型设计的智能浏览器工具,支持多标签页管理、视觉识别、内容提取等功能,并能记录和重复执行特定动作,适用于多种应用场景。
3143 0
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
265 1
|
数据采集 人工智能 自然语言处理
AI Agent 金融助理0-1 Tutorial 利用Python实时查询股票API的FinanceAgent框架构建股票(美股/A股/港股) AI Finance Agent
金融领域Finance AI Agents方面的工作,发现很多行业需求和用户输入的 query都是和查询股价/行情/指数/财报汇总/金融理财建议相关。如果需要准确的 金融实时数据就不能只依赖LLM 来生成了。常规的方案包括 RAG (包括调用API )再把对应数据和prompt 一起拼接送给大模型来做文本生成。稳定的一些商业机构的金融数据API基本都是收费的,如果是以科研和demo性质有一些开放爬虫API可以使用。这里主要介绍一下 FinanceAgent,github地址 https://github.com/AI-Hub-Admin/FinanceAgent