1、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 或 XH
2、TML1.0 中，你需要像这样声明文档类型： .严格版本、过渡版本、框架集在 HTML5 中，只有一种声明方式：不需要指定具体版本，表示最新的 HTML 版本. 2. Meta 声明在 HTML4.01 中（字符的编码方式）：在 HTML5 中：3. 脚本和链接无需 type在 HTML4 或 XHTML 中，你需要用下面的几行代码来给你的网页添加 CSS 和 JavaScript 文件。. 而在 HTML5 中，你不再需要指定类型属性。因此，代码可以简化如下：. 4. 新的语义标签普通的页面的布局方式：HTML5 新标签带来的新的布局：1. 开发人员更直观的了解页面每一部分的功能。2. 搜索
3、引擎以及屏幕阅读器也能更方便地识别页面每一部分的功能。注：低版本 ie 浏览器兼容性IE9 以下版本浏览器兼容 HTML5 的方法，使用百度静态资源的 html5shiv 包：载入后，初始化新标签的 CSS，转为块状元素：/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menudisplay:blockhttp:/ 区块标签header：一般被放置在页面的顶部，或者页面中某个区块元素的顶部。在一个文档中，可以定义多个标签，它不局限于写在网页头部，也可以写在网页内容里面，可以为 body、article、
4、section 和 aside 增加标签。footer：一般被放置在页面的底部，或者页面中某个区块元素的底部。nav：定义一个页面的导航链接区域。搜索引擎或屏幕阅读器会根据 nav 标签确定网站内容，所以并不是任何一组超链接都适合放在 nav 标签中。aside：包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。 （侧边栏广告，友情链接，文章引语等）article：代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。section：定义一个主题性的内容分组，里面可以有头部（header）和尾部（footer） 。类似于
5、 div 标签，但是 div 标签应用更广泛，只要想为一个区域定义一个样式，就可以使用。section 包含的内容是一个明确的主题。2. 内容分组标签figure：规定独立的流内容（图像、图表、照片、代码等等） 。figcaption：定义 figure 标签的标题。figcaption 标签应该被置于 figure 标签的第一个或最后一个子元素的位置。以前图片列表（图片+ 标题或者图片+ 标题+简单描述）的常规写法：title在 html5 中：A view of the pulpit rock in Norway.3. 文本级别标签time：表示一个日期，或者一个时间，或者同时表示一个时期
6、和时间值。方便搜索引擎以及屏幕阅读器等设备正确地识别日期和时间值。datetime 属性规定日期或时间。在该元素的内容中未指定日期或时间时，使用该属性。i：HTML4：修饰文字样式的，将文字显示为 斜体文本HTML5：表示强调不同的情绪或声音，也可以表示技术术语、生物分类、一个想法等家猫是一种可爱的动物。Thank god项目终于按时交付了。我希望这次可以成功 ，他想。b：HTML4：修饰文字样式的，将文字显示为 粗体文本HTML5：表示文档中的关键字、商品名称等em：用于强调的重点内容，显示为斜体文本strong：用于非常重要、严重性的内容，显示为粗体文本注：如果只是单纯想把文字的样式显示为
7、斜体或粗体，不要使用这几个语义标签，用css 去定义文字样式。5. 新的 Input 类型1. email 类型用于应该包含 e-mail 地址的输入域。2. url 类型用于应该包含 URL 地址的输入域。3. number 类型用于应该包含数值的输入域。4. range 类型用于应该包含一定范围内数字值的输入域。(显示为滑动条)5.拥有多个可供选取日期和时间的新输入类型：date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间（小时和分钟）datetime - 选取时间、日、月、年（UTC 时间）datetime-local - 选取时间、日、月
8、、年（本地时间）6. 新的表单元素datalist：元素规定输入域的选项列表，规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：注：IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 标签。7. 新的表单属性HTML5 验证1.placeholder2.autofocus3.autocomplete4.multiple5.form6.formactionformmethodformenctypeformtargert8. 全局属性accesskeytabindex9. 视频HTML5 规定了一种通过 vide
9、o 元素来包含视频的标准方法，可以不用通过插件（比如 Flash）来显示，可以控制播放/暂停以及调整尺寸等。HTML 5 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 元素（插件）。10.音频HTML5 规定了一种通过 audio 元素来包含音频的标准方法，audio 元素能够播放声音文件或者音频流，可以不用通过插件（比如 Flash）来显示。可以控制播放、暂停和音量等HTML 5 元素会尝试播放以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 元素（插件）。11.Canvas 与 SVGCanvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘SVG 不依赖分辨率
