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

           样式

         }

   2. 需要使用内部样式或者外部样式 来控制选择器
   3. 三种基本选择器

3. · 标签选择器 使用标签名
   · class选择器 .名称
   · id选择器 #名称  id唯一
   · 优先级 style > id > class > 标签 

4. CSS常见属性
   1. 背景: background
   2. 文本
   3. 浮动
   4. display
      1. 块和行
         1. 块元素 div 内容会折行
            1. 行内元素 span 不会折行
      2. 属性值
         1. block 块
            1. inline 在行里
            2. none 隐藏
      3. 作用
         1. 转换(没用)
         2. 显示隐藏
5. 盒子模型
   1. 盒子: 任何一个网页元素都可以看成一个盒子
      1. 内容（content）就是盒子里装的东西；
      2. 内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
      3. 边框(border)就是盒子本身了；
      4. 外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

6.  边框  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