HTML5是web上使用最广泛的标记语言的最新和最伟大的版本。从最后一个版本的语言中有一些很大的变化,如果你没有使用它们,你就错过了一些真正酷的功能。
我们没有空间来覆盖HTML第五版中的每个新元素,但这九个元素是其中最重要的一部分。有关HTML5中新元素和API的更多信息,请务必查看W3学校。
与大多数互联网一样,HTML5已经转向关注语义。现在,标签不再只是用来格式化,它们还被用来告诉浏览器和搜索引擎它们周围的含义。
例如,简单地告诉浏览器它包含一个段落。,我们将稍后讨论,它告诉浏览器它包含页面的主要内容。
语义网仍在发展,我们只是开始触及它能做什么的表面。HTML5正在帮助将语义标记带到互联网的更大部分,这只会有利于语义处理的未来。
标签定义了“独立的、自包含的内容”。当然,最简单的例子是一篇文章。对于这篇文章,我们将在介绍之前打开标签,在结束之后关闭它。
<article>
All of the text in your self-contained section.
</article>
但你也可以用其他方法。例如,许多烹饪博客都有关于菜谱是如何产生的,以及为什么菜谱对作者很重要的个人故事。接下来是菜谱本身。你可以说这些元素中的每一个都是独立的。
在论坛中,每个帖子或帖子都可以被认为是独立的,并且每个帖子或帖子都可以用自己的标签进行标记。在大多数情况下,它将用于页面的主要内容。但请记住,你也可以更创造性地使用它。
与is密切相关。这定义了一个“主题内容分组,通常有一个标题”。。。正确的?
不一定。W3指出,这取决于站点的结构。您可能在页面的不同部分有自包含的内容(例如,想想新闻网站的首页)。然后您可能会在该文章中有一些章节。
<article>
<section>
<h2>Why You Need a DAC</h2>
<p>Everything sounds better.</p>
</section>
<section>
<h2>How to Set up a DAC</h2>
<p>Here's what you need to do . . .</p>
</section>
如果适合您的页面,您甚至可以在节中包含节。记住,一个部分只是一个“内容的主题分组”,你会发现有很多地方可以使用它。
这个元素“应该用作介绍性内容的容器”,简而言之,这是你页面的一部分,它帮助人们理解他们即将阅读的内容。
但别上当--你可以多次使用这个容器。例如,您可以使用它来标识您的博客文章的页面标题和介绍性段落。但您也可以使用它来标记每个部分的介绍性内容。
<article>
<header>
<h1>Everything You Need to Know about DACs</h1>
<p>Here's a useful introduction to DACs...</p>
</header>
The rest of your article goes here.
标题部分通常至少包含一个标题标记——H1、H2等。它们不必这样做,但一般来说,如果您使用的是标题标记,那么很可能会包含标题内容。
W3说页脚标签通常包含“文档的作者、版权信息、使用条款的链接、联系信息等”,你可以把它看作是“内务管理”的东西。
<footer>
Copyright: MakeUseOf, 2017.
<a href="https://www.makeuseof.com/contact/">Contact Us</a>
</footer>
文档还指出,页面上可以有多个页脚部分。不过,将所有这些信息保存在一个位置可能是个好主意。
此标记包含给定页面的导航链接。请注意,只有导航部分获得此标记,而不是页面上的所有链接。用于导航栏和类似工具。
<nav>
<a href="https://www.makeuseof.com/>Home</a>
<a href="https://www.makeuseof.com/about">About</a>
</nav>
这是一个非常简单的标签——仅此而已。使用它来定义导航部分,不要在页面上再次使用它。
HTML5中最有趣的新元素之一是旁白。W3给出了一个有些无益的定义,即“除了所放置的内容之外的一些内容”
简言之,旁白是任何与周围信息相关(但与之分离)的东西。它可以是一个边栏,为您的内容添加细节。当它在一组标记中使用时,它提供了理解主要内容所不需要的附加信息。
例如,如果我们在本文中包含一个侧边栏,提供有关HTML5历史的信息,那将是一个旁白。
但是标签也可以在文章内容之外使用。在这种情况下,它通常用于站点相关信息。我们可以包括一个侧边栏,例如:
<article>
The main article goes here.
<aside>MakeUseOf is focused on bridging the connection between users,
computers, devices and the internet through education.</aside>
The article continues here.
因为这个标签有多种用途,所以可能会让人困惑。如果你记住它是“次要内容”,而且它并不总是需要一个侧边栏,那么你就会对如何使用它有一个更好的想法。
许多网站都有需要显示的信息,但并不突出。也许是照片的版权信息。或者是比赛上的精美印刷品。这种信息正是细节标签的目的。
使用“详细信息”标记时,将创建可以轻松显示的隐藏文本。举个例子:
单击此处查看信息。这里更详细的信息,你不需要马上。
只需单击箭头即可获得详细信息。很简单。创造它同样容易。下面是用于上述示例的代码:
<details>
<summary>
Click here to see information.
</summary>
Here's more detailed information you don't need right away.
</details>
标记定义将显示的句子,而其他内容则隐藏。请注意,您可以在details部分中使用其他标记:headings、secti***等。
还有其他一些很酷的事情可以用HTML来做,即使你不知道多少CSS或JSON。
别担心,你多年来一直使用的标签不会消失。遍历图像标记,让浏览器知道它是一个自包含的图像、图表、代码列表或其他图形。
如果从页面中删除了一个图形,它不会影响内容的流。
进入地物标记并为图像指定标题。它可能看起来像这样:
<figure>
<img src="makeuseoflogo.png" width="800px">
<figcaption>This is our logo!</figcaption>
</figure>
这为您提供了一种向图像添加标题的内置方法。不用再查你的CMS了。
HTML5中的新元素增加了很多功能,尤其是在语义方面。还有用于格式化、标量度量、任务进度等的附加元素。你可以在学校里看到所有的新元素。
但是如果你能掌握这九个,你就可以很好地利用HTML5了。如果你是新来的HTML,一定要看看这些代码的例子!
你开始使用HTML5了吗?您认为哪些新元素最有用?在下面的评论中分享你的想法!
... 如果你不熟悉,Duolingo会用一个闪卡系统教你新的词汇、句子和时态。 ...
... 你可以问它明天的预测,花粉数量会是什么样(对于那些过敏的人来说是一个关键的数据),等等。Poncho会回复你想要的信息,并加入一些有趣的礼物或模因来增加乐趣。 ...
...找、讨论和实施好的东西。 确定你的孩子什么时候准备好接受一个设备:与你的孩子进行艰难但公平的谈话,让他们也陈述他们的情况。 有意义地、负责任地使用社交媒体:孩子们显然会从中受益...
...在GitHub中的帮助文档集合。当你有技术问题或者想知道为什么要这样设计的时候,这是一个很大的帮助。 ...
...已经在所有苹果设备上同步你的密码。在iOS 14中,添加了新的安全建议功能。这将通知您,如果您的密码之一太容易猜测,或如果它是在一个已知的数据泄露。 ...
...题的答案是不,不是的。事情不必总是那么困难。那你为什么要撞那些砖墙?更重要的是,你能做些什么来阻止他们?你没有条理别生气,我是你见过的最没有组织的人之一,我天生就有这种天赋。我可以非常肯定地告诉你,这...