day22-表单/音频视频/样式表层叠CSS

最新推荐文章于 2022-02-03 17:26:02 发布

林胖胖哒

最新推荐文章于 2022-02-03 17:26:02 发布

阅读量113

点赞数 1

本文链接：https://blog.csdn.net/weixin_44818729/article/details/94592716

版权

一.表单 <form action="" method="post" enctype="multipart/form-data">

用户名, 密码, 确认密码, 性别, 爱好, 省份, 生日 ,邮箱, 头像, 自我介绍

用户名: text
<input type="text 定义类型是文本
name="username" 传给服务器时的值是name后面的""
maxlength="30" 输入的字符的最大长度
size="30" 文本框最大长度30
placeholder="用户名由6-20字符组成" 文本框里面的提示文字
required> 必须要求填写的
密码:password
<input type="password" name="password" required>
确认密码:
<input type="password" name="password" required>
性别: radio- 单选按钮
<input type="radio" name="sex" value="1"checked="">男---(checked是默认值的)(radio单项选择)
<input type="radio" name="sex" value="0">女---(同样的name,不同的value,来设置互斥的两个选项)
爱好:checkbox- 多选按钮
<input type="checkbox" name="fav" value="阅读">阅读
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食"checked="">美食
<input type="checkbox" name="fav" value="运动">运动
省份:<select> - 选择
<option></option> ---做下拉效果
</select>
生日 : date - 日期
<input type="date" name="brithday">
邮箱; email - 邮箱(要求里面有@)
<input type="email"required name="mail">
头像: file
<input type="file" name="photo" > ---" enctype="multipart/form-data"在from的属性中一定要有enctype=才能给服务器传东西.
自我介绍: textare 文本区
<textarea cols="30" rows="10" name="introduction"></textarea>
提交按钮 -submit
<input type="submit" value="确认提交" readonly>
重新提交 - reset
<input type="reset" value="重新填写">
<fieldset> </fieldset> 自定义字段
<figure> 添加图片和图片说明
<img src="images/bok-choi.jpg" alt="">
<figcaption>图1. 这是一个图片</figcaption>
-<figcaption> 图片说明的意思
</figure>
添加音频,视频
<audio controls autoplay loop>
<source src="audio/test-audio.mp3"></source>
</audio>
<video width="400" controls>
<source src="video/puppy.mp4"></source>
</video>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单的例子 - 注册</title>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data">
        
            <p>
                用户名:
                <input type="text" name="username" maxlength="30"  
                size="30" placeholder="用户名由6-20个字符构成" required >
            </p>
            <p>
                密码:
                <input type="password" name="password" required>
            </p>
            
            <p>
                确认密码:
                <input type="password" name="repassword"required>
            </p>
                <p>
                    性别:
                    <input type="radio" name="sex" value="1"checked="">男
                    <input type="radio" name="sex" value="0">女
                </p>
                <p>
                    爱好:
                    <input type="checkbox" name="fav" value="阅读">阅读
                    <input type="checkbox" name="fav" value="旅游">旅游
                    <input type="checkbox" name="fav" value="美食"checked="">美食
                    <input type="checkbox" name="fav"value="运动">运动
                </p>
                <p>
                    省份:
                    <select name="province" >
                        <option value="110000">北京</option>
                        <option value="510000" selected>四川</option>
                        <option value="500000" >重庆</option>
                        <option value="310000">上海</option>
                        <option value="120000">天津</option>
                    </select>
                </p>
                <p>
                    生日:
                    <input type="date" name="brithday"> 
                </p>
                <p>
                    邮箱:
                    <input type="email"required name="mail">
                </p>
                <p>
                    头像:
                    <input type="file" name="photo" >
                </p>
                <p>
                    自我介绍:
                    <textarea  cols="30" rows="10" name="introduction"></textarea>
                </p>
                <p>
                    <input type="submit" value="确认提交" readonly>
                    <input type="reset" value="重新填写">
                    
                </p>
        </form>
    </body>
</html>

添加音频视频:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio controls autoplay loop>
            <source src="audio/test-audio.mp3"></source>
        </audio>
        <video width="400" controls>
            <source src="video/puppy.mp4"></source>
        </video>
    </body>
</html>

运行效果:

image.png

二.标签分类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

1.ctrl +/ 行级标签（元素）inline element / 块级标签（元素）block element < >

ctrl +/ 块级：h1-h6 / p / div / ul / ol / dl / table / form / hr
ctrl +/ 行级：a / img / iframe / button / span / input / textarea / select / br

        <!-- internal frame（内部窗口）-->
        <img title="商品图片" src="images/a1.jpg" alt="">
        <img src="images/a2.jpg" alt="">
        <iframe src="http://map.baidu.com" width="400" 
height="400" frameborder="0"></iframe>
        <iframe src="http://www.jd.com" width="400" 
height="400" frameborder="0"></iframe>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <button>确定</button>
        <button>取消</button>
        <a href="">百度</a><a href="">京东</a>
    </body>
</html>

2.CSS层叠样式表

a.一般情况下网站的首页会使用内部样式表 - 首页正常渲染
其他的页面可以共享一个或多个外部样式表 - 代码复用/减少对带宽和流量的使用
<link rel="stylesheet" href="css/style.css"
b. 不冲突的样式会叠加，有冲突的样式遵循三条原则
1. 就近原则

2. 具体性原则（ID > 类 > 标签 > 通配符）

重要性原则
a.标签选择器 h1{}
b.类选择器 .类名{} -class = "类名"
c.ID选择器 #名称{}
d.通配符选择器--清除默认内外边距 *{}
*{
margin(外边距) =0;padding (内边距)= 0;
} 清除内外所有边距

注:不冲突的样式会叠加;如果样式有冲突,遵循三条原则

1.就近原则
2.具体性原则 ID选择器 > 类选择器 > 标签选择器>通配符选择器
3.重要性原则 !important

4.标签选择器

              /* 标签选择器 */
        h1{
                width: 960px;
                height: 40px;
                margin: 0 auto;
                /* 类选择器 */
            }
            .a{background-color: red;}
            .b{background-color: orange;}
            .c{background-color: yellow;}
            .d{background-color: green;}
            .e{background-color: cyan;}
            .f{background-color: blue;}
            .g{background-color: purple;}
            .h{color:red;
            text-align: center;
            width: 100px;
            height: 40px;
            overflow:hidden;
            }
            .big{font-size: 32px;}
            .normal{font-size:18px;}
            .small{font-size: 12px;}
            /* ID选择器(唯一) */
            #header,#footer{
                width:800px;
                height: 120px;
                border: 1px solid red;
                margin: 0 auto;
            }

            /* 通配符选择器--清除默认内外边距 */
            *{
                margin: 0;
                padding: 0;
            }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<link rel="stylesheet" href="css/style.css">

<style>
#h1 { color: blue; }
.h1 { color: green !important; }
.h1 {
color: pink !important;
border: 5px dotted #FFA500;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
margin-top: 50px;
padding: 100px 100px;
}
h1 { color: red; }
</style>
</head>
<body>

<h1 class="a big" style="background-color: #ffff00; font-family: 'courier new';
text-align: center;">Hello, world!</h1>

<h1 class="h1" id="h1">Goodbye world!</h1>
</body>
</html>

#### 2.
 内嵌样式表 / 行内样式表
<h1 class="a big" style="background-color: #ffff00; font-family: 'courier new'; 
text-align: center;">Hello, world!</h1>
####3.
Box Model（盒子模型）
<h1 class="h1" id="h1">Goodbye world!</h1>

林胖胖哒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day22-表单/音频视频/样式表层叠CSS

一.表单 <form action="" method="post" enctype="multipart/form-data">用户名, 密码, 确认密码, 性别, 爱好, 省份, 生日 ,邮箱, 头像, 自我介绍用户名: text<input type="text 定义类型是文本name="usernam...
复制链接

扫一扫