1. 音频标签<audio>
<audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio>
controls :在页面中显示音乐播放控件 autoplay :页面加载自动播放
loop :设置循环播放次数
·浏览器音乐格式兼容 浏览器默认按顺序查找兼容格式
<audio controls>
<source src = “./music/Alone.mp3”>
<source src = “./music/Alone.wav”>
<source src = “./music/Alone.ogg”>
浏览器不支持HTML5音频播放 (页面提示)
</audio>
2. 视频标签<video>
<video src = “./video/movie.mp4” controls autoplay>
controls :在页面中显示视频播放控件 autoplay :页面加载自动播放
<video>标签类似<img>可以设置宽高位置等属性
·浏览器视频格式兼容 浏览器默认按顺序查找兼容格式
<video controls>
<source src = “./video/movie.mp4”>
<source src = “./video/movie.ogg”>
浏览器不支持HTML5视频播放 (页面提示)
</video>
3. 表单构造标签<input>
① (<label>的for属性与<input>的id相关联,点击label中的email:可以使input获取焦点)
<label for = “demo”>
email: <input type = “email” id = “demo”>
</label>
这样可使获取焦点的范围扩大,在移动端触屏具有便利优势。
② <input>标签构造表单基本类型归纳
| <input type="email"> | 输入邮箱格式 |
tel | <input type="tel"> | 输入手机号码格式 |
url | <input type="url"> | 输入url格式 |
number | <input type="number"> | 输入数字格式 |
search | <input type="search"> | 搜索框(体现语义化) |
range | <input type="range"> | 自由拖动滑块 |
color | <input type="color"> | 拾色器 |
time | <input type="time"> |
|
date | <input type="date"> |
|
datetime | <input type="datetime"> |
|
month | <input type="month"> |
|
week | <input type="week"> |
|
reset | <input type="reset" value="重置"> | 重置form表单中输入的内容 |
其中color,month,week等标签都具备兼容性问题,尤其以color突出。
③ <input>标签,基本表单属性归纳
placeholder | <input type="text" placeholder="请输入用户名"> | 占位符 |
autofocus | <input type="text" autofocus> | 自动获得焦点 |
multiple | <input type="file" multiple> | 多文件上传 |
autocomplete | <input type="text" autocomplete="off"> | 自动完成 |
form | <input type="text" form="某表单ID"> | 与其他<form>表单关联,一同提交 |
novalidate | <form novalidate></form> | 关闭验证 |
required | <input type="text" required> | 必填项 |
pattern | <input type="text" pattern="\d"> | 自定义验证,可定义正则验证 |
直接在input标签中添加属性如:<input required placeholder="请输入用户名">
④ <input>标签,list属性使用
<input list = “index”>
<datalist id = “index”>
<option value = “php”></option>
<option value = “python”></option>
<option value = “photoshop”></option>
<option value = “java”></option>
</datalist>
4. 表单list关联标签<datalist>:数据列表
<label for = “program”>
课程:<input list = “index” id = “program”>
</label>
<datalist id = “index”>
<option value = “php”></option>
<option value = “python”></option>
<option value = “photoshop”></option>
<option value = “java”></option>
</datalist>
5. 生成加密字符串标签<keygen>
生成提交给服务器的加密处理的内容。
6. 输出结果标签<output> 语义化作用
与<input>输入相对,使用方法类似一个<span>标签,在页面上展现一个字符串。
7. 度量器标签<meter>
<label for = “”>
度量器:<meter min=”0” max=”100”low=”60”high=”80”value=”50”></meter>
</label>
8. 一个基本表单(<form>,<fieldset>,<legend>,<label>,<input>)
<form> (创建一个表单,便于统一提交所有填写内容,以form为单位提交内容,
可与input的form属性关联)
<fieldset> (将表单元素进行分组,默认创建一个边框)
<legend>这是一个表单</legend> (为fieldset标签定义标题)
<label for = “”> (使用for关联一个input)
email: <input type = “email” >
</label>
<label for = “”> (使用for关联一个input)
tel: <input type = “tel” >
</label>
</fieldset>
</form>