H5新增标签及其属性

布织锁云

已于 2023-03-22 08:51:45 修改

阅读量242

点赞数

文章标签： css html5 js

于 2023-03-21 15:08:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52731478/article/details/129688107

版权

H5语义化标签

header 头部标签
nav 导航标签
article 内容标签
section 块级标签
aside 侧边栏标签
footer 尾部标签

在这里插入图片描述

h5表单

    <form action="" method="" novalidate id="form1">  <!-- novalidate关闭表单验证  设置id控制form外部的form表单控件-->
        <div>
            <label for="email">邮箱</label>  <!-- autofocus自动获取焦点 autocomplete不提示历史输入信息需要与name连用-->
            <input type="email" name="" id="email" autofocus autocomplete="off">
        </div>
        <div>
            <label for="url">网址</label>
            <input type="url" name="" id="url">
        </div>
        <div>
            <label for="text">输入框</label>
            <input type="text" name="" id="text" placeholder="请输入...">
        </div>
        <div>
            <label for="search">搜索</label>
            <input type="search" name="" id="search">
        </div>
        <div>
            <label for="tel">电话</label>   <!-- required必填     pattern设置正则验证 oninvalid设置自定义提示-->
            <input type="tel" name="" id="tel" required pattern='^\d{11}$' oninvalid="tipFunction('请输入11位数字')">
        </div>
        <div>
            <label for="date">日期</label>
            <input type="date" name="" id="date">
        </div>
        <div>
            <label for="time">时间</label>
            <input type="time" name="" id="time">
        </div>
        <div>
            <label for="week">周</label>
            <input type="week" name="" id="week">
        </div>
        <div>
            <label for="month">月</label>
            <input type="month" name="" id="month">
        </div>
        <div>
            <label for="number">数字</label>  <!--除了e其他字符都无法输入  step步长-->
            <input type="number" name="" id="number" max="10" min="1" step="3">
        </div>
        <div>
            <label for="range">滑块</label> 
            <input type="range" name="" id="range" max="60" min="1" step="20">
        </div>
        <div>
            <label for="color">颜色</label> 
            <input type="color" name="" id="color" value="#00ff00">
        </div>
        <div>
            <label for="checked">下拉列表</label> 
            <select name="" id="checked">
                <option value="" selected>选项1</option>
                <option value="">选项2</option>
                <option value="">选项3</option>
            </select>
        </div>
        <div>
            <label for="checkdata">datalist</label> 
            <input type="text" name="checkdata" id="checkdata" list="dataList">
            <datalist name="" id="dataList">
                <option value="选项1">选项1</option>
                <option value="选项2">选项2</option>
                <option value="选项3">选项3</option>
            </datalist>
        </div>
        <div>
            <label for="file">文件上传</label>  <!-- 多文件上传 -->
            <input type="file" name="" id="" multiple>
        </div>
        <input type="button" name="" id="search" value="提交">
        <input type="reset" name="" id="search" form="form1">

    </form>

    <hr>
    <input type="text" form="form1">

效果图

在这里插入图片描述

需要注意的是在使用type=tel时，创建的是一个专门输入电话号码的文本域（即type=text）
当使用者带有动态键盘的移动设备访问带有type="tel"的表单时，大多数设备会显示数字键盘，这意味着只要数字键盘有用，这种类型就很有用，而不只是用于电话号码
由于世界各地电话号码格式多种多样，这种类型的字段对用户输入的值没有任何限制（这意味着它可能包括字母等非数字值）

多媒体标签

音频

<audio src="音乐文件名.mp3" autoplay controls loop='loop' preload='auto'> 标签内的文本不会显示</audio>
<!--preload 预加载->


<!-- 其他方式 -->
 < audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >				<!-- 只加载其中一个，.mp3优先级最高 ->
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持audio标签。
  </ audio>

在这里插入图片描述

视频

<video src="视频文件.mp4" autoplay controls ></video>

<!-- 其他方式 -->
    <!-- 当1.mp4出错时，自动切换到2.mp4 ...  muted设置静音-->
    <video width="" height="" controls autotoplay muted>
      <source src="1.mp4">
      <source src="2.mp4">
      <source src="3.mp4">
    </video>

当video标签视频内容宽度没有铺满video标签时，可以在css写上

    video {
      /* 让视频内容铺满整个video标签 */
      object-fit: fill;
    }

通过事件设置视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video width="" height="" controls autotoplay id="video">
        <source src="1.mp4">
    </video>
    <input type="button" value="播放视频" id="btnPlay">
    <input type="button" value="暂停视频" id="btnPause">
    <script>
        document.getElementById('btnPlay').onclick=function(){
            document.getElementById('video').play()
        }
        document.getElementById('btnPause').onclick=function(){
            document.getElementById('video').pause()
        }
    </script>
</body>
</html>

在这里插入图片描述