html前端表单元素+音频与视频的显示

最新推荐文章于 2024-09-30 10:36:33 发布

克里维斯的明天.

最新推荐文章于 2024-09-30 10:36:33 发布

阅读量859

点赞数 8

文章标签： java 前端 javascript css3

本文链接：https://blog.csdn.net/2301_81325634/article/details/142470918

版权

表单元素(标签)

<datalist> 数据列表 --> 与下拉框相似，它可以输入关键字搜索

    <input>
    <datalist>
        <option>本科</option>
        <option>研究生</option>
        <option>不明</option>
    </datalist>

<fieldset> 字段集 --> 将表单内的一组相关表单元素进行分组。与<legend> 标签一起使用。

语法：
    <fieldset>
        <legend>标题</legend>
    </fieldset>
代码显示：
    <fieldset>
        <legend>标题</legend>
        <label>
            email: <input type="email" name="email" required>
        </label>
    </fieldset>

<meter> 度量器

low：低于该值后警告
high：高于该值后警告
value：当前值
max：最大值
min：最小值。

    <mater value="80" min="0" max="100" low="60" high="80" />

表单属性

- `placeholder` 占位符（提示文字）

- `autofocus` 自动获取焦点(刷新时，文本可直接输入)

- `multiple` 文件上传多选或多个邮箱地址

- `autocomplete` 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)

- `form` 指定表单项属于哪个form，处理复杂表单时会需要

- `novalidate` 关闭默认的验证功能（只能加给form）

- `required` 表示必填项

- `pattern` 自定义正则，验证表单

表单事件

oninput()：用户输入内容时触发，可用于输入字数统计。
oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。

音频

autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。
controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
loop 循环播放。
preload 预加载同时设置 autoplay 时，此属性将失效。

    <audio src="music/yinyue.mp3" autoplay contrils></audio>

视频

autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。
controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
loop 循环播放。
preload 预加载同时设置 autoplay 时，此属性将失效。
width：设置播放窗口宽度。
height：设置播放窗口的高度。

	<video src="video/movie.mp4" controls autoplay></video>

二.作业

1.登录页面

效果：登录页面效果图
代码：

     <style>
        *{
            margin: 0;
            padding: 0;
            
            
        }
        html{
            height: 100%;
        }
        body{
            /* 使用绝对定位时系统会认为background是图片，从而不生效，解决方法是将html和body的宽度设置100% */
             background: linear-gradient(to right,rgb(224, 174, 224),rgb(138, 173, 236)); 
             /* 背景渐变（to right 从左到右） linear-gradient线性渐变的合成 */

             height: 100%;
         
        }
        .all{
            width: 400px;
            height: 500px;
            background-color: white;
            border-radius: 15px;
            /* 绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;

        }
        .logo{
           text-align: center;
          padding-top: 50px;
          margin-bottom: 40px;
          /* 实现文字渐变 */
          background: linear-gradient(to bottom,pink,rgb(224, 174, 224),rgb(156, 183, 232));
  	      background-clip: text;
          /* transparent 透明 */
  	      color: transparent;
        }
       input{
        margin:30px 0 0px 0;
        border: none;
        border-bottom: 1px solid gray;
        width: 320px;
        margin-left: 40px;
        height: 30px;
        text-indent: 10px;
        /* 点击输入框不显示边框 */
        outline: none;
       }
       .anniu input{
        background: linear-gradient(to right,rgb(164, 164, 220),rgb(224, 174, 224),rgb(236, 196, 203));
        color: white;
       }
    
    
    </style>
</head>
<body>
    <!-- 总体 -->
     <div class="all">
        <!-- 登录框架 -->
         <div class="post">
            <!-- logo -->
             <div class="logo">
                <p><h2>Login</h2></p>
             </div>

             <!-- 内部 -->
              <div class="join">
             <!-- 用户名  -->
                <input type="text" placeholder="username">
              <!-- 密码 -->
                <input type="text" placeholder="password">
               <!-- 登录按钮 -->
                <div class="anniu">
                    <input type="submit" value="login">
                </div>
            </div>
         </div>
     </div>
</body>

2.跑马灯

动图样式：跑马灯效果图
代码：

    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 30px;
        }
        
        .runing{
            margin: auto;
            width: 250px;
            /* height:50px; */
            background-color: aqua;
            /* 阻止元素中的文字换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        .word{
            position: relative;
            width: fit-content;
			animation:move 4s linear infinite;
             padding-left:50px;
        }
        .word::after{
            position: absolute;
            right: -100%;
            content: attr(text);
        }
        @keyframes move{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-100%);
            }
        }
        p{
            background: linear-gradient(to bottom,pink,rgb(224, 174, 224),rgb(156, 183, 232));
            background-clip: text;
            color: transparent;
            
        }
    </style>
</head>
<body>
    <div class="runing">
        <p class="word" text="Habit cures habit">
            Habit cures habit
        </p>
    </div>
</body>

或者使用以下代码编写css跑马灯

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.runing{

animation: runing 10s linear infinite;

}

@keyframes runing{

0%{

transform: translateX(100%);