HTML5+CSS3学习笔记(一)

时间:2022-08-30 09:43:41

HTML5+CSS3概述

HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML5必将被越来越多的Web开发人员所使用,各大主流浏览器厂家已经积极更新自己的产品,以更好地支持HTML5。

一.一个新的Web开发平台

HTML5围绕一个核心:构建一套更加强大的Web应用开发平台。

优势:

1)更多的描述性标签:HTML5引入非常多的描述性标签,例如用于定义头部(header)、尾部(footer)、导航区域(nav)、侧边栏(aside)等标签,使开发人员非常方便的构建页面元素。

2)良好的多媒体支持:对于先前的以插件的方式播放音频、视频带来的麻烦,HTML5有了解决方案,audio标签和video标签能够方便的实现应变。

3)更强大的Web应用:HTML5提供了令人称奇的功能,某些情况下,你甚至可以完全放弃使用第三方技术。

4)跨文档消息通信:Web浏览器会组织不同域间的脚本交互或影响,但是对于可信任的脚本或许就是麻烦。HTML5引入了一套安全且易于实现的应对方案。

5)Web Sockets:HTML5提供了对Web Sockets的支持。

6)客户端存储:HTML5的Web Storage和Web SQL Database API,可以在浏览器中构建Web应用的客户端持久化数据。

7)更加精美的界面:HTML5+CSS3组合渲染出来的界面效果有时候是无法想象的精美。

8)更强大的表单:HTML5提供了功能更加强大的表单界面控件,使用非常方便。

9)提升可访问性:内容更加清晰,使用户的操作更加简单方便,体验提升。

10)先进的选择器:CSS3选择器可以方便的识别出表格的奇偶行、复选框等,代码标记更少。

11)视觉效果:精美界面的一部分,阴影、渐变、圆角、旋转等视觉效果。

二.HTML5向后兼容

对于部分浏览器尚未完全支持HTML5,HTML5可以在代码中方便地加入兼容自适应备用解决方案的代码。在编写完HTML5代码时,可以W3C验证服务来进行验证(相对的,因为HTML5标准还在演进中)。

三.HTML5中的标签、属性变化

HTML5废弃了不少常见的标签,包括:

1)表现性元素:basefont,big,center,font,s,strike,tt,u

2)移除对框架的支持:frame,frameset,noframes

3)这些:abbr取代acronym,object取代applet,ul取代dir

一些属性不再有效:

align;

body标签上的link,vlink,alink和text属性;

bgcolor;

height和width;

iframe元素上的scrolling;

valign;

hscape和vscape;

table标签上的cellpadding,cellspacing和border;

head标签上的profile;

img和iframe的longdesc.

跟上HTML5和CSS3进步的步伐,不断更新自己的知识,对开发人员来说无疑好事。

接下来,将进入HTML5的具体学习,感受HTML5的Web开发惊喜。

参考资料:《HTML5和CSS3实例教程》

HTML5+CSS3学习笔记(一)的更多相关文章

  1. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  2. HTML5&plus;CSS3学习笔记(一) 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

  3. html5&plus;css3学习笔记-prefixfree前缀补全插件

    虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...

  4. html5&plus;css3学习笔记音频和视频

    格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ ...

  5. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  6. CSS3学习笔记&lpar;3&rpar;-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  7. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  8. HTML5&amp&semi;CSS3练习笔记&lpar;二&rpar;

    HTML5&CSS3  练习CSS3伪选择器使用 1.first-line  格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...

  9. CSS3学习笔记之属性值

    font-family 设置文本的字体名称. font-style 设置文本样式. 取值 normal不使用斜体. italic使用斜体. oblique使用倾斜体. inherit从父元素继承. f ...

随机推荐

  1. vsftp &quot&semi;上传 553 Could not create file&quot&semi;

    我在LINUX下VSftp建立一个FTP服务器,但从WINDOWS使用FTP时,无法上传也无法下载!出错如下 ftp>; ls 200 PORT command successful. Cons ...

  2. 利用LruCache为GridView加载大量本地图片完整示例

    MainActivity如下: package cc.testlrucache; import android.os.Bundle; import android.widget.GridView; i ...

  3. MFC 动态修改对话框标题

    在对应对话框的初始化函数OnInitDialog()中添加以下代码: CString title; title.Format("%d",Id);//在标题栏动态显示Id的值 thi ...

  4. 使用 7za&period;exe 打包文件

    7za.exe 下载地址:http://www.7-zip.org/a/7za920.zip 7za <command> [<switch>...] <base_arch ...

  5. 高清电视产业的关键词,4K过渡时期8K未来

        有些不尽人意,归根结底在于,绝大多数厂商并没有把电视的性能作为突破口,相反,仅仅是在外观.设计上做起了文章.在部分厂商看来,要真正研发性能一流的智能电视须要更高的投入,但改变一下外形似乎也能获 ...

  6. DOS批处理的字符串功能

    原文:DOS批处理的字符串功能 DOS批处理的字符串功能 批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特 ...

  7. python2&period;x urllib2和urllib的使用

    1.最简单用法 urlopen(url, data=None, timeout=socket._GLOBAL_DEFAULT_TIMEOUT,...) import urllib2 import ur ...

  8. UILable添加事件

    原文:http://blog.sina.com.cn/s/blog_9e8867eb0101dk6t.html 先需要声明的是:UILabel或UIImageView的 userInteraction ...

  9. jQuery对象插件封装步骤

    jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题.甚至很多css兼容性问题,用jQuery写都能解决. 这里是对象插件的封装.当然,封装插件很多,这里 ...

  10. java注解--Annotation

    Annotation(注释) 概述 从 JDK 5.0 开始, Java 增加了对元数据(MetaData) 的支持, 也就是 Annotation(注释) Annotation 其实就是代码里的特殊 ...