跳到主要内容

HTML5入门

这是第1章的编辑摘录HTML5基础由...出版树屋

所以你渴望开始建立一个网站?到本章结束时,您将完成这一切!

首先,让您的计算机准备好构建网站。这意味着您将安装文本编辑器和许多Web浏览器。我将带您简要介绍一些最流行的文本编辑器,Web浏览器和开发人员工具,以便您决定使用哪些。

将计算机设置为构建网站后,您将了解HTML元素和属性。这些是构成网页的基本构建块。

所有优秀的Web开发人员都应该知道一些事情。也就是说,在本章的最后,您将学习如何验证您编写的HTML代码。您还将了解到,您的网站有时可能会有不同的行为,具体取决于他们在哪个浏览器中查看。

什么是HTML?

超文本标记语言(HTML)是构成万维网上每个网站基础的基本代码。 HTML用于标记文本和其他页面内容,以及用于定义网页的结构。

网页由大量内容文本,图像甚至视频组成。使用HTML语法(计算机程序可以理解的单词和符号的集合)标记这些内容中的每一个。 HTML还用于描述页面的结构,定义它可能具有的每个不同部分(例如标题,内容区域和页脚)。

HTML用于定义页面内容及其结构,但它不负责页面的实际外观 - 元素的颜色,边框和位置。这是Cascading Style Sheets或CSS的工作,您将在本书后面简要介绍。在构建网站时还常用另一种语言。 JavaScript是一种与HTML和CSS结合使用的编程语言,用于构建网页的交互功能。在本书的后面部分,您将使用JavaScript为视频构建自定义播放控件。

HTML总是在不断发展。 HTML的最新版本是HTML5,这是本书的主题。 HTML5的官方规范概述了大量新功能,使Web开发人员能够创建比使用旧版HTML构建的网站更快,更智能的网站。这些新功能包括LocalStorage(使开发人员能够在用户的计算机上存储数据)和HTML5视频(可在Web浏览器中播放视频而无需插件,如Flash)以及新的交互元素,如日期选择器和滑块。

HTML5这个术语近年来已经成为一个流行词,客户,老板和开发人员都用它来描述Web技术之旅的下一步。虽然这种用法很常见,但并不严格准确。 HTML5只是大量标准的一部分,统称为新兴网络技术(NEWT)。除HTML5外,NEWT还包括WebGL(浏览器中的3D图形)和GeoLocation(查找用户位置)等内容。尽管GeoLocation并不是HTML5的严格组成部分,但您将在本书的后面部分了解它,因为它非常酷,我无法将其排除在外。

设置工具

在开始构建自己的网页之前,首先需要设置一些工具。您的计算机上可能至少安装了一个浏览器,可能还有一个文本编辑器,但是您需要扩展浏览器范围,并且还需要添加一些专业的开发人员工具。

浏览器

有许多不同的Web浏览器可供使用,您必须在所有最受欢迎的网站中测试您的网站,以确保您的网站的外观和行为符合您的要求。我建议安装以下五种浏览器中的每一种的最新版本(如果它们适用于您的操作系统):

谷歌浏览器

谷歌的网络浏览器Chrome以快速和安全着称。它还拥有对最新HTML5和CSS3技术的强大支持。 Chrome有一些很棒的开发人员工具,您将在本书后面使用这些工具与您创建的网页进行交互。只要有更新的版本,Google Chrome就会自动更新。您可以下载最新版本的Chrome这里

火狐浏览器

Firefox最大的优势之一是其庞大的扩展库,其中包含大量优秀的工具,包括非常流行的Firebug开发人员工具,可帮助您构建网站。浏览器也对大多数HTML5技术提供了很好的支持。 Firefox还具有自动更新功能,类似于Google Chrome中的功能。下载最新版本这里

Apple Safari

Apple的Safari浏览器很受Mac和Windows用户的欢迎。在尝试诊断网页中的问题时,内置的开发人员工具也很有用。与Google Chrome一样,Safari也对一些最新的HTML5技术提供了很好的支持。您可以获取最新版本的Safari这里

Microsoft Internet Explorer

Internet Explorer(IE)仍然是目前使用的最流行的浏览器之一。多年来,微软已经发布了许多版本的IE,值得注意的是并非所有Windows操作系统都支持最新版本的IE。例如,Windows XP不支持IE8之后的任何Internet Explorer版本。这意味着,如果不安装额外的插件或其他浏览器,Windows XP用户将永远无法获得最新的HTML5功能。一些旧版本的浏览器受到了错误的困扰,这意味着开发人员不得不花费数小时的额外时间来正确显示他们的网页。幸运的是,微软在最新版本的IE(9和10)方面做得很好,并且还成功地整合了一些最新的HTML5技术。执行Windows更新时,通常会下载最新版本的IE;否则你可以得到它这里

歌剧

Opera近年来越来越受欢迎,部分原因在于其移动浏览器的成功。 Opera软件是HTML5规范开发的推动力,并在其最新版本的浏览器中实现了许多HTML5技术。与Chrome一样,Opera也具有自动更新功能。您可以下载最新版本的Opera这里

文字编辑

您的文本编辑器是您忠实的伙伴。您将使用它来编写所有HTML,CSS和JavaScript代码。一个好的文本编辑器实际上可以提高您的工作效率,并帮助您快速识别编码时可能出现的任何错误。在本节中,我列出了四种最流行的Mac,Windows和Linux文本编辑器,但还有许多其他选择。

崇高文本2由于其灵活性和强大的功能,它在开发人员中迅速普及。它在最新的树屋视频中使用,并提供大量功能,包括主题,代码完成和片段。 Sublime Text 2不是免费的,但许多开发人员发现购买它是一项很好的投资,因为它有助于提高您的工作效率。目前,版本适用于Mac,Linux和Windows。你可以下载Sublime Text 2 athttp://www.sublimetext.com/2。图1-1显示了Sublime Text 2的运行情况。

Figure 1-1 Editing an HTML document with Sublime Text 2

图1-1使用Sublime Text 2编辑HTML文档

的TextWrangler是一个很好的通用文本编辑器,可用于Mac。与Sublime Text 2不同,TextWrangler是免费的。你可以从下载http://www.barebones.com/products/TextWrangler/

记事本+ +是Windows开发人员的流行文本编辑器,最好的是它完全免费(如啤酒)。它支持许多不同的编程语言,包括您将在本书中使用的语言。下载Notepad ++ Athttp://notepad-plus-plus.org/download/v6.1.html

Gedit中是一个简单的文本编辑器,可用于使用GNOME桌面环境的所有Linux版本(例如Ubuntu)。它支持主题和语法高亮度,您还可以在线查找大量插件。像Notepad ++一样,gedit是免费的。你可以下载gedithttp://gedit.en.softonic.com/download

您需要一个文本编辑器来开始创建您的网站,所以如果您的计算机上没有,请立即下载并安装它。

开发者工具

有时,当您构建网站时,您希望快速操作页面样式或测试一些JavaScript,而无需返回文本编辑器进行更改。这就是开发人员工具的用武之地。所有最流行的Web浏览器都内置了开发人员工具,或者具有可用的扩展,可以提供类似的功能。你会发现你已经习惯了所选浏览器中可用的工具;但是,如果您在测试网站时必须考虑兼容性问题,了解如何在其他浏览器中访问和使用开发人员工具非常有用。

在本节中,您将学习如何访问(并在某些情况下安装)Chrome,Firefox,Safari,Opera和Internet Explorer的开发人员工具。

Chrome开发者工具- 通过单击地址栏右侧的小扳手并从“工具”菜单中选择“开发人员工具”选项,从Chrome浏览器访问Chrome开发人员工具。或者,您可以右键单击屏幕上的元素,然后从上下文菜单中选择“检查元素”。图1-2显示了使用Chrome开发人员工具检查的Google UK主页。

Chrome开发者工具包含许多功能,可帮助您与网页进行互动和监控。您将在本书中的示例中使用最多的工具可以在开发人员工具窗口的Elements,Scripts和Console选项卡中找到。我在本书中使用了Chrome开发人员工具。

Firebug For Firefox-Firebug没有捆绑全新安装的Firefox,因此在Firefox打开的情况下,您需要从中下载最新版本Http://getfirebug.com。 Firebug可以免费使用。

安装Firebug扩展后,通过选择ToolsWeb DeveloperFirebugOpen Firebug来访问它。与Chrome开发人员工具一样,您也可以通过右键单击页面上的元素并从上下文菜单中选择Inspect Element with Firebug来访问Firebug。

Figure 1-2 Inspecting a web page using the Chrome developer tools

图1-2使用Chrome开发人员工具检查网页

您可以通过单击左上角的Firebug图标并从Firebug UI位置菜单中选择一个选项来更改Firebug工具面板的位置。

蜻蜓为歌剧-Opera的Dragonfly开发人员工具直接内置于浏览器中,因此无需安装扩展。您可以访问ToolsAdvanced并选择Opera Dragonfly来访问Dragonfly。

Dragonfly拥有许多您期望从现代浏览器中获得的标准开发人员工具。在构建本书中的示例时,Documents and Scripts选项卡将特别有用。请注意,在发布新版本时,开发人员工具会自动更新。

Safari中的Web Inspector-Safari的Web Inspector开发人员工具与Google Chrome中的开发人员工具类似。那是因为它们都是基于WebKit中的Web Inspector工具构建的。

在您可以访问Safari中的开发人员工具之前,您需要启用它们。要执行此操作,请按Ctrl键加上Windows中的逗号键或命令加上Mac上的逗号键,打开“首选项”窗格。在“首选项”窗格中,单击“高级”选项卡,然后选择菜单栏中标记为“显示开发菜单”的复选框。您现在应该看到“开发”菜单出现在屏幕顶部的菜单栏中。如果在Windows上使用Safari,则可能需要通过单击右上角的cog并选择“显示”菜单栏来显示菜单栏。您可以从Developer下拉菜单中访问Safari的所有开发人员工具,包括Web Inspector。

Safari还提供了许多其他开发人员工具,使您可以轻松关闭缓存,图像,样式和JavaScript。在测试网站在功能较弱的浏览器中的外观和行为时,这些工具非常有用。

IE开发人员工具-Internet Explorer有一组内置的开发人员工具,可以通过“工具”菜单或按键盘上的F12进行访问。

IE开发人员工具包含您期望的所有功能,包括元素,CSS和JavaScript检查器以及控制台。还有一些工具可以帮助您在旧版本的IE上测试您的网站。这些工具很有用,因为某些旧版本的Internet Explorer存在可能影响您的网页向用户显示方式的错误。还有一个Validate菜单,其中包含使用W3C验证器轻松验证您正在查看的页面的链接。您将在本章后面了解网页验证。

构建您的第一个HTML5网页

你还在这里,你已经设置了工具。大!现在是时候开始编写一些真正的标记了。在本节中,您只需三个简单的步骤即可使用HTML构建您的第一个网页。

书中练习的所有下载代码文件均可从本书的网站获得http://www.wiley.com/go/treehouse/html5foundations,并按章节分组到文件夹中。本练习的代码可以在文件夹1的第1章文件夹中找到。

1.首先使用您选择的文本编辑器创建一个名为index.html的新文件,然后将其保存在桌面上。网页文件以.html文件扩展名保存。此扩展程序告诉Web浏览器它应该将内容读取为HTML,构造相关的页面元素,并应用您提供的样式。例如,如果要将文件另存为.txt文件,浏览器将无法识别它是HTML文件,只是以纯文本显示文件内容(即用户会看到代码) 。

您网站的主页应始终命名为index.html,因为这是当某人访问您网站的根目录时Web服务器将返回的文件。例如,如果访问者访问http://example.org,则Web服务器将在网站的根目录中查找索引文件,即http://example.org/index.html。根目录是Web空间中的顶级文件夹。

2.在index.html文件中键入以下代码。 (此代码也可以从本书的配套网站下载。)

我的第一个网页

你好,世界

3.保存index.html文件。

现在,双击桌面上的文件,在您喜欢的Web浏览器中打开index.html文件。要在计算机上默认浏览器以外的浏览器中打开它,请右键单击该文件,然后从“打开方式”菜单中选择一个程序。这是您访问本书中所有示例的网页文件的方法。

您应该看到一个如图1-3所示的页面。

Figure 1-3 Your first HTML5 web page

图1-3您的第一个HTML5网页

如果您的网页与图中的网页不同,请检查您是否正确输入了所有代码。确保您也检查尖括号内的单词的拼写。

而已!您已成功创建了第一个网页。它真的没有你想象的那么难,是吗?我知道,这不是很丰富多彩或令人兴奋,但很快就会到来。首先,我们来探讨一下这段代码。

构建元素

HTML网页由许多元素组成;将这些视为网页的组成部分。每个元素都有特定的目的;它可能包含一些文本内容,标题,图像或浏览器使用的某些信息。您的示例中的代码包含三个主要元素: 元素,a 元素,和元件。

这些元素又包含一些其他元素,例如a 和<p>(对于段落)元素。您很快就会了解更多相关内容。</ html></p><p><html>在大多数情况下,元素由两个标记组成,即开始标记和结束标记。您可以在将在网页上显示的这些标记之间放置一些内容(例如文本)或更多元素。每个标记都以小于号(<)开头,以大于号(>)结束。结束标记在小于号后面也有一个正斜杠(/),因此浏览器可以将它们与开始标记区分开来并识别元素的结尾。这里是<title>您刚刚创建的页面中的元素:</ html></p><pre class="line-numbers language-html4strict" language="html4strict"><code><title>我的第一个网页

请注意开头和结尾标记(此处加粗),中间有一些文本内容。

有几个元素没有结束标记。这些被称为空元素。 Void元素不应包含任何内容,因此不具有结束标记。随着书的进展,我指出了这些元素。

该元件

再次在文本编辑器中打开index.html文件(如果已关闭它)并查看代码的第二行和最后一行:

 ... 

DOCTYPE宣言

看一下代码的第一行:

DOCTYPE是一小段代码,应放在每个网页的开头,以指示相应页面符合哪个标准。此示例中的DOCTYPE表示代码符合HTML5。

在浏览器中打开网页时,浏览器会查找DOCTYPE声明。它检查DOCTYPE以确定页面是使用现代Web标准(例如HTML5),还是设计为与旧版浏览器一起使用。然后,浏览器使用此信息来确定如何解释代码并将其显示在屏幕上。

这些行表示开头和结尾元件。该 element是HTML文档的根。这意味着它应该包含所有HTML代码。唯一不应放在此元素中的代码是DOCTYPE声明。你可以看到所有其他元素( 和 )嵌套在代码中的元素。

属性

开始标记还可以使用属性包含其他信息。这些属性包含一个值(或一组值),并在使用>符号关闭标记之前列出。这是一个例子, 元件。该元素用于将图像添加到您的网页。请注意,这是一个void元素,因此它没有结束标记。

图像的描述。

此图像元素有四个不同的属性:src,width,height和alt。为这些属性中的每一个分配一个值,该值将一些信息传递给浏览器。该值放在引号内。此示例使用src(source)属性告诉浏览器您要显示的图像是image.jpg文件。使用值为300的width属性告诉浏览器您的图像应显示300像素宽,高度属性值为100以使其高100像素。此处alt属性的值提供了一些文本,如果无法加载图像,浏览器可能会显示这些文本。你了解更多关于第4章中的元素以及许多其他内容元素。

该元素通常用于定义文档中内容的语言。这是通过向开始标记添加lang属性来完成的,该标记具有两个字符的语言代码作为其值。 (这仅适用于实际页面内容而不适用于标记名称;它们应始终用英语编写。)以下示例通过添加值为“en”的lang属性将内容语言定义为英语。 (我会在每个新示例中突出显示代码的新部分,以便您轻松识别它。)

准备再次使用您的代码?让我们为您的网页定义内容语言。

可以在文件夹2中找到此练习的代码。

1.在文本编辑器中打开index.html文件。

2.现在将lang属性添加到启动标记并将其值设置为en。

3.保存index.html文件。

您可以在以下网页的“ISO 639-1代码”列中找到完整的双字符语言代码列表:http://www.loc.gov/standards/iso639-2/php/code_ list.php

该元件

第一个元素包含在元素应该是一个元件。此元素包含有关页面的信息,例如标题。这是示例代码中的元素:

我的第一个网页

回顾一下完整的代码示例。请注意包含在元素,在开始和结束标记之间。

其中一个最重要的元素是个元件。此元素的内容用于在浏览器中设置页面的标题,并显示在浏览器窗口的顶部或选项卡上,如图1-3所示。在您的网页中,您将页面标题定义为My First Web Page。</ html></p><p>尝试更新网页标题:</p><p>可以在文件夹3中找到此练习的代码。</p><p>1.在文本编辑器中打开index.html文件。</p><p><html> 2.更新之间的文本<title>标签是我更新的页面标题。</ html></p><p>3.保存文件。<br /><br />现在,如果您在Web浏览器中打开index.html文件,您会看到页面标题已更改。它显示在浏览器顶部或浏览器选项卡中,具体取决于您使用的浏览器。</p><h2 id="the-lt-body-gt-element">该<body>元件</h2><p>之后<head>元素来了一个新元素 - <body> 。在此元素中,您将放置将在浏览器窗口中显示的所有内容。以下代码显示了您网页中的元素。</p><pre class="line-numbers language-html4strict" language="html4strict"><code><body><p>你好,世界</p></body></code></pre><p>你只能有一个<body>页面中的元素。</p><p>这里的Hello World文本已被放置在<p> (段)要素。此元素用于文本块。您将在第4章中更详细地了解此元素。</p><p>尝试在网页中添加一些新内容:</p><p>可以在文件夹4中找到此练习的代码。</p><p>1.在Web浏览器中打开index.html文件。</p><p>2.在现有代码下添加以下代码<p>元件。</p><pre class="line-numbers language-html4strict" language="html4strict"><code><p> HTML5磐石! </p></code></pre><p>3.保存文件。现在在Web浏览器中打开index.html文件。您应该看到新文本显示在页面上,如图1-4所示。容易,对吗?</p><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Figure 1-4 Your web page with the new text you just added" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/96727cd191a9db65105bcfb2e20047f1-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/96727cd191a9db65105bcfb2e20047f1-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/96727cd191a9db65105bcfb2e20047f1-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/96727cd191a9db65105bcfb2e20047f1.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/96727cd191a9db65105bcfb2e20047f1.jpg" /></p><figcaption itemprop="caption description"><span class="caption-text">图1-4包含刚刚添加的新文本的网页</span></figcaption></figure><p>在本节中,您学习了如何创建网页的底层结构;但是,这些元素都不能真正控制页面的物理布局。在第2章中,您将了解用于创建网页可视部分的元素。</p><p>您可以在附录A中看到HTML5元素的完整列表。</p><h2 id="nesting-elements">嵌套元素</h2><p>将一个元素放在另一个元素中的做法称为嵌套。可以将嵌套视为一个大树图。你从一个元素开始( <body> );这个元素有许多嵌套在其中的其他元素(在你的网页中, <p>元件)。然后,这些元素又包含嵌套在其中的元素,依此类推。这会创建一个包含许多不同级别的巨大元素树。</p><p>代码中每个元素的位置很重要。确保元素的开始和结束标记都嵌套在同一元素中。例如,你永远不应该有一个开始标记<body>元素和它外面的结束标记。此代码无效,但更重要的是,它有时会导致您的网页在Web浏览器中显示不正确。</p><p>缩进嵌套在其他元素中的元素(正如您所做的那样) <p>网页中的元素)有助于快速识别HTML代码的结构。</p><h2 id="validating-your-web-page">验证您的网页</h2><p>通过验证您的网页,您可以确保您的代码符合标准。这意味着您编写的代码遵循相关Web标准中概述的最佳实践和指南。</p><h2 id="why-should-you-validate">你为什么要验证?</h2><p>虽然验证不是强制性的,但它是开发过程的重要部分。您应该出于多种原因验证您的代码:</p><ul><li><strong>调试代码</strong>-Validation可以是一种有用的方法来查找代码中的错误,这可能会导致页面在Web浏览器中的显示方式出现问题。例如,很容易错过代码中的结束标记,从而导致浏览器显示页面布局的问题。使用验证器可以帮助您找到丢失或错误放置结束标记的位置,从而节省您花费大量时间仔细检查代码的每一行,以检查您是否正确使用了标记。</li><li><strong>面向未来的代码</strong>- 因为你的代码今天在浏览器中运行并不意味着它将来会起作用。浏览器制造商通常实施相关规范中定义的技术,这些规范旨在确保技术向后兼容旧版本。这意味着,如果您遵循当今的Web标准,您的代码将来更有可能发挥作用,因为浏览器制造商可以更好地了解代码的结构以及尝试执行的操作。</li></ul><h2 id="what-are-web-standards">什么是网络标准?</h2><p>Web标准是由W3C(万维网联盟)和WHATWG(Web超文本应用技术工作组)等组织开发的规范 - 开发人员肯定喜欢他们的首字母缩略词!这些规范概述了浏览器制造商应如何在浏览器中实施新技术以及开发人员应如何使用这些技术。</p><p>实际的规格通常很长,读起来相当枯燥。幸运的是,HTML5规范的简洁版本可供开发人员使用,可以减少针对浏览器制造商的无聊内容。您可以在以下位置找到HTML5规范的WHATWG Web开发人员版本<a href="http://developers.whatwg.org/">http://developers.whatwg.org/</a>和W3C版本在<a href="http://dev.w3.org/html5/html-author/">http://dev.w3.org/html5/html-author/</a>。</p><p>为了让事情更加混乱,W3C和WHATWG都维护着HTML5规范的单独版本。这些主要是相同的,但我发现WHATWG倾向于比W3C更快地采用新技术。</p><ul><li>最佳实践 - 有效代码遵循由工作组设计的一组最佳实践,因此通过学习编写有效代码,您还将学习构建网页的最佳实践。这对于刚接触Web开发的人来说尤其重要,因为浏览器通常会自动纠正您在代码中所犯的错误,而不会告诉您这些错误。这可能会让你相信你正在编写好的有效代码,事实上,你犯了很多错误。</li><li>更易于维护的网页 - 编写符合广泛接受的标准的代码,使多个人更容易在一个项目上工作。不可避免地,每个人都有自己的,略有不同的编程风格;通过在编写代码时遵循Web标准,您可以确保您的标记一致且易于其他人理解。</li><li>它更专业 - 如果您认真考虑创建优质网站,编写好的有效代码将向人们展示您知道自己在做什么。如果您从事客户服务,它也是向客户展示您致力于构建面向未来,可维护和符合标准的网站的绝佳方式。 (专业提示:客户喜欢这些词;将它们放入您的项目提案中。)</li></ul><h2 id="using-validator-w3-org">使用validator.w3.org</h2><p>有几个代码验证器可用,但本书的练习使用<a href="http://validator.w3.org">http://validator.w3.org</a>。</p><p>Validator.w3.org是由W3C维护的免费服务,您可以使用它来根据各种Web标准验证HTML和CSS代码。您可以通过多种方式通过验证程序运行代码。</p><ul><li>提供指向Web页面的链接。</li><li>从您的计算机上传文件。</li><li>将代码直接复制并粘贴到浏览器中。</li></ul><p>验证器将通过查看页面顶部的DOCTYPE声明来尝试识别页面的HTML版本。 (请参阅本章前面的DOCTYPE侧栏。)这使验证程序能够针对相关的Web标准集运行您的代码。您还可以通过在验证器主页的“更多选项”部分的“文档类型”下拉菜单中选择一个来明确告知验证者您要测试哪个标准。</p><p>是时候测试您之前创建的网页,看它是否有效。</p><p>1.打开http://validator.w3.org。<br />2.选择“通过直接输入验证”方法。<br />3.将代码复制并粘贴到文本框中。<br />4.单击“检查”。</p><p>您现在应该看到您的代码将验证作为HTML5传递(参见图1-5)。恭喜!</p><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Figure 1-5 Your web page passed validation as HTML5" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/72641b225bf6e0000ee47fd8a08a772e-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/72641b225bf6e0000ee47fd8a08a772e-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/72641b225bf6e0000ee47fd8a08a772e-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/72641b225bf6e0000ee47fd8a08a772e.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/72641b225bf6e0000ee47fd8a08a772e.jpg" /></p><figcaption itemprop="caption description"><span class="caption-text">图1-5您的网页通过HTML5验证</span></figcaption></figure><h2 id="does-your-code-always-have-to-validate">您的代码是否必须验证?</h2><p>验证对于Web开发人员来说是一个很好的工具,但它只是一个工具。有时候生成通过验证的页面是不现实的。有时为了让一些浏览器(读取:IE)播放球,你必须编写一些小小的黑客,当你来验证你的页面时,这些会显示为错误。理想情况下,您希望您的网页尽可能少地出错,但即使是一些最知名的网站也未通过验证。 (尝试通过W3C验证程序运行http://google.com或http://yahoo.com。)</p><p>请记住:Web标准不是严格的规则。它们更像是指导方针。验证是一种帮助您制作更好网站的工具;它永远不应该限制你。</p><h2 id="all-browsers-are-not-created-equal">所有浏览器都不是平等的</h2><p>在理想的世界中,您可以对网站进行编码,并使其在所有Web浏览器中的行为相同。可悲的是,事实并非如此。跨浏览器兼容性是所有Web开发人员必须定期解决的问题,并且通常它可能是一个真正的痛苦并且导致您花费数小时来尝试解决浏览器中存在的错误。</p><p>为了证明这一点,请看图1-6和1-7。这些数字显示了Google Chrome和Internet Explorer中显示的相同HTML网页(使用IE7兼容模式)。请注意导航链接在Google Chrome中的内嵌方式,但显示在Internet Explorer的列表中。</p><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Figure 1-6 A simple HTML web page in Google Chrome" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/01ea72a1593a7e8e9628c4b4abcd5885-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/01ea72a1593a7e8e9628c4b4abcd5885-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/01ea72a1593a7e8e9628c4b4abcd5885-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/01ea72a1593a7e8e9628c4b4abcd5885.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/01ea72a1593a7e8e9628c4b4abcd5885.jpg" /></p><figcaption itemprop="caption description"><span class="caption-text">图1-6 Google Chrome中的简单HTML网页</span></figcaption></figure><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Figure 1-7 The same HTML web page displayed in Internet Explorer (using IE7 compatibility mode)" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/3a29520d702961fab3e388bba8a6c808-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/3a29520d702961fab3e388bba8a6c808-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/3a29520d702961fab3e388bba8a6c808-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/3a29520d702961fab3e388bba8a6c808.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/3a29520d702961fab3e388bba8a6c808.jpg" /></p><figcaption itemprop="caption description"><span class="caption-text">图1-7 Internet Explorer中显示的相同HTML网页(使用IE7兼容模式)</span></figcaption></figure><p>重要的是要记住HTML5仍然是非常新的,因此,并非所有浏览器都支持您将学习在本书中使用的技术。此外,您的用户不会始终运行最新版本的Web浏览器。你会惊讶地发现有多少人还在使用IE6(2001年发布了!)。商业用户尤其因使用过时的浏览器而闻名,通常是因为IT部门制定了限制。我相信在接下来的几年里,用户运行过时浏览器的问题将在很大程度上通过引入许多现代Web浏览器中的自动更新功能来解决。<br /><br />即使您的某些用户可能无法使用HTML5的最新功能,也不应该害怕在您的网站中使用这些功能。只要您的网站的核心功能在旧版浏览器中运行,您就可以了。</p><p>在您阅读本书中的示例时,我将向您介绍解决您将遇到的最常见的交叉兼容性问题所需的技术。</p><h2 id="summary">摘要</h2><p>恭喜;您正式成为一名出色的HTML5开发人员!</p><p>在本章开头,我承诺你会在这一点上构建你的第一个网页。它可能不是华而不实,但您现在已经介绍了HTML的一些核心基础知识。</p><p>现代Web开发人员可以使用大量的浏览器和开发工具,您了解了一些最受欢迎的浏览器和开发工具。我鼓励您使用这些工具来找到最适合您的工具。浏览器也是如此。 Mozilla Firefox和谷歌浏览器通常是最早实施新网络技术的人之一,但却找到了你最喜欢的技术。您可能会发现它是具有最佳开发人员工具的那个。确保安装了所有流行的浏览器,因为您需要全部使用它们来测试您的网页是否跨浏览器兼容并且尽可能多的用户可用。</p><p>在第2章中,您将学习如何更深入地构建Web页面以及每个结构元素负责的内容。您还将了解Joe Balochio及其连锁披萨店。在本书中,您将为Joe的业务创建一个全新的网站 - 一个使用HTML5的许多奇妙新技术的网站。</p> </div> <div class="box"> <a class="block-link full" href="https://www.n2v.net/tag/web-design"><span class="chunk category">请参阅更多Web设计文章</span><div class="block-icon"><span class="icon icon-arrow-right"></span></div></a> </div> <div id="this-will-be-used-for-mpu-2"></div> <div class="box" id="articleTag"> <h3 class="separator-heading">话题</h3> <div class="tag"> <a href="https://www.n2v.net/tag/html">HTML</a> </div> <div class="tag"> <a href="https://www.n2v.net/net-magazine">Netmag</a> </div> <div class="tag"> <a href="https://www.n2v.net/tag/web-design">网页设计</a> </div> </div> <div class="box"> <h4 class="separator-heading">相关文章</h4> <ul class="media-list"> <li> <a href="https://www.n2v.net/features/adobe-deals"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Adobe Cyber Monday deals: today's BIGGEST Creative Cloud offers" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/DFptniPQHv4TtT3sKyqLVV.jpg" /> <span>AdobeCyber周一交易:今天最大的CreativeCloud提供</span> </a> </li> <li> <a href="https://www.n2v.net/features/best-ultrawide-monitor"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The best ultrawide monitor in 2019" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-320-80.png" data-srcset="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-320-80.png 320w, https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-450-80.png 450w, https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-970-80.png 970w, https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ-1024-80.png 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ.png" data-pin-media="https://cdn.mos.cms.futurecdn.net/Sy2GFkaKdoJr4nv2CJiPWZ.png" /> <span>2019年最好的超宽显示器</span> </a> </li> <li> <a href="https://www.n2v.net/advice/the-best-office-chair-for-home-working"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The best office chair of 2019" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/78cAFrPpGLfMXUkLSZGhke.jpg" /> <span>2019年最好的办公椅</span> </a> </li> <li> <a href="https://www.n2v.net/features/best-power-bank"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The best power bank in 2019: top portable chargers to power your devices" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/Qqg2XuULGQmSBEmaTWFtr.jpg" /> <span>2019年最好的移动电源:顶级便携式充电器为您的设备供电</span> </a> </li> </ul> </div> </section> <script> window._taboola = window._taboola || []; var taboola_lists = []; function taboola_is_device(device) { if ((! device) || device === null || (typeof device) === 'undefined') return true if (device === 'amp') return false if (device === 'desktop' && window.screen.width >= 700) return true if (device === 'mobile' && window.screen.width < 700) return true return false } </script> <footer class="van_taboola" id="taboola-below-article-thumbnails"></footer> <script> if (taboola_is_device("")) { taboola_lists.push({ mode: "thumbnails-e", container: "taboola-below-article-thumbnails", placement: "Below Article Thumbnails", target_type: "mix" }); } </script> <footer class="van_taboola" id=""></footer> <script> if (taboola_is_device("amp")) { taboola_lists.push({ mode: "thumbnails-a", container: "", placement: "below-main-column", target_type: "" }); } </script> <script> for(var i = 0; i < taboola_lists.length; i++){ _taboola.push(taboola_lists[i]); } </script> <footer id="comment-jump"> </footer> </article> <aside id="sidebar"> <section class="recommended-content"> <div class="recommendation-container"> <h3>推荐的</h3> <div class="recommendation-articles"> <div class="recommended-article item-1"> <a href="https://www.n2v.net/news/creative-bloqs-job-of-the-week"> <div class="article-image-container item-1"> <div class="article-image item-1"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-600-80.jpg 600w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW.jpg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-1">设计工作:在CreativeBloq中找到你梦寐以求的角色</h4> </a> </div> <div class="recommended-article item-2"> <a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380"> <div class="article-image-container item-2"> <div class="article-image item-2"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-600-80.jpg 600w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-2">78款最适合设计师的免费字体</h4> </a> </div> <div class="sponsored-post"><div style="width:100%"></div></div> </div> </div> </section> <section class="box newsletter-signup"> <h3 class="separator-heading"> <span> <i class="icon icon-envelope white"></i><span class="newsletter-title">获取每周提示和灵感</span> </span> </h3> <div class="grey-box"> <p>请在下面注册以获取Creative Bloq的最新信息,以及独家特别优惠,直接到您的收件箱!</p> <iframe style="width:100%" height="100" sandbox="allow-scripts allow-forms" data-lazy-src="//futureplc.slgnt.eu/optiext/optiextension.dll?ID=s6XsWnyjpNGgHmS9IDSe4kGMs9Z0hv5kXjNQUQiRO2tDkDpIITWHetB5caZtol9br5fEOvs9fVr9oPM92i&BRAND=CBQ" data-lazy-priority="low" scrolling="no"> </iframe> <footer> <small>没有垃圾邮件,我们保证。您可以随时取消订阅,未经您的许可,我们绝不会分享您的详细信息。</small> </footer> </div> </section> <section class="popular-box"> <div id="popular-box-wrapper" class="style1"> <div class="most-popular-tab-bar"> <input type="radio" name="popradio" id="popradio-1" checked /> <input type="radio" name="popradio" id="popradio-2" /> <div id="popularcontent"> <div class="flex-row"> <label class="poplabel" id="poplabel-1" for="popradio-1"> <span>最阅读</span> </label> <label class="poplabel" id="poplabel-2" for="popradio-2"> <span>最共享的</span> </label> </div> <ol class="popular-list active" id="poplist-1"> <li class="most-popular-item first-article"> <div style="width:100%"> <a href="https://www.n2v.net/software/ipad-apps-make-most-apple-pencil-121518448" aria-label="23 best iPad Pro apps for use with Apple Pencil"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-1">1</span><h4><a href="https://www.n2v.net/software/ipad-apps-make-most-apple-pencil-121518448">23款最适合苹果铅笔使用的iPad Pro应用程序</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/news/download-photoshop" aria-label="Download Adobe Photoshop: how to try Photoshop free or with Creative Cloud"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/DMi96PPMtGkbQcLPKVo9ym.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-2">2</span><h4><a href="https://www.n2v.net/news/download-photoshop">下载Adobe Photoshop:如何免费试用Photoshop或使用Creative Cloud</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/photoshop/alternatives-1131641" aria-label="The 13 best alternatives to Photoshop"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/BCXA6u6MvgNdwDoU6fcW79-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/BCXA6u6MvgNdwDoU6fcW79-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/BCXA6u6MvgNdwDoU6fcW79-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/BCXA6u6MvgNdwDoU6fcW79-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/BCXA6u6MvgNdwDoU6fcW79-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/BCXA6u6MvgNdwDoU6fcW79.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/BCXA6u6MvgNdwDoU6fcW79.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-3">3</span><h4><a href="https://www.n2v.net/photoshop/alternatives-1131641">Photoshop的13个最佳替代方案</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/best-video-editing-software-for-designers" aria-label="The best video editing software in 2019"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-4">4</span><h4><a href="https://www.n2v.net/features/best-video-editing-software-for-designers">2019年最好的视频编辑软件</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/news/unbeatable-16-macbook-pro-deal-save-pound220-on-apples-new-laptop" aria-label="Unbeatable 16" MacBook Pro deal: Save £220 on Apple's new laptop"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/bT3vpnU2dRoe3gT3KrEHPj-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/bT3vpnU2dRoe3gT3KrEHPj-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/bT3vpnU2dRoe3gT3KrEHPj-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/bT3vpnU2dRoe3gT3KrEHPj-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/bT3vpnU2dRoe3gT3KrEHPj-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/bT3vpnU2dRoe3gT3KrEHPj.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/bT3vpnU2dRoe3gT3KrEHPj.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-5">5</span><h4><a href="https://www.n2v.net/news/unbeatable-16-macbook-pro-deal-save-pound220-on-apples-new-laptop">无与伦比的16英寸MacBookPro交易:将GB 220保存在苹果的新笔记本电脑上</a></h4> </div> </div> </li> </ol> <ol class="popular-list " id="poplist-2"> <li class="most-popular-item first-article"> <div style="width:100%"> <a href="https://www.n2v.net/features/10-best-design-apps-for-windows" aria-label="10 best design apps for Windows "> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/jX28nUVo7yDUdjBUHuy3Vm-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/jX28nUVo7yDUdjBUHuy3Vm-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/jX28nUVo7yDUdjBUHuy3Vm-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/jX28nUVo7yDUdjBUHuy3Vm-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/jX28nUVo7yDUdjBUHuy3Vm-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/jX28nUVo7yDUdjBUHuy3Vm.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/jX28nUVo7yDUdjBUHuy3Vm.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-1">1</span><h4><a href="https://www.n2v.net/features/10-best-design-apps-for-windows">10款适用于Windows的最佳设计应用程序</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/8-best-new-free-christmas-fonts" aria-label="8 best new free Christmas fonts"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/UFumcNwnzpqZ754waz4eTV.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-2">2</span><h4><a href="https://www.n2v.net/features/8-best-new-free-christmas-fonts">8款最佳免费圣诞字体</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/why-graphics-cards-matter-and-how-to-pick-the-right-one-for-your-needs" aria-label="Why graphics cards matter and how to pick the right one for your needs"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/X24gH5ZgCQbzj9st9HgoJT-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/X24gH5ZgCQbzj9st9HgoJT-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/X24gH5ZgCQbzj9st9HgoJT-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/X24gH5ZgCQbzj9st9HgoJT-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/X24gH5ZgCQbzj9st9HgoJT-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/X24gH5ZgCQbzj9st9HgoJT.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/X24gH5ZgCQbzj9st9HgoJT.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-3">3</span><h4><a href="https://www.n2v.net/features/why-graphics-cards-matter-and-how-to-pick-the-right-one-for-your-needs">为什么显卡重要,以及如何为您的需要选择合适的显卡?</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/news/help-remedies-packaging-design" aria-label="'Over-simplified' medical packaging debate reignites"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/7pbV4oSXqBZoVQe9DKSYPh-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/7pbV4oSXqBZoVQe9DKSYPh-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/7pbV4oSXqBZoVQe9DKSYPh-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/7pbV4oSXqBZoVQe9DKSYPh-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/7pbV4oSXqBZoVQe9DKSYPh-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/7pbV4oSXqBZoVQe9DKSYPh.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/7pbV4oSXqBZoVQe9DKSYPh.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-4">4</span><h4><a href="https://www.n2v.net/news/help-remedies-packaging-design">“过于简化”的医疗包装争论重燃</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/news/apple-reveals-top-creative-apps-for-2019-and-theres-a-surprise-entry" aria-label="Apple reveals top creative apps for 2019 (and there's a surprise entry)"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/SNp2tkqtwtoyWnybqyTKKG-320-80.png" data-srcset="https://cdn.mos.cms.futurecdn.net/SNp2tkqtwtoyWnybqyTKKG-320-80.png 320w, https://cdn.mos.cms.futurecdn.net/SNp2tkqtwtoyWnybqyTKKG-450-80.png 450w, https://cdn.mos.cms.futurecdn.net/SNp2tkqtwtoyWnybqyTKKG-970-80.png 970w, https://cdn.mos.cms.futurecdn.net/SNp2tkqtwtoyWnybqyTKKG-1024-80.png 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/SNp2tkqtwtoyWnybqyTKKG.png" data-pin-media="https://cdn.mos.cms.futurecdn.net/SNp2tkqtwtoyWnybqyTKKG.png" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-5">5</span><h4><a href="https://www.n2v.net/news/apple-reveals-top-creative-apps-for-2019-and-theres-a-surprise-entry">苹果公司公布了2019年最具创意的应用程序(有一个令人惊讶的条目)</a></h4> </div> </div> </li> </ol> </div> </div> </div> </section> </aside> </div> <script id="hawklinks-script"> function loadHawklinks(src) { !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], src); } window.reliableDOMContentLoaded.then(function() { loadHawklinks("https://gizmos.hawk-files.co.uk/hl/hawklinks.js"); }); </script> <link rel="preload" href="https://gizmos.hawk-files.co.uk/hl/hawklinks.js" as="script" /> <!-- SP NOPE --> <script type="text/javascript"> window.vanilla.tiberius = { enabled: false, } </script> <footer id="document-footer" class="container full"> <div id="document-footer-content"> <p>Creative Bloq是Future plc的一部分,Future plc是一家国际媒体集团和领先的数字出版商。<a href="http://www.futureplc.com" target="_blank">访问我们的公司网站</a>。</p> <nav> <ul> <li><a href="https://www.n2v.net/features/about-us" target="_blank">关于我们</a></li> <li><a href="http://www.futureplc.com/terms-conditions/" target="_blank">条款和条件</a></li> <li><a href="http://www.futureplc.com/privacy-policy/" target="_blank">隐私政策</a></li> <li><a href="http://www.futureplc.com/cookies-policy/" target="_blank">Cookies政策</a></li> <li><a href="https://www.n2v.net/advertising" target="_blank">和我们一起做广告</a></li> </ul> </nav> <p>+$ Future Publishing Limited Quay House, The Ambury, Bath BA1 1UA. All rights reserved. England and Wales company registration number 2008885.</p> </div> </footer> <script> window.vanL10N = null; </script><script> if (document.cookie.indexOf("EuConsent") < 0) { if (!window._comscore) { window._comscore = window._comscore || []; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: '' }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); } else { window.reliableConsentGiven.then(function(value) { if (!window._comscore) { window._comscore = window._comscore || []; } var cs_ucfr_value = ''; if (value.consent && value.consent.purposeConsents[5]) { cs_ucfr_value = 1; } else { cs_ucfr_value = 0; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: cs_ucfr_value }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); }); } </script> <script> var dfp_config = { "keystone": "", "ad_unit": "10518929/Design_CreativeBloQ/", "live_ad_unit": "10518929/Design_CreativeBloQ/", "test_ad_unit": "10518929/Design_CreativeBloQ_Test/", "recovery_ad_unit": "", "recovery_test_ad_unit": "", "incremental": true, "gptBeta": "", "max_incremental_ads": 20, "max_incremental_ads_mobile": 20, "max_concurrent_ads": 4, "refresh": true, "site_platform": "vanilla", "tiberius": false, "tiberius_mode": "", "keywords": "serversidehawk,Web design,netmag,HTML", "article_id": "5674-a", "vanilla_article_id": "k2uMRYgzCXx5wxPnJmSrh3", "page_type": "feature", "product_brand": "", "product_category": "", "product": "", "vertical": "web-design", "source": "netmag", "provertical": "", "single_request": true, "onscroll": { "refresh" : "", "mpu": "" }, "jwplayer": "carousel" } </script> <script> dfp_config.gallery_refresh_interval = 2; </script> <script>window.vanillaComponents = [{"trackable":[{"type":"click","identifier":".menuitems a","name":"Link clicked","countTotal":true}],"name":"Primary Nav","excludeHidden":false,"identifier":".primary-nav"},{"trackable":[{"type":"click","identifier":".feature-block-item-wrapper a","name":"Article clicked","countTotal":false}],"name":"Featured articles","excludeHidden":false,"identifier":".top-featured"},{"trackable":[{"type":"click","identifier":"a","name":"Logo clicked","countTotal":false}],"name":"Site Logo","identifier":".logo"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most read article clicked","countTotal":true}],"name":"Most Popular - Popular","identifier":"#poplist-1"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most shared article clicked","countTotal":true}],"name":"Most Popular - Shared","identifier":"#poplist-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":false}],"name":"Prev/Next","identifier":".next-prev-container"},{"trackable":[{"type":"click","identifier":"a","name":"Number clicked","countTotal":true}],"name":"Paginated Review Numerical pagination - Number","identifier":".pagination-numerical-list"},{"trackable":[{"type":"click","identifier":".prev,.next","name":"Prev/Next clicked","countTotal":false}],"name":"Paginated Review Numerical pagination - Prev/Next","identifier":".navigation-sequential"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline Pagination","identifier":".swipe-pages-wrapper"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Article Tags","identifier":"#articleTag"},{"trackable":[{"type":"click","identifier":".recommended-article a","name":"Link clicked","countTotal":true}],"name":"Recommended article","identifier":".recommendation-articles"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Trending bar","identifier":".trending-items"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-1","identifier":".club-boilerplate-1"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-2","identifier":".club-boilerplate-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-3","identifier":".club-boilerplate-3"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-4","identifier":".club-boilerplate-4"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline links","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Social links","identifier":".socialite-widget"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Avatar","identifier":"#club-login"},{"trackable":[{"type":"click","identifier":".fwd-link","name":"FWD link clicked","countTotal":true}],"name":"Forward Linker","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"div .brands-lead","name":"Extending Trending Bar","countTotal":true}],"name":"Trending Bar Parent","excludeHidden":false,"identifier":"div .trending-bar"},{"trackable":[{"type":"click","identifier":"a[data-event-label=elkInjectedRelatedBlock]","name":"Link clicked","countTotal":true}],"name":"ELK Injected Related Block","identifier":"#article-body"}]</script> <script> var require = {waitSeconds:0}; </script> <!-- Google Tag Manager --> <script></script> <!-- End Google Tag Manager --> <script type="text/javascript"> (function(){ if(typeof window._taboola !== 'undefined' && typeof taboola_lists !== 'undefined' && Array.isArray(taboola_lists) && taboola_lists.length) { function loadTaboola() { !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/futureplc-creativebloq/loader.js'); _taboola.push({article: 'auto'}); _taboola.push({flush: true}); } // Can't be in asset loader until we can call custom loader functions (window.Promise ? Promise.all([window.reliablePageLoad, window.reliableConsentGiven]) : window.reliableConsentGiven ).then(function(){ setTimeout(loadTaboola, 6000); }); } })(); </script> <script>window.addEventListener("load",function(){if(!window.askForConsent){var e=document.createElement("script");e.src="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.js",e.onload=function(){var e=window.innerWidth>=700?"bottom":"top";window.cookieconsent.initialise({palette:{popup:{background:"#000"},button:{background:"#666666"}},position:e,content:{message:"We use cookies on this website to deliver content to you, personalise content and ads, provide social media features, and analyse our traffic. Click 'I accept' to consent to the use of cookies. More information on cookies and how to manage them",link:"click here",href:"http://www.futureplc.com/cookies-policy/",dismiss:"I accept"}})},document.body.appendChild(e);var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.css",document.body.appendChild(o);var t=document.createElement("style");t.appendChild(document.createTextNode(".cc-window {z-index:10000000}")),document.body.appendChild(t)}});</script> <!-- document assets - added by the article itself --> <script> window.vanilla.addCss({"href":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.8.4\/themes\/prism.min.css"}) window.vanilla.addJs({"src":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.8.4\/prism.min.js"}, 1000, 1) window.vanilla.addJs({"id":"main-js","src":"\/\/vanilla.futurecdn.net\/creativebloq\/148460\/media\/js\/main.min.js"}, null, 0) window.vanilla.addCss({"href":"\/\/vanilla.futurecdn.net\/creativebloq\/148460\/media\/css\/creativebloq.min.css"}) </script> <script> window.ffte = {"site":"creativebloq","endpoint":"\/\/api.vanilla.futurecdn.net\/article","locale":"GB","gaCode":"UA-48905440-1","debug":[],"serverEnvironment":"live","regionLink":"","isGlobal":false,"properties":{"articleProduct":[],"articleProductHandle":[],"articleType":"feature","articleTemplate":"standard","articleTagHandle":["html","netmag","web-design"],"articleTagType":["freeform","source"],"articleControlTag":["serversidehawk"],"articleVerticalHandle":["web-design"],"articleCategoryHandle":[],"subSite":"","articleVertical":"web design","id":"k2uMRYgzCXx5wxPnJmSrh3","legacyId":"5674-a"}} </script> <script> window.xkeys = ["creativebloq-platform-responsive","creativebloq-core-version-21.7.10","creativebloq-core-ftefrontprodred","creativebloq-article-k2uMRYgzCXx5wxPnJmSrh3","creativebloq-articletype-feature","creativebloq-article-age-ancient","creativebloq-region-GB","creativebloq-language-en","creativebloq-author-ZRCDzoB98SCjqxreWuSxCj","creativebloq-tag-aHbSwk32desfH4WPSXCSdB","creativebloq-tag-2KM8VghueTcPwRoAapjuQi"]; window.templateVariables = {}; </script> <div><script>var lang_is_tranlated='快八哥正在翻译';var website_tranlate_plan_id = '1';</script><script src="//sys.fastmyna.com/api/kbg.js?v=1.0"></script></div><div> <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u="//ptrack.qifeiye.com/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "50"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script></div></body> <script> window.ftr_request_id = ""; </script> </html> <br><br><div style='font-size:14px;color:#ffffff;background-color:#000000;text-align:center;'>翻译字数超限</div><br><br>