作为一种标记语言，HTML 是设计和制作网站最常见的应用。 许多人都有使用 HTML 的经验。 然而，当你面对HTML5这样一个全新的标记语言标准时，你一定会问：用HTML5构建网站有什么好处？ 与HTML4相比，HTML5的进步是什么？ 取得进步的原因是什么？ 学习HTML5的难点在哪里？ 网页设计师应该如何应对这一变化？ 下面对此类问题进行解释，并给出一些例子。 同时，还给出了作者对搜索引擎优化（SEO）带来的问题的思考，并给出了大家比较熟悉和习惯的开发环境，供读者参考。 注意，本章从传统网页的角度介绍如何使用HTML5设计网站，不涉及联通设备以及联通互联网的相关设计和开发（联通互联网的相关内容将在第5章介绍）。 1.1 大多数人不了解HTML5时代的网页设计。 事实上，您从未制作过网站。 恐怕你已经在Web2.0时代使用HTML4和CSS2创建了大量的网页和网站。 恐怕你对DIV+CSS网页设计已经非常精通了，然而与制作模式不同，HTML5的出现将让大家站在同一个新的起跑线上。 在了解和学习HTML5的过程中，我们感觉使用HTML5来制作网站，即使是很多网页设计师（甚至是经验丰富的网页设计师）都需要重新努力学习。
为了保证相关新功能即使在不支持的情况下也能完整显示相关内容，业内人士提出了两种理论：一是Graceful Degradation（有时也称为平滑降级），二是渐进式Improvement（Progressive Enhancement）。 这两种说法都是从用户体验出发：后者保证了用户体验，假设当前浏览器不支持的情况下用户仍然可以完整地查看内容；而后者则保证用户体验。 前者提高了用户体验，假设当前浏览器支持的话，保证用户可以获得最好的内容显示效果。 通常有经验的网页设计师都会想：我已经熟练使用和掌握了Photoshop、Fireworks，甚至使用Dreamweaver、VisualStudio等网页设计和制作工具，为什么我还说我不懂HTML5网页设计呢？ 确实，我们可以毫不客气地说，HTML5诞生之后，你真的不懂网页设计了！ 我来谈谈你不懂HTML5网页设计的十大原因。 影子码是可控的。 以前使用HTML4制作网页时，由于无法在网页中直接制作阴影和圆角，所以大量的网页效果在美术设计完成后直接固定在图片中。 现在HTML5将改变现有的网页设计和制作的工作模式。 设计师可以直接使用CSS制作并还原设计稿，并将相关规格、角度等数据保存在PNG或PSD设计图中。
请注意：在这里，传统的裁剪和拼接工作将减少，但图片中的位置数据将非常重视设计修复。 动漫简单易懂。 以前制作一个简单的动画效果必须依赖JavaScript和Flash，编写大量的脚本，或者制作动画帧。 现在，依靠强大的CSS3动画属性，可以快速高效地开发各种动画效果，甚至制作3D效果也将变得轻而易举。 梯度数值运算。 以前，要制作渐变或渐变效果，需要使用图形设计软件制作线性渐变效果。 一旦设定就不能随意更改，必须控制好图片的规格，防止效率低下。 如今，一切都可以通过简单的线性命令轻松完成。 制作人员要做的就是关注几个转换点的位置和数值。 字体图像矢量化。 以前，制作个性化字体的网页效果需要用图片来完成。 但现在，强大的CSS3网页字体功能将把所有字体图像还原为文本元素，而不是依赖于图像。 仅凭这一点，制作者就可以在大规模开发中大大提高工作效率，减少大量重复性的美术劳动。 表单验证很容易。 以前制作表单提交页面需要进行各种验证和判断，而现在只需要利用标签中内置的属性和正则表达式就可以解决问题。 数据类型加倍。 大量新增的输入属性所带来的日益友好的用户界面过去需要大量的精力和成本来实现。
可以毫不夸张地说，input标签属性的一个小小的改变就可以预示HTML5应用的美好未来。 行业工作流程需要重组。 以前制作网站的流程是：美工设计出疗效图，客户和美工反复讨论、确认、修改，开发人员最终完成制作并上传到服务器。 在这个过程中，顾客和美工可能经常会纠结一个像素点的问题，而图像切割人员和程序员在分解治疗图时也可能会因为疯狂而导致治疗效果略有出入。 网站上线后，后端的各种用户体验迫使设计师再次做出改变。 今天，这种工作模式将会改变。 个人职业重新定位。 大多数网页设计师都是图形艺术家html5 在线制作，HTML5独特的3D Web技术将给艺术家带来新的挑战。 如何解读3D网页，如何让交互的用户体验变得更好，将是设计师最头疼的事情。 事实上html5 在线制作，这可能也是最有趣、最有价值的事情。 本机支持不需要插件。 以往网页中音视频的处理都会依赖各种插件来完成，这在使用HTML4标准进行网页设计时仍然是一个遗憾。 而且，HTML5现在对音频和视频处理有了强大的支持，音频和视频标签就是专门为此而诞生的。 各种可控属性、预加载、插屏功能令人兴奋，因为我们知道native的意义重大。 对网页设计师的要求更高。
长期以来，人们认为网页设计师不需要了解动态脚本语言，甚至不需要在网页上剪切图片。 如今，HTML5标准将赋予网页设计师更多的工作和使命、更高的要求、更广泛的知识结构、更富有想象力的设计灵感。 同学们，何必紧张呢！ 当一个新的技术时代来临的时候，基本上相关的技术人员都会比较郁闷，同时技术人员也会相对短缺。 比如2000年，大部分艺术家都是从平面艺术家转过来的。 真正专业的网页美工并不多，而且在设计网页时会考虑人体工学、视觉习惯、经济承受能力的人也很少。 。 再比如，从2005年到2011年，很多艺术家在经历了技术演进之后，为了适应用户的需求，在掌握了Photoshop、Fireworks、Dreamweaver、Flash等网页设计和制作工具后，逐渐要求自己能够DIV+CSS图片裁剪、JavaScript脚本编写等，而且能够在动画、HTML+CSS制作、JavaScript、用户交互、体验设计等多个方向都有出色表现的很少。 一个每天可能阅读8小时以上的页面，和一个在高速公路边以140公里左右的时速驶过时最多能看到5秒的广告牌，三者有着不同的设计思路，表情和色彩效果。 不同之处？ 答案是：是的，而且差别很大。
同样，在联通互联网时代，用户可能会花时间使用和查看设备内容，并使用拇指和其他部位来操作设备。 这方面没有什么经验可以借鉴。 只有反复的经验，才有可能设计出好的作品。 后端工程师的岗位应运而生，但优秀的并不多。 HTML5为网页设计者提供了强大的表达能力和丰富的表现效果，同时要求网页设计者有足够的想象力和实现能力。 大胆想象，大胆创意，在HTML5的表现上，无论多么大胆，都不为过。 苹果公司的精神领袖史蒂夫·乔布斯说：“网页将为你的手臂设计。” HTML5标准的出现，意味着对于网页设计来说，现在是最好的时代，也是最坏的时代。 1.2 HTML5带来的网页结构、设计风格、理念的变化是毋庸置疑的。 经过长时间的学习和工作，一个精通HTML4的技术人员（包括后端工程师和后端开发人员）将能够理解一些工程项目。 掌握常见的治疗效果、风格和难点。 很多时候，HTML4的技术难点决定了技术人员能够采取什么步骤，能够做出什么样的疗效，能够实现什么样的项目。 HTML5在音频、视频、动画、应用、页面效果、开发效率等方面给网页结构带来了巨大的变化，对传统的网页设计风格和相关理念带来了冲击。 本节将尝试预测未来网页设计和相关应用的一些风格和特征。
1.2.1 HTML4时代的几个特点 为了帮助读者更好地比较两个不同时代的事物，我们特意总结了HTML4时代的几个特点供大家参考。 Web头部区域的声明不够详细，并不适合所有媒体，比如手机、平板笔记本等新兴设备。 Web的body区域过于广泛，不仅有div和table，而且没有使用其他更好的标签来表示日益清晰的页面结构。 对于圆角、阴影、渐变等特效没有快速的处理方法。 缺乏对简单动画的快速有效的处理。 缺乏专门处理音频和视频的标签。 缺乏表单数据处理的验证和过滤。 缺乏对本地存储的管理和控制。 网页无法进行有效的实时通信。 3D动画无法直接在网页上显示，必须始终使用其他插件。 1.2.2 典型的 HTML5 页面 为了让读者更好地理解 HTML5 网页，也为了让读者了解 HTML5 网页代码的准确含义，我们在代码表 1-1 中列出了该页面的注释：添加在结构代码每行的末尾。 （阅读过程中有任何困惑也没关系，这只是为了让读者对HTML5页面结构有一个基本的了解。）代码清单1-1
XXX公司xxx公司
