html学习第二天

表格

  • 作用:用来展示、存储数据(不能布局网页)
  • 表格标签: table
    • 行标签 :tr (只能包含 td、th
    • 列标签(单元格): td
  • 表格的属性
    • 边框:border(默认没有边框)
    • 边框与边框距离:cellspacing
    • 边框与内容的距离:cellpadding
    • 位置属性:align (可以用在表格中的任意标签中)
    • 表格结构
      • 表格标题:只能用caption (不能用

    •       <caption>web31期班级花名单caption>
      
      • 表头:thead(姓名 班级)td 改为 th(加粗 居中)(th td可以包含任意标签)
           <thead>
            <tr>
            	<th>序号th>
            	<th>姓名th>
            	<th>性别th>
           	<th>班级th>
             tr>
           thead>
      
      • 表格主体:tbody
        • 表尾:tfood(有兼容性)
        • 注意:table只能包含:caption、thead、tbody、tfoot、tr
      • 合并单元格(写在td上)
        • eg:男生
        • 跨行合并:rowspan属性
        • 跨列合并:colspan属性
          注意写在要合并的第一个单元格上,行数或列数当作属性值,将合并后多余的单元格删除

      表单

      <form action="https://www.baidu.com" method="get">
          <div>
            <label for="user">账号:label>
            <input type="text" id="user" placeholder="请输入您的账号" name="user" />
      		div>
      form>
      
      • 作用:提交数据
      • 组成部分:
        • 表单标签:form
          • action属性:表单提交的地址
          • method属性:提交方式 (get post)
      • 表单域:label
        • 标记标签:的属性与input id属性一致,单击label可以获取输入框的焦点.
          <div>
              <span>请选择您的性别:span>
              <label for="man">男生label> <input type="radio" name="sex" 	id="man" />
              <label for="">女生label><input type="radio" name="sex" checked />
      div>
      
      • 普通文本框:
      • 密码框:
      • 单选框:
      • 复选框:
      • 选择框:select -> option
      • 多行文本框: