来了来了，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>
? ?<!-- sample of HTML document -->
</html:html>
?<html:head>?和 HTML6 之前版本的 <head> 標簽一樣。
<html:html>? ?<html:head>
? ? ? ?<!-- Main content would come here -->
? ?</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>
? ? ? ?<!-- website content is placed -->
? ?</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展望！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科大星云诗社动态20210907
- 下一篇： 给1-3年的前端 6 点诚心建议