H5C3-day02

表格初始

一、表格：

用来展示数据、存储数据的（表格不能布局网页） 

二、表格组成部分：

表格标签：table;  行标签：tr ; 单元格标签：td

三、表格的属性

1、边框：border   默认是没有边框的     
2、边框与边框之间的距离：cellspacing  
3、边框与内容之间的距离：cellpadding
4、宽：width
5、高：height
6、位置：align

 <table
      border="1"
      cellspacing="0"
      cellpadding="15"
      width="500"
      height="300"
      align="center"
    >
      <!-- 第一行 -->
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>班级</td>
      </tr>
      <!-- 第二行 -->
      <tr>
        <td>10001</td>
        <td>丙</td>
        <td>男生</td>
        <td>31</td>
      </tr>
      <!-- 第三行 -->
      <tr>
        <td>10002</td>
        <td>丁</td>
        <td>男生</td>
        <td>31</td>
      </tr>
      <!-- 第四行 -->
      <tr>
        <td>10003</td>
        <td>乙</td>
        <td>男生</td>
        <td>31</td>
      </tr>
      <!-- 第五行 -->
      <tr>
        <td>10004</td>
        <td>甲</td>
        <td>女生</td>
        <td>31</td>
      </tr>
    </table>

表格结构与合并单元格

一、表格结构：

        表头：thead  需要将td->th
        表格主体：tbody
        表尾：tfoot (有兼容性，后期再讲)
        表格标题：caption

二、注意事项：

        1、table标签只能包含caption/thead/tbody/tfoot/tr
        2、表格的标题只能用caption
        3、tr中只能包含td/th
        4、td/th中可以包含任意的标签
        5、align:可以用在表格中的任意标签中

三、合并单元格的步骤：

        1、先判断是跨行合并还是跨列合并
        2、跨行合并用rowspan属性，跨列合并用colspan属性
        3、将rowspan属性和colspan属性写在要合并的第一个单元格上
        4、将合并的行数或者列数当做属性值
        5、将合并后多余的单元格删除

  <table
      border="1"
      cellspacing="0"
      cellpadding="15"
      width="500"
      height="300"
      align="center"
    >
      <caption>
        班级花名单
      </caption>
      <!-- 第一行 -->
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>班级</th>
        </tr>
      </thead>
      <tbody>
        <!-- 第二行 -->
        <tr>
          <p>我是段落</p>
          <td>10001</td>
          <td><a href="https://www.baidu.com">百度一下</a></td>
          <td rowspan="3">男生</td>
          <td>31</td>
        </tr>
        <!-- 第三行 -->
        <tr>
          <td>10002</td>
          <td>zs</td>
          <!-- <td>男生</td> -->
          <td>31</td>
        </tr>
        <!-- 第四行 -->
        <tr>
          <td>10003</td>
          <td align="center"><b>ls</b></td>
          <!-- <td>男生</td> -->
          <td>31</td>
        </tr>
        <!-- 第五行 -->
        <tr align="center">
          <td>10004</td>
          <td colspan="2">ww</td>
          <!-- <td>女生</td> -->
          <td>31</td>
        </tr>
      </tbody>
    </table>

表单

一、表单的作用：

      提交数据 

二、表单组成部分：

      1、表单标签
        form
        actions属性：表单提交的地址
        method属性：表单提交的方式get/post
      2、表单域
        普通文本框：<input type="text">
        标记标签：<label> for的属性值与input属性值一致，单击label可以获取输入框的焦点
        密码框：<input type="password">
        单选框：<input type="radio">
        复选框：<input type="checkbox">
        选择框：select->option
        多行文本框：<textarea>
        重置按钮：<input type="reset">
        普通按钮：<input type="button" value="我是普通按钮" />
      3、提交按钮
        <input type="submit">  name的属性值保持一致才能实现单选的效果

三、表单域中属性：

      1、type：input的type的属性值不一样，显示效果也不同
      2、value:输入框、按钮的文本
      3、placeholder:提示信息
      4、name：名字
      5、单选框/复选框的默认选中：
          checked="checked"
          checked="true" 
          checked
      6、选择框默认选中
         selected="selected"
         selected="true"
         selected
      7、cols：多行文本框宽度  rows:多行文本框高度
      8、按钮的禁用：
          disabled="disabled"
          disabled="true"
          disabled

<form action="https://www.baidu.com" method="get">
     <div>
       <label for="user">账号：</label>
       <input type="text" id="user" placeholder="请输入您的账号" name="user" />
     </div>
     <div>
       <label for="pwd">密码：</label>
       <input type="password" id="pwd" value="123" />
     </div>
     <div>
       <span>请选择您的性别：</span>
       <label for="man">男生</label><input type="radio" name="sex" id="man" />
       <label for="">女生</label><input type="radio" name="sex" checked />
     </div>
     <div>
       <span>您的爱好是什么：</span>
       <label for="">打游戏</label><input type="checkbox" checked />
       <label for="">打篮球</label><input type="checkbox" />
       <label for="code">敲代码</label>
       <input type="checkbox" id="code" checked="checked" />
       <label for="">游泳</label><input type="checkbox" />
       <label for="">逛街</label><input type="checkbox" checked="true" />
     </div>
     <div>
       <span>您的家庭住址：</span>
       <select name="" id="">
         <option value="">邢台</option>
         <option value="" selected>邯郸</option>
         <option value="">秦皇岛</option>
         <option value="">石家庄</option>
       </select>
     </div>
     <div>
       <span>您的个人名言：</span>
       <textarea name="" id="" cols="60" rows="5">
          电话费是对发货丢货和额活人汾酒好回复护肤u会说人话 二个人是红人馆人 体育人家有人就容易就容易就软接头荣誉机建燃油就
       </textarea>
     </div>
     <input type="reset" value="恢复出厂设置" disabled />
     <input type="button" value="普通按钮" />
     <input type="submit" value="登录" />
   </form>

H5新增的元素

  <!-- 1、头部标签 -->
    <header>
      <h1>我是头部区域</h1>
    </header>
    <div>
      <!-- 3、区间标签 -->
      <section>我是第一部分</section>
      <section>
        <!-- 4、导航 -->
        <nav>
          <a href="#">京东超市</a>
          <a href="#">秒杀</a>
          <a href="#">京东家电</a>
          <a href="#">京东生鲜</a>
          <a href="#">京东电脑数码</a>
        </nav>
      </section>
      <section>我是第三部分</section>
      <section>
        <h3>我是第四部分</h3>
        <!-- 5、侧导航 -->
        <aside>
          <ul>
            <li><a href="#">家用电器</a></li>
            <li>
              <a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>
            </li>
            <li><a href="#">电脑</a>/<a href="#">办公</a></li>
          </ul>
        </aside>
      </section>
      <section>
        <h1>第五部分</h1>
        <!-- 6、文章标签 -->
        <article>
          <p>
       大概发多少
          </p>
          <p>
           才能到家
          </p>
        </article>
        <!-- 7、按钮 -->
        <form action="https://www.baidu.com" method="get">
          <div>
            <label for="">姓名：</label>
            <input type="text" />
          </div>
          <button disabled="disabled">普通按钮</button>
          <button>普通按钮2</button>
          <button type="submit">提交按钮</button>
          <button type="reset">重置按钮</button>
        </form>
      </section>
    </div>
    <!-- 2、底部标签 -->
    <footer>
      <h1>我是底部区域</h1>
    </footer>

音频与视频

1、音频audio

    src:音频的地址 controls:控件  muted:静音   loop:循环播放
    <audio src="./media/yang.mp3" controls="controls" muted loop="loop"></audio>

2、视频video

    width:宽  height:高
    <div></div>
    <video
      src="./media/test.mp4"
      controls
      muted
      loop
      width="600"
      height="500"
    ></video>

h5新增的表单属性

1、表单的分组

    分组标签：fieldset  默认会有边框
    组名标签：legend    在边框的左上角

2、新增的表单属性

    required:不能为空 （在表单提交时验证）
    autofocus:自动获取焦点
    novalidate:关闭整个表单的所有验证（写在form标签上）
    maxlength:最大长度
    minlength:最小长度

 <form action="https://www.taobao.com" method="get" novalidate>
      <fieldset>
        <legend>组名：第一组数据</legend>
        <div>
          <label for="email">email:</label>
          <input type="text" id="email" />
        </div>
        <div>
          <label for="">user:</label>
          <input type="text" required autofocus />
        </div>
        <div>
          <label for="">password:</label>
          <input
            type="password"
            placeholder="请输入密码"
            required
            autofocus
            maxlength="6"
            minlength="3"
          />
        </div>
      </fieldset>
      <fieldset>
        <legend>组名：第二组数据</legend>
        <div>
          <label for="email">email:</label>
          <input type="text" id="email" />
        </div>
        <div>
          <label for="">user:</label>
          <input type="text" value="root" />
        </div>
        <div>
          <label for="">password:</label>
          <input type="password" placeholder="请输入密码" />
        </div>
      </fieldset>
      <input type="file" />
      <input type="image" />
      <button type="submit">提交数据</button>
    </form>