html-css学习第八天

• 表格
  • 基本结构实例（这个只有结构，没有方格，需要css）：

    <table>
    	<tr>
    		<th>序号<th>
    		<th>姓名<th>
    		<th>年龄<th>
    	</tr>
    		<td>1</td>
    		<td>孙悟空</td>
    		<td>1000000</td>
    	<tr>
    		<td>2</td>
    		<td>唐僧</td>
    		<td>36</td>
    	</tr>
    	......
    <table>
    

    • 单元格合并
      • colspan , 横向合并 , 值是合并的个数，需要并合并的方格不填信息在。 eg: <td colspan=“2”>孙悟空<\td>
      • rowspan , 纵向合并 ，与上面类似
    • border-spacing , 用css设置单元边框后之间存在距离，通过这个可以设置单元格距离，这种方式合并单元格存在缺陷
    • border-collapse: cooapse , 合并单元格，使用了该方法后，border-spacing自动失效
    • 美观设置：
      • tr:nth-child(even){background-color: #bfa;} , 实现奇偶行颜色不同
      • tr:hover{background-color: #ff0;}
    • 当表格很长时可以将表格分为三部分，表头，主体，表尾，html中存在三种标签：thead,tbody,tfoot , 他们都是table的子标签。
• 高度塌陷最佳解决方案
  • 来源：使用空的table标签可以隔离父子元素的外边距实现
    解决父子元素外边距重叠：

    .box1:before {content:"";display:table;}
    

  • 即解决高度塌陷又结局外边距重叠问题：

    .clearfix:before, .clearfix:after {conten:""; display:table; clear:both;}
    

• 表单 <form action="提交的地址">......</form>
  • 用户名<input type="text" name="username"/> ，使用input创建文本框 , 如果指定value值，将是文本框的默认值
  • <input type="submit" value="注册" /> ， 使用input创建一个提交按钮
  • 使用input创建单选按钮

     性别<input type="radio" name="gender" value="male" />男
            <input type="radio" name="gender" value="female" />女`
    

  • 使用input创建多选框

   爱好<input type="checkbox" name="hobby" value="zq" />足球
           <input type="checkbox" name="hobby" value="lq" />篮球
           <input type="checkbox" name="hobby" value="ymq" />羽毛球
           <input type="checkbox" name="hobby" value="ppq" />乒乓球
  

  • 使用select创建下拉列表，设置multiple="multipie" 变为多选的下拉列表

    <select name="star">
    	<optgroup label="男明星">  <--  该标签是设置分组，可写可不写-->
    		<option value="ldh">刘德华</option>
    		<option value="ldh">刘德华</option>
    		<option value="ldh">刘德华</option>
    		<option value="ldh">刘德华</option>
    		<option value="ldh">刘德华</option>
    	</optgroup>
    

  • checked="checked"属性 ， 添加在单选框或多选框会将该选项设置为默认选项，selected=“selected”属性设置的时下拉列表默认选项
  • 使用textarea创建文本域,自我介绍<textarea name="info"></textarea>
  • 创建单纯的按钮，没有任何功能：<input type="button" value="按钮" />
  • 除了input，还可以使用button标签来创建按钮,实现相同功能

  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type=“button">按钮</button>
  

  • 表单分组
    • 将一组内容放入标签<fieldset></fieldset>内，使用<legend>组名</legend> 指定组名