大神讓你10分鐘讀懂html 5

加語義化標簽(開發者可以更加優雅，瀏覽器也可以更好的理解)

搜索引擎檢索，為什么會檢索標題，不會檢索“簡介” ? 這是因為結構的不同。但是結構每個人的class命名習慣都會不一樣，無法做到規范，于是不如出新的標簽。

在有一些低版本的瀏覽器中，h5標簽不兼容，會被認為是div，并不會影響我們的功能。也可以在 script 中新加一行代碼 document.createElement("header") ,但是用了多少標簽，就要寫多少行的 document.createElement("") ，于是有一個第三方的插件 html5shiv.js

使用方法：

<!--[if lt IE 9]><script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script><![endif]-->

注意：在頁面中調用Html5.js文件必須添加在頁面的head元素內，因為IE瀏覽器必須在元素解析前知道這個元素，所以這個js文件不能在頁面底部調用。

應用程序標簽

DataList

progress

屬性

鏈接關系描述

鏈接到的地方和當前文檔的關系是什么

<a href="01-sementic-tags.html" rel="pre"></a><a href="02-application-tags.html" rel="next"></a>

rel還出現在其他地方，

<link rel="stylesheet" href="css.css">

link本身不會請求文件，而是rel="stylesheet"才會請求文件

目前國內不流行

結構數據標記

<div itemscope itemtype="www.baidu.com"> <div itemprop="主人">主人</div>
 <div itemprop="小狗">小狗一</div>
 <div itemprop="小狗">小狗二</div> </div>

可以方便搜索引擎重點抓取

很高級，但是只有google支持

ARIA

無障礙富互聯網應用程序

<label for="myinput">請輸入您的名字</label>
<input type="text" id="myinput">

為什么上面一定要label for呢？

是為了搜索引擎的理解

自定義屬性

也就是 data-* 之類的屬性，他們沒有功能性，只是為了保存dom節點的強相關的數據。

<ul id="list"></ul>
 <div id="info"></div>
 <script> var data={ 01:{
 name:"張三",
 age:18
 }, 02:{
 name:"李四",
 age:19
 }, 03:{
 name:"王五",
 age:20
 }
 }; for (var X in data) { var item=data[X]; var oli=document.createElement("li"); var olist=document.getElementById("list");
 oli.appendChild(document.createTextNode(item.name));
 olist.appendChild(oli);
 oli.setAttribute("data-name",item.name);
 oli.setAttribute("data-age",item.age );
 oli.addEventListener("click", function () { var name=this.getAttribute("data-name"); var age=this.getAttribute("data-age");
 alert(age+name)
 })
 }
 </script>

上面的代碼用 setattribue 方法來定義了自定義屬性，然后用getattribute又獲取到了自定義屬性。js也針對自定義屬性出了新的api,也就是 dataset['string'] ,使用這個api可以代替 getAttribute 的方法：

oli.addEventListener("click",function(){ console.log(this.dataset["name"]);
})

智能表單

新的表單類型

<input type="date">
<input type="color">
<input type="range">

但是盡量不要在pc端使用，用戶體驗較差，不能自定義樣式。主要適配在移動端。

虛擬鍵盤適配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

上面的代碼在pc端上沒有用處，主要是用在移動端可以根據不同的input的 type 來喚出不同的鍵盤。

雖然 input type="email" 看似可以驗證表單，但是真是太弱了，只是驗證有沒有 @ ，真的要驗證的話，還是要自己寫正則表達式

頁面多媒體

音頻

<audio src="A Moment of Reflection.mp3" controls="controls"></audio>

但是默認的播放器太丑了，我們一般是自己寫一個button，然后為這個button添加一個事件：

<script> var btn=document.getElementById("btn"); var btn1=document.getElementById("btn1"); var audio=document.getElementsByTagName("audio")[0];
 btn.addEventListener("click", function () {
 audio.play();
 })
 btn1.addEventListener("click",function (argument) {
 audio.pause();
 })
</script>

視頻

<video src="A Moment of Reflection.mp4" controls="controls"></video>

但是我們一般不是這樣用的，因為視頻有版權，有些瀏覽器只能支持一兩個，我們一般是source：

<video controls="controls"><source src="下午03-網頁多媒體.web.mp4"><source src="下午03-網頁多媒體.web.ogg"><p>您的瀏覽器不支持</p></video>

還有一個插件，是可以幫我們做兼容的，是https://html5media.info/的組件，ie7以上都可以兼容。

以下是多媒體的屬性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，現在還沒有人用

canvas

svg

優勢：體積小，質量高，效果好，可控程度高。

者｜Next.js 團隊

譯者｜無明

出處丨前端之巔

在經過 26 次金絲雀發布和 340 萬次下載之后，近日，我們正式發布了 Next.js 7.0，新功能包括：

DX 改進：啟動速度提高 57％，重新編譯速度提高 42％；
使用 react-error-overlay 更好地報告錯誤；
編譯管道升級：Webpack 4 和 Babel 7；
標準化的動態導入；
靜態 CDN 支持；
較小的初始 HTML 載荷；
App 和 Page 之間的 React Context（服務器端渲染）。

DX 改進

Next.js 的主要目標之一是提供最佳的性能和開發者體驗。最新版本為構建和調試管道帶來了很多重大改進。

得益于 Webpack 4 和 Babel 7，以及我們對代碼庫做出的很多改進和優化，Next.js 現在在開發過程中的啟動速度提高了 57％。

我們新增了增量編譯緩存，讓變更代碼的構建速度快了 40％。

以下是我們收集的一些示例數據：

因為使用了 webpackbar，在開發和構建的同時可以看到更好的實時反饋：

使用 react-error-overlay 更好地報告錯誤

準確地渲染錯誤對于良好的開發和調試體驗來說是至關重要的。到目前為止，我們可以渲染錯誤消息和堆棧跟蹤信息。我們在此基礎上更進一步，我們使用 react-error-overlay 來豐富堆棧跟蹤信息：

準確的服務器端和客戶端錯誤位置；
高亮顯示錯誤來源；
完整的堆棧跟蹤信息。

這是之前和之后的錯誤顯示比較：

另外，借助 react-error-overlay，你只需單擊特定代碼塊就可以輕松打開文本編輯器。

支持 Webpack 4

從發布第一個版本以來，Next.js 一直使用 Webpack 來打包代碼和重用豐富的插件。Next.js 現在使用了最新的 Webpack 4，其中包含很多改進和 bug 修復。

支持.mjs 源文件；
代碼拆分改進；
更好的搖樹優化（刪除未使用的代碼）支持。

另一個新功能是支持 WebAssembly，Next.js 甚至可以進行 WebAssembly 服務器渲染。

這里有一個例子：

https://github.com/zeit/next.js/tree/canary/examples/with-webassembly

CSS 導入

因為使用了 Webpack 4，我們引入了一種從捆綁包中提取 CSS 的新方法，這個插件叫作 mini-extract-css-plugin（https://github.com/webpack-contrib/mini-css-extract-plugin）。

mini-extract-css-plugin 提供了 @zeit/next-css、@zeit/next-less、@zeit/next-sass 和 @zeit/next-stylus。

這些 Next.js 插件的新版本解決了與 CSS 導入相關的 20 個問題，例如，現在支持 import() 動態導入 CSS：

// components/my-dynamic-component.js
import './my-dynamic-component.css'
export default () => <h1>My dynamic component</h1>
// pages/index.js
import dynamic from 'next/dynamic'
const MyDynamicComponent = dynamic(import('../components/my-dynamic-component'))
export default () => <div>
 <MyDynamicComponent/>
</div>

一個重大改進是現在不再需要在 pages/_document.js 中添加一下內容：

<link rel="stylesheet" href="/_next/static/style.css" />

Next.js 會自動注入這個 CSS 文件。在生產環境中，Next.js 還會自動向 CSS URL 中添加內容哈希，當文件發生變更時，最終用戶就不會得到舊文件，并且能夠獲得不可變的永久緩存。

簡而言之，要在 Next.js 項目中支持導入.css 文件，只需要在 next.config.js 中注冊 withCSS 插件：

const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

標準化動態導入

從版本 3 開始，Next.js 就通過 next/dynamic 來支持動態導入。

作為這項技術的早期采用者，我們必須自己編寫解決方案來處理 import()。

因此，Next.js 逐漸缺失 Webpack 后來引入的一些功能，包括 import()。

例如，無法手動命名和捆綁某些文件：

import(/* webpackChunkName: 'my-chunk' */ '../lib/my-library')

另一個例子是在 next/dyanmic 模塊之外使用 import()。

從 Next.js 7 開始，我們不再直接使用默認的 import()，Next.js 為我們提供了開箱即用的 import() 支持。

這個變更也是完全向后兼容的。使用動態組件非常簡單：

import dynamic from 'next/dynamic'
const MyComponent = dynamic(import('../components/my-component'))
export default () => {
 return <div>
 <MyComponent />
 </div>
}

這段代碼的作用是為 my-component 創建一個新的 JavaScript 文件，并只在渲染< MyComponent/>時加載它。

最重要的是，如果沒有進行渲染，< script>標記就不會出現在初始 HTML 文檔中。

為了進一步簡化我們的代碼庫并利用優秀的 React 生態系統，在 Next.js 7 中，我們使用 react-loadable 重寫了 next/dynamic 模塊。這為動態組件引入了兩個很棒的新特性：

使用 next/dynamic 的 timeout 選項設置超時；
使用 next/dynamic 的 delay 選項設置組件加載延遲。例如，如果導入非常快，可以通過這個選項讓加載組件在渲染加載狀態之前等待一小段時間。

支持 Babel 7

Next.js 6 中就已經引入了 Babel 7 測試版。后來 Babel 7 穩定版本發布，現在，Next.js 7 正在使用這個新發布的穩定版 Babel 7。

一些主要特性：

Typescript 支持，在 Next.js 中可以使用 @zeit/next-
typescript；
片段語法<>支持；
babel.config.js 支持；
通過 overrides 屬性將預設 / 插件應用于文件或目錄的子集。

如果你的 Next.js 項目中沒有自定義 Babel 配置，那么就不存在重大變更。

但如果你具有自定義 Babel 配置，則必須將相應的自定義插件 / 預設升級到最新版本。

如果你從 Next.js 6 以下的版本升級，可以使用 babel-upgrade 工具。

除了升級到 Babel 7 之外，當 NODE_ENV 被設置為 test 時，Next.js Babel 預設（next/babel）現在默認將 modules 選項設置為 commonjs。

這個配置選項通常是在 Next.js 項目中創建自定義.babelrc 的唯一理由：

{
 "env": {
 "development": {
 "presets": ["next/babel"]
 },
 "production": {
 "presets": ["next/babel"]
 },
 "test": {
 "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
 }
 }
}

使用 Next.js 7，這將變成：

{
 "presets": ["next/babel"]
}

現在可以刪除.babelrc，因為在沒有 Babel 配置時，Next.js 將自動使用 next/babel。

較小的初始 HTML 載荷

Next.js 在預渲染 HTML 時會將頁面內容放在< html>、< head>、< body>結構中，并包含頁面所需的 JavaScript 文件。

這個初始載荷之前約為 1.62kB。在 Next.js 7 中，我們優化了初始 HTML 載荷，現在為 1.5kB，減少了 7.4％，讓頁面變得更加精簡。

我們主要通過以下幾種方式來縮小文件：

移除 __next-error div；
內聯腳本被最小化，在未來的版本中，它們將被完全移除；
去掉未使用的 NEXT_DATA 屬性，例如 nextExport 和 assetPrefix 屬性。

靜態 CDN 支持

在 Next.js 5 中，我們引入了 assetPrefix 支持，讓 Next.js 可以自動從某個位置（通常是 CDN）加載資源。如果你的 CDN 支持代理，可以使用這種辦法。你可以像這樣請求資源：

https://cdn.example.com/_next/static/<buildid>/pages/index.js

通常，CDN 先檢查緩存中是否包含這個文件，否則直接從源中請求文件。

不過，某些解決方案需要將目錄直接預先上傳到 CDN 中。這樣做的問題在于 Next.js 的 URL 結構與.next 文件夾中的文件夾結構不匹配。例如我們之前的例子：

https://cdn.example.com/_next/static/<buildid>/pages/index.js
// 映射到：
.next/page/index.js

在 Next.js 7 中，我們改變了.next 的目錄結構，讓它與 URL 結構相匹配：

https://cdn.example.com/_next/static/<buildid>/pages/index.js
// 映射到：
.next/static/<buildid>/pages/index.js

盡管我們建議使用代理類型的 CDN，但新結構也允許不同類型 CDN 的用戶將.next 目錄上傳到 CDN。

styled-jsx 3

我們也引入了 styled-jsx 3，Next.js 的默認 CSS-in-JS 解決方案，現在已經為 React Suspense 做好了準備。

如果一個組件不屬于當前組件作用域的一部分，那么該如何設置這個子組件的樣式呢？例如，如果你將一個組件包含在父組件中，并只有當它被用在父組件中時才需要特定的樣式：

const ChildComponent = () => <div>
 <p>some text</p>
</div>
export default () => <div>
 <ChildComponent />
 <style jsx>{`
 p { color: black }
 `}</style>
</div>

上面的代碼試圖選擇 p 標簽，但其實不起作用，因為 styled-jsx 樣式被限定在當前組件，并沒有泄漏到子組件中。解決這個問題的一種方法是使用:global 方法，將 p 標記的前綴移除。但這樣又引入了一個新問題，即樣式泄露到了整個頁面中。

在 styled-jsx 3 中，通過引入一個新的 API css.resolve 解決了這個問題，它將為給定的 syled-jsx 字符串生成 className 和< style>標簽（styles 屬性）：

import css from 'styled-jsx/css'
const ChildComponent = ({className}) => <div>
 <p className={className}>some text</p>
</div>
const { className, styles } = css.resolve`p { color: black }`
export default () => <div>
 <ChildComponent className={className} />
 {styles}
</div>

這個新 API 可以將自定義樣式傳給子組件。

由于這是 styled-jsx 的主要版本，如果你使用了 styles-jsx/css，那么在捆綁包大小方面有一個重大變化。在 styled-jsx 2 中，我們將生成外部樣式的“scoped”和“global”版本，即使只使用“scoped”版本，我們也會將“global”版本包含在內。

使用 styled-jsx 3 時，全局樣式必須使用 css.global 而不是 css，這樣 styled-jsx 才能對包大小進行優化。

App 和 Page 之間的 React Context（服務器端渲染）

從 Next.js 7 開始，我們支持 pages/_app.js 和頁面組件之間的 React Context API。

以前，我們無法在服務器端的頁面之間使用 React 上下文。原因是 Webpack 保留了內部緩存模塊而不是使用 require.cache，我們開發了一個自定義 Webpack 插件來改變這種行為，以便在頁面之間共享模塊實例。

這樣我們不僅可以使用新的 React 上下文，在頁面之間共享代碼時還能減少 Next.js 的內存占用。

社區

從 Next.js 首次發布以來，就已獲得相當多的用戶，從財富 500 強公司到個人博客。我們非常高興看到 Next.js 的采用量一直在增長。

目前，超過 12,500 個被公開索引的域名在使用 Next.js。我們有超過 500 名貢獻者，他們至少提交過一次代碼。在 GitHub 上，這個項目已經有 29,000 個 star。自首次發布以來，已提交了大約 2200 個拉取請求。

Next.js 社區在 spectrum.chat/next-js 上擁有近 2000 名成員。

英文原文

https://nextjs.org/blog/next-7

021年3月31日，中興通訊副總裁、無線標準與工業關系負責人王欣暉受邀在南京舉行的IEEE WCNC 2021（無線通信和網絡學術大會）上發表主題為“Next to Rel-17: 5G-Advanced or 6G?”的演講。本次大會采用線上和線下結合的討論方式，吸引了近300名專家和學者親臨現場，并有100多位專家學者通過遠程接入的方式參與。中興通訊與業界伙伴一起，共同探討無線通信領域的前沿技術，正如大會主題所期待的：“Shaping the Wireless Future – 創造無線未來”。

無線通信網絡的演進從未停歇，基本保持每十年一次的更新迭代。隨著5G基站的大規模部署以及用戶終端的普及，人們開始憧憬下一代通信技術能帶來哪些新的應用和體驗。5G演進和6G愿景成為本次大會的主要話題。

王欣暉在會上表示“從標準和產業化的角度來看，第一個可商用的6G版本預計會在2029~2030年左右出現，在此之前我們還有3~4個版本基于5G技術的演進。從Rel-18開始，我們稱之為5G-Advanced，業界應該致力于進一步挖掘5G網絡的潛力，以提供更為極致的網絡體驗，并適應更多垂直行業的應用場景。基于5G- Advanced的增強網絡一方面可以維持產業繁榮、另一方面可以縮小與6G愿景之間的差距”。

王欣暉進一步強調：“事實上，目前學術界討論非常熱烈的很多6G研究方向并未脫離5G的設計架構，因此只要候選技術成熟度足夠高，就應該被納入5G- Advanced的研究和標準化的范疇之中”。

那么5G- Advanced有哪些驅動場景以及候選技術呢？王欣暉分別從內生AI、基于NR的海量物聯網、下一代工業物聯網、無處不在的網絡覆蓋、安全互信等維度分別進行了詳細闡述。

5G-Advanced應用場景和候選技術

此外，中興在本次WCNC會議中組織了一場圓桌討論，針對目前業界十分熱門的智能超表面（RIS）課題，與業界知名專家學者共同深入探討RIS在5G系統中的潛在應用場景、協議設計、架構和測試、部署規劃等。

在線咨詢

上一篇：JavaScript：class繼承
下一篇：html程序員們都知道的div和span，你知道嗎？