实训第六次总结

今天我们来总结一下HTML5新标签及特性：

1.HTML5 新标签与特性

达标：掌握 html5 的常用新标签 - 新属性

1.1 什么是 HTML5

HTML5 ： HTML 标准的最新版本，是对 HTML 的第五次重大修改。 HTML5 的出现，对于 WEB 来说意义

重大，其目的是想要把目前 WEB 中存在的各种问题一并解决掉。

两个概念：

是一个新版本的 HTML 语言，定义了新的标签、特性和属性。

拥有一个强大的技术集，这些技术集是指： HTML5CSS3 、 javascript, 这也是广义上的 HTML5

总之： HTML5 就是对 HTML4 已有标签属性的删除和增加，另外又增加了新的多媒体等标签，解决目前

WEB 上存在的问题。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article 、 footer 、 header 、 nav 、 section

新的表单控件，比如 date 、 time 、 email 、 url 、 search

1.2 语法的改变

DOCTYPE 声明

指定字符编码 utf-8

可以省略结束标记

具有 boolean 值的属性（ disabled ， checked ）

标签属性的值可以省略引号

等等

1.3 新增语义化标签

w3c 手册中文官网： http://www.w3school.com.cn/

header ：定义文档的页眉 , 用来表示页面的头部。

nav ：定义导航链接的部分 nav 元素代表页面中的导航，其中的导航元素链接到其他页面或当前页面

的其他部分。

main ：主体信息

aside : 侧边栏

article ： article 元素表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立

的内容。

section ：定义文档中的节（ section 、区段）

footer ：定义文档或节的页脚

datalist ：标签定义选项列表。请与 input 元素配合使用该元素，其中 input 的 list 属性值必须和

datalist 的 id 值一致。（修改后要刷新页面）

元素，用于定义该图盘区域的标题。

figure 元素：该元素用于表示一块独立的图片区域，元素内部可以包含一个或多个元素。另外，该

元素还可以包含一个

内部，用于定义图片区域的标题。

figcaption 元素：该元素通常放在

fieldset ：可将表单内相关元素分组，与 legend 配合使用

meter: 使用 meter 元素来度量给定范围（ gauge ）内的数据

progress: 标签定义运行中的进度（进程）

案列：

<form action = "" >

<fieldset>

<legend> 学生档案 </legend>

<label for = "userName" > 姓名 : </label>

<input type = "text" name = "userName" id = "userName" placeholder = " 请输入用户名 " >

<br>

<label for = "userPhone" > 手机号码 : </label>

<input type = "tel" name = "userPhone" id = "userPhone" pattern = "^1\d{10}$" ><br>

<label for = "email" > 邮箱地址 : </label>

<input type = "email" required name = "email" id = "email" ><br>

<label for = "collage" > 所属学院 : </label>

<input type = "text" name = "collage" id = "collage" list = "cList" placeholder = " 请选

择 " ><br>

<datalist id = "cList" >

<option value = " 前端与移动开发学院 " ></option>

<option value = "java 学院 " ></option>

<option value = "c++ 学院 " ></option>

</datalist><br>

<label for = "score" > 入学成绩 : </label>

<input type = "number" max = "100" min = "0" value = "0" id = "score" ><br>

<label for = "level" > 基础水平 : </label>

<meter id = "level" value = "10" max = "100" min = "0" low = "59" high = "90" ></meter>

<br>

<label for = "inTime" > 入学日期 : </label>

<input type = "date" id = "inTime" name = "inTime" ><br>

<label for = "leaveTime" > 毕业日期 : </label>

<input type = "date" id = "leaveTime" name = "leaveTime" ><br>

<input type = "submit" >

</fieldset>

</form>

HTML5作为HTML的最新版本，引入了众多新标签和特性，这些新特性不仅提升了网页的语义化水平，还增加了网页的交互性和多媒体支持。

HTML5新标签与特性课后收获与总结

通过学习和掌握HTML5的新标签与特性，我获得了丰富的知识和实践技能，这些都对我在网页设计和开发方面有了极大的帮助。以下是我对这次学习的收获与总结：

语义化标签

HTML5引入的语义化标签极大地提高了网页的可读性和可访问性。我深刻理解了<header>, <nav>, <footer>, <article>, <section>, 和 <aside>等标签的用途，并能够在设计网页时合理使用它们，使网页结构更加清晰，易于被搜索引擎抓取和理解。

多媒体支持

HTML5的<video>和<audio>标签让我能够直接在网页中嵌入视频和音频内容，而无需依赖第三方插件。这不仅提高了网页的交互性和用户体验，还使得网页加载更加快速，减少了用户的等待时间。

图形与绘图

<canvas>标签为我提供了在网页上绘制图形、图像和动画的强大工具。通过学习Canvas API，我能够使用JavaScript在网页上实现各种动态效果和复杂图形，大大丰富了网页的表现力。

表单增强

HTML5对表单元素进行了增强，如新增的日期选择器、邮箱验证、数字输入等控件，使得表单设计更加简单直观，用户体验更加友好。此外，新的表单验证API也提高了表单数据的准确性和安全性。

客户端存储

HTML5提供的localStorage和sessionStorage方法使得我能够在客户端存储数据，实现跨页面、跨会话的数据共享。这为我开发需要保存用户数据或状态的网页应用提供了极大的便利。

地理位置支持

Geolocation API允许我获取用户的地理位置信息，从而为用户提供基于位置的个性化服务。这对于开发需要定位功能的网页应用非常有用。

Web Workers

Web Workers允许我在后台线程中执行JavaScript代码，从而避免了阻塞主线程，提高了网页的响应能力和性能。这对于处理大量数据或执行复杂计算的任务非常有用。

拖放API

通过拖放API，我能够实现用户通过拖动和放置元素与网页进行交互的功能。这为网页应用提供了更加丰富的交互方式，提高了用户的参与度和体验。

总结

HTML5的新标签与特性为网页设计和开发带来了革命性的变化。通过学习和掌握这些新特性，我能够设计出更加符合用户需求和体验的网页应用。未来，我将继续深入学习HTML5的相关知识，并将其应用到实际项目中，不断提升自己的技能和能力。