固阳音箱协会

html嵌入元素、音频和视频元素、表单元素、全局元素、和其他元素

Lazy的笔记2019-02-15 13:33:05

一.嵌入元素总汇
这里所列出的元素,并非本节课全部涉及到,比如音频 audio、视频 video、以及动态图像 canvas 和媒体资源 source、track 等会在后面章节或季度讲解。

元素名称

说明

img

嵌入图片

map

定义客户端分区响应图

area

表示一个用户客户端分区响应图的区域

audio

表示一个音频资源

video

表示一个视频资源

iframe

嵌入一个文档

embed

用插件在 HTML 中嵌入内容

canvas

生成一个动态的图形画布

meter

嵌入数值在许可值范围背景中的图形表示

object

在 HTML 文档中嵌入内容

param

表示将通过 object 元素传递给插件的参数

progress

嵌入目标进展或任务完成情况的图形表示

source

表示媒体资源

svg

表示结构化矢量内容

track

表示媒体的附加轨道(例如字幕)


二.嵌入元素解析
1.<img>嵌入图像
<img src="img.png">
解释:<img>元素主要是插入一张外部的图片,那么图片的路径问题和超链接一致。
img 的私有属性

属性名称

说明

src

嵌入图像的 URL

alt

当图片不加载时显示的备用内容

width

定义图片的长度(单位是像素)

height

定义图片的高度(单位是像素)

ismap

创建服务器端分区响应图

usemap

关联<map>元素


<a href="index.html">
<img src="img.png" width="339" height="229" alt="风景图" ismap>
</a>
2.<map>创建分区响应图
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="31,28,112,100"
href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47"
href="http://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112"
href="http://www.soso.com" target="_blank" alt="多边形">
</map>
解释:通过图片中的热点进行超链接,这里我们采用 Dreamweaver 进行操作生成的。
3.<iframe>嵌入另一个文档
<a href="index.html" target="in">index</a> |
<a href="http://www.baidu.com" target="in">百度</a>
<iframe src="http://www.ycku.com" width="600" height="500"
name="in"></iframe>
解释:<iframe>表示内嵌一个 HTML 文档。其下的 src 属性表示初始化时显示的页面,width 和 height 表示内嵌文档的长度和高度,name 表示用于 target 的名称。
4.<embed>嵌入插件内容
<embed
src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceI
d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
width="480" height="400"></embed>
解释:<embed>元素是扩展浏览器的功能,大部分用于添加对插件的支持。这里添加了一个土豆网的 flash 视频。type 类型表示被插入内容的类型,这里不列出所有,后面如果遇到其他类型的文件,再继续探讨;width 和 height 表示宽高;src 表示文件路径。
5.<object>和<param>元素
解释:<object>元素和<embed>一样,只不过 object 是 html4 的标准,而 embed 是
html5 的标准。而 object 不但可以嵌入 flash,还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替,我们这里暂时不对其详细讲解。
6.<progress>显示进度
<progress value="30" max="100"></progress>
解释:<progress>元素可以显示一个进度条,一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。
7.<meter>显示范围里的值
<meter value="90" min="10" max="100" low="40" high="80"
optimum="60"></meter>
解释: <meter>元素显示某个范围内的值。其下的属性包含: min 和 max 表示范围边界,low 表示小于它的值过低,high 表示大于它的值过高,optimum 表示最佳值,但不出现效果。IE 浏览器不支持此元素。


一.音频和视频概述
首先,我们要理解两个概念:容器(container)和编解码器(codec)。
1.视频容器
音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、 标题、 子标题、 字幕等相关信息。 主流视频容器支持的格式为: .avi、 .flv、 .mp4、 .mkv、
.ogg、.webm。
2.编解码器
音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间;如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:AAC、MPEG-3、Ogg Voribs,视频编解码器:H.264、VP8、Ogg Theora。
3.浏览器支持情况
起初,HTML5 规范本来打算指定编解码器,但实施起来极为困难。部分厂商已有自己的标准,不愿实现标准;而有一些编解码器受专利保护,需要支付昂贵费用。最终放弃了统一
规范的要求,导致各个浏览器实现自己的标准。

容器格式

视频编解码

音频编解码

IE9+

Firefox5+

Chrome13+

WebM

VP8

Vorbis

×

OGG

Theora

Vorbis

×

MPEG-4

H.264

AAC

×

疑问?


除了上面三款浏览器,还有 Safari5+支持 MPEG-4,Opera11 支持 WebM 和 OGG,通过这组数据,只要备好 MP4 和 OGG 格式的即可,但对于新的高清标准 WebM,当然是非常必要的。因为 WebM 不但清晰度高,而且免费,不受限制许可的使用源码和专利权。目前 Chrome 浏览器, 为了推广 WebM 格式的视频。 声称未来将放弃 H.264 编码的视频,所以有可能在以后的版本中无法播放 MP4 的视频。当然,目前演示的版本还是支持的。
二.video 视频元素
以往的视频播放,需要借助 Flash 插件才可以实现。但 Flash 插件的不稳定性经常让浏览器导致崩溃, 因此很多浏览器或系统厂商开始抛弃它。 而取代它的正是 HTML5 的 video元素。
<video>元素的属性

属性名称

说明

src

视频资源的 URL

width

视频宽度

height

视频高度

autoplay

设置后,表示立刻开始播放视频

preload

设置后,表示预先载入视频

controls

设置后,表示显示播放控件

loop

设置后,表示反复播放视频

muted

设置后,表示视频处于静音状态

poster

指定视频数据载入时显示的图片


1.嵌入一个 WebM 视频
<video src="test.webm" width="800" height="600"></video>
解释:<video>插入一个视频,主流的视频为.webm,.mp4,.ogg 等。src 表示资源
URL;width 表示宽度;height 表示高度。
2.附加一些属性
<video src="test.webm" width="800" height="600" autoplay controls loop
muted></video>
解释:autoplay 表示自动开始播放;controls 表示显示播放控件;loop 表示循环播
放;muted 表示静音。
3.预加载设置
<video src="http://li.cc/test.webm" width="800" height="600" controls
preload="none"></video>
解释:preload 属性有三个值:none 表示播放器什么都不加载;metadata 表示播放之前只能加载元数据(宽高、第一帧画面等信息);auto 表示请求浏览器尽快下载整个视
频。
4.使用预览图
<video src="http://li.cc/test.webm" width="800" height="600" controls
poster="img.png"></video>
解释:poster 属性表示在视频的第一帧,做一张预览图。
5.兼容多个浏览器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>这里引入 flash 播放器实现 IE9 以下,但没必要了</object>
</video>
解释:通过<source>元素引入多种格式的视频,让更多的浏览器保持兼容。
二.audio 音频元素
和 video 元素一样,audio 元素用于嵌入音频内容,而音频元素的属性和视频元素类似。音频的支持度和视频类似,使用<source>元素引入多种格式兼容即可。主流的音频格
式有:.mp3,.m4a,.ogg,.wav。

属性名称

说明

src

视频资源的 URL

autoplay

设置后,表示立刻开始播放视频

preload

设置后,表示预先载入视频

controls

设置后,表示显示播放控件


1.嵌入一个音频
<audio src="test.mp3" controls autoplay></audio>
解释:和嵌入视频一个道理。
2.兼容多个浏览器
<audio controls>
<source src="test.mp3">
<source src="test.m4a">
<source src="test.wav">
</audio>
解释:略。
PS:更多设计到 API 的 JavaScript 控制,将在以后的基于 JavaScript 基础后讲解。


一.表单元素总汇
在 HTML5 的表单中,提供了各种可供用户输入的表单控件。

元素名称

说明

form

表示 HTML 表单

input

表示用来收集用户输入数据的控件

textarea

表示可以输入多行文本的控件

select

表示用来提供一组固定的选项

option

表示提供提供一个选项

optgroup

表示一组相关的 option 元素

button

表示可用来提交或重置的表单按钮(或一般按钮)

datalist

定义一组提供给用户的建议值

fieldset

表示一组表单元素

legend

表示 fieldset 元素的说明性标签

label

表示表单元素的说明标签

output

表示计算结果


二.表单元素解析
1.<form>定义表单
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
解释:<form>元素主要是定义本身是一组表单。

元素名称

说明

action

表示表单提交的页面



method

表示表单的请求方式:有 POST 和 GET 两种,默认 GET

enctype

表示浏览器对发送给服务器的数据所采用的编码格式。 有三
种:application/x-www-form-urlencoded(默认编码,
不能将文件上传到服务器)、multipart/form-data(用
于上传文件到服务器)、text/plain(未规范的编码,不
建议使用,不同浏览器理解不同)

name

设置表单名称,以便程序调用

target

设置提交时的目标位置:_blank、_parent、_self、_top

autocomplete

设置浏览器记住用户输入的数据,实现自动完成表单。默认
为 on 自动完成,如果不想自动完成则设置 off。

novalidate

设置是否执行客户端数据有效性检查,后面课程讲解。


//使用 get 提交数据
method="get"
//丧失自动提示功能
autocomplete="off"
//使用_blank 新建目标
target="_blank"
2.<input>表示用户输入数据
<input name="user">
解释:<input>元素默认情况会出现一个单行文本框,有五个属性。

属性名称

说明

autofocus

让光标聚焦在某个 input 元素上,让用户直接输入

disabled

禁用 input 元素

autocomplete

单独设置 input 元素的自动完成功能

form

让表单外的元素和指定的表单挂钩提交

type

input 元素的类型,内容较多,将在下节课展开讲解

name

定义 input 元素的名称,以便接收到相应的值


//聚焦光标
<input name="user" autofocus>
//禁用 input
<input name="user" disabled>
//禁止自动完成
<input name="user" autocomplete="off">
//表单外的 input
<form method="get" id="register">
...
</form>
<input name="email" form="register">
3.<label>添加说明标签
<p><label for="user">用户名:<input id="user" name="user"></label></p>
解释:<label>元素可以关联 input,让用户体验更好。且更加容易设置 CSS 样式。
4.<fieldset>对表单进行编组
<fieldset>...</fieldset>
解释:<fieldset>元素可以将一些表单元素组织在一起,形成一个整体。

属性名称

说明

name

给分组定义一个名称

form

让表单外的分组与表单挂钩

disabled

禁用分组内的表单


5.<legend>添加分组说明标签
<fieldset>
<legend>注册表单</legend>
</fieldset>
解释:<legend>元素给分组加上一个标题。
6.<button>添加按钮
<button type="submit"></button>
解释:<button>元素添加一个按钮,type 属性有如下几个值:

值名称

说明

submit

表示按钮的作用是提交表单,默认

reset

表示按钮的作用是重置表单

button

表示按钮为一般性按钮,没有任何作用


//提交表单
<button type="submit">提交</button>
//重置表单
<button type="reset">重置</button>
//普通按钮
<button type="button">按钮</button>
对于 type 属性为 submit 时,按钮还会提供额外的属性。

属性名称

说明

form

指定按钮关联的表单

formaction

覆盖 form 元素的 action 属性

formenctype

覆盖 form 元素的 enctype 属性

formmethod

覆盖 form 元素的 method 属性

formtarget

覆盖 form 元素的 target 属性

formnovalidate

覆盖 form 元素的 novalidate 属性


//表单外关联提交
<button type="submit" form="register">提交</button>


一.type 属性总汇
input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下,什么样
的数据均可以输入。而通过不同的属性值,可以限制输入的内容。

属性名称

说明

text

一个单行文本框,默认行为

password

隐藏字符的密码框

search

搜索框,在某些浏览器键入内容会出现叉标记取消

submit、 reset、 button

生成一个提交按钮、重置按钮、普通按钮

number、range

只能输入数值的框;只能输入在一个数值范围的框

checkbox、radio

复选框,用户勾选框;单选框,只能在几个中选一个

image、color

生成一个图片按钮,颜色代码按钮

email、tel、url

生成一个检测电子邮件、号码、网址的文本框

date、month、time、
week、datetime、
datetime-local

获取日期和时间

hidden

生成一个隐藏控件

file

生成一个上传控件


二.input 元素解析
1.type 为 text 值时
<input type="text">
解释:当 type 值为 text 时,呈现的就是一个可以输入任意字符的文本框,这也是默认行为。并且,还提供了一些额外的属性。

属性名称

说明



list

指定为文本框提供建议值的 datalist 元素,其值为
datalist 元素的 id 值

maxlength

设置文本框最大字符长度

pattern

用于输入验证的正则表达式

placeholder

输入字符的提示

readonly

文本框处于只读状态

disabled

文本框处于禁用状态

size

设置文本框宽度

value

设置文本框初始值

required

表明用户必须输入一个值,否则无法通过输入验证


//设置文本框长度
<input type="text" size="50">
//设置文本框输入字符长度
<input type="text" maxlength="10">
//设置文本框的初始值
<input type="text" value="初始值">
//设置文本框输入提示
<input type="text" placeholder="请输入内容">
//设置文本提供的建议值
<input list="footlist">
<datalist id="footlist">
<option value="苹果">苹果</option>
<option value="桔子">桔子</option>
<option value="香蕉" label="香蕉">
<option value="梨子">
</datalist>
//设置文本框内容为只读,可以提交数据
<input type="text" readonly>
//设置文本框内容不可用,不可以提交数据
<input type="text" disabled>
2.type 为 password 值时
<input type="password">
解释:当 type 值为 password 时,一般用于密码框的输入,所有的字符都会显示星号。
密码框也有一些额外属性。

属性名称

说明

maxlength

设置密码框最大字符长度

pattern

用于输入验证的正则表达式

placeholder

输入密码的提示

readonly

密码框处于只读状态

disabled

文本框处于禁用状态

size

设置密码框宽度

value

设置密码框初始值

required

表明用户必须输入同一个值


这里除了正则和验证需要放在下一节,其余和文本框一致。
3.type 为 search 时
<input type="search">
解释:和文本框一致,在除 Firefox 浏览器的其他现代浏览器,会显示一个叉来取消搜索内容。额外属性也和 text 一致。
4.type 为 number、range 时
<input type="number">
<input type="range">
解释:只限输入数字的文本框,不同浏览器可能显示方式不同。生成一个数值范围文本框,只是样式是拖动式。额外属性如下:

属性名称

说明

list

指定为文本框提供建议值的 datalist 元素,其值为
datalist 元素的 id 值

min

设置可接受的最小值

max

设定可接受的最大值

readonly

设置文本框内容只读

required

表明用户必须输入一个值,否则无法通过输入验证

step

指定上下调节值的步长

value

指定初始值


//范围和步长
<input type="number" step="2" min="10" max="100">
5.type 为 date 系列时
<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">
解释: 实现文本框可以获取日期和时间的值,但支持的浏览器不完整。 我们测试 Chrome和 Opera 支持,其他浏览器尚未支持。所以,在获取日期和时间,目前还是推荐使用 jQuery等前端库来实现日历功能。额外属性和 number 一致。
6.type 为 color 时
<input type="color">
解释:实现文本框获取颜色的功能,最新的现代浏览器测试后 IE 不支持,其余的都能显示一个颜色对话框提供选择。
7.type 为 checkbox、radio 时
音乐 <input type="checkbox">
体育 <input type="checkbox">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
解释:生成一个获取布尔值的复选框或固定选项的单选框。额外属性如下:

属性名称

说明

checked

设置复选框、单选框是否为勾选状态

required

表示用户必须勾选,否则无法通过验证

value

设置复选框、单选框勾选状态时提交的数据。默认为 on


//默认勾选,默认值为 1
<input type="checkbox" name="music" checked value="1">
8.type 为 submit、reset 和 button 时
<input type="submit">
解释:生成一个按钮,三种模式:提交、重置和一般按钮,和<button>元素相同。

值名称

说明

submit

生成一个提交按钮

reset

生成一个重置按钮

button

生成一个普通按钮



如果是 submit 时,还提供了和<button>元素一样的额外属性:formaction、
formenctype、formmethod、formtarget 和 formnovalidate。
9.type 为 image 时
<input type="image" src="img.png">
解释:生成一个图片按钮,点击图片就实现提交功能,并且传送了分区响应数据。图片按钮也提供了一些额外属性。

属性名称

说明

src

指定要显示图像的 URL

alt

提供图片的文字说明

width

图像的长度

height

图像的高度

提交额外属性

formaction、formenctype、formmethod、formtarget
和 formnovalidate。


10.type 为 email、tel、url 时
<input type="email">
<input type="tel">
<input type="url">
解释:email 为电子邮件格式、tel 为电话格式、url 为网址格式。额外属性和 text
一致。但对于这几种类型,浏览器支持是不同的。email 支持比较好,现在浏览器都支持格式验证;tel 基本不支持;url 支持一般,部分浏览器只要检测到 http://就能通过。
11.type 为 hidden 时
<input type="hidden">
解释:生成一个隐藏控件,一般用于表单提交时关联主键 ID 提交,而这个数据作为隐藏存在。
12.type 为 file 时
<input type="file">
解释:生成一个文件上传控件,用于文件的上传。额外提供了一些属性:

属性名称

说明

accept

指定接受的 MIME 类型

required

表明用户必须提供一个值,否则无法通过验证


accept="image/gif, image/jpeg, image/png


一.其他元素
表单元素还剩下几个元素没有讲解,包括下拉框列表 select、多行文本框 textarea、和 output 计算结果元素。

元素名称

说明

select

生成一个下拉列表进行选择

optgroup

对 select 元素进行编组

option

select 元素中的项目

textarea

生成一个多行文本框

output

表示计算结果


1.生成下拉列表
<select name="fruit">
<option value="1">苹果</option>
<option value="2">橘子</option>
<option value="3">香蕉</option>
</select>
解释:<select>下拉列表元素至少包含一个<option>子元素,才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素,还包含了一些额外属性。

属性名称

说明

name

设定提交时的名称

disabled

将下拉列表禁用

form

将表单外的下拉列表与某个表单挂钩

size

设置下拉列表的高度

multiple

设置是否可以多选



autofocus

获取焦点

required

选择验证,设置后必须选择才能通过


//设置高度并实现多选
<select name="fruit" size="30" multiple>
//默认首选
<option value="2" selected>橘子</option>
//使用 optgroup 进行分组,label 为分组名称,disabled 可以禁用分组
<optgroup label="水果类">
<option value="1">苹果</option>
<option value="2" selected>橘子</option>
<option value="3" label="香蕉">香蕉</option>
</optgroup>
2.多行文本框
<textarea name="content">请留下您的建议! </textarea>
解释:生成一个可变更大小的多行文本框。属性如下:

属性名称

说明

name

设定提交时的名称

form

将表单外的多行文本框与某个表单挂钩

readonly

设置多行文本框只读

disabled

将多行文本框禁用

maxlength

设置最大可输入的字符长度

autofocus

获取焦点

placeholder

设置输入时的提示信息

rows

设置行数

cols

设置列数

wrap

设置是否插入换行符,有 soft 和 hard 两种

required

设置必须输入值,否则无法通过验证


//设置行高和列宽,设置插入换行符
<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>
3.计算结果
<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
<input type="number" id="num1"> x <input type="number" id="num2">
<output for="num1 num2" name="res">
</form>
解释:output 就是计算两个文本框之间的值,其实就是内嵌了 JavaScript 功能。
二.输入验证
HTML5 对表单提供了输入验证检查方式,但这种验证还是比较简陋的,并且不同的浏览器支持的成熟度还不同。在大部分情况下,可能还是要借助 jQuery 等前端库来实现丰富的验证功能和显示效果。
//必须填写一个值
<input type="text" required>
//限定在某一个范围内
<input type="number" min="10" max="100">
//使用正则表达式
<input type="text" placeholder="请输入区号+座机" required
pattern="^[\d]{2,4}\-[\d]{6,8}$">
//禁止表单验证
<form action="http://li.cc" novalidate>


一.实体
HTML 实体就是将有特殊意义的字符通过实体代码显示出来。

显示结果

实体名称

实体编号

描述



空格


<

<

<

小于号

>

>

>

大于号

&

&

&

和号

"

"

"

引号

'

'

'

撇号

¢

¢

£

£

£

¥

¥

¥

日圆

欧元

§

§

§

小节

©

©

©

版权

®

®

®

注册商标

商标

×

×

×

乘号

÷

÷

÷

除号


二.元数据
<meta>元素可以定义文档中的各种元数据,而且一个 HTML 页面可以包含多个<meta>元素。
1.指定名/值元数据对
<meta name="author" content="bnbbs">
<meta name="description" content="这是一个 HTML5 页面">
<meta name="keywords" content="html5,css3,响应式">
<meta name="generator" content="sublime text 3">

元数据名称

说明

author

当前页面的作者

description

当前页面的描述

keywords

当前页面的关键字

generator

当前页面的编码工具


2.声明字符编码
<meta charset="utf-8">
3.模拟 HTTP 标头字段
//5 秒跳转到指定 URL
<meta http-equiv="refresh" content="5;http://li.cc">
//另一种声明字符编码
<meta http-equiv="content-type" content="text/html charset=utf-8">

属性值

说明

refresh

重新载入当前页面,或指定一个 URL。单位秒。

content-type

另一种声明字符编码的方式


三.全局属性
在此之前,我们涉及到的元素都讲解了它的局部数据,当然也知道一些全局属性,比如id。全局属性是所有元素共有的行为,HTML5 还提供了一些其他的全局属性。
1.id 属性
<p id="abc">段落</p>
解释: id 属性给元素分配一个唯一标识符。 这种标识符通常用来给 CSS 和 JavaScript调用选择元素。一个页面只能出现一次同一个 id 名称。
2.class 属性
<p class="abc">段落</p>
<p class="abc">段落</p>
<p class="abc">段落</p>
解释:class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS 样式。
3.accesskey 属性
<input type="text" name="user" accesskey="n">
解释:快捷键操作,windows 下 alt+指定键,前提是浏览器 alt 并不冲突。
4.contenteditable 属性
<p contenteditable="true">我可以修改吗</p>
解释:让文本处于可编辑状态,设置 true 则可以编辑,false 则不可编辑。或者直接
设置属性。
5.dir 属性
<p dir="rtl">文字到右边了</p>
解释:让文本从左到右(ltr),还是从右到左(rtl)。
6.hidden 属性
<p hidden>文字到右边了</p>
解释:隐藏元素。
7.lang 属性
<p lang="en">HTML5</p>
解释:可以局部设置语言。
8.title 属性
<p title="HTML5 教程">HTML5</p>
解释:对元素的内容进行额外的提示。
9.tabindex 属性
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">
解释:表单中按下 tab 键,实现获取焦点的顺序。如果是-1,则不会被选中。
10.style 属性
<p style="color:red;">CSS 样式</p>
解释:设置元素行内 CSS 样式







Copyright © 固阳音箱协会@2017