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>

浏览器支持

html5输入提示文字 html5规定输入字段必填_ide

 

html5输入提示文字 html5规定输入字段必填_HTTP_02

 html5输入提示文字 html5规定输入字段必填_HTML_03 

html5输入提示文字 html5规定输入字段必填_ide_04

 html5输入提示文字 html5规定输入字段必填_HTML_05

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 的事件属性。