网页设计代码基础知识 html网页制作代码大全(10)

网页设计代码基础知识

△ 基于鼠标的手势操作

1. 基于鼠标的交互

在不久的未来，个人电脑可能通过多点触控、语音交互等方式与我们交互，但目前网站设计最主流的交互方式还是鼠标和键盘。来让我们看看鼠标有什么结构吧！我们对鼠标的使用无外乎移动、左键、右键、拖拽四种方式。我们在页面中的大部分操作都是通过鼠标左键点击完成的，所以网页也是点击的艺术。右键一般会唤起右键菜单，但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互。与鼠标发生交互的主要是超链接与按钮。那么让我们来了解一下超链接的四个状态吧（前端术语是：超链接标签的 CSS 四个伪类）。

△ 按钮与文字的不同状态

Link

Link 是指超链接正常的时候的状态。一般超链接需要与普通文字区别开来，比如换一种颜色或者加下划线。当然下划线还有一个作用就是方便弱视群体区分超链接与普通文字。Link 默认都是蓝色的（色值：#72ACE3），但是为了增强网站的品牌性我们也可以把链接颜色更换成另一种颜色。总之一定要在形式上与普通文字产生差别才可以。

Visited

Visited 是超链接被点击以后的状态。比如新浪网新闻非常多，所以点击完一个新闻后用户可能不知道自己看过没看过这条新闻了。所以新浪网使用了 Visited 属性，点击后的新闻颜色就不一样了，方便用户区别自己哪些新闻还没有浏览。

Hover

Hover 是超链接鼠标经过状态。这个状态是连接中最为重要的状态。其实不只超链接，按钮和图片以及视频等一切可交互的元素都应该设置 Hover 属性，也就是鼠标悬停时的状态。一般来说变换颜色和放大是 Hover 状态的基本方式。

Active

Active 是指超链接的激活状态。点击后超链接可以通过 CSS 加载一个状态。

同样的链接样式也可以应用在图片、按钮、表单之上。点击、鼠标悬停、鼠标按下都可以设计成不同的样式，方便用户通过鼠标感知这个物体是被我按下去的，这种给用户的暗示我们也叫做「点击感」。当然按钮会和链接稍有不同，按钮除了具备正常和鼠标悬停等状态，还有一种状态叫不可点击。这种状态将按钮置灰，提示用户这个功能因为条件不满足不可以点击。好了，您可以举出几个点击感 Web 设计的例子吗？

2. 静态网页

了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由 HTML 编译的，我们在服务器上存储的网页代码基本都是 HTML 格式。HTML 全称是 HyperText Markup Language，即超文本标记语言。「超文本」是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用 HTML语言写一段文字会是什么样呢？

△ 模拟代码编译过程

没错，代码就是这么一点一点编起来的。在任何网站空白处右键点击查看网页源代码你就可以看到网页的 HTML 代码啦。HTML 这种代码是由一个国际组织——W3C 发布和维护的。W3C 创建于1994年，是网站国际中立性技术标准机构。W3C 已经发布了 HTML 的诸多版本，其中影响最深远的是 HTML4版本。而 HTML5 简称 H5 则可以说是划时代的版本了。H5 的标签更加接近现代，并且本身可以播放视频，这就可以淘汰掉 Flash 插件了。（Flash插件带来了比如系统漏洞、加载速度过慢等问题）同时 H5 对多平台支持很好，所以适应移动端为王的当今时代。H5 甚至还可以变成游戏、Webapp（在网页上如本地程序一样工作的网站，比如蓝湖等）、多媒体等多种形式。可是由于 IE浏览器这类不支持 HTML5 效果的浏览器在用户中占比还很高，所以造成了 HTML5 发展的制约。浏览器可以理解为一个代码阅读器，由于它对 HTML5 代码的翻译工作不好就会造成所谓「兼容性」的问题。比如 HTML5 中可以通过代码给一个 DIV添加投影，那么在某些浏览器中就显示不了这个效果。不难理解为什么有程序员会穿着 i hate IE 字样的T恤了吧。在每次做完一个网站项目时，测试工程师都会用 Chrome、Safari、Firefox、Opera、IE、Edge 等多个浏览器测试网站的兼容性，这时通常让前端工程师非常头疼。因为代码动一发牵全身，经常这个好了那个又不行了。但是针对这种问题也有一些解决方案，比如减少对用户占比不高浏览器的支持、对不好搞的浏览器单独加载特定的适配代码等。道高一尺魔高一丈呀。

3. 其他前端语言

有了 HTML 这个骨架，加上图片和多媒体后，网站的发展速度就更快了。但是服务器的损耗很大：所有用户都需要重复地来服务器下载代码和图片等资源进行「握手」，而且很多 HTML 代码都是重复的，造成了资源的浪费。比如，如果我网站的头部都是黄色的、链接都是蓝色的，那么每个页面都会啰嗦这几句代码。这个问题没多久就被一种崭新的代码解决了：CSS技术。CSS 是层叠样式表的意思：我们可以理解为现在把网站的样式（颜色、大小、位置等样式信息）也就是 CSS 和网站的内容（文字、图片、链接等内容信息）也就是 HTML 完全分开，并且一个网站可以下载一份 CSS 然后不同页面都调取这份 CSS 的缓存，那么就节省了服务器资源。另外，由于网站需要一些交互效果，比如点击特效和菜单特效等，那么需要前端工程师使用 Javas cript 代码来配合。Javas cript 是一种比较短小精悍的语言，构建一些基于浏览器的特效非常顺手。所以目前主流的网站配置是 HTML5+CSS3+JS 代码的组合，当然为了兼容那些低端浏览器也可能使用 HTML4+CSS+JS 的套餐。这取决于我们的主要目标用户群在使用什么样的浏览器。当然，我讲这些并不是要求您去学习 HTML、CSS、JS 代码然后进行前端开发，因为在现代互联网公司里已经有专业的前端工程师了。我们了解这些主要是要理解前端工程师的工作以便更好地配合他们。