本文归纳了HTML5中的交互元素，如details、summary、menu、command、progress和meter，以及HTML5的重要元素，如html根元素、文档元素、脚本、节点、分组内容、文本层次语义、嵌入内容和公共属性。还涉及HTML5的表单新特性，文件操作，以及视频、音频、绘图、数据存储、离线应用和其他API的应用。
一、HTML5常用的交互元素
1、内容交互元素
1.1、details元素----------用于说明文档或某个细节信息的作用，常与<summary>元素配合使用
details元素有显示脚本注释作用，但一般默认为隐藏，因此若想显示脚注，需附加属性open="open"
配合
1.2、summary元素-------<summary>+<details>=====><summary>说明文档的标题/<details>说明文档的详细信息
summary元素包含在details元素中,是details元素的子元素(在摆放位置时尽量放在第一个)
2、菜单交互元素
2.1、menu元素-----------一般与<li>元素结合使用,用来定义一个列表式的菜单
在使用menu元素定义菜单列表时,通常使用<menu>元素来定义菜单的框架,框架中的内容使用<li>元素来进行构造,以形成列表形
状. [ 注: 菜单还可以嵌套在别的菜单中,形成带层次的菜单结构]
2.2、command元素------定义各种类型的命令按钮,利用该标记的"url"属性可以添加图片,并且实现图片按钮效果,"type"设置按钮类型
command元素的disabled属性,通过JavaScript控制,可以实现单击禁用功能,防止用户反复单击或提示用户按钮已经提交成功.
3、状态交互元素
3.1、progress元素--------用来表示页面中的某个任务完成的进度
3.2、meter元素-----------用于表示在一定范围内的值,比如投票中,候选人各占比例情况及考试分数等
meter元素仅是帮助浏览器识别HTML中的数量,而不对该数量做任何的格式修改
二、HTML5重要元素
1.1 manifest----------URL值----------------------------------------该URL指向描述文档缓存信息的地址
1.2 xmlns(非必须)----http://www.w3.org/1999/xhtml----------设置xml
namespace的属性
2、文档元素
<head>
<title>-----------设置文档的标题内容
<base>----------设置页面中URL为空时的值----------href(当页面的URL为空时的链接地址) _target(打开页面链接的方式)
<link>-----------设置导入页面中的样式文件
<meta>---------设置页面的文档信息(如针对搜索引擎的关键字)
<style>----------定义HTML文档中的样式信息
<script>---------定义客户端脚本代码或文件
注 : 在一个页面文档中,<base>和<title>文件只能用一次,并且必须包含在<head>元素中,而其他元素可以重复多次使用.<base>元素应
该排在其他元素之前,以便于其他元素能够调用<base>元素的属性.
3、脚本
<script>---------包含脚本语言,也可以通过src属性导入;同时选择元素的必选属性type和MIME类型
<noscript>------一个检测工具,即浏览器如果支持<script>脚本,则不会显示<noscript>中的内容.
4、节点
<section>
<nav>
<hgroup>
... ...
5、分组内容
<ul>-------------定义页面中的无序列表
<ol>-------------定义页面中的有序列表
<dl>-------------定义页面创建术语列表
6、文本层次语义
<time>---------用于定义时间或日期
<mark>--------在文本中高亮显示某个或某几个字符,旨在引起用户注意
<strong>是作者对文档中某段文字的重要性进行的强调
<em>是作者为了突出文章的重点而进行的设置
<cite>----------可以创建一个引用标记,用于文档中参考文献的引用说明
7、嵌入内容
<img>---------是在页面中导入图像
<iframe>------用于在页面中创建包含另一文档的框架
<object>-------用于在界面中嵌入一个对象,这个对象包括视频,音频,Flash等多媒体文件
8、公共属性
draggable属性------------用于设置是否允许用户拖动元素
hidden属性----------------用于元素是否显示
spellcheck属性-------------用于检测文本框或输入框中的拼音或语法是否正确
contenteditable属性-------直接对显示在页面中的文字进行编辑
三、HTML5——表单
1、input元素i新增类型
email邮件类型
url地址类型
number数字类型
range数字滑动条
date日期类型
search搜索类型
2、input元素新增的公用属性
autofocus----------页面加载成功后,设置对应的元素自动获取焦点
pattern-------------使用正则表达式验证<input>元素的内容
placeholder--------设置文本输入框的默认内容 (只支持纯文本)
required------------是否检测文本输入框中的内容为空
novalidate---------是否验证文本输入框中的内容
3、新增表单元素
datalist-------------辅助表单中文本框的输入 (本身是隐藏的,与表单文本框的"list"属性绑定==>list属性值设定为datalist的"ID")
output--------------在页面中显示各种不同类型的表单元素内容
keygen--------------用于生成页面的密钥 (在表单提交时,该元素生成一对密钥,私密钥保存在客户端,公密钥保存在服务器端,公密钥
用于客户端证书的验证)
4、表单新增的验证方法和属性
checkValidity-------每个元素都可以调用公用方法checkValidity(),核实本身是否与验证条件匹配,如果一致,返回true,否则flase;
setCustomValidity-修改提示信息,为了与系统出错信息的格式一致
noValidity-----------用于取消表单的全部元素的验证
四、HTML5——文件
1、选择文件
1、1
选择单个文件
2、1
选择多个文件
通过添加"Multiple" 属性,将该属性设置为true,可实现多文件上传
当多个文件被选中时,在上传文件元素中,将会产生一个"FileList"对象,用来装载各文件基本信息
3、1
使用Blob接口获取文件的类型云大小
Blob表示二进制数据块.该接口提供一个slice方法,通过该方法可以访问指定长度与类型的字节内部数据块
并且该接口提供两个属性 : size------表示返回数据块的大小
type------表示返回数据块的MIME类型,如果不确定,则返回一个空字符串
4、1
通过类型过滤选择的文件
具体流程 : 当选择上传文件后,遍历每一个"file"对象,获取该对象的类型,并将该类型与设置的过滤类型进行匹配;如果不符合,则提示
上传文件类型错误或拒绝上传,从而实现在选择文件时过滤掉不需要上传的文件.
5、1
通过accept属性过滤选择文件的类型
设置accept属性为过滤文件的类型,在打开窗口选择文件时,默认的文件类型就是所设置的类型
2、使用FileReader接口读取文件
readAsDataURL----图片预览的实质是 : 图片文件被读取后,展示在页面中的过程
3、使用DataTransfer对象拖放上传图片文件
4、文件读取时的错误与异常
发生错误和异常的条件
(1)访问某个文件的过程中,该文件被移动或被移除及被其他应用程序并发式修改;
(2)由于权限,无法读取文件的数据信息;
(3)文件出于安全因素的考虑,在读取文件时返回一个无效的数据信息;
(4)读取文件太大,超出URL网址的限制,将无法返回一个有效的数据结构信息;
(5)在读取文件的过程中,,应用程序本身触发了中止读取文件abort()事件;
使用FileError接口------该接口主要用于异步报告错误,
五、HTML5——视频和音频
六、HTML5——绘图基础
七、HTML5——数据存储
八、HTML5——离线应用
九、HTML5——其他应用型API
十、HTML5——元素的拖放
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
