當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

来了来了，HTML6展望！

發布時間：2025/3/15 HTML 14 豆豆

生活随笔收集整理的這篇文章主要介紹了来了来了，HTML6展望！小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

web前端教程

用大白話，來講編程

HTML5還沒玩出個所以然，HTML6又要來了。

HTML5 概述?

HTML5 是 HTML 語言最受歡迎的版本之一，它支持音頻和視頻、離線存儲、移動端、和標簽屬性等等。還提供了 <article> , <section> ,? ?<header>?這樣的標簽來幫助開發者更好地組織頁面內容。

HTML6 展望?

你有沒有曾經希望能在 HTML 中使用自定義標簽？?

比如：使用 <logo> 來顯示你的網站logo，還有使用 <toolbar> 來顯示工具欄等等。?

我們經常使用 <div id="container"> 和 <div id="wrapper"> 來組織頁面，在 HTML6 里我們希望可以直接使用像 <container> 和 <wrapper> 這樣的自定義標簽。

HTML6 代碼樣例?

<!DOCTYPE html>
<html:html>
? ?<html:head>
? ? ?<html:title>HTML6</html:title>
? ? ?<html:meta type="title" value="Page Title">
? ? ?<html:meta type="description" value="example">
? ? ?<html:link src="css/mainfile.css" title="Styles">
? ? ?<html:link src="js/mainfile.js" title="Script">
? ?</html:head>
? ?<html:body>
? ? ? ?<header>
? ? ? ? ? ?<logo>
? ? ? ? ? ??<html:media type="image" src="x.png">
? ? ? ? ? ?</logo>
? ? ? ? ? ?<nav>
? ? ? ? ? ? ? ?<html:a href="/img1">a1</a>
? ? ? ? ? ? ? ?<html:a href="/img2">a2</a>
? ? ? ? ? ?</nav>
? ? ? ?</header>
? ? ? ?<content>
? ? ? ? ? ?<article>
? ? ? ? ? ? ? ?<h1>Heading</h1>
? ? ? ? ? ? ? ?<h2>Sub-heading</h2>
? ? ? ? ? ?</article>
? ? ? ?</content>
? ? ? ?<footer>
? ? ? ? ? ?<copyright>? 2014</copyright>
? ? ? ?</footer>
? ?</html:body>
</html:html>

在上面的代碼中,你也許注意到了一些奇怪的<html:x>標簽,它們是 W3C 和 HTML6 規范中在命名空間里定義的標簽。

例如: <html:title> 負責設定你瀏覽器的標題欄文字，<html:media>負責顯示圖片等等。

用戶可以自己定義標簽以便 JavaScript 和 CSS 識別和處理,這樣頁面代碼會更易讀,語義更清晰。

HTML6 APIs?

HTML6 的標簽前帶有命名空間，如： <html:html> ,? <html:head> 等等。

<!DOCTYPE html>
<html:html>
? ?
</html:html>

?<html:head>?和 HTML6 之前版本的 <head> 標簽一樣。

<html:html>
? ?<html:head>
? ? ? ?
? ?</html:head>
</html:html>

?<html:link> 和 HTML6 之前版本的 <link> 標簽類似。

<html:html>
? ?<html:head>
? ? ? ?<html:title>HTML6</html:title>
? ? ? ?<html:link src="js/z.js" title="Script">
? ?</html:head>
</html:html>

?<html:body> 和 HTML6 之前版本的 <body> 標簽一樣。

<html:html>
? ?<html:head>
? ? <html:title>A Look Into HTML6</html:title>
? ?</html:head>
? ?<html:body>
? ? ? ?
? ?</html:body>
</html:html>

?<html:a> 和 HTML6 之前版本的 <a> 標簽類似,區別是 <html:a> 只有 "href" 一個屬性。

<html:html>
? ?<html:head>
? ??<html:title>HTML6</html:title>
? ?</html:head>
? ?<html:body>
? ? ? ?<html:a href="http://url">
? ? ? ? ? ?Go to google.com
? ? ? ?</html:a>
? ?</html:body>
</html:html>

?<html:button> 和 HTML6 之前版本的 <button> 和 <input type="button"> 一樣。

<html:html>
? ?<html:head>
? ? <html:title>HTML6</html:title>
? ?</html:head>
? ?
? ?<html:body>
? ? ? ?<html:button>Click Here</html:button>
? ?</html:body>
</html:html>

?<html:media> 涵蓋了 <img> , <video> , <embed> 等標簽的所有功能。 <html:media> 的好處是你不用根據不同的媒體文件類型使用不同的標簽,媒體的類型由瀏覽器從文件內容(類型屬性,擴展名,和MIME type)中來判斷。

<html:html>
? ?<html:head>
? ? ? ?<html:title>HTML6</html:title>
? ?</html:head>
? ?
? ?<html:body>
? ??<html:media src="img1/logo.jpg" type="image">
?? ?<html:media src="videos/a.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 還未正式發布，希望能夠對你了解 HTML6 有所幫助。

總結

以上是生活随笔為你收集整理的来了来了，HTML6展望！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

来了