今天我们来总结一下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的相关知识,并将其应用到实际项目中,不断提升自己的技能和能力。