1. HTML 5 <input> required
定义和用法
required 属性规定必需在提交之前填写输入字段。
如果使用该属性,则字段是必填(或必选)的。
注释:required 属性适用于以下 <input> 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
语法
<input required="required">
实例
带有必填字段的表单:
<form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
2. label
定义和用法
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
提示和注释:
注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
实例
带有两个输入字段和相关标记的简单 HTML 表单:
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
3. HTTP 方法:GET 对比 POST
两种最常用的 HTTP 方法是:GET 和 POST。
什么是 HTTP?
超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信。
HTTP 的工作方式是客户机与服务器之间的请求-应答协议。
web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。
举例:客户端(浏览器)向服务器提交 HTTP 请求;服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。
两种 HTTP 请求方法:GET 和 POST
在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST。
- GET - 从指定的资源请求数据。
- POST - 向指定的资源提交要被处理的数据
GET 方法
请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:
/test/demo_form.asp?name1=value1&name2=value2
有关 GET 请求的其他一些注释:
- GET 请求可被缓存
- GET 请求保留在浏览器历史记录中
- GET 请求可被收藏为书签
- GET 请求不应在处理敏感数据时使用
- GET 请求有长度限制
- GET 请求只应当用于取回数据
POST 方法
请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
有关 POST 请求的其他一些注释:
- POST 请求不会被缓存
- POST 请求不会保留在浏览器历史记录中
- POST 不能被收藏为书签
- POST 请求对数据长度没有要求
比较 GET 与 POST
下面的表格比较了两种 HTTP 方法:GET 和 POST。
| GET | POST |
后退按钮/刷新 | 无害 | 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。 |
书签 | 可收藏为书签 | 不可收藏为书签 |
缓存 | 能被缓存 | 不能缓存 |
编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 |
历史 | 参数保留在浏览器历史中。 | 参数不会保存在浏览器历史中。 |
对数据长度的限制 | 是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 | 无限制。 |
对数据类型的限制 | 只允许 ASCII 字符。 | 没有限制。也允许二进制数据。 |
安全性 | 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ! | POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 |
其他 HTTP 请求方法
下面的表格列出了其他一些 HTTP 请求方法:
方法 | 描述 |
HEAD | 与 GET 相同,但只返回 HTTP 报头,不返回文档主体。 |
PUT | 上传指定的 URI 表示。 |
DELETE | 删除指定资源。 |
OPTIONS | 返回服务器支持的 HTTP 方法。 |
CONNECT | 把请求连接转换到透明的 TCP/IP 通道。 |
4. <article></article>
浏览器支持
注释:Internet Explorer 8 以及更早的版本不支持 <article> 标签。Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <article> 标签。
定义和用法
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源:
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
实例
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>
5. <nav></nav>
标签定义及使用说明
<nav> 标签定义导航链接的部分。
并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。
在不同设备上(手机或者PC)可以制定导航链接是否显示,以适应不同屏幕的需求。
6. <router-link>
7. $route.params
8. <video></video>
播放录像:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
Element | | | | | |
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
标签定义及使用说明
<video> 标签定义视频,比如电影片段或其他视频流。
目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
浏览器 | MP4 | WebM | Ogg |
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 | YES | YES |
Safari | YES | NO | NO |
Opera | YES 从 Opera 25 版本开始 | YES | YES |
- MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
音频格式的 MIME 类型
格式 | MIME-type |
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML 4.01 与 HTML5之间的差异
<video> 标签是 HTML5 的新标签。
提示和注释
提示:可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
可选属性
New:HTML5 中的新属性。
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 |
preload | auto metadata none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
src | URL | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
全局属性
<video> 标签支持 HTML 的全局属性。
9.<audio></audio>
https://www.runoob.com/tags/tag-audio.html
实例
播放声音:
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
浏览器支持
IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。
注释: IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。
标签定义及使用说明
<audio> 标签定义声音,比如音乐或其他音频流。
目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。
浏览器 | MP3 | Wav | Ogg |
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
HTML 4.01 与 HTML5之间的差异
<audio> 标签是 HTML5 的新标签。
提示和注释
提示:可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
属性
New :HTML5 中的新属性。
属性 | 值 | 描述 |
autoplayNew | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controlsNew | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 |
loopNew | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
mutedNew | muted | 如果出现该属性,则音频输出为静音。 |
preloadNew | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。 |
srcNew | URL | 规定音频文件的 URL。 |
全局属性
<audio> 标签支持 HTML 的全局属性。
事件属性
<audio> 标签支持 HTML 的事件属性。