html表单和css介绍

1. 表单

  1. 表单标签 form

    1. <form action="#" method="get"></form>
    2. 作用: 用于将客户端浏览器的数据提交给服务器
    3. 常用的属性
      1. action: 用来指定数据提交的路径 # 表示本页面
      2. method: 提交的方式
    4. 两种提交方式
      1. GET:数据会出现在地址栏的后面以?分隔,?前面是地址,后面是参数 如果是多个参数,参数之间使用&分隔
      2. POST: 提交的参数不会显示在地址栏上,相对更加安全。

    2.表单中的控件

    1. input2.select3.textarea
  2. input标签
    1. type属性
    2. text 文本框
      
      password 密码框,输入不可见
      
      radio 单选按钮
      
      checkbox 复选框 多选框
      
      date html5属性 有的浏览器不支持
      
      file 上传文件
      
      image 图形提交按钮 点击就提交表单
      
      submit 提交
      
      reset 重置(初始化),注意 不等于清空
      
      hidden隐藏域 页面上看不到效果,不想让用户看的数据一般放在隐藏域
    3. type属性(H5,了解)  
      1. button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本)  
    4. color 定义拾色器。  
    5. date 定义日期字段(带有 calendar 控件)  
    6. datetime 定义日期字段(带有 calendar 和 time 控件)  
    7. datetime-local 定义日期字段(带有 calendar 和 time 控件)      
    8. month 定义日期字段的月(带有 calendar 控件)  
    9. week 定义日期字段的周(带有 calendar 控件)  
    10. time 定义日期字段的时、分、秒(带有 time 控件)  
    11. email 定义用于 e-mail 地址的文本字段  
    12. number 定义带有 spinner 控件的数字字段  
    13. range 定义带有 slider 控件的数字字段。  
    14. search 定义用于搜索的文本字段。  
    15. tel 定义用于电话号码的文本字段。      
    16. url 定义用于 URL 的文本字段。  
    17. 其他属性
      1. name 提交key

        1. 需要提交数据的组件必须加上name属性
        2. 特殊用法: 在radio中除了表示提交的key以外 还表示 一组标签(互斥)
        3. 特殊用法: 在checkbox中也表示一组标签
        4. value 提交的值 key=value
          1. 如果文本框中有 使用文本框的值 如果没有.则使用默认值
        5. 特殊用途 radio 中表示提交值 不可见
        6. 特殊用途 checkbox 中表示提交值 不可见
      2. checked 单选或者复选的默认选中状态
        1. 标准写法: checked="checked"
        2. 特殊写法: checked="" 或者 checked
      3. 了解:
        1. size 尺寸 默认20
        2. maxlength 最大输入长度
        3. readonly 只读 支持畸特殊写法 只能看 不能改 数据会提交
        4. disabled 不可用 支持特殊写法 只能看 不能改 数据不会提交
  3. select标签 : 下拉框
    1. name 属性: 提交的key
    2. option 子标签:选项
      1. value 表示提交的值

        1. selected="selected" 默认选中
    3. 了解属性
      1. multiple 多选
      2. size属性 显示的个数
  4. textarea标签: 文本域
    1. name 属性: 提交的key
      1. value值: 在标签体内添加即可
      2. 属性 : cols="40" rows="40"

  举例代码:

 <form action="fristhtml.html" method="post">

        手机号吗:<input type="text" name="phone"/><br />
        创建密码:<input type="password" name="pwd"/><br />
        <!--
                描述:实现默认选中的属性
                cheched="checked"
            -->
        性别:<input type="radio" name="sex1" value="nv" checked="checked"/>女<input type="radio" name="sex1" value="nan"/>男<br />

        爱好:<input type="checkbox" name="love" value="y"/> 羽毛球  <input  type="checkbox" name="love" value="p"/>乒乓球
        <input type="checkbox" name="love" value="lq"/>篮球<br />

        文件:<input type="file" /><br />

        生日:<select name="brith">
            <option value="0">请选择</option>
            <option value="1991">1991</option>
            <option value="1992">1992</option>
            <option value="1993">1993</option>
            <option value="1994">1994</option>
        </select><br />
        自我介绍:
        <textarea cols="100" rows="10" name="tex"></textarea><br />
        隐藏项:<input type="hidden" name="hid"/>

        <!--
            作者:offline
            时间:2018-07-03
            描述:提交按钮
        -->

        <input type="submit" value="注册"/> <br />
        <!--<input type="image" src="img/t.jpg"/>  使用点击图片提交-->
        <!--
            作者:offline
            时间:2018-07-03
            描述:重置
        -->
        <input type="reset" value="重置注册"/>
        <input type="button" value="普通按钮" />
        </form>

2. CSS选择器

  1. CSS概述

    1. CSS:Cascading Style Sheet 层叠样式表,专门用于网页的美化
    2. CSS的好处
      1. 功能上更强 比HTML美化的功能更加强大,可以实现HTML不能实现的功能。如:给H2加颜色
      2. 降低耦合度 分工更加明确,CSS专门用于美化,HTML专门用于结构搭建
    3. 编写规范
      1. 大括号: 所有的样式都写在大括号内部
      2. 样式名: 全部字母小写,如果多个单词使用-分隔
      3. 样式值: 所有样式名样式值是固定的,名字与值之间使用冒号
      4. 样式结尾: 每个样式使用分号结尾
  2. css和html的结合方式(四种结合方式)
(1)在每个html标签上面都有一个属性 style,把css和html结合在一起
    ○ <div style="background-color: red; color: green;">
(2)使用html的一个标签实现<style>标签,写在head里面
    ○ <style type="text/css">
      § css代码;
    ○ </style>
    ○ <style type="text/css">
      § div{
        background-color: blue;
        color: red;
       }
    ○ </style>
(3)在style标签里面 使用语句(某些浏览器不起作用)
    ○ @import url(css文件的路径)
(4)使用头标签 link,引入外部css文件
    ○ 第一步 创建css文件
      <link rel="stylesheet" type="text/css" href="css文件的路径"/>
    1. 样式优先级

      1. 行内样式的优先级最高
      2. 以标签为中心 离标签越近 优先级越高 -> 就近原则
  1. CSS的基本选择器
    1. 作用:选择器用来辅助我们从页面上获得标签的

      1. 格式选择器{

          样式

        }

    2. 需要使用内部样式或者外部样式 来控制选择器
    3. 三种基本选择器
  2. · 标签选择器 使用标签名
    · class选择器 .名称
    · id选择器 #名称  id唯一
    · 优先级 style > id > class > 标签 
  3. CSS常见属性
    1. 背景: background
    2. 文本
    3. 浮动
    4. display
      1. 块和行

        1. 块元素 div 内容会折行

          1. 行内元素 span 不会折行
      2. 属性值
        1. block 块

          1. inline 在行里
          2. none 隐藏
      3. 作用
        1. 转换(没用)
        2. 显示隐藏
  4. 盒子模型
    1. 盒子: 任何一个网页元素都可以看成一个盒子

      1. 内容(content)就是盒子里装的东西;
      2. 内边距(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
      3. 边框(border)就是盒子本身了;
      4. 外边界(margin)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。
  5.  边框  border : 2px solid red;
       上下左右  botder-top    border-bottom   border-left    border-right
     内边距  padding : 20px
          上下左右
     外边距  margin : 20px
          上下左右
     对数据进行操作,需要把数据放到一个区域里面(div)

    属性

    1. width 宽度
    2. height 高度
    3. margin 外边距
    4. padding 内边距
    5. border 边框的属性
    1. 标准盒子和怪异盒子

      1. 标准盒子模型

        1. box-sizing: border-box;
        2. 内容(不变的) + 额外的边框 + 额外的内边距 = 盒子的大小
      2. 怪异盒子模型: 内容+边框+内边距 = 盒子(不变的)
        1. box-sizing: border-box;

原文地址:https://www.cnblogs.com/cyxy31521/p/9374492.html

时间: 2024-11-05 19:25:23

html表单和css介绍的相关文章

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

3.2 表单元素逐一介绍

下面讨论表单元素的类型及常用的属性. 本节单词记忆:标签 1.select 2.option 3.textarea 属性 1.text 2.password 3.radio 4.checkbox 5.name 6.value 7.reset 8.submit 9.button 网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的. 1.文本框 在表单中最常用最常见的表单输入元素就是文本框(text)

html表单输入框css样式美化特效源代码下载

html表单输入框css样式美化源代码,响应鼠标动作 原文:html表单输入框css样式美化特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463335926784.htm 源代码截图:

可以被提交的表单元素简单介绍

可以被提交的表单元素简单介绍: 既然是表单元素,那就是随时准备被提交的,但是有时候一些表单元素被设置了一定的属性之后就不能够被提交了,下面介绍一下设置了设置哪些属性之后表单元素不能够被提交. 不能够被提交: <input type="text" name="antzone" disabled/> 以上两个文本框的将不会被提交.可以被提交: <input type="text" name="antzone" r

分块表单配置的介绍

相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-group-layout.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

表单提交详细介绍

阅读目录 开始 简单的表单,简单的处理方式 表单提交,成功控件 多提交按钮的表单 上传文件的表单 MVC Controller中多个自定义类型的传入参数 F5刷新问题并不是WebForms的错 以Ajax方式提交整个表单 以Ajax方式提交部分表单 使用JQuery,就不要再拼URL了! id, name 有什么关系 使用C#模拟浏览器提交表单 资源链接 Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.ne

DOM针对表格表单以及CSS

1.表格操作(只针对表格) -创建 tableElement.insertRow(position) - 新增一行 rowElement.insertCell(position) - 新增一个单元格 (这里需要注意的是:position从0开始) -删除 tableElement.deleteRow(position) rowElement.deleteCell(position) -访问 tableElement.rows - 表格中的行 rowElement.cells - 行中的列2.表单

基于CkEditor实现.net在线开发之路(3)常用From表单控件介绍与说明

这一章主要介绍常用From表单控件,如图所示: 红色框框住的就是常用From表单控件.从左到右分别是From,复选框,单选框,文本框,多行文本框,下拉列表,按钮,图片按钮,隐藏文本框,Lable 复选框和单选框介绍与说明: 因为单选框和复选框属性和设置界面一直,所以就一起讲解,点击复选框按钮弹出,复选框设置界面,如下图: 属性说明与用法: 字段说明 输入类型 说明 控件ID   自动生成,生成一个唯一的控件ID,如果页面存在重复预览页面会报错 控件名称 手工输入 方便编辑时,知道该控件是做什么的

前端html表单与css样式

h2 { background-color: green } 1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: <from action="" method="post"> <p>姓名:<input type="text" name="names"> </p> <p>用户名:<i