HTML简单了解（2）-优快云博客

本文链接：https://blog.youkuaiyun.com/QQTSS/article/details/104742282

本文详细介绍了HTML表单元素的使用，包括输入框、密码框、复选框、单选按钮、上传、下拉菜单及提交重置按钮。同时深入讲解了CSS的基本单位、样式类型、颜色设置、背景属性和边框属性，为初学者提供了全面的前端基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上回

1、表单

<div>
        <form action="">
            <p>这是输入框<input type="text"></p>               type=""  这个属性是决定了用什么控件
            <p>这是密码框 <input type="password"></p>
            <p>这是复选框 <input type="checkbox"></p>
            <p>这是单选<input type="radio" name=""></p>         name=""  这个属性可以让单选框成为一组。（属性值是自定义的）
            <p>这是上传 <input type="file"></p>
            <p>这是提交 <input type="submit"></p>
            <p>这是重置 <input type="search"></p>
            <p>
                这是下拉菜单
                <select name="" id="">
                    <option value="">这是下拉菜单</option>        selected属性：选中的默认项（select）
                    <option value="">123456</option>            disabled属性：禁止操作（select input）
                    <option value="">123456</option>            checked属性：选中操作（input）
                    <option value="">123456</option>            size属性：显示下拉个数（select）
                                                                 multiple属性：多选操作（select、input）                                           
                                                                 placeholder属性：输入框的提示信息（input）
                </select>
            </p>
        </form>
    </div>

在这里插入图片描述

2、css

css中常用的单位是px（像素）
或者使用 % 根据外框大小决定的
css主要分为三种样式： 1、内联样式。2、内部样式。3、外部样式
1、内联样式，不建议使用所以不过多讲述
2、内部样式： <style> ...CSS </style>
3、外部样式：外部有单独的CSS文件,

<link rel="stylesheet" href=".....">href属性：样式的地址
                                    rel属性：确定文档（HTML）跟要引入的资源关系

1、css颜色

单词表示法：red、yellow、green、blue、white、black …等
十六进制表式法：#000000(黑色) #ffffff(白色) #ff0000(红色)
rgb表示法： rgb(0,0,0) (黑色) rgb(255,255,255) (白色) rgb(255,0,0) (红色)

2、css背景

background-color：背景颜色
background-image：背景图片，url(地址) : 默认是 x y 都平铺
background-repeat：背景图片的平铺方式
background-position：背景图片的位置
background-attachment：背景图随滚动条的移动方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 500px;height: 500px;
            background-color: aqua;
            background-image: url(./img/laoli.jpg);
            background-repeat: no-repeat;
            background-position: 100px;
                        /* position:   x y : 0 0 ( 针对当前容器的最上角 )
                         			   像素 % | x(left center right) y(top center bottom) */
            }
    </style>
</head>
<body>
    <div>
       
    </div>
</body>
</html>

在这里插入图片描述

3、css边框

border-style：边框的样式（solid : 实线、dashed : 虚线、dotted : 点线）
border-width：边框的大小
border-color：边框的颜色

 div{width: 500px;height: 500px; 
            border-style: solid;   ——  这是边框
            border-width: 5px;      —— 这是大小
            border-color: black;    ——  这是颜色

                /* 下面两种式简写 */
            border-top:dashed 5px black ;
            border-right:dotted 5px black ;
            }