video应用·表单元素·浏览器介绍

醉挽清欢

已于 2022-01-21 19:45:20 修改

阅读量317

点赞数 1

分类专栏： html 文章标签： css3 css html 前端

于 2021-12-23 21:03:32 首次发布

本文链接：https://blog.csdn.net/weixin_51610980/article/details/122115105

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

video应用

属性	描述
src	video存放的地址；./表示当前目录，可省略；…/表示父目录
controls	显示播放按钮
autoplay	自动播放
loop	指定后，会在视频结尾的地方，自动返回视频开始的地方
muted	音频会初始化为静音
object-fit：fill	将视频填满

注意：有些浏览器例如IE并不能支持最新的video属性
例：

<!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>
<style>
    /* 伪类选择器 */
    /* 当鼠标在a标签上悬浮时 */
    a:hover {
        /* 悬浮时显示的颜色是红色 */
        color: brown;
    }

    .box {
        width: 1150px;
        height: 700px;
        background-color: black;
        /* 让元素水平居中 */
        margin: auto;
    }

    .content-video {
        height: 650px;
    }

    .content-bottom {
        height: 50px;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 9px;
        padding-bottom: 9px;
        box-sizing: border-box;
        background-color: black;
    }

    video {
        height: 100%;
        width: 100%;
        object-fit: fill;
    }

    a {
        /* width: 100px; */
        text-decoration: none;
        height: 32px;
        /* 内联-不要换行  块级元素 */
        /* display: inline-block;  */
        margin-right: 40px;
        font-size: 14px;
        font-weight: 100;
    }

    .close {
        margin-left: 220px;
        margin-right: 20px;
    }

    input {
        width: 273px;
        height: 32px;
        /* 去除输入框线条 */
        outline: none;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        background-color: rgba(96, 99, 112, 0.4);
        /* 设置边框弧度 */
        border-radius: 3px;
    }

    button {
        width: 80px;
        height: 32px;
        /* 没有背景图  否则会有立体感*/
        background-image: none;
        background-color: rgba(96, 99, 112, 1);
        /*margin-left: -4px ;*/
        border-radius: 3px;
    }

    /* 选择器列表 */
    a,
    input,
    button {
        color: rgba(201, 203, 214, 1);
    }
    /* 通配符选择器---所有元素 */
    *
    {
        margin: 0;
        padding: 0;
        border: 0;
    }
</style>
<!-- muted：视频内容静音 -->

<body>
    <div class="box">
        <div class="content-video"> <video src="./video/2.mp4" controls></video></div>
        <div class="content-bottom">
            <a href="#">1527评论</a>
            <a href="#">487赞同</a>
            <a href="#">收藏</a>
            <a href="#">分享</a>
            <a href="#">...</a>
            <a href="#" class="close">关闭弹窗</a>
            <!-- 输入框 按钮 输入框中的文本提示 -->
            <input type="text" placeholder="请输入弹幕">
            <button>发送</button>
        </div>
    </div>
</body>

</html>

表单元素

表单主要用于网站的登录注册。表单元素包括input button(双标签) select（下拉框）textarea（文本域）

input属性	描述
type	表单类型
name	表单名称
maxlength	最大输入的字符数量
minlength	最小输入的字符数量
id	元素的编号，开发人员自己定义
value	传输的值
title	小提示
placeholder	输入框中的提示内容
required	默认选中

type的值	描述
text	文本框
password	密码框
checkbox	复选框
radio	单选框
button	普通按钮
submit	提交按钮
reset	重置按钮

注意：在select当中默认选中用selected，select会将option中的值直接作为value

button的type属性	描述
submit	提交按钮
button	没有默认行为
reset	重置按钮

例子（12306注册界面为例）：

<!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>
<style>
*{
    margin: 0;
    padding: 0;
    border: 0;
}
.big{
    height: 700px;
    width: 1100px;
    margin: auto;
     box-sizing: border-box;
    
}
a{
    text-decoration: none;
    color: rgb(131, 128, 128);
    box-sizing: border-box;
}
.a1{
    height: 30px;
    padding-top: 5px;
    box-sizing: border-box;
}
.a2
{
    border-radius: 4px;
    height: 670px;
    border: 0.5px solid rgb(44, 136, 228);
    box-sizing: border-box;
}
.a21{
    padding-left: 25px;
    color: white;
    box-sizing: border-box;
}
.a21a{
    height: 40px;
    background-color: rgb(44, 136, 228);
    padding-top: 10px;
    box-sizing: border-box;
}
input{
    background: none;
    outline: none;
    border: 1px solid rgb(190, 179, 179);
    height:25px;
    width: 200px;
    box-sizing:border-box;
    padding-left: 4px;
    box-sizing: content-box;
}

.b1{
    width: 400px;
    text-align: right;
    font-size: 8px;
    display: inline-block;
}
.b2{
    font-size: 8px;
    color: orange;
    width: 400px;
    text-align: leftright;
    display: inline-block;
}
.b3{
    height: 30px;
}
.aa{
    background: none;
    outline: none;
    border: 1px solid black;
    height:25px;
    width: 200px;
    box-sizing: border-box;
    color:black ;
}
.ab{
    text-decoration: underline;
    text-decoration-color: orange;
    color:orange;
}
.add{
font-size: 8px;
color: black;
}
.a1010{
    height: 15px;
    padding-left: 400px; 
    padding-top: 10px;
    font-size: 14px;
}
.ads{
    color: rgb(44, 136, 228);
}
.ader{
 height: 30px;
 padding-top: 50px;
 text-align: center;
}
</style>
<body>
    <div class="big">
        <div class="a1">您现在的位置： <a href=""> 客运首页 </a> > <a href=""> 注册 </a></div>
        <div class="a2">
            <div class="a21a"><span class="a21">账户信息</span></div>
            <div style="padding-top: 50px;">
                <form action="#" >
                   <div class="b3"><span class="b1" > 用 户 名：</span>  <input type="text" placeholder="用户名设置成功后不可修改"> 
                     <span class="b2">6-30位字母、数字或“_”,字母开头</span></div>
                   <div  class="b3"><span class="b1" >登录密码：</span>  <input type="text" placeholder="6-20位字母、数字或符号 "> 
                 </div>
                   <div  class="b3"><span class="b1" > 确认密码：</span>  <input type="text" placeholder="再次输入您的登录密码">
                  </div>
                   <div  class="b3"><span class="b1" > 证件类型：</span>  <select class="aa" name="" id=""><option value="">
                       台湾居民来往大陆通行证</option><option value="">中国居民身份证</option></select> </div>
                   <div  class="b3"><span class="b1" >  姓 名：</span>  <input type="text" placeholder="请输入证件上的中文名字">
                    <span class="b2"><a href="" class="ab">姓名填写规则</a>
                        （用于身份核验，请正确填写）</span></div>
                   <div  class="b3"><span class="b1" >证件号码：</span>  <input type="text" placeholder="请输入您的证件号码">
                      <span class="b2">（用于身份核验，请正确填写）</span></div>
                   <div  class="b3"><span class="b1" >证件有效期截止日期：</span>  <input type="text">  
                    <span class="b2">（用于身份核验，请正确填写）</span></div>
                   <div  class="b3"><span class="b1" > 出生日期：</span>  <input type="text" > 
                     <span class="b2">（用于身份核验，请正确填写）</span></div>
                   <div  class="b3"><span class="b1" > 性 别：</span> <input type="radio" style="height: 15px;width: 10px;"><span class="add"> 男</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" style="height: 15px;width: 10px;"><span class="add">女</span> 
                   </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="b2">  （用于身份核验，请正确填写）</span></div>
                   <div  class="b3"><span class="b1" >  邮 箱：</span>  <input type="text" placeholder="请正确填写邮箱地址"> 
                     <span class="b2"></span></div>
                   <div  class="b3"><span class="b1" >手机号码（+86）：</span>  <input type="text" placeholder="请输入您的手机号">
                      <span class="b2">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span></div>
                   <div  class="b3"><span class="b1" > 旅客类型：</span>    <select class="aa" name="" id=""><option value="">
                    成人</option><option value="">儿童</option></select> </div>
                    <div class="a1010"><input type="checkbox" style="height: 10px;width: 10px;">  我已阅读并同意遵守 <a class="ads">《中国铁路客户服务中心网站服务条款》</a> <a class="ads">《隐私权政策》</a></div>
                    <div class="ader">
                        <input type="submit" value="下一步" style="height: 30px;color: white;  width: 120px;background-color:orange ; border-radius: 4px; ">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>