day 31 表单标签，CSS

一、 HTML表单标签

HTML表单用于搜集不同类型的用户输入，然后把数据提交给服务器处理。

  • 常用的表单标签：

标签

作用

form

所有表单标签的根标签

input

输入标签，包括单行输入框、密码框、单选框、复选框、提交按钮等等

textarea

文本域

select、option

下拉列表框

1.1     form标签属性

属性

作用

action

指定表单的提交地址

method

指定表单的提交方式，例如：Get和Post

enctype

指定表单数据在发送到服务器之前应该如何编码
  • Get和Post提交方式的区别：

使用Get方式提交数据，那么这些数据就会显示在地址栏上；使用Post方式提交数据，那么表单的数据就不会显示地址栏上面；

1.2     表单标签的基本属性

属性

作用

id

指定元素的唯一标识

name

指定元素的名字

style

指定元素的内联样式

class

指定元素的类名

title

指定提示文本

placeholder

指定输入框的提示信息

注意：如果要把表单数据提交给服务器处理，那么表单项就必须要指定name属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        表单标签的根标签
            action：指定提交的URL地址
                注意：表单只会提交有name属性的表单项数据。
                所有表单标签都有name属性 .

             如果没有指定method属性，默认就是get请求。
                get请求的请求参数是显示在地址栏上面。
             一般表单提交方式使用post方式。

             get和post的区别？
             1）get请求的参数会显示在浏览器地址栏上，而post请求不会把请求参数显示在地址栏；
             2）Post请求的安全性比get高；
             3）get请求参数的长度有限制，而Post请求的参数大小没有限制；
             4）get请求有缓存，而post请求没有缓存；

    -->
    <form action="http://www.baidu.com" method="post">
        用户名：<input type="text" id="username" name="username"
                   title="请输入用户名" placeholder="请输入用户名" value=""/><br/>
        密码：<input type="password" name="userpass"/><br/>
        <!-- 同一组单选框的name属性必须相同 -->
        性别：男<input type="radio" name="gender" value="male" checked/>
            女<input type="radio" name="gender" value="female"/><br/>
        <!-- 同一组的复选框的name属性必须相同 -->
        兴趣爱好：吃<input type="checkbox" name="hobby" value="eat"/>
            喝<input type="checkbox" name="hobby" value="drink"/>
            玩<input type="checkbox" name="hobby" value="play"/><br/>
        居住地：
        <select>
            <option>请选择省份</option>
            <option>广东省</option>
            <option>湖南省</option>
        </select>
        <select name="city">
            <option>请选择城市</option>
            <option>深圳</option>
            <option>广州</option>
            <option>惠州</option>
        </select><br/>
        大头照：<input type="file"/><br/>
        自我介绍：<textarea name="introduce" cols="30" rows="5"></textarea><br/>
        <!--
            submit: 提交按钮
            button: 普通按钮
        -->
        <input type="submit" value="注册"/>
    </form><br/>
    <img src="images/tv01.jpg" title="这是电视机"/>
</body>
</html>
示例

1.3 事件属性（了解）

HTML4的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。在现代浏览器中内置大量的事件处理器。这些事件处理器会监听特定条件的用户行为，例如：单击鼠标，移动鼠标等等。

1.3.1 窗口事件

窗口事件仅在body和frameset标签中才有效。

 

1.3.2 表单元素事件

表单元素事件仅在表单元素中才有效。

 

1.3.3 键盘事件

 

1.3.4 鼠标事件

 

注意：键盘事件和鼠标事件在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

CSS样式：

使用层叠样式表的好处：

1）  使得网页内容与网页表现分离；

2）  可以同时多一个或多个元素进行样式化，极大提高了工作效率；

2.2 如何编写CSS

方式一：在style标签中编写CSS

 

注意：一个HTML文件可以有零个或多个style标签。

方式二：引入外部CSS文件

第一步：新建一个CSS文件；

 

第二步：在CSS文件中编写CSS代码；

 

第三步：在HTML中引入CSS文件；

方式三：在元素的style属性中编写CSS

所有元素都可以指定style属性。

 

一般而言，所有样式会根据以下规则层叠在一个虚拟的样式表中，其中数字4拥有最高优先级。

优先级

规则

1

浏览器缺省设置

2

外部样式表

3

内部样式表（位于<head>标签内部）

4

内联样式表（位于HTML元素内部）

2.3 CSS注释

HTML的注释：<!--  注释内容 --->

CSS的注释：/*注释的内容*/

2.4 CSS选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 交集选择器：只会对选择1中的选择2进行样式化
        tbody input  {
            font-size: 28px;
        }*/

        /* 并集选择器：同时对多个选择器进行样式化
        tbody, input {
            font-size: 28px;
        }*/

        /* 通用选择器 */
        * {
            font-size: 20px;
        }

        /* 伪类选择器：对元素的不同状态进行样式化 */
        a:link {
            font-size: 14px;
            color: red;
        }

        a:hover {
            font-size: 22px;
        }

        a:active {
            font-size: 22px;
            color: blue;
        }

        a:visited {
            color: grey;
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>用户名：</td>
                <td><input type="text" value="小宝"/></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    <input type="button" value="提交"/>
                </td>
            </tr>
        </tfoot>
    </table>

    <a href="http://www.baidu.com">百度</a>
</body>
</html>
选择器示例

CSS语法由三部分组成：选择器、属性和值

div {
    color: green;
}

div：为选择器
color：属性
green：值

2.3.1 标签选择器

标签选择器就是根据元素的名字查找元素并进行样式化，其定义格式：

tag_name {

       样式列表…

}

2.3.2 类选择器

类选择器就是根据元素的class属性查找元素并进行样式化，其定义格式：

.class_name {

       样式列表…

}

2.3.3 ID选择器

ID选择器就是根据ID属性查找元素并进行样式化，其定义格式：

#ID {

       样式列表…

}

选择器的优先级：

　　ID选择器的优先级比Class选择器的优先级高，而Class选择器比标签选择器的优先级高。

2.3.4 交集选择器

交集选择器就是对选择器1中的选择器2进行样式化，其定义格式：

选择器1 选择器2 … {

       样式列表…

}

2.3.5 并集选择器

并集选择器就是同时对多个选择器进行样式化，其定义格式：

选择器1, 选择器2, … {

       样式列表…

}

2.3.6 通用选择器

通用选择器就是对所有元素进行样式化，其定义格式：

* {

       样式列表…

}

通用选择器一般用于指定页面的默认样式。注意：通用选择器的优先级最低。

2.3.7 伪类选择器

伪类选择器是对元素处于某一个特定状态进行样式化。

  • 元素的状态：

:link

未访问状态，只对a标签有效

:visited

已访问状态，只对a标签有效

:hover

鼠标划过时候的状态

:active

鼠标选定时候的状态

2.4 CSS属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 2000px;
            background-color: yellow; /* 设置背景颜色 */
            background-image: url("images/time1.jpg");/* 设置背景图片 */
            background-repeat: no-repeat; /* 设置背景图片不重复 */
            background-position: 50% 50%; /* 设置背景图片的位置 */
            background-attachment: fixed; /* 设置背景图不滚动 */
        }
    </style>
</head>
<body>

</body>
</html>
背景样式

字体样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            font-size: 18px;
        }

       span {
           color: red;
           font-weight: bolder; /* 字体加粗 */
       }

        p {
            text-indent: 2em; /* 字体缩进(1个em代表1个字体大小) */
            text-align: left; /* 文本对齐方式 */
            letter-spacing: 5px; /* 设置文本距离 */
            text-transform: capitalize; /* 转换大小写 */
        }

        a {
            text-decoration: none; /* 去掉下划线 */
        }
    </style>
</head>
<body>
    <p>
        <!-- 行内标签 -->
        设置字体的重量，例如：字体加粗<span>bold border</span>
    </p>
    <a href="">老男孩</a>
</body>
</html>
字体样式

表格样式

 <style>
        table {
            /*border-collapse: collapse;  合并单元格边框 */
            border-spacing: 10px; /* 设置单元格边框的距离 */
        }
    </style>
表格样式

边框样式

<style>
        /*span {
            border- 3px; !* 边框的宽度 *!
            border-color: red; !* 边框颜色 *!
            border-style: double; !* 边框风格 *!
        }*/

        span {
            /*border: 1px solid red;*/
            border-left: 1px solid red;
            border-top: 1px dotted blue;
            border-right: 1px dashed green;
            border-bottom: 3px double yellow;
        }
    </style>
边框样式

盒子样式

 <style>
        div {
            width: 180px;
            height: 180px;
            border: 1px solid red;
            /*padding-left: 10px;  设置左内边距 */
            /*padding-top: 10px;  设置上内边距 */
            /*padding: 20px 0px 0px 20px;  设置四条边内边距(上右下左) */
            padding: 10px 10px; /* 设置上下和左右内边距 */
        }
    </style>
盒子样式

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
        margin: 0px;
    }

    div {
        width: 150px;
        height: 150px;
        border: 1px solid gray;
    }

    .red {
        background-color: red;
    }

    .green {
        background-color: green;
        /* position: relative;  相对定位 */
        position: absolute;  /*绝对定位 */
        left: 20px;
        top: 20px;
    }

    .blue {
        background-color: blue;
    }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>
</html>
定位

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 2000px;
        }

        img {
            position: fixed; /* 固定定位 */
            top: 250px;
            left: 980px;
        }
    </style>
</head>
<body>
    <img src="images/dialog.png"/>
</body>
</html>
固定定位

浮动定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
        margin: 0px;
    }

    div {
        width: 150px;
        height: 150px;
        border: 1px solid gray;
    }

    .red {
        background-color: red;
        float: left; /* 左浮动 */
        height: 200px;
    }

    .green {
        background-color: green;
         float: left; /* 左浮动 */
    }

    .blue {
        background-color: blue;
         float: left; /* 左浮动 */
    }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div>我是老男孩</div>
</body>
</html>
浮动定位
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/echo2019/p/10414242.html