一、==表单==

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. 【OpenCV】图像代数运算:平均值去噪,减去背景

    代数运算,就是对两幅图像的点之间进行加.减.乘.除的运算.四种运算相应的公式为: 代数运算中比较常用的是图像相加和相减.图像相加常用来求平均值去除addtive噪声或者实现二次曝光(double-ex ...

  2. 反射+属性标签 通用Excel导入导

    在做通用导入导出的时候,最关键的应该就是实体导出导入的顺序了,但是编译器在编译的时候又无法自定义属性编译的顺序,所以需要一个自定义的特性标签来指定实体类导出的顺序,然后通过自定义的比较器将属性排序 因 ...

  3. c#学习之路---壁咚漏洞搜索

    每次出漏洞都会用JAVA去写,不过JAVA你懂得,写GUI每次画图很吃力. 于是左右学习了下c#,期间也得到表哥storm7kb的帮助,要不然这个表格与数据绑定不知道c#怎么弄. 上一下图吧: --- ...

  4. mysql添加用户

    增加新用户: 格式:grant select on 数据库.* to 用户名@登录主机 identified by "密码" 例1.增加一个用户test1密码为abc,让他可以在任 ...

  5. IDEA中Git实战

    工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...

  6. MSSQL 日期查询 包含NULL值

    方一: 以下做法保证数据里面没有NULL值 '') '') '') '') exec sp_executesql N'select ide_code as ''系统编号'',name as ''申请专 ...

  7. IE的haslayout

    haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元 ...

  8. mysql sequelize 聚合

    User.findAll({attributes: [[sequelize.fn('COUNT', sequelize.col('*')), 'email']],raw: true }).then(f ...

  9. gcc 升级方法

    Want GCC 4.8 with c++11 complete feature? Well here’s how to install it in Ubuntu 12.04, Ubuntu 13.0 ...

  10. LeetCode第617题:合并二叉树

    问题描述 解题思路 略略略略略 C++代码 /** * Definition for a binary tree node. * struct TreeNode { * int val; * Tree ...