一、==表单==

1. form表单本身

<form name="myform" action="#" method="get">
    <!-- 所有的表单项写在form标签里边 -->
</form>

  • 属性：

    • name：表单的名称

    • action：表单数据的提交路径

    • method：表单数据的提交方式。get, post

2. input输入项

用户名：<input type="text" name="username" value="lisi"> <br>
密码：<input type="password" name="password" > <br>
<!--生日：<input type="date"> <br>-->
性别：<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女 <br>
爱好：<input type="checkbox" name="hobby" value="code" checked>编码
<input type="checkbox" name="hobby" value="friend">交友
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="movie">电影 <br>
​
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮"> <br>
<input type="image" src="../img/btn.jpg" value="图片提交按钮"> <br>
​
<input type="file" name="file">
<input type="hidden" name="hidden" value="隐藏域的值">

  • 属性：

    • type：input的类型，有常见的10个

      • text：文本框

      • password：密码框

      • radio：单选框。

        • name属性相同，选择互斥

        • 默认值设置：通过属性checked 或者 checked="checked"

      • checkbox：复选框

        • 建议name属性相同，方便服务端接收数据

        • 默认值设置：通过属性checked 或者 checked="checked"

      • button：普通按钮。没有功能，通过JS自定义功能的

      • submit：提交按钮

      • reset：重置按钮。把表单项的数据恢复成默认值

      • image：图片提交按钮。

      • hidden：隐藏域。不会显示到页面上的表单项

      • file：文件选择框。默认提交的是文件名称

    • name：表单项的名称，如果表单项数据要提交，就必须有name属性

    • value：表单项的值，作用是随着type而改变的

      • 在text和password里：value是默认值

      • 在radio和checkbox里：value是选项的值，选中哪个选项，就提交哪个选项的值

      • 在button、submit和reset里：value是按钮上的提示文字

      • 在image里：value没有实际意义

      • 在file里：value是无效的

      • 在hidden里：value是隐藏域的值

3. select下拉框

<select name="address">
    <option value="lol">LOL</option>
    <option value="wow">WOW</option>
    <option value="dota">DOTA</option>
    <option value="pubg">PUBG</option>
</select>

  • select标签：下拉框本身

    • name：名称。如果数据要提交，就必须有name属性

  • option标签：下拉框里的下拉选项

    • value：下拉选项的值

    • selected：表示被选中的选项

  • 默认值设置：

    • 没有手动设置时候，默认选中第一个选项

    • 手动设置默认值：在想要默认选中的选项上增加属性selected="selected" 或者 selected

4. textarea文本域

<textarea name="myself" rows="5" cols="10">默认值写在这里</textarea>

  • name：如果数据要提交，就必须有name属性

  • rows：高度可以显示几行

  • cols：宽度可以显示几列。被css样式代替了

  • 默认值设置：

    • textarea没有value属性，默认值是写在标签体里的（标签体：开始标签和结束标签中间的全部内容）

5. ==get提交和post提交的区别（面试题）==

  1. get提交，表单数据在地址栏显示（在HTTP请求行里提交的）；post提交，表单数据不会在地址栏显示（在HTTP请求体里提交的）

  2. get提交，不安全；post提交，相对安全

  3. get提交，长度有限制；post提交，没有长度限制

二、CSS

1. div和span标签

  • 块标签（行级元素）：独占一行的元素，比如：div, hr, h1~h6

  • 内联标签（行内元素）：内容多大，就占多大空间的元素，比如：span, font

  • 页面布局时，通常是div+css

2. CSS简介

  • CSS：cascading style sheet，层叠样式表

  • 作用：用来修饰页面的

3. CSS语法

3.1 CSS的引入方式(CSS的位置)

  • 写在标签的style属性里

<div style="color:red;font-size:20px;">黑马程序员1</div>

  • 写在style标签里

<head>
    <style>
        div{
            color:blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>快乐的一天1</div>
    <div>快乐的一天2</div>
</body>

  • 写在单独的css文件里

<head>
    <!--
    03. 外部样式。
        把样式写在一个单独的css文件里，页面里引入css文件。
        link标签：
            type：引入的文件类型，固定值text/css。可以不写
            rel：引入的文件和当前页面是什么关系，固定值stylesheet。必须写
            href：引入的文件路径。必须写
    -->
    <link rel="stylesheet" href="../css/my.css">
</head>

3.2 CSS的选择器

3.2.1 基本选择器
/*标签选择器：标签名称{样式名:值;样式名:值;...}*/
div{
    color: red;
}
​
/*ID选择器：#ID值{样式名:值;样式名:值;...}*/
#kdy{
    color:blue;
}
​
/*类选择器：.类名{样式名:值;样式名:值;...}*/
.blueClass{
    color:blue;
}

  • 优先级：ID选择器 > 类选择器 > 标签选择器。如果优先级相同，后加载覆盖先加载

3.2.2 扩展选择器
<style>
    /*要求1：选中span3，设置样式：红色字体*/
    #d2 .class1{
        color: red;
    }
​
    /*要求2：文本框背景变成红色；密码框背景变成蓝色*/
    input[type="text"]{
        background-color: red;
    }
    input[type="password"]{
        background-color: blue;
    }
​
    /*要求3：超链接a，正常状态是红色； 访问之后是绿色； 鼠标移上是黄色；鼠标按下是粉色；love and hate*/
    a:link{
        color: red;
    }
    a:visited{
        color:green;
    }
    a:hover{
        color:yellow;
    }
    a:active{
        color: pink;
    }
</style>
​
<!-- 要求1的环境 -->
<div id="d1">
    <div>
        <span class="class1">span1，类名是：class1</span>
        <span class="class2">span2，类名是：class2</span>
    </div>
</div>
<div id="d2">
    <div>
        <span class="class1">span3，类名是：class1</span>
        <span class="class2">span4，类名是：class2</span>
    </div>
</div>
<hr>
<!-- 要求2的环境 -->
<input type="text" value="文本框">
<input type="password" value="密码框">
<hr>
<!-- 要求3的环境 -->
<a href="#">百度</a>

4. 盒子模型

  • 盒子模型：布局的方式，可以给每个元素设置：width、height、border、padding、margin。设置之后，元素看起来像个盒子，所以把这5个样式统称为：盒子模型。

  • 标准盒子模型（默认）：

    • 设置样式：box-sizing: content-box;

    • 特点：width和height是内容区域的大小。如果设置了padding和border，盒子会撑大

  • 怪异盒子模型：

    • 设置样式：box-sizing: border-box;

    • 特点：width和height是例子的大小。如果设置了padding和border，内容会缩小

 

html之表单和简单CSS的更多相关文章

  1. php框架中的phalcon框架的安装，及初步认识，从表单提交简单的数据到数据库中

    php框架中的phalcon框架的安装,及初步认识,从表单提交简单的数据到数据库中 1.phalcon框架的安装: phalcon框架在windows本地安装可以利用wamp软件,安装之后可以查看对应 ...

  2. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  3. 表单控件 css的三中引入方式css选择器

    1. 表单控件: 单选框 如果两个单选的name值一样,会产生互斥效果 <p> <!--单选框--> 男<input type="radio" nam ...

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

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

  5. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  6. JSP 用户表单的简单实现

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  7. [转] Form 表单数据处理 简单教程 formidable 使用心得

    入门,高手见笑 表单数据一种是get方式, 另一种是post 方式 1.get方式 对于get方式,node处理起来非常简单 如以下代码: var urlParsed = url.parse(requ ...

  8. day 31 表单标签，CSS

    一. HTML表单标签 HTML表单用于搜集不同类型的用户输入,然后把数据提交给服务器处理. 常用的表单标签: 标签 作用 form 所有表单标签的根标签 input 输入标签,包括单行输入框.密码框 ...

  9. 2017年12月17日 ASP.NET 12个表单元素&&简单控件/复合控件

    12个表单元素可以分为三大类 第一类:文本类 <input type = "text" /> //普通文本框 <input type = "passwo ...

随机推荐

  1. 数据库：sql 多表联合更新【转】

    SQL Update多表联合更新的方法 (1) sqlite 多表更新方法 update t1 set col1=t2.col1 from table1 t1 inner join table2 t2 ...

  2. Celery-4.1 用户指南: Configuration and defaults (配置和默认值)

    这篇文档描述了可用的配置选项. 如果你使用默认的加载器,你必须创建 celeryconfig.py 模块并且保证它在python路径中. 配置文件示例 以下是配置示例,你可以从这个开始.它包括运行一个 ...

  3. 如何配置nagios监控SUN(富士通)MX000系列服务器的XSCF

    配置环境说明 192.168.3.80-XSCF地址 192.168.2.80-solaris操作系统IP地址 (nagios客户端) 192.168.2.120-nagios服务器端 check_x ...

  4. 使用setTimeout 来实现setInterval的效果

    直接上代码,实现的核心就是在延时的情况下递归的调用自己, x=0 y=-1 function countMin( ) { y=y+1 document.displayMin.displayBox.va ...

  5. js中substring和substr用法与区别

    String.substring( ):用于返回一个字符串的子串 用法如下:string.substring(from, to) 其中from指代要抽去的子串第一个字符在原字符串中的位置 to指代所要 ...

  6. 关于fragment生命周期的两张图片

    图1,fragment的生命周期,图2,fragment生命周期对应activity的生命周期

  7. 【oracle】首次启动SQL Developer配置java.exe出错（Could not find jvm.cfg! ）

    1.环境 win7/8/8.1  x64,Oracle 11g r2,jdk7 x64 2.问题 第一次启动Oracle SQL Developer的时候会让我们填写Java.exe的路径,我在jdk ...

  8. linux 中更改权限命令chown,chmod,chgrp

    写在前面,关于chown,chmod的区别 chown用法 用来更改某个目录或文件的用户名和用户组的 chown 用户名:组名 文件路径(可以是就对路径也可以是相对路径) 例1:chown root: ...

  9. 请用fontAwesome代替网页icon小图标（转）

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  10. python 爬虫 常见安全措施

    1.隐含输入字段值: 1.1首先采集表单所在页面上生成的随机变量,然后再提交到表单处理页面. 2.避免蜜罐 3.用远程服务器:洋葱路由(The Onion Router)网络.PySocks 是一个非 ...