html5+css3网页前端开发基础

html5+css3网页前端开发基础目录1.新的文档类型................................................................................................................22.Meta声明......................................................................................................................23.脚本和链接无需type...................................................................................................24.新的语义标签...................................................................................................................35.新的Input类型................................................................................................................66.新的表单元素...................................................................................................................67.新的表单属性...................................................................................................................78.全局属性...........................................................................................................................89.视频...................................................................................................................................910.音频..............................................................................................................................1011.Canvas与SVG.............................................................................................................1012.Web存储.....................................................................................................................1113.CSS3圆角.....................................................................................................................1214.CSS3背景....................................................................................................................1215.CSS3不透明度............................................................................................................1316.CSS3盒子尺寸............................................................................................................1317.CSS3文本属性.............................................................................................................1518.CSS3颜色属性.............................................................................................................161.新的文档类型在HTML4.01或XHTML1.0中，你需要像这样声明文档类型：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN严格版本、过渡版本、框架集在HTML5中，只有一种声明方式：不需要指定具体版本，表示最新的HTML版本!DOCTYPEhtml.2.Meta声明在HTML4.01中（字符的编码方式）：metahttp-equiv=content-typecontent=text/html;charset=UTF-8在HTML5中：metacharset=UTF-83.脚本和链接无需type在HTML4或XHTML中，你需要用下面的几行代码来给你的网页添加CSS和JavaScript文件。linkrel=stylesheethref=path/to/stylesheet.csstype=text/css/.scriptsrc=path/to/script.jstype=text/javascript./.script.而在HTML5中，你不再需要指定类型属性。因此，代码可以简化如下：linkrel=stylesheethref=path/to/stylesheet.css/.scriptsrc=path/to/script.js./.script.4.新的语义标签普通的页面的布局方式：HTML5新标签带来的新的布局：1.开发人员更直观的了解页面每一部分的功能。2.搜索引擎以及屏幕阅读器也能更方便地识别页面每一部分的功能。注：低版本ie浏览器兼容性IE9以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包：!--[ifltIE9]scriptsrc=![endif]--载入后，初始化新标签的CSS，转为块状元素：/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}区块标签header：一般被放置在页面的顶部，或者页面中某个区块元素的顶部。在一个文档中，可以定义多个header标签，它不局限于写在网页头部，也可以写在网页内容里面，可以为body、article、section和aside增加header标签。footer：一般被放置在页面的底部，或者页面中某个区块元素的底部。nav：定义一个页面的导航链接区域。搜索引擎或屏幕阅读器会根据nav标签确定网站内容，所以并不是任何一组超链接都适合放在nav标签中。aside：包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。（侧边栏广告，友情链接，文章引语等）article：代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。section：定义一个主题性的内容分组，里面可以有头部（header）和尾部（footer）。类似于div标签，但是div标签应用更广泛，只要想为一个区域定义一个样式，就可以使用。section包含的内容是一个明确的主题。2.内容分组标签figure：规定独立的流内容（图像、图表、照片、代码等等）。figcaption：定义figure标签的标题。figcaption标签应该被置于figure标签的第一个或最后一个子元素的位置。以前图片列表（图片+标题或者图片+标题+简单描述）的常规写法：liptitle/pimgsrc=//li在html5中：figurefigcaptionAviewofthepulpitrockinNorway./figcaptionimgsrc=shanghai_lupu_bridge.jpgwidth=350height=234//figure3.文本级别标签time：表示一个日期，或者一个时间，或者同时表示一个时期和时间值。方便搜索引擎以及屏幕阅读器等设备正确地识别日期和时间值。datetime属性规定日期或时间。在该元素的内容中未指定日期或时间时，使用该属性。timedatetime=YYYY-MM-DDThh:mm:ssTZDi：HTML4：修饰文字样式的，将文字显示为斜体文本HTML5：表示强调不同的情绪或声音，也可以表示技术术语、生物分类、一个想法等pi家猫/i是一种可爱的动物。/ppiThankgod/i项目终于按时交付了。/ppi我希望这次可以成功/i，他想。/pb：HTML4：修饰文字样式的，将文字显示为粗体文本HTML5：表示文档中的关键字、商品名称等em：用于强调的重点内容，显示为斜体文本strong：用于非常重要、严重性的内容，显示为粗体文本注：如果只是单纯想把文字的样式显示为斜体或粗体，不要使用这几个语义标签，用css去定义文字样式。5.新的Input类型1.email类型用于应该包含e-mail地址的输入域。inputtype=emailname=user_email/2.url类型用于应该包含URL地址的输入域。inputtype=urlname=user_url/3.number类型用于应该包含数值的输入域。inputtype=numbername=pointsmin=1max=10/4.range类型用于应该包含一定范围内数字值的输入域。(显示为滑动条)inputtype=rangename=pointsmin=1max=10/5.拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-lo