Web02（HTML表单标签、div标签、CSS概述、CSS选择器、CSS的样式、CSS的盒子模型）

Part01:HTML表单标签、div标签

1、

表单标签：

• 作用：主要是用来收集用户的数据，提交到服务器
• 子标签：
  • ：输入框，一共有10种
    • 通过设置type属性的值来设置输入框样式
      • 值为“text”：文本输入域，显示文本内容，默认的
      • “password“：密码输入域，显示加密文本
      • ”radio”：单选框
      • “checkbox”：复选框
      • “button”：普通按钮
      • “reset”：重置按钮，value默认值为”重置“，把表单里的值全部重置
      • “submit"：提交按钮，把数据提交到服务器
      • ”image“：图片按钮，可以给按钮设置图片背景
      • “hidden”：隐藏域，数据会提交，但是页面上看不见
      • “file”：文件上传组件，可以选择本地文件上传
    • name属性的作用：
      • 给标签起名字
      • 给单选框和复选框分组，name一样的分为一组，同一组的单选框只能选一个
      • 有name属性的标签的数据才会提交
    • value属性的作用：
      • 修改按钮显示的文字
      • 当标签是单选框或者复选框时，每一个选项必须设置value值，否则提交数据的值是on；
  • ：下拉选择框，默认没有内容
    • 子标签设置下拉内容
    </code>：文本区域 <ul> <li>属性rows：行数</li> <li>属性cols：列数</li> </ul> </li> </ul> </li> </ul> <p>2、表单的数据提交：</p> <ul> <li>点击提交（type=“submit”）按钮时，数据就会自动提交到服务器；</li> <li>以直接跟在地址栏的地址后面的方式提交到服务器的； <ul> <li>格式：？属性名=属性值&属性名=属性值</li> <li>？是一个分隔符，代表后面是用户的数据（用户的参数）</li> </ul> </li> <li>只有设置了name属性的标签的值才可以提交；</li> <li>当标签是单选框或者复选框时，每一个选项必须设置value值，否则提交数据的值是on；</li> <li>select标签也可以设置value值，如果没有设置，默认提交数据的值就是子标签中的内容；</li> </ul> <p>3、表单标签在网页上显示的默认值：</p> <ul> <li>type=“text”标签的默认值通过value属性设置；</li> <li>type=“password”标签的默认值也是通过value属性设置；</li> <li>type=“radio”标签的默认值通过设置cheched属性的值为“cheched”或“true”设置;</li> <li>type=“checkbox”标签的默认值也是通过设置cheched属性的值为“cheched”或“true”设置</li> <li>标签的默认值就是写在开始标签和结束标签之间的内容；</li> <li>标签的默认值是在子标签中加上select属性或者设置属性selected=“selected”；</li> </ul> <p>4、表单标签<code><form></code>的自身属性</p> <ul> <li>action：动作属性，表示要把数据提交到的服务器，值为网络地址</li> <li>method：方法属性，表示要提交数据的方式，值有两种： <ul> <li> <p>get(默认）：把数据直接拼接到地址后面提交，不安全，长度有限制</p> </li> <li> <p>post：把用户数据打包后提交，不显示在地址栏，相对于get方式更安全</p> <pre><code> <form action="#" method="post"> 姓名：<input type="text" name="username" value="张三"/><br/> 密码：<input type="password" name="password"/><br/> 性别：男<input type="radio" name="sex" value="1" checked="checked">   女<input type="radio" name="sex" value="0"/><br/> 爱好：吃<input type="checkbox" name="hobby" value="01"> 喝<input type="checkbox" name="hobby" value="02"> 玩<input type="checkbox" name="hobby" value="04"> 睡<input type="checkbox" name="hobby" value="05"/><br/> 头像：<input type="file"><br/> 个性签名：<textarea>这是个性签名
省份：
    江西 福建 山西 广东



5、

标签：

• 是一个块级元素，独立占一行的元素；
• 独自不能实现复杂效果，必须结合CSS样式进行渲染；

6、标签：

• 行内标签，不会自动换行；

Part02:CSS概述

1、CSS：

• CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式；
• CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构；

2、CSS的代码规则：

• 选择器{
  属性名：属性值;
  属性名：属性值;
  }

3、CSS注意事项：

• CSS样式“选择器”严格区分大小写，“属性名”和“属性值”不区分大小写

• 多个属性之间必须用英文状态下的分号隔开;

• 如果某个属性（border属性除外）的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。如：
  P{
  font-family:“Times New Roman”;
  }

• 注释格式：/*注释内容*/;

• CSS中空格是不被解析的；花括号以及分号前后的空格可有可无。

• 注意⚠️：属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错；

    h1{
    Font-size:20px;  /*20和单位px之间不能有空格*／
    }
  

4、CSS样式的三种引入方式：

• 行内样式：在标签的style属性值中写CSS代码，注意⚠️：此时选择器和大括号不用写，只需写 属性名：属性值，多个用分号隔开；
• 内部样式：写在标签的子标签

  CSS样式

  //cssDemo.css代码 h1{ background-color: aquamarine; }

  Part03：CSS选择器

  1、CSS中的选择器：

  • 要想将CSS样式应用于特定的HTML元素，首先要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。
  • 作用：它的作用就是选中某个或某些标签，以便于我们设置样式效果；

  2、三种基本的选择器：

  • 标签／标记／元素选择器：选中了我们指定名字的所有标签
    • 格式：标签名{属性名：属性值;}
  • id选择器：选中指定id值的标签
    • 格式：#id值{属性名：属性值;}
  • class选择器：选中指定class值的标签
    • 格式：.class值{属性名：属性值;}

  
      
      
      
  
  
  标题1
  标题1
  标题2
  
  

  3、扩展的两种选择器：

  • 属性选择器（过滤选择器）：
    • 只选中符合我们要求属性值的标签
    • 格式：标签名[属性名=属性值]{属性名：属性值;}

  
  
  
  
  
  
  
   
    
   
     
  包含选择器（后代选择器）： 
      
   
       
  选择包含在选择器1中的选择器2的标签,可以是直接子元素,也可以是间接子元素
   
       
  选择器1 选择器2{属性名：属性值;}
   
      
   
   
    
   
    
  
  
  
  
  
  标题
  
      
  标题
  
  
   
    
  Part04：CSS的样式
   
    
  1、CSS中常见的样式（选择器中的属性名）：
   
    
   
     
  边框和尺寸： 
      
   
       
  border：边框样式 
        
   
         
  border:边框的宽度 边框的样式 边框的颜色 
          
   
           
  边框宽度：单位px
   
           
  边框样式：double：双线边框、solid：实线边框
   div{
   border: 10px double red;
   }
   
          
   
   
        
   
   
       
  width：宽度，单位px
   
       
  height：高度，单位px
   
      
   
   
     
  字体： 
      
   
       
  color：内容的颜色
   
       
  font-size：内容的文字大小，单位px
   
      
   
   
     
  背景色： 
      
   
       
  background-color
   
      
   
   
     
  转换样式： 
      
   
       
  display 
        
   
         
  值：block（转成块级元素）
   
         
  值：inline（转成行内元素）
   
         
  值：none（隐藏）
   
        
   
   
      
   
   
     
  浮动样式： 
      
   
       
  float：设置元素的浮动效果，让元素浮起来； 
        
   
         
  值：left（飘起来向左）
   
         
  值：right（飘起来向右）
   
        
   
   
       
  clear：清除元素浮动效果 
        
   
         
  值：both（清除元素两边的浮动效果）
   
        
   
   
      
   
   
    
   
    
  
  
      
      
      
  
  
  1
  1
  1
  1
  1
  1
  1
  1
  
  
   
    
  
   Part05：CSS的盒子模型
   1、CSS盒子模型：
   
    
   
     
  CSS把每个标签都认为是一个盒子，把标签中的内容认为是盒子中的元素，默认盒子和元素一样大；
   
     
  通过设置内边距padding设置盒子中的元素和盒子的距离，元素大小不会变，可以通过padding-left/right/top等单独设置；
   
     
  通过设置外边距margin设置两个盒子之间的距离；