HTML 5 & CSS 3的新交互特性

本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强壮到能够辨认图片里边的文字。而且由于图片的体积不算太小，可能网速慢的网友在浏览的时分不得不耐心的等候图片的改写。那么，有没有一种新的办法能够避免这些缺点呢？

有的，HTML5和CSS3就能够满足你的需求。乃至，它能够做的更多，更好。作为一名网页设计师，咱们应当了解它们是什么东西，有什么特性，然后进一步考虑经过HTML5和CSS3咱们能做些什么。

什么是HTML5和CSS3？

HTML和CSS并不难理解。HTML为构成网页的首要言语。经过这种言语，咱们能够向计算机说明网页格局、内容、显现作用等等。而CSS则是专门用来操控网页显现作用的言语。这时分问题出来了，为什么咱们要单独运用CSS呢，HTML不是相同能够操控Web页面的显现作用么？为了答复这个问题，我举个简单的比如：

有没有发现如果一旦描绘的工作过多，想要把工作描绘清楚的时分，咱们不得不重复许多的信息？页面言语也是相同，在这种情况下显得杂乱无章，十分难以理出条理。经过将操控显现作用的言语集成到CSS里，咱们不光能够确保页面言语主体部分的简练，而且能够十分便利的复用各种言语调集。

HTML5和CSS3是HTML和CSS的版别，它们目前均未确定规范，但是现已公布的新特征现已让咱们心动不已。

HTML 5的新特征

　　1. 新的内容标签

HTML4中的内容标签等级相同，无法区分各部分内容。而HTML5中的内容标签互相独立，等级不同，搜索引擎以及计算软件等均可快速辨认各部分内容。

　　2. 更好的表格体系

　　现在，你能够抛弃JavaScript或者是PHP，只经过HTML5来界说表格。你能够界说每个表格单元的输入格局，也能够界说这个单元是否是必填的等等。

　　3. 音频、视频API

　　HTML5不光答应你在网页中直接整合视频、音频，一起更供给了一套功用丰厚的API用来操控媒体播映，而这些用来操控媒体播映的元素也都是能够被编辑的。因而，HTML5在视频以及音频层面上实践现已能够替代常用的flash插件了。

　　4. 画布(Canvas) API

　　在网页中制作图形一直是个大难题，咱们不得不借助flash、silverlight等插件。但是HTML5答应你直接在网页上进行绘图，乃至答应你与网页生成更多的交互，例如制作图形、放大缩小，等等。图例是一个用HTML5制作的小游戏。

　　5. 地理(Geolocation) API

　　HTML5供给了地理信息的运用接口Geolocation API。经过这个API，网页能够经过IP，GPS等方式来取得用户的地理信息;一起用户也能够挑选是否封闭这个功用。

　　6. 网页存储(Web storage) API

　　HTML5供给了网页存储的API，便利Web运用的离线运用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。

　　7. 拖拽开释(Drag and drop) API

　　咱们能够经过HTML5的Drag and drop API来完结网页中的拖拽开释作用，避免了以往的网页在拖拽开释过程中需求不断修正元素的位置，代码繁复的坏处。

CSS3 新特性

　　1. RGBa

　　CSS3的RGBa新特性答应你对每个元素进行色彩以及透明度的设置。而本来常用的opacity指令只能对元素及其子元素进行设置。

　　2. Multi-column layout

　　CSS3新供给的多栏布局挑选器无需HTML布局标签即可生成多栏布局，一起‘栏数’、‘栏宽’以及‘栏距离’都是能够界说的。

　　3. Round corners

　　圆角功用可能是CSS3供给的最实用的功用了。经过Border-radius，你能够没有任何难度的给指定的HTML元素添加圆角。而且你还能够界说圆角的巨细，以及哪个角是圆角，哪个角不是圆角。

　　4. @font-face

　　当网页显现某种用户没有装置的字体时，CSS3供给的@font-face功用会自动的、默默地帮用户从网络上下载相应字体。然后让设计师愈加自在的发挥，而不必考虑用户的机器是否装置了相应字体。

　　5. 其他特性

　　此外，CSS3还给咱们带来了渐变、防止字符串过长溢出、多重布景以及用图片来作为元素边框等功用。

　　利用好CSS3，你能够更快捷的得到以往用许多插件才能得到的作用。同过运用元素自身来替代大部分图片，网页的加载速度会得到提升，这些原本是图片的内容，也能够被搜索引擎检索到。

HTML5和CSS3的兼容性

　　HTML5和CSS3的规范并未正式完结，各家浏览器对其支撑程度也不尽相同。了解HTML5和CSS3的兼容性是十分必要的。