Momo ID：（点击关注）◎◎◎◎◎◎◎◎◎一个┳═┻ﻻ▄
（页面底部留言已开通，欢迎投诉）
●●●
HTML5 是 HTML 标准的下一个版本。 越来越多的程序员开始使用 HTML5 来构建网站。 如果您同时使用 HTML4 和 HTML5，您会发现使用 HTML5 重新创建比从 HTML4 迁移到 HTML5 方便得多。 虽然 HTML5 并没有完全推翻 HTML4，但它们有很多共同点html5新增的标签，也有一些关键的区别。 本文列出了它们之间的 10 个主要区别。
HTML5的标准仍在定制中
首先需要注意的是，尽管HTML5如今风靡一时，HTML5标准仍在起草中，但标准仍在变化。 HTML4 已经有 10 多年的历史了html5新增的标签，而且什么也不会改变。
简化句
HTML5简化了很多微妙的句型，比如doctype声明，你只需要编写它即可。 HTML5 与 HTML5、XHTML1 兼容，但与 SGML 不兼容。
选项卡而不是闪存
Flash给很多Web开发者带来了麻烦。 要在网页上播放Flash需要一堆代码和插件。 标签促使开发者只要使用标签就可以通过UI与用户进行交互。 事实上，目前的标签并不能实现Flash的所有功能，而且很快就会让Flash显得过时，哈哈！
添加并标记
HTML5设计的原则之一是为了更好地突出网站的语义，因此减少了 、 等标签，以清晰地表示网页的结构。
添加
和标签
如同，
而且也有利于理清网页的结构，更有利于SEO。
添加并标记
可用于创建传统菜单以及工具栏和上下文菜单。 标签有助于网页上文本和图像的更专业排版。
添加并标记
这两个标签可能是 HTML5 上最有用的两个标签。 顾名思义，这两个标签是用来播放音频和视频的。
全新的形式
HTML5对和标签做了很多改变，添加了很多新属性，改变了很多属性。
删除并标记
这个改进我还没有理解。 我认为删除这两个标签不会对代码有太大改进。 官方的解释是应该使用CSS来代替这两个标签。 但我仍然认为这两个标签对于简单文本来说很方便。
10
删除、标记
我不记得这个标签以前是什么时候用过的。
干货！免费发放腾讯中级讲师网页设计教程
☝☝☝
关注网页设计自学平台，99%的努力都在这里
HTML5 的创新：结构之美 2021 年 1 月 10 日 | 字节码
前言
HTML5就像一场革命，正在后Web2.0时代蓬勃进行。
什么是HTML5html5新标签，这里就不用我赘述了。 至于HTML5的创新，根据我的理解，可以概括为语义清晰的标签系统、简化复杂性的富媒体支持、神奇的本地数据存储技术、不需要插件的丰富动画（画布）、以及强大的API支持。 不管怎样，HTML5让人机交互、人网交互变得更加舒适、适合用户。 前些年，支持富媒体应用和本地存储的头晕眼花现在已经不再是浏览器的痛了。 HTML5革命的初衷是将Web从内容平台推向标准化的应用平台，并统一各平台阵营的标准。
在这篇文章中，我将开始讨论 HTML5 的一项创新：语义更清晰、更简单的结构。
从“头”开始
标准的 XHTML 后台代码应如下所示：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
head>
你还记得吗？你去死记硬背吗？ 其实并不是！ 我们只需要机械复制和粘贴。
我们来看看标准的 HTML5 后台是什么样子的：
doctype html>
meta charset=gb2312>
哪个复杂哪个简单，不用我多说。 是的，HTML5的脖子可以这么简单，很容易被记住！ 此外，最后一个尖括号之前的大写、冒号和反斜杠将被忽略。
为什么可以这么松呢？ 当然，如果XHTML是以text/html的形式发送的，浏览器也可以很好的解析，浏览器并不关心代码的句型。 因此，HTML5是形而上的。 它可能会破坏一些原始标准，但在浏览器中仍然可以表现良好。
其实为了方便团队协助和后续维护，我们还是应该统一一种自己喜欢的写法，例如：
doctype html>
html>
head>
meta charset="gb2312" />
...
head>
body>
...
body>
html>
另外，HTML5目前还不是所有浏览器都支持，但这个能节省100多个字节的大脑（对于日PV百万以上的网站，可以节省大量流量）已经很完美了。 兼容的。 如果研究过浏览器解析模式的话应该知道，如果没有定义doctype，页面会触发特有的模式，而只要定义了浏览器，就可以在不指定某种类型的情况下，以标准模式解析页面DTD。
新的语义标签系统
语义编码是一个合格的后端开发人员必备的技能，但随着网页的逐渐丰富，用原来的xhtml标签去语义化似乎早已不可能了。 上帝说：“要有光！” 还有光。 因此，HTML5提供了一系列新的标签和相应的属性来反映现代网站的典型语义。 践行真理。 或者写一个反例：
div id="header">
div class="hgroup">
h1>网站标题h1>
h1>网站副标题h1>
div>
div id="nav">
ul>
li>HTML 5li>
li>CSSli>
li>JavaScriptli>
ul>
div>
div>
div id="left">
div class="article">
p>这是一篇讲述HTML 5新结构标签的文章。p>
div>
div class="article">
p>这还是一篇讲述HTML 5新结构标签的文章。p>
div>
div>
div id="aside">
h1>作者简介h1>
p>Mr.Think，专注Web前端技术的凡夫俗子。p>
div>
div id="footer">
页面的底部
div>
里面是博客页面HTML的简单部分，由背面、文章展示区、右栏、底部组成。 编码整洁并且符合XHTML的语义，尽管它在HTML5中也能表现良好。 而对于浏览器来说，这是一段不区分权重的代码，而不是一个让机器理解语义来定义对应块的标签。 例如，标准浏览器（如Firefox、Chroome甚至新版IE）都有一个快捷键，可以引导客户直接跳转到页面的导航，但问题是所有的块都是用DIV定义的，但是DIV 的 ID 值是由开发者确定的，因此浏览器不知道哪一块应该是导航链接。 新的HTML5标签的出现正好填补了这一空白。 那么，里面的代码在HTML5中可以这样写：
header>
hgroup>
h1>网站标题h1>
h1>网站副标题h1>
hgroup>
nav>
ul>
li>HTML 5li>
li>CSSli>
li>JavaScriptli>
ul>
nav>
header>
div id="left">
article>
p>这是一篇讲述HTML 5新结构标签的文章。p>
article>
article>
p>这还是一篇讲述HTML 5新结构标签的文章。p>
article>
div>
aside>
h1>作者简介h1>
p>Mr.Think，专注Web前端技术的凡夫俗子。p>tgcode
aside>
footer>
网页底部
footer>
本来，HTML的页面结构可以如此漂亮，无需注释，一眼就能看懂。 对于浏览器来说，找到对应的块将不再手足无措。
如何使用 HTML5 新标签构建元素
通过前面的例子，我们了解到HTML5的新标签是结构上的创新，但是切换到实际使用时如何正确使用呢？ 我想这也是很多HTML5学习者想问的问题。 就像XHTML语义一样，HTML5语义标签的使用也应该遵循：每个标签都有其特定的含义，而语义就是让我们在适当的位置使用适当的标签，更好地让人和机器（机器可以理解为浏览器）理解为搜索引擎）一目了然。 例如，header标签通常tgcode是页面的第一个块元素（header标签也可以用在type的belly元素中，比如文章块的标题），其中包含页面的主题信息; nav标签通常用来包装导航信息； 页脚通常用来包裹页面的顶部信息； 等等。
以下是我参考HTML5指南列出的结构类常用新标签的语义解释和使用指南：
标签
指导解释：定义章节或文档的脚注。
使用说明：通常用于包含页面的颈部，也可以用于其他区域的背面，例如文章的腹部：
header>
hgroup>
h1>网站标题h1>
h1>网站副标题h1>
hgroup>
header>
标签
指南解释：用于组合网页或章节的标题。
使用指南：用于标题类的组合，例如文章的标题和副标题：
hgroup>
h1>这是一篇介绍HTML 5结构标签的文章h1>
h2>HTML 5的革新h2>
hgroup>
标签
指南解读：定义导航链接的部分。
使用指南：用于定义页面的导航部分：
nav>
ul>
li>HTML 5li>
li>CSSli>
li>JavaScriptli>
ul>
nav>
标签
定义文章以外的内容。 旁白的内容要与文章的内容相关。
使用指南：用于分节内容，它将在文档流中开始一个新的节，通常用于与文章内容相关的侧边栏：
aside>
h1>作者简介h1>
p>Mr.Think，专注Web前端技术的凡夫俗子。p>
aside>
标签
指南解释：定义文档中的一个部分。 例如 tgcode 章节、页眉、页脚或文档的其他部分。
使用指南：用于节内容，它将在文档流中开始一个新的部分：
section>
h1>section是什么？h1>
h2>一个新的章节h2>
article>
h2>关于sectionh1>
p>section的介绍p>
...
article>
section>
标签
指南定义：定义章节或文档的页码。 通常，它将包含作者姓名、文档创作日期和/或联系信息。
使用指南：通常用于包裹整个页面的一般顶部，也可以用于其他区域的顶部，例如文章顶部：
footer>
COPYRIGHT@Mr.Think
footer>
标签
指导解读：定义外部内容。例如来自外部新闻提供商的新文章，或者来自博客的文本，或者来自峰会的文本
书。 或来自其他外部来源的内容。
使用指南：顾名思义html5新标签，通常用在文章块中：
article>
header>
hgroup>
h1>这是一篇介绍HTML 5结构标签的文章h1>
h2>HTML 5的革新h2>
hgroup>
time datetime="2011-03-20">2011.03.20time>
header>
p>文章内容详情p>
article>
标签
指南定义：用于组合元素。
使用说明：多用于图片与图片说明的结合：
figure>
img src="img.gif" alt="figure标签" title="figure标签" />
figcaption>这儿是图片的描述信息figcaption>
figure>
标签
指导解释：定义菜单列表。 当您想要列出表单控件时，请使用此标记。
使用说明：在菜单块中使用，定义菜单列表或菜单选项：
menu>
li>HTML 5li>
li>CSSli>
li>JavaScriptli>
menu>
HTML5的其他新标签这里就不一一解释了，请自行查看指南。
当然这种东西，就像XHTML的div、h1、inpu等标签一样，只要多练习，就很容易运用自如。
关于兼容性
如果你是一个喜欢研究、关注后端的人，你应该知道HTML5新标签已经广泛应用于在线商店的页面结构中。 所以，我想说的是，只要你勇于尝试，兼容性不是问题。 网上有很多兼容的方式（这篇文章讲的是结构，哈~）。
后记
任何新技术都需要一个适应的过程。 如果你打算成为一名优秀的Web后端开发人员，那么你就必须不断尝试并接受最新的后端技术。
孙文曾经说过，要想体验文明的幸福，就必须经历文明的苦恼。 人类革命如此，HTML5革命亦如此。 随着IE的逐渐衰落，各大浏览器厂商一下子进入了战国时期，群雄逐鹿。 对于开发者来说，我们只希望各大浏览器厂商尽可能遵守同一标准，而不是竞争后分崩离析。 因为，高效、完美地将同一个应用呈现给不同的用户才是我们的最终目标。
这样，本文就从页面的doctype开始，然后利用HTML5新标签构建了更加语义化的页面结构，然后对与页面结构相关的新标签进行了讲解。 相信你对HTML5的结构新标签有了新的认识。 如果你有兴趣，那就打开你的IDE，编写一段由HTML5的新标签构建的代码，然后用CSS勾勒出你宏伟的新蓝图吧！
发表评论