【翻译】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规范。