HTML5和CSS3在当今网站制作中的新特性
在整个文章之前,我们举个简单的例子:您是否常常因为网站图片太大而可能导致一些网速过慢的用户在浏览您的网站时不得不等待图片的下载及刷新?您是否因此花很高的价钱来购买性价比其低的hosting服务器而搞得您公司的预算捉襟见肘?那么,是否有一种新的且有效的把办法呢?
答案是肯定的,HTML5和CSS3在一定程度上能够满足这些要求;甚至它们做得更多更好。
什么是HTML5和CSS3
首先您得明白什么是HTML和CSS。前者为当今构成网页的主要使用的语言。我们可以通过这种tag形式的语言向计算机说明我们网站的内容构架、内容显示方式等等。CSS就是为专门用于调整和操控网页内容显示方式及效果的语言。那为何我们不只是单独使用HTML来完成网页的内容显示方式及效果从而完成网站的制作呢?因为如果您只使用HTML,一旦您所想要显示的内容需要很复杂的代码来完成其显示效果,若您想将该种显示效果也同样运用于网页其他部分时,不得不大量的重复这种显示效果的代码。在这样的情况下,您的网页代码会显得十分杂乱无章,同样也会是的网页体积过大从而降低您的网站速度。使用了CSS,我们不但能保证代码的重复实用性,也可以保证网站主题语言的简洁性。
而HTML5和CSS3是HTML和CSS的最新版本,基于HTML和CSS上增加了许多便于网页制作的和酷讯效果展示的功能。下面我们为您一一介绍。
HTML5的新特性
1. 新的内容标签
在HTML4中,其内容标签拥有相同的级别,是的网页开发者无法明确且快速的区分每个部分的内容。而在HTML5中,内容标签是相互独立的,而且拥有不同的级别,搜索引擎能够快速的识别出各个部分及其相关的内容。
2. 更方便的制作表格
使用HTML5,您可以不再说用JavaScript或者是PHP,可以只使用它来重新定义您所需要的表格。您可以定义某个单元是否为必填或者是否需要遵循特定格式例如email格式等等。
3. 音频、视频API
HTML5不仅仅可以让您在网页中直接整理视频、音频,还内嵌了一整套拥有丰富功能的API来让您轻松自如的操控及播放媒体,而且这些API也是能够让您自由编辑的。所以,HTML5在音频、视频这两个方便上已经能够代替以前所使用的flash插件了(所以您现在基本上看不到需要您安装插件才能播放视频、音频的网页了)。
4. 画布API
如何能够在网页中绘制在HTML5以前一直是个让人头疼的问题,我们只好借助flash、silverlight等插件。而在HTML5之后,能让您直接在页面上进行绘图,甚至让您可以于网页有更多的互动:例如缩放图形,旋转图形等等。
5. 地理API
HTML5甚至提供了地理信息的应用接口API。通过使用此API,网页能够通过IP、GPS等形式来获取用户的地理位置,从而为用户提供更多更有用的周边信息。
CSS3的新特性
1. RGBa
CSS3新的RGBa特性能让您对每个element进行色彩和透明度的单独设置,而原来常用的opacity CSS命令只能对元素及其子元素进行设置。
2. 多列排版功能
CSS3新提供的多列排版布局不在需要HTML布局标签即可生成多栏布局。
3. 圆角
这是CSS3中最最实用的功能。当您对border-raius定义时,您可以在没有任何难度的请款下为特定的HTML元素增加圆角,圆角的大小以及哪个角是圆角都由您随心所欲。
4. @font-face
当网页显示某种用户尚未安装/定义的字体时,CSS3自身提供的@font-face功能会自动为您从网络其他资源上下载相对应缺失的字体。
5. 其他特性
除了上面介绍的功能外,CSS3还为我们带来了颜色渐变、多重背景及用图片来作为边框功能等等。
合理的利用好CSS,能为您更快速的达到以往用相当多的插件才能得到的众多效果。同时,使用元素本身来替代体积庞大的图片、flash等会使得网站加载速度得到很好的提升。
其他一些您可能感兴趣的HTML5、CSS3资源
- http://w3school.com.cn/index.html
- http://html5demos.com/
- https://www.sencha.com/
- http://fmbip.com/litmus/
e休同时为您提供高质量的网站设计及制作服务,若有兴趣,请联系我们。