2、表格_表单_h5新增元素

表格

作用：用来展示、存储数据（不能布局网页）

表格标签： table

• 行标签 ：tr （只能包含 td、th）
• 列标签（单元格）： td

表格的属性

• 边框：border（默认没有边框）

     <table border = “1”>

• 边框与边框距离：
  • cellspacing
  • border-spacing: 0;
• 将单元格边框合并
  • border-collapse: separate;
• 边框与内容的距离：cellpadding
• 设置表格的宽度：width
• 设置表格的高度：height
• 位置属性：align （可以用在表格中的任意标签中）

表格结构

• 表格标题(只有一个)：只能用caption (不能用<h3>）

      <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:<td rowspan="3">男生</td>
• 跨行合并：rowspan属性
• 跨列合并：colspan属性
• **注意:**写在要合并的第一个单元格上，行数或列数当作属性值,将合并后多余的单元格删除

table布局的缺点

• 太深的嵌套，比如 table > tr > td > h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
• 灵活性差，比如要将整个表格 CSS 设置 border等属性，是不行的，得通过 td
• 代码臃肿，当在table中套用table 的时候，阅读代码会显得异常混乱
• 混乱的 colspan 与 rowspan ，用来布局时，频繁使用他们会造成整个文档顺序混乱。
• 不够语义，头部用 header ,底部用 footer……

表单

<form action="https://www.baidu.com" method="get">
    <div>
      <label for="user">账号：</label>
      <input type="text" id="user" placeholder="请输入您的账号" name="user" />
		</div>
</form>

聚焦的时候颜色变用outline: 2px solid red;

作用：提交数据

组成部分：

• 表单标签：form
  • action属性：表单提交的地址
  • method属性：提交方式 (get post)

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

• 表单域：label
  • 标记标签：<label for> for的属性与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>

input控件

• 单行文本输入框：<input type="text">

  

• 密码输入框：<input type="password">

• 单选按钮：<input type="radio">

  • 让他的name属性一样，可以实现单选

• 复选框：<input type="checkbox">

• 多行文本框：<textarea>

• 重置按钮：<input type="reset">

• 上传文件：<input type="file">

• 普通按钮：<input type="button">

• 显示宽度：size

• 提交按钮：（在form里面）

  • <input type="submit" /> name的属性值保持一致才能实现单选的效果

    <div>
        <span>请选择您的性别：</span>
        <label for="man">男生</label><input type="radio" name="sex" id="man" />
        <label for="">女生</label><input type="radio" name="sex" checked />
      </div>

表单中的属性

• type：input中的type属性值不一样，显示效果不一样
• value:输入框、按钮的文本
  eg：<input type="button" value="我是普通按钮" />
• placeholder:提示信息
• name：名字
• 单选框/复选框默认选中
  • checked=“checked"
  • checked="true"
  • checked
• 下拉菜单：select -> option
  • 下拉菜单默认选中
    • selected = "selected"
    • selected = "true"
    • selected
  • cols：多行文本框宽度 rows：多行文本高度
  • 按钮禁用：
  • disabled= "disabled"
  • disabled = "true"
  • disabled

H5新增的元素

• 头部标签 ：<header></header>
• 导航标签：<nav></nav>
• 侧边导航：<aside></aside>
• 区间标签：<section></section>
• 文章标签：<article></article>
• 底部标签：<footer></footer>
• 普通按钮：<button></button>
• <button type="reset">重置按钮</button>
• 音频标签：<audio></audio>
  • width：宽度
  • height：高度
  • src:音频的地址
  • (可以简写 同checked
    • controls：控件（用来显示)
    • muted：静音
    • loop：循环播放
• 视频标签：<video></video>
  • controls：控件（用来显示）
  • muted：静音
  • loop：循环播放

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

表单属性

• 分组标签：<fieldset></fieldset> 默认有边框
• 组名标签：<legend></legend>（在分组标签里面） 默认在边框左上角

       <form action="https://www.taobao.com" method="get" novalidate>
          <fieldset>
       		 <legend>Personalia</legend>
                Name: <input type="text"><br>
  				Email: <input type="text"><br>
      			Date of birth: <input type="text">
          </fieldset>
       </form>

表单新增属性

 - `required`：不能为空（表单提交时验证）
 - `autofocus`：自动获取焦点 （获取一个）
 - `novalidate`:(写在form表单里面)关闭整个表单的所有验证
 - `maxlength`：限制最大长度
 - `minlength`：限制最小长度（表单提交时验证）

        <div>
          <label for="">password:</label>
          <input type="password" placeholder="请输入密码" required autofocus 
              maxlength="6" minlength="3" />
         </div>