前端学习_Series1_01.HTML5新增标签

HTML5中几个常用的标签:

header:头部
nav:导航条
section:区块,相当于原来的div
footer:尾部
aside:侧边
article:内容区域

表单form中新增的三个属性

required:是否是必须填写的
placeholder:默认值(在不填写的情况显示的内容)
autofocus:自动聚焦

例子如下:

<head>
    <meta charset="UTF-8">
    <title>表单新增的3个属性</title>
    <!--<script>
        document.getElementById("bt").onclick=function(){
            var username = document.getElementById("name");
            if (username == null) {
                alert("请填写姓名");
            } else {
                document.getElementById("pass").innerHTML = username;
            }
        }
    </script>-->
</head>

<body>
    <form>
        姓名:<input id="name" type="text" name="username" required placeholder="请输入姓名...." autofocus="autofocus"/> <!--密码:
        <input id="pass" type="text" name="password" />-->
        <input id="bt" type="button" value="提交"/>
    </form>
</body>


“`

表单form中的几个类型

email:邮件
date:日期
url:网址
number:数字
range:范围
color:颜色
select:选择框
    optgroup:选项
datalist:列表

例子如下
例子截图

做一个range网页背景调色

  1. 主要是使用三个range标签获得每个标签的颜色
  2. 然后使用jQuery来使得网页的背景颜色发生改变
    截图如下:
    截图

audio音频和video视频标签

  1. audio,音频标签,src属性是音乐的位置,autoplay属性表示是否是在页面加载的时候就自动播放,controls属性表示是否加载一个控制台的样式来控制音乐的播放,暂停和音量等等。
  2. video,视频标签,也有src,autoplay和controls三个属性,效果同audio标签。
  3. 截图如下:
    截图

360音乐导航

css部分
jQuery部分

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值