一、 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="data: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-width: 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="data: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>

浮动定位

day 31 表单标签，CSS的更多相关文章

  1. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

  2. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  4. css 表单标签两端对齐

    来自:http://demo.doyoe.com/css3/justify/justify-form.htm  侵删 <!DOCTYPE html> <html lang=" ...

  5. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. SpringMVC 表单标签 & 处理静态资源

    使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...

  7. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  8. HTML学习二_HTML常用的行级标签，常用实体字符及表单标签

    HTML常用的行级标签(行内元素)不独占一行### 有语义的行内元素 #### HTML链接 a标签 ```angular2html<a href="链接地址">链接文 ...

  9. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

随机推荐

  1. jquery_ajax 地址三级联动

    jquery 的三级地址联动,原理与javascript类似,只是在触发请求的时候,使用封装好的 $.get ,$post,$.ajax 方法去执行,其余的都是一样的,后台服务器请求文件是一样的,前台 ...

  2. 用python实现一个简单的服务器

    打开命令行工具,输入: python3 -m http.server 8000(端口可以自己定) 通过访问:http://ip:8000/,就能给别人快速分享文件了.

  3. The Google File System 中文版

    摘要 我们设计并实现了Google文件系统,一个面向分布式数据密集型应用的.可伸缩的分布式文件系统.虽然运行在廉价的日用硬件设备上,但是它依然了提供容错功能,为大量客户机提供了很高的总体性能. 虽然与 ...

  4. JS基础一-入门知识

    一.什么是JavaScript JavaScript是一种基于对象和事件驱动并具有安全性能的解释性脚本语言.JavaScript不需要编译,直接嵌入在HTTP页面中,把静态页面转变成支持用户交互并响应 ...

  5. 打包制作 ANE

    一.打包ANE 1.ios 准备文件: anePackager.bat aneswc.swc extension.xml flashAne.ane ioslib.a library.swf platf ...

  6. vscode vue 格式化 和emmet 提示

    ctrl+shift+p打开用户默认设置 设置vetur插件 "vetur.validation.template": false, "vetur.format.defa ...

  7. android事件处理概括

    什么是事件处理? 事件处理就是针对用户的一些特定操作,进行相对应的回馈.时间处理也是程序开发中的人机交互的一个非常重要的体现.事件处理中,事件源是事件的起始位. 一.事件处理三要素 事件源——事件—— ...

  8. ABAP 自定义排序的思想（不用系统标准的SORT语句）

    不用ABAP的标准SORT语句,你能将下面这个数组按从小到大(或从大到小)的顺序重新排列,并计算其算法复杂度吗? 现在假设有一个数组:A = [10,66,52,102,-65,85,99,1,56, ...

  9. whatweb工具

    WhatWeb WhatWeb可以用来确定服务器使用的CMS.博客平台.统计分析软件包.JavaScript库等.这个工具有超过900个插件用来扫描目标. 使用方法: root@root:/pente ...

  10. RecycleView 使用自定义CardLayouManager内容无法滚动问题

    1.开始一直反应不过来一个问题:RecycleView不是自带滚动效果吗?为啥子条目还不能全部滚动,显示出来呢? 意识到:只有当RecycleView 适配器中条目数量特别多,才可以滚动. 然而自己的 ...