HTML5新增---新知
新增的标签
1.结构标签（块级标签）：
header：定义网页的头部区域 页眉
nav：定义导航链接的部分
article：定义页面独立的内容区域
section：定义文档的节（section、区段）
aside：定义页面的侧边栏内容
footer：定义网页的底部区域 页脚
<header>定义网页的头部 页眉</header>
<nav>定义导航链接部分</nav>
<section>定义区域</section>
<article>定义文章</article>
<aside>定义侧边栏</aside>
<footer>定义网页的底部 页脚</footer>2.datalist标签：
定义选项option列表 与input结合使用 input使用list属性
datalist使用id属性 list属性与id属性的值一致 表示与input形成链接
<input type="text" list="yy" ><datalist id="yy"><option>A</option><option>B</option><option>C</option><option>D</option><option>E</option></datalist>3.fieldset标签：
和form一起使用 对表单分组 分组后每一组大概的描述与legend搭配使用
<fieldset><legend>账户信息</legend>用户名：<input type="text"><br><br>密 码：<input type="password">
</fieldset>4.mark：
用于定义带有记号的文本。在需要突出显示文本时可使用 <mark> 标签
<p>这是一个段落，中间的<mark>文本</mark>需要标记</p>5.meter：
定义度量衡 仅用于已知最大和最小值的度量 不能当做进度条使用
min：规定范围最小值
max：规定范围最大值
value：规定度量的当前值，是必须的属性。可以用数值表示
low：范围界定的最低值，需大于min、小于等于(min+max)/2
high：范围界定的最大值，需小于max、大于等于(min+max)/2
<meter min="0" max="10" value="6"></meter> <br>
<!-- value的值超过high的值 -->
<meter min="0" max="100" value="95" low="30" high="90"></meter><br>
<!-- value的值在low与high之间 -->
<meter min="0" max="100" value="60" low="30" high="90"></meter><br>
<!-- value的值低于low的值 -->
<meter min="0" max="100" value="25" low="30" high="90"></meter>6.progress：
定义运行中的任务进度 通常与JavaScript结合使用来显示当前的任务进度 不能作为度量值使用
<progress value="20" max="100"></progress>新增的input的type属性值
新增的input的属性
1.placeholder 表示占位符，用于提示用户输入，当用户输入数据时，这个提示会自动消失
<input type="text" placeholder="请输入用户名" >2.autofocus 表示页面加载时，input自动获得焦点
<input type="text" autofocus>3.multiple 表示可以选择多文件上传
<input type="file" multiple>4.required 表示必填项，内容不能为空
<input type="text" required>5.accesskey 表示使用alt+字母可以让input表单快速获得焦点
<input type="text" accesskey="s">6.autocomplete 表示记录之前输入的信息，完成自动输入功能
<!-- autocomplete首先需要提交按钮 这个表单必须给name值 -->
<input type="text" autocomplete="off/on">实例：
<fieldset><legend>学生档案</legend><label>姓名：<input type="text" required placeholder="请输入学生名字"></label><br /><br /><label>手机号：<input type="tel"></label> <br /><br /><label>邮箱：<input type="email"></label> <br /><br /><label>所属专业：<input type="text" placeholder="请选择专业" list="subject"></label><datalist id="subject"><option>Java</option><option>HTML5</option><option>php</option><option>android</option></datalist><br /><br /><label>出生年月：<input type="date"> </label><br /><br /><label>成绩：<input type="number"> </label><br /><br /><input type="submit"> <input type="reset">
</fieldset>多媒体标签
1.embed标签（弃用）：音、视频文件 可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3、MP4等
| 属性 | 值 | 描述 |
|---|---|---|
| src | url | 要播放的视频音频地址 |
| width | px | 控制面板的宽度 |
| height | px/数值 | 控制面板的高度 |
弃用原因：插入文档片段 不安全
2.audio标签：加载音频文件
支持的三种音频格式：
MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM： 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
| 属性 | 值 | 描述 |
|---|---|---|
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| src | url | 要播放的音频的url |
| muted | muted | 静音播放 |
autoplay:自动播放 现在的浏览器已经不支持自动播放 禁用：性能缘故
<audio> <video> 元素都允许使用多个 <source> 元素. <source> 元素可以链接不同的音视频文件 浏览器将使用第一个支持的音视频文件 浏览器的兼容：IE 8不支持
<audio controls><source src="./music/loveyou.mp3"><source src="./music/loveyou.ogg"><source src="./music/loveyou.wav">您的浏览器不支持 HTML5 audio 标签。
</audio>3.video标签：加载视频资源
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放的问题) |
| controls | controls | 向用户显示播放控件 |
| width | px | 设置播放器的宽度 写不写px单位都没影响 |
| height | px | 设置播放器的高度 写不写px单位都没影响 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto(预先加载视频) none（不应加载视频） metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：视频长度）还是很合理的。加载一部分 | 规定是否预加载视频，如果有了autoplay，就忽略该属性 |
| src | url | 视频url地址 |
| poster | imgurl | poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误 可能是转圈圈等待 |
| muted | muted | 加载视频静音播放 |
preload不设置值时，则采用默认值，默认值就是浏览器定义的了（即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。Chrome：preload默认值为auto，加载部分视频； FireFox：preload默认值为空，不加载视频； IE：preload默认值为metadata，加载视频（貌似是全部）； Safari：preload默认值为auto，加载视频（大小未知）； preload设为none时，只有IE会加载视频
解决Chrome浏览器无法自动播放视频的问题
谷歌浏览器做了改革，不再允许自动播放音频和视频。Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频
<video autoplay></video> 解决方案：比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将muted去掉。或者让用户手动去打开音频（腾讯视频就是这样做的）
MIME类型(了解)
什么是MIME类型
在把输出结果传送到浏览器上的时候，浏览器必须启动应用程序来处理这个输出文档。这可以通过多种类型MIME（多功能网际邮件扩充协议）来完成。在HTTP中，MIME类型被定义在Content-Type header中。
例如，假设你要传送一个Microsoft Excel文件到客户端。那么这时的MIME类型就是“application/vnd.ms-excel”。在大多数实际情况中，这个文件然后将传送给Execl来处理（假设我们设定Execl为处理特殊MIME类型的应用程序）。在ASP中，设定MIME类型的方法是通过Response对象的ContentType属性。
多媒体文件格式MIME
最早的HTTP协议中，并没有附加的数据类型信息，所有传送的数据都被客户程序解释为超文本标记语言HTML 文档，而为了支持多媒体数据类型，HTTP协议中就使用了附加在文档之前的MIME数据类型信息来标识数据类型。
MIME意为多目Internet邮件扩展，它设计的最初目的是为了在发送电子邮件时附加多媒体数据，让邮件客户程序能根据其类型进行处理。然而当它被HTTP协议支持之后，它的意义就更为显著了。它使得HTTP传输的不仅是普通的文本，而变得丰富多彩。
每个MIME类型由两部分组成，前面是数据的大类别，例如声音audio、图象image等，后面定义具体的种类。
常见的MIME类型
超文本标记语言文本 .html,.html text/html
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
GIF图形 .gif image/gif
JPEG图形 .ipeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
HTML5新增---新知相关推荐
- HTML5新增了哪些标签
HTML5新增了哪些标签(来源网络) 标签 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸文章.博客条目.用户评论等内容. 支持HTML ...
- HTML5新增标签与属性
文章目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeho ...
- 哪一个不是html5新增的语义化标记元素,东师19春《HTML5开发基础与应用》作业考核【标准答案】...
<HTML5开发基础与应用>作业考核-0001 试卷总分:100 得分:0 一. 单选题 (共 30 道试题,共 60 分) 1.关于cookie存储机制下列说法不正确的是: A.简 ...
- HTML5新增表单验证
HTML5新增属性: 属性 描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则 ...
- html5 新增属性了解
2019独角兽企业重金招聘Python工程师标准>>> autofocus 获取焦点 <input type="text" name="fna ...
- HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
- HTML5协议的,HTML5新增协议：WebSocket协议的实例
本篇文章给大家带来的内容是关于HTML5新增协议:WebSocket协议的实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. WebSocket 是 HTML 5 新增的协议,基于 ...
- HTML5新增属性学习笔记
1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. 1 <form id="testForm&quo ...
- html5 支持php标签吗,HTML5新增标签使用方法
HTML5提供了一些新的元素和属性,例如nav(网站导航块)和footer.这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如au ...
- html标签api,html5新增标签+API介绍
新增标签 1.embed embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器). 这篇文章介绍了embed的常用属性,基本都是定义播放器的一些 ...
最新文章
- 哪些人适合参加UI设计培训
- c语言既适合于开发,C语言试题及答案 (1)
- std::future和std::promise和std::packaged_task
- [2020.11.26NOIP模拟赛]勇者的后缀【SA,RMQ,主席树,二分】
- python之旅-day2（较基础阶段）
- Shell命令对整数求和，每行一个？
- 利用MindManager，制作简易的漏斗图
- android:模拟水波效果的自己定义View
- Tomcat默认端口，关闭不必要的安全隐患
- 关于win10激活工具激活系统，浏览器主页被T999，2345劫持解决方法
- [dlang]（4）自定义的mysql orm工具
- 数据压缩——LZW 编解码算法实现与分析
- uni 页面加载完毕_uniapp小程序如何等待数据回来才加载页面？
- ShareSDK iOS端微信如何获取authcode值
- 对于阻抗的理解与记录
- lv双肩包尺寸对照表_2016最有人气MONOGRAM LV双肩包有哪些颜色与尺寸-美丽包包网...
- 模拟后台接收短信验证码
- 计算机考研学长学什么,关于考研的问题,学长们请指教：）
- PS磨皮神器来了，一键修出美美的自己！ Portraiture（附带安装教程）
- ERP 淡出历史舞台，DDD 才是 yyds！