6.1新标签及媒体 · Web前端开发技术案例教程

[TOC] # HTML5新标签 ## 案例1：语义标签 ## [参见](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main#%E5%8F%82%E8%A7%81 "Permalink to 参见") * 基本结构元素：[`<html>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html)、[`<head>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head)、[`<body>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body) * 分段相关元素：[`<article>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article)、[`<aside>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside)、[`<footer>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer)、[`<header>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header), 或[`<nav>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav) ![](https://img.kancloud.cn/8d/17/8d178f6994e03bc2e75d40292369ee74_552x204.png) ## 案例2：日期控件 ![](https://img.kancloud.cn/50/a4/50a41baa4852ae89a82292439a9a1b1e_375x160.png) ## 案例3：常用控件 ![](https://img.kancloud.cn/a2/41/a241f5dd057cd41a9bd93b7e7a7fc6e7_757x135.png) ![](https://img.kancloud.cn/0d/e0/0de0c2756ceacd09c5f916187dd8f14b_480x268.gif) ## 案例4：list控件 ![](https://img.kancloud.cn/72/71/727196ac428b0f020422e78aefdef8a2_480x268.gif) ## 案例5：表单属性 ![](https://img.kancloud.cn/25/12/251278e6b1dbc2b5f6241a2b8c821473_508x723.png) # 多媒体标签 ## 案例6：简易播放器 ![](https://img.kancloud.cn/3b/4e/3b4eb27305ba12b8ec993cc1c0e0673d_536x326.gif) ## 案例7：网页音乐 ![](https://img.kancloud.cn/62/83/6283b3cf8f06b75d061062e804898289_866x679.png)