HTML5 新增一些有趣的新特性:
1、用于绘画的 canvas 元素
2、用于媒介回放的video和audio元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素,比如article、footer、header、nav、section
5、新的表单控件,比如date、time、email、url、search
-
header:定义文档的页眉,用来表示页面的头部。
-
nav:定义导航链接的部分nav 元素代表页面中的导航,其中的导航元素链接到其他页面或当前页面的其他部分。
-
main:主体信息
-
aside : 侧边栏
-
article:article元素表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。
-
section:定义文档中的节(section、区段)
-
footer:定义文档或节的页脚
-
datalist:标签定义选项列表。请与 input 元素配合使用该元素,其中input的list属性值必须和datalist的id值一致。(修改后要刷新页面)
-
figure元素:该元素用于表示一块独立的图片区域,元素内部可以包含一个或多个<img>元素。另外,该元素还可以包含一个<figcaption>元素,用于定义该图盘区域的标题。
-
figcaption元素:该元素通常放在<figure>内部,用于定义图片区域的标题。
-
fieldset:可将表单内相关元素分组,与legend 配合使用
-
meter: 使用 meter 元素来度量给定范围(gauge)内的数据
progress: 标签定义运行中的进度(进程)
常用新属性
属性**** | 用法**** | 含义**** |
---|---|---|
placeholder | <input type="text" placeholder="请输入用户名"> | 占位符提供可描述输入字段预期值的提示信息 |
autofocus | <input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
multiple | <input type="file" multiple> | 多文件上传 |
autocomplete | <input type="text" autocomplete="on" name="auto"> | 规定表单是否应该启用自动完成功能,on默认,启用自动完成(name必须,提交按钮必须) |
required | <input type="text" required> | 必填项 |
accesskey | <input type="text" accesskey="s"> | 规定激活(使元素获得焦点)元素的快捷键,Alt+S键 |
tabindex | <button tabindex="2">点我</button> | 指定获取焦点的顺序 |
data-* | <div id="box" data-user-name="张美丽">box</div> | 自定义标签属性 |
pattern | <input type="text" name="country_code" pattern="[A-z]{3}"/> | 属性规定用于验证输入字段的模式。<br />适用于以下 <input> 类型:text, search, url, tel, email 以及 password 。 |
新增的input的type属性值(重点)
类型**** | 使用示例**** | 含义**** |
---|---|---|
<input type="email"> | 输入邮箱格式 | |
tel | <input type="tel"> | 输入手机号码格式 |
url | <input type="url"> | 输入url格式 |
number | <input type="number"> | 输入数字格式 |
search | <input type="search"> | 搜索框(体现语义化) |
range | <input type="range"> | 自由拖动滑块 |
time | <input type="time"> | |
date | <input type="date"> | |
month | <input type="month"> | |
week | <input type="week"> |
多媒体标签
-
embed:标签定义嵌入的内容
-
audio:播放音频
-
video:播放视频
-
多媒体 embed
- embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。我们这里只讲解 插入网络视频, 后面H5会讲解 audio 和video 视频多媒体。
-
多媒体 audio
HTML5通过<audio>标签来解决音频播放的问题。
-
controls 是否显不默认播放控件
autoplay 自动播放(目前很多浏览器不支持自动播放)
loop 循环播放
-
多媒体 video
- HTML5通过<video>标签来解决音频播放的问题
-
autoplay 自动播放(18年开始,谷歌浏览器不支持自动播放)
muted 静音播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
-
字体图标
图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦。。 这就是字体图标(iconfont). -
字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等..
但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小,但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药...
字体图标使用流程
总体来说,字体图标按照如下流程:
-
1、UI人员设计字体图标效果图(svg)
-
2、前端人员上传生成兼容性字体文件包
-
3、前端人员下载兼容字体文件包到本地
-
4、把字体文件包引入到HTML页面中