从零开始学 Web之HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新……

github:https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN:https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、表单新增内容

1、表单新增属性

1.1、type相关属性

email

tel

url

number

search

range

color

时间日期相关

1.2、表单其他属性

1、placeholder:提示文本

2、autofocus:自动获取焦点

3、autocomplete:自动完成:on 打开,off 关闭。

前提:必须成功提交过;添加 autocomplete 的元素必须有 name 属性。

4、required:必须输入,如果未输入将阻止表单提交

5、pattern:正则表达式验证

multiple:可以一次选择多个文件(在 email中,multiple 允许填写多个邮件地址,中间用逗号隔开)

2、表单新增元素

datalist 元素

功能:拓展下拉菜单,可以手动输入选项。

1、因为能够手动输入选项,所以需要输入框;

2、输入框通过 list 属性和 datalist 关联起来;

3、value 为选中后输入框的内容,label 为 value 的辅助描述性内容。

注意:如果 type 的类型为 url 网址的话,value 的值必须加 http:// 或 https:// 才能够显示出来。

3、新增表单事件

oninput:当元素中的内容改变时,就会触发。

oninvalid:当验证不通过时触发。

setCustomValidity:修改 pattern 校验失败时,默认的提示信息。

4、进度条

progress:

属性: max 最大值,value:当前值

meter(度量器):

属性:

high:被界定为高的值的范围。

low:被界定为低的值的范围。

max:规定范围的最大值。

min:规定范围的最小值。

optimum: 规定度量的最优值。

value:规定度量的当前值。

5、案例:表单总结

二、多媒体新增内容

audio:音频

属性:

src:播放的音频文件路径

controls:显示音频播放器的控制面板

autoplay:自动播放

loop:循环播放

video

属性:

src:播放的音频文件路径

controls:显示音频播放器的控制面板

autoplay:自动播放

loop:循环播放

weight:宽度(一般只需要设置宽度或者高度,可以使视频等比例缩放。)

height:高度

poster:视频未播放时展示的画面。默认为视频第一帧的画面。

source

由于不同浏览器支持的视频格式不同,所以我们在进行视频添加的时候,需要考虑浏览器是否支持。我们可以准备多种不同格式的视频文件,然后使用source标签,让浏览器选择支持的视频格式播放视频。

浏览器或从上至下,如果浏览器支持mp4格式就播放,不支持看下一个flv格式,如果都不支持就输出 “ 浏览器不支持该格式的视频文件”。

三、新增获取/操作元素

1、新增获取元素

2、新增操作元素类样式

PS:classList 的方式与 document.querySelector("选择器").className 的方法对比:

classList 的方法添加和删除不会清除原来的 class 类样式,只是在其基础上添加和删除。而 className的方式直接对源类样式操作,容易遗漏和误操作。

示例:

四、自定义属性

定义:以 “data-” 开头,后面必须有至少一个字符,多个单词间用 “-” 连接。

建议:

1、名称中应该都是用小写字符;

2、名称中不要包含任何特殊符号;

3、名称中不要由纯数字组成。

获取自定义属性的值

使用 "元素.dataset[]" 的方式获取自定义属性的值。其中自定义属性的名称要使用驼峰命名法填写。

欢迎关注

Web前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180727G08LZX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券