基于HTML5的Web前端开发

李小遐

摘要：HTML是互联网底层的标记语言，它把世界上几乎所有的网站都连接在一起。随着网页技术突飞猛进的发展，人们对网页功能的要求越来越高，HTML5以代码更加干净和更加容易编写等优势，将成为Web前端开发的基本标准，因此也是网页设计师们必备的一项技能。

关键词：Web前端 网页设计 HTML HTML5

中图分类号：TP393 文献标识码：A 文章编号：1009-5349（2017）23-0198-01

一、什么是HTML

HTML即超文本标记语言。超文本是一种文本，点击它后便可以从一个文件跳到另一个文件，也就是指网页之间相互连接的功能。标记是一种标记符，对普通文档进行布局及按常规格式设置，从字面上解释就是被标上标记符的普通文档。语言是指HTML，实际上是一种可以编程的语言。如今HTML多用于Web前台开发，它是网页构成的基础，我们见到的所有网页都离不开HTML。通常一个网页要对应多个HTML文档，其后缀名为HTML或HTM。HTML以文字为基础的语言，不需要特定的开发环境，可以直接在Windows自带的记事本中编写，HTML程序也不需要什么特定的运行环境，可以使用Windows自带的IE或者其他浏览器运行。

二、关于HTML5

不同版本的HTML总体来说相同之处多于不同之处，但是它们对一些类型的内容会使用不同的标记符。随着网页技术的发展，脚本标记语言经历了HTML4、XHTML和HTML5。HTML4是一种稳定并被广泛接受的代码集，如果比较看重浏览器的兼容性，HTML4则是一种比较理想的选择。XHTML是一种非常严谨并用XML创建的符合HTML4标准的语言，它与所有支持HTML4的浏览器兼容。HTML5是在HTML4的基础上增加了一些新功能的代码集，尤其是在应用程序的处理和多媒体方面有了巨大的改进，在网页的性能表现及网页结构的优化上，从整体布局到细节处理更加简便与灵活，它使脚本代码更加干净也更容易编写。

从广义上来说，HTML5包含了HTML5、CSS和JavaScript三个部分。网页设计师通过HTML5语言把想要用户浏览的文本、图片或者音视频等内容呈现到页面。CSS是一种用来为HTML文档添加样式的计算机语言，其作用是用来布局和美化页面的外观，比如可以设置网页文本的字体、间距、边距和页面背景等属性，可以帮助各个页面保持整体格式的统一，因此当要开发有很多网页的网站时，CSS会为开发者带来很大的便利。JavaScript是一种脚本编程语言，但与Java没有任何关系，其主要功能是为网页或者应用程序提供特效功能，用户浏览网页时看到的自动更换的图片或者新闻标题，再或者鼠标滑过页面时背景颜色的更换等效果，通常都是JavaScript编程语言的功劳。

三、基于HTML5的网页设计与实现

Web前台设计主要是用户浏览页面部分的设计，比如所浏览页面的整体风格、颜色、页面布局等，应该说Web前台设计是网站设计的一种直观的表现形式，其设计过程可从以下四个方面考虑。

（1）网页展示内容设计，即页面要表现的主题和需要实现的功能。首先需要弄清楚客户的需求，其次是在满足客户需求的基础上要考虑站点的类型和性质，比如，站点是属于资讯类的还是形象类的，资讯类网站一般提供的浏览信息量大，包含的页面数量众多，制作前必须考虑到页面分配、页面之间的结构合理性以及界面亲和度等方面的设计，但是对展示中小企业形象类的网站，所需的容量相对较小，需要实现的页面功能也较为简单，因此页面设计主要就是通过美工来突出企业形象。

（2）弄清楚页面设计的任务后，接下来就是如何实现，即制作网页。首先需要对站点进行规划，可以在纸上绘制草图来完成版面布局，将文字、图片甚至动画排放在页面指定的位置上，确定出页面的大体轮廓，然后在计算机上编制HTML5脚本代码将设计蓝图变为现实，当然也可以借助可视化的开发工具，如Dreamweaver、Fireworks等，但是可视化开发工具自身会产生大量不必要的HTML代码，这样会为以后的页面维护埋下隐患，因此一个优秀的网页设计者应该在掌握HTML语言的基础上，进一步熟练使用可视化开发工具，从而达到快速制作网页和优化网页的目的。

（3）网页的整体效果至关重要。在设计中要注意各个页面构成元素的搭配效果，页面上的元素必须通过点、线、面的组合与搭配来构造整个页面，遵循统一、连贯、分割、对比及和谐五大原则设计，如果将各个元素孤立、分散进行设计，会使页面呈现出凌乱的画面效果，上述原则具体实现就需要使用CSS技术。除此之外，色彩的运用也非常关键，设计者可以先确定一种主题色，当然要选择能最佳表现页面主题的色调，之后再根据综合考虑页面的其他元素，采用相似色或反差色来完成整个页面的配色方案。

（4）页面的优化。网页优化是网页制作后期重要环节，它把握的好坏会影响到浏览速度和网页的用户体验度，决定着用户对网站的直接印象。例如，一般来说文字和图片是网页中最大的构成元素，那么使用CSS样式表指定文字的样式就显得非常必要。至于图片的优化，要在保证浏覽质量的前提下，将图片的大小降到最低，可以成倍地提高网页的下载速度，也可以利用图像处理软件将大图切成若干个小块，分别进行优化，其文件类型可以是GIF或者JPEG。

四、结语

优秀的网页其实可以看成是一种艺术品，页面所产生的视觉效果与人的感受能达成共鸣，从而提升网页的用户体验。当然，除去网页制作的技术手段，更多的还需要依靠设计师的灵感和创新，这也是网页设计能否成功的关键。

责任编辑：孙 瑶