D22-HTML表单和CSS样式

最新推荐文章于 2024-03-08 14:14:04 发布

御灵龍

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量404

点赞数

分类专栏：前端文章标签： html表单 css样式

本文链接：https://blog.csdn.net/qq_33852347/article/details/83690708

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、HTML表单（重点）

作用： 将用户在页面输出的数据，发送给java服务器（.net）

<!--
        表单（容器）：<form></form>
            常用属性：
                action：请求java服务器的地址  #（代表当前页面 ）userAction
                name：表单的名称
                method：表单的提交方法，有很多种：get（默认）、psot
                    get：参数在url地址后面进行拼接，
                    post：参数不会再url地址后面进行拼接

                    区别：
                        1）get相对来说不安全、post相对来说比较安全
                        2）get提交大小的限制（4KB），post提交没有限制

        文本框：<input/>
            常用属性：
                type：type属性的值不同声明次表单项的功能和样式不同
                    常见的属性值11个（掌握）
                        1）text：文本框（默认值）
                        2）password：密码框  特点：输入掩码
                        3）date：日期选择框  html5提供
                        4）radio：单选框，特点：name属性相同分为一组，完成互斥效果
                            checked="chekced" true 该表项默认被选中
                        5）CheckBox：复选框  特点：name属性相同分为一组
                            checked="chekced" true 该表项默认被选中
                         6）button：普通按钮（在表单中作用不大，一般会结合js脚本完成页面交互效果）
                         7）submit：提交按钮，找form表单的action属性地址，发送请求
                         8）reset： 重置按钮， 使表单项回复默认状态
                         9）image：图像提交，与submit功能一样
                         10）file：文件上传
                         11）hidden：隐藏域  特点：页面看不到（存放id）
                    name： 表单项的名称
                          表单项想要被提交必须有name属性
                          格式： key=value& key=value
                                ?password=
                                &birthday=1999-01-01
                                &gender=1&hobby=perm
                                value：表单的值
            下拉列表
                <select name="edu">
                    <option value="1">列表项</option>
                 </select>
                       注意：select标签name的属性=option标签value的值
                       select= "selected" true 该列表项默认被选中
               文本域
               <textarea name=""> value</textarea>
                    常用属性：
                            rows：行高
                            cols：列宽
-->

代码

<body>

<form action="#" name="myForm" method="post">
    <!--表单项-->
    用户名：<input type="text" name="username" value="德玛西亚"><br>
    密码：<input type="password" name="password"><br>
    生日：<input type="date" name="birthday" value="1999-01-01"><br>
    性别：
    <input type="radio" name="gender" value="0"> 男
    <input type="radio" name="gender" value="1" checked="true"> 女<br>
    爱好：
    <input type="checkbox" name="hobby" value="somke"> 抽烟
    <input type="checkbox" name="hobby" value="drinke"> 喝酒
    <input type="checkbox" name="hobby" value="perm" checked="checked"> 烫头<br>

    普通按钮：<input type="button" name="btn" value="普通按钮"><br>
    提交按钮：<input type="submit" value="注册"><br>
    重置按钮：<input type="reset" value="重置"><br>
    图像提交：<input type="image" src="../img/sub.png"><br>
    个人头像：<input type="file" name="pic"><br>
    隐藏域：<input type="hidden" name="id" value="1000"><br>

    学历：
    <select name="edu" id="">
        <option value="1">青铜</option>
        <option value="2">白银</option>
        <option value="3" selected="selected">王者</option>
    </select><br>
    个人简介：
    <textarea name="intro"  cols="30" rows="10">我是默认的value值</textarea>


</form>

</body>

二、css样式

2.1 概述

Cascading Style Sheet 层叠样式表，简单来说专门用于网页的美化。

美化好处：

实现了样式和内容的分离，提高显示的效果和样式的复用性
功能性更强，例如，给font标签设置超大字体
降低耦合性，css样式美化网页html标签搭建网页

2.2html与css样式结合方式

<!--
    html和css样式结合方式分为三种：
        1）行内样式（简单，一般不用）
            所有标签有一个style属性，在此属性编写css样式
        2）内部样式：一般会放在head头部， 先加载到浏览器内存中
             使用<style>标签，在标签体重编写css样式
        3）外部样式
            使用<link>标签，使用href属性引入外部的css文件（掌握）
            使用<style>标签，在标签体重使用@import引入外部的css文件，加载效率不高（了解）

       优先级：就近原则，相同的样式会被覆盖
       浏览器的加载的顺序： 自上而下
-->

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_html和css样式结合方式</title>
    <!--
    relation="stylesheet"  关系，当前页面与外部文件的关系 css样式，浏览器在解析到此标签默认转换器就变成了css格式

    -->
    <link rel="stylesheet" href="../css/mycss.css">
    <style>
        @import "../css/mycss.css";
    </style>
    <!--
        默认值：type="text/css" 声明此类标签的类型，浏览器在解析到此标签默认转换器就变成css格式
    -->
    <style>
        font{
            font-size: 25px;
            color: green;
        }
    </style>


</head>
<body>

<font style="font-size: 20px; color: red">城市套路深，要不要回农村</font><br>
<font>java从入门到放弃 </font>
</body>
</html>

2.3 CSS样式书写规范

 /*
        css样式文件的注释
        格式：选择器（css样式）
            1）属性名和属性值之间使用冒号分隔
            2）多个属性之间使用分号分隔
            3）属性名由多个组成，使用减号分隔
            4）属性值由多个组成，使用空格分隔
            5）不区分大小写
         */

2.4 选择器

<!--
      基本选择器
          1）标签选择器
                  格式：标签名{css样式}
           2）id选择器
                  格式： #id属性的值{css样式}
                  特点：具有唯一性
           3）类选择器
                  格式： .class属性的值{css样式}
                  特点：代表一组
      选择器使用优先级：id选择器>类选择器>标签选择器
-->

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_基本选择器</title>
    <style type="text/css">
        div{
            color: red;
            font-size: 20px;
        }
        #myDiv{
            color: green;
            font-size: 30px;
        }
        .myClass{
            color: blue;
            font-size: 40px;
        }


    </style>

</head>
<body>

</body>
<div>第一种选择器，标签选择器</div>

<div id="myDiv" class="myClass">第二种选择器，id选择器</div>

<div class="myClass">第三种选择器：类选择器</div>

<p class="myClass">第三种选择器：类选择器</p>
</html>

2.5 拓展选择器

<!--
   拓展选择器
       1）层级选择器
          格式：父选择器 子选择器 孙子选择器....{css样式}
       2）属性选择器
           格式：基本选择器[属性名="属性值"]{css样式}
       3）伪类选择器
           同一个元素（标签），在不同操作下层下出不同的样式，
           文本框：
               选择器：focus{css样式}
            超链接：
               正常状态 a：link{css样式}
               鼠标上移 a:hover{css样式}
               鼠标点击 a:active{css样式}
               访问过后 a：visited{css样式}
          4）并集选择器
               格式：选择器1，选择器2，选择器3 ...{css样式}
-->

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_拓展选择器</title>
  
    <style>
        .div2 div .sp1 {
            color: red;
        }

        input[type="text"] {
            background-color: skyblue;
        }

        input[type="text"]:focus {
            background-color: orangered;
        }

        input[type="password"] {
            background-color: hotpink;
        }

        a:link {
            color: gray;
        }

        a:hover {
            color: green;
        }

        a:active {
            color: red;
        }

        a:visited {
            color: orangered;
        }

        font, p, b {
            color: hotpink;
            font-size: 20px;
        }
    </style>
</head>
<body>

<div class="div1">
    <div>
        <span class="sp1">span11</span>
        <span class="sp2">span22</span>
    </div>
</div>
<div class="div2">
    <div>
        <span class="sp1">span33</span>
        <span class="sp2">span44</span>
    </div>
</div>
<input type="text"><br>
<input type="password"><br>

<a href="#"> letmehjasdadga </a><br>
<font>woshi font</font>
<p>woshi pp</p>
<b>wopshji bbbb</b>

</body>
</html>

2.6 字体和文本

<!--
    1）字体
        font-size: 大小
        font-weight:重量
            取值：bold 粗体
         font-style： 样式
            取值：italic 斜体
          font-family:类型呢
            取值：宋体，隶书
     2）文本
        color:颜色
        text-decration：装饰
            取值：none普通（默认），underline 下滑线，overline 上划线，
        以下这些属性在内联标签无效
            text-align：对齐方式
            line-heigh：行高
-->

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_字体和文本属性</title>
    <style>
        div{
            font-size: 45px;
            font-weight: bold;
            font-style: italic;
            font-family: 幼圆;
            color: red;
            text-decoration: overline;
            text-align: center;
            line-height: 200px;
        }

    </style>
</head>
<body>

<div>yibuliangbuhahahdaSd 山东山东昂达</div>
<a href="#">我是a标签</a>

</body>
</html>

2.7 背景属性

<!--
       背景属性：
            background-color：背景色
            background-image：背景图像
                    格式：url（图像路径）
             background-repeat：平铺方式
                    取值：repeat 水平和垂直（默认） ，repeat-x 水平，repeat-y垂直，no-repeat 不平铺


             一般我们会简写，background：color image  repeat
-->

代码：

<!--
       背景属性：
            background-color：背景色
            background-image：背景图像
                    格式：url（图像路径）
             background-repeat：平铺方式
                    取值：repeat 水平和垂直（默认） ，repeat-x 水平，repeat-y垂直，no-repeat 不平铺


             一般我们会简写，background：color image  repeat
-->

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_背景属性</title>
    <style>
        body{
            background-color: #e8e8e8;
            background-image: url("../img/girl3.jpg");
            background-repeat: no-repeat;
             background: #e8e8e8 url("../img/girl3.jpg") no-repeat;


        }
    </style>
</head>
<body>

</body>
</html>

2.8 显示属性

<!--
       dispaly：显示属性
            取值：block 块元素，inline 内联元素  none 隐藏

-->

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示属性</title>
    <style>
        div{
            background-color: orangered;
            display: inline;
        }
        spam{
            background-color: orange;
            display: block;
        }
        h3{
            display: none;
        }

    </style>

</head>
<body>

<div>我是块标签</div>
<span>我是内联标签</span>
<h3>我是隐藏标签</h3>
</body>
</html>

2.9 浮动属性

<!--
       float：浮动属性
            取值：left 左浮动 ，right  右浮动
       clear：清除浮动
            取值：left  清除左浮动，right  清除右浮动 ，both清除左右浮动

-->

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_浮动属性</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;

        }
    </style>
</head>
<body>

<div class="box">1</div>
<div class="box">2</div>
<div style="clear: both"></div>
<div class="box">3</div>
<div class="box">4</div>

</body>
</html>

2.10 普通盒子

<!--
        盒子：
             边框
                border-width：宽度
                border-style：样式
                    取值： solid 单线，double 双线 ，dashed虚线
                 border-color：颜色
                 简写 border：宽度 样式 颜色
                 border-radius：圆角半径（默认为90°）
              内边距：
                    padding-top  上
                    padding-right  右
                    padding-bottom  下
                    padding-left  左
                    简写：padding： 上 右 下 左（顺时针）

                外边距
                    margin-top
                    margin-right
                    margin-bottom
                    margin-left
                    简写：margin： 上 右 下 左

                    特殊：
                        margin： auto； 水平居中
-->

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_普通盒子</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 10px dashed blue;
            padding:  10px;
            margin: auto;

        }
        .cookie{
            width: 300px;
            height: 300px;
            background-color: darkblue;
            border-radius: 150px;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="cookie"></div>
</div>
</body>
</html>

2.11 怪异盒子

<!--
        盒子：
             边框
                border-width：宽度
                border-style：样式
                    取值： solid 单线，double 双线 ，dashed虚线
                 border-color：颜色
                 简写 border：宽度 样式 颜色
                 border-radius：圆角半径（默认为90°）
              内边距：
                    padding-top  上
                    padding-right  右
                    padding-bottom  下
                    padding-left  左
                    简写：padding： 上 右 下 左（顺时针）

                外边距
                    margin-top
                    margin-right
                    margin-bottom
                    margin-left
                    简写：margin： 上 右 下 左

                    特殊：
                        margin： auto； 水平居中

           box-sizing:盒子类型
                content-box：（默认）在指定盒子的高度和宽度之外（300）来调整边框的大小和内边距的大小
                border-box：在指定的盒子高度好宽度之内（300）来调整边框的大小和内边距的大小

-->

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_怪异盒子</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 50px dashed blue;
            padding: 10px;
            margin:  auto;
            box-sizing: border-box;
        }
        .cookie{
            width: 180px;
            height: 180px;
            background-color: darkgrey;
            border-radius: 150px;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="cookie"></div>
</div>
</body>
</html>

三、案例

旅游网注册案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游网注册页面</title>
    <style>
        /*整体布局*/
        .rg_main{
            width: 900px;
            height: 500px;
            border: 5px solid #eeee;
            margin: 50px auto;
            border-radius: 5px;
        }
        /*左*/
        .rg_left{
            width: 250px;
            height: 500px;
            float: left;
            box-sizing: border-box;
        }
        /*左  内边距*/
        .rg_left div{
            padding-top: 20px;
            padding-left: 20px;
        }
        /*中*/
        .rg_center{
            width: 400px;
            height: 500px;
            float: left;
            box-sizing: border-box;
        }
        /*左侧单元格*/
        .td_left{
            text-align: right;
           padding-right: 20px;

        }
        /*输入框 样式*/
        input{
            border: 1px solid gray;
            height: 25px;
            border-radius: 5px;
        }
        /*右*/
        .rg_right{
            width: 250px;
            height: 500px;
            float: left;
            box-sizing: border-box;
        }
        /*右 内边距*/
        .rg_right div{
            text-align: right;
            padding-top: 20px;
            padding-right: 10px;
        }


    </style>
</head>
<body>
<!--整体布局-->
<div class="rg_main">
    <div class="rg_left">
        <div>
            <span style="color: #ffcf6b;font-size: 20px">新用户注册</span><br>
            <span style="color: #b4bfd6;font-size: 20px">USER REGISTER</span>
        </div>
    </div>
    <!--中-->
    <div class="rg_center">
        <form action="#">
            <table width="100%" height="500px" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="td_left">
                        用户名
                    </td>
                    <td>
                        <input type="text" placeholder="请输入用户名">
                    </td>
                </tr>

                <tr>
                    <td class="td_left">用户名</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td class="td_left">邮箱</td>
                    <td><input type="text" placeholder="请输入邮箱"></td>
                </tr>
                <tr>
                    <td class="td_left">姓名</td>
                    <td><input type="text" placeholder="请输入姓名"></td>
                </tr>
                <tr>
                    <td class="td_left">手机号</td>
                    <td>
                        <input type="tel" placeholder="请输入手机号">
                    </td>
                </tr>
                <tr>
                    <td class="td_left">性别</td>
                    <td><input type="radio" name="gender"> 男
                        <input type="radio" name="gender"> 女
                    </td>
                </tr>
                <tr>
                    <td class="td_left">生日</td>
                    <td>
                        <input type="date" >
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        验证码
                    </td>
                    <td>
                        <input type="tel" placeholder="请输入验证码">
                        <img src="../img/checkMa.png"  align="center" alt="">
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input align="center" type="button" style="background-color: #ffcf6b;width: 88px;border: 1px solid #ffcf6b;border-radius: 0px" value="注册">
                    </td>
                </tr>
            </table>
        </form>
    </div>


    <!--右边框-->
    <div>
        <div class="rg_right">
            <div>
                <span>已有账号？<a href="#" style="color:#ffcf6b">立即登录</a></span>
            </div>
        </div>

    </div>
</body>
</html>

御灵龍

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
D22-HTML表单和CSS样式

一、HTML表单（重点）作用：将用户在页面输出的数据，发送给java服务器（.net）&amp;lt;!-- 表单（容器）：&amp;lt;form&amp;gt;&amp;lt;/form&amp;gt; 常用属性： action：请求java服务器的地址 #（代表当前页面）userAction name：表单的名称 ...
复制链接

扫一扫