【翻譯】What's new in HTML5

時間 2020-07-17

標籤翻譯 what's new html5 html 欄目 HTML5 简体版

原文原文鏈接

先放上原文連接html

HTML5是什麼

HTML5是HTML的最新版本，且與原有版本有很大的改動。這些改動的目的是將許多開發人員在使用的新方法標準化，也是爲了鼓勵一種web開發的最佳作法。前端

大多數單獨特性的變化是語言總體設計目標的結果。這些目標主要包括：html5

鼓勵使用語義化標籤
樣式設計與內容相分離
推廣輔助功能以及響應式設計
減小HTML，CSS，JavaScript之間的重疊
在消除Flash或java這樣的插件的同時，支持豐富的媒體功能

掌握HTML5不止意味着學習CSS特性代替老的HTML特性。若是你想對HTML5有一個直觀的感覺，最好要理解這些目標如何影響HTML這門語言的發展。java

使用語義化標籤

語義化標籤意味着標籤能夠見文知意，而不是看上去都同樣。例如，<h1>表示標籤內部是標題，若是咱們只是將內部文字加粗加大，就沒有作到語義化。程序員

HTML中早已有一些語義化的標籤，例如h1標籤、a標籤等，但這還不夠。web

在之前的版本中，像頁頭和導航欄這樣的結構元素都用div元素表示，如今咱們引入了新的語義化標籤：canvas

<header>
<nav>
<main>
<article>
<aside>
<section>
<footer>

也有一些表示文章層次的新標籤，例如<address>和<time>標籤，這些幫助搜索引擎和其餘人輕鬆的從頁面中搜尋信息。同時，對於已有元素的形如bold、italic的屬性也被改進或從新定義以達到語義化瀏覽器

樣式設計與內容相分離

在鼓勵語義化標籤的同時，HTML5規範強烈反對無語義的語法——那些只告訴瀏覽器如何解析的語法，例如安全

聲明字體大小和文本顏色
設置文本水平和垂直對齊方式
設置table的border
定義文本或圖片如何換行

大多數支持這些作法的HTML特性已通過時了，少數目前還支持的特性會帶來警告：這是不支持的操做ide

進行分離的緣由主要有兩點：

將樣式寫在CSS中會讓網站更易維護或是從新設計
用戶經過各類不一樣的設備訪問網站。在某一場景下適用的樣式和設計在另外一場景下不必定適用，因此更好的作法是提供語義化信息並讓內容適應上下文

最後一個緣由是：推廣輔助功能以及響應式設計

不是每一個人都和你同樣瀏覽網站

臺式電腦、筆記本、手機、平板電腦等典型設備的屏幕寬度、屏幕寬高比、顯示器分辨率以及用戶的操做體驗等方面都有很大的不一樣，這種差別性應該足以顯示語義化和響應式設計的重要性。而且，不是全部用戶都是普通人。那些視力障礙的殘疾人也會利用各類輔助技術上網。而他們利用的種種設備諸如將網頁內容轉換爲語音的屏幕閱讀器等，依賴於語義化的標籤和樣式設計

減小HTML，CSS，JavaScript之間的重疊

這三種語言決定了前端web頁面

人們上網時不會研究哪些內容是用哪一種語言完成的，它們是彼此平行的，且功能常常重疊。

除了上面列舉的實際考慮，人們也想要定義這三種語言的邊界並限制它們作本身份內的事：

HTML — 內容
CSS — 樣式
JS — 交互邏輯

牢記這一點能夠幫助你決定使用哪一種語言，尤爲是在不止有一種選擇的時候。例如當你想改變某個元素的顏色時，你應該首先考慮使用CSS，而當這種改變是基於用戶的交互時，你就應該使用JavaScript了

在消除Flash或java這樣的插件的同時，支持豐富的媒體功能

隨着帶寬和網速的提高，咱們愈來愈傾向於將互聯網做爲一個多媒體平臺。HTML當初是爲那種文字爲主，或許有少量圖片但沒有豐富的音頻或視頻的文檔創造的。

當人們初次將這些多媒體功能加入到web頁面中時，須要用戶下載特定的瀏覽器插件。這樣的使用體驗不好，限制了用戶的操做，並留下了安全隱患。這種作法要求程序員用諸如Flash和java的語言來寫web頁面的一些核心交互邏輯，而且這些內容對搜索引擎和使用屏幕閱讀器的殘疾人都是不可見的。這是一種缺陷

如今，HTML5提供了用於多媒體的標籤：

<video>用於定義視頻
<audio>用於定義音頻
<canvas>用於定義圖形，如圖表或其餘圖像。
ps：canvas標籤只是容器，圖形要經過JS腳原本繪製

咱們爲何要用HTML5

最直接的回答是：這是HTML當前最新的「正確」版本。

但有些人並不能被這種說法說服。舊式寫法仍然被大多數瀏覽器支持，爲何不就這樣寫呢？這樣更簡單啊

下面是一系列使用HTML5而不是已過期語法的理由，有些是出於實際，有些是出於理念。有些是利他的，有些是利己的：

更易書寫
更易維護
更易重塑
在搜索引擎中有更好的表現
對於殘障人士更友好
有利於內容整合並提供給用戶
對移動端用戶更友好
對網速慢的用戶更友好
更少的影響設計
更易添加多媒體功能
更易製做交互式應用
過期的語法將會被中止支持，將會影響你的網頁

如何使用HTML5

避免過期語法

點擊連接能夠查看過期語法，而且能夠查看它們被拋棄的緣由以及如何用新的標準語法來代替

不過，你不須要記住這個清單中全部的語法，你只須要記住，當你要改變頁面中元素的外觀時，你不應使用HTML，幾乎全部用於改變外觀的HTML特性都已通過時了，留下的那部分也只適用於特定場合。

學會使用新語法

有時候，若是你不知道有些東西是可用的，你就不會想着去用它。例如，若是你不知道video標籤，你也許就不知道如何簡單的將視頻加載到頁面中。

因此，你能夠點此連接查看現代瀏覽器支持的新語法，來了解有哪些可用的方法。

習慣使用CSS

不少過期的語法都是用於改變樣式的，而這如今是CSS的職責。若是你想作一個現代前端開發者，你應該熟練使用CSS

用<!DOCTYPE html>進行聲明

全部HTML5文檔都要以該標籤開頭來指出這是支持HTML5的文檔

不要閉合空標籤

形如<img>、<br>、<hr>這樣的標籤，標籤內部是沒有內容的（對於img標籤，圖片是屬性而不是內容），在之前版本的HTML中，img標籤是這樣寫的<img/>，但如今不須要了，寫爲<img>足矣。

驗證你的頁面

你應該養成習慣來驗證你的頁面是否符合最新規範，W3C提供了標籤驗證服務，容許你快速檢查你的頁面中標籤是否符合HTML5規範。

相關文章

相關標籤/搜索

Thymeleaf 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<