第2天笔记

1.表格

1.1 表格构成

表格由行和单元格组成
行：tr
单元格：td
实现一个三行三列的表格

    <table border="1">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>

---

说明：

1. 表格至少由三个基本标签构成：table、tr、td
2. tr必须嵌套在table标签中，td、th 必须嵌套在tr中

---

1.2 表格的属性

（1）设置表格边框的属性

• border：边框
• width：表格宽度
• height：表格高度

（2）设置单元格与单元格、单元格与边框之间的距离

• cellspacing="0" 去掉单元格之间的距离

（3）设置单元格和内容之间的距离，上右下左

• cellpadding

  cellpadding="50"

（4）表格的对齐方式

只能将表格居中对齐，不可以将内部的文字进行居中对齐。

• align：left、right、center

1.3 表格的表头

一般用在第一行，表示一个列的标题，可以代替 td。

th 标签更加具有语义化特性，并且会将内部的文字加粗居中。

  <tr>
    <th>name</th>
    <th>gender</th>
    <th>age</th>
    <th>progress</th>
  </tr>

为了更好的语义化表达标签的意思，添加 thead、tbody 标签，但不是必须的。

• caption：表格的标题，写在 thead 上面，渲染在表格的顶部外面。工作中不常用。
• thead：表格的头部部分
• tbody：表格的主体部分

<table>
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

1.4 合并单元格

1. 跨行合并

• rowspan
  上下合并，写在上面的单元格上，属性值为：合并行的单元格个数
  rowspan="2"，一旦合并了，那么多余的单元格就需要手动删除。

2. 跨列合并

• colspan
  左右合并，写在左边的单元格上，属性值为：合并列的单元格个数
  colspan="2"，一旦合并了，那么多余的单元格就需要手动删除。

2. 表单

作用：用于收集用户的信息发送给后台
组成：

1. 表单域（将内部包含的表单信息都收集起来发送给后台）
2. 提示文本（提示用户当前表单的输入内容）
3. 表单（真正用来搜集用户信息）
   如图所示：

表单.png

2.1 表单标签

1. input标签

（1）属性：type，表单的类型

• type="text" 单行文本输入框
• type="password" 密码输入框
• type="radio" 单选框，从多个选择里面选择具体的某一个；若要单选框生效，必须具备相同的 name 属性值
• type="checkbox" 多选框，可选择一个或者多个
• type="file" 上传文件、图片
• type="button" 一般按钮
• type="submit" 提交按钮，用于收集表单数据，然后将数据提交给后台

    <input type="submit">

（2）属性：value，代表表单里面包含的值

    <input type="button" value="按钮">

---

说明：
type="radio"，type="checkbox" 做选择的项都需要添加相应的 value 值，用于表单数据的提交

    <input name="gender" type="radio" value="male" checked="checked" />男
    <input name="gender" type="radio" value="female" />女
    <input name="gender" type="radio" value="secret" />保密

    <input type="checkbox" name="hobby" value="calligraphy" checked />书法
    <input type="checkbox" name="hobby" value="badmiton" />羽毛球
    <input type="checkbox" name="hobby" value="animation" />动漫
    <input type="checkbox" name="hobby" value="reading" />阅读

---

（3）属性：checked，用于默认选中，checked="checked"，可以简写为：checked

    <input name="gender" type="radio" value="male" checked="checked"/>男

    <input type="checkbox" value="calligraphy" checked/>书法

（4）属性：placeholder，输入框中的提示信息

2. 下拉框，select 标签

（1）属性：selected，指定默认的选中项

（2）属性：name，控件名称

<select name="city">
  <option value="Beijing">北京</option>
  <option value="Shanghai" selected>上海</option>
  <option value="Guangzhou">广州</option>
  <option value="Shenzhen">深圳</option>
  <option value="Hangzhou">杭州</option>
  <option value="Suzhou">苏州</option>
</select>

3. 多行文本输入框标签：textarea，文本域

（1）属性：cols，文本列的字符数；rows，文本行的字符数。

    <textarea cols="30" rows="10"></textarea>

（2）使用场景：多用于留言板，评论（评价）区

4. label标签

作用：用于包裹不同类型的input框，确定一个点击的区域；将文件和表单关联起来，点击文字相当于点击了表单

  <label>
    用户名：
    <input type="text" name="username" placeholder="请输入用户名" />
  </label>
  <label>
    密码：
    <input type="password" name="password" />
  </label>

3. 表单域，form 标签

• 作用：收集表单域内部的所有表单信息，整体提交到后台
• 使用的标签：form
• 提交方式：<input type="submit" />
• 为了保证提交数据的成功：需要在 input（type="text"；type="password"； type="radio"，单选框；type="checkbox"，多选框；等）、select、textarea 标签中添加 name 属性
  （1）属性：action，提交的后台地址
  （2）属性：method，提交的方法，get、post

    <form action="#" method="get"> xxx </form>

4. 容器标签

特点：只用于包裹标签，没有明显的语义性，只相当于一个容器

1. div
2. span

5. H5（HTML5） 新标签及新属性

1. 新增的结构标签

   具有语义化，便于搜索引擎的识别；使用方式和 div 一模一样，但是比 div 更具有语义性。

   网页布局常用的标签：

• nav，导航栏区域
• header，头部区域
• aside，侧边栏区域
• article，文章页区域
• section，区块区域
• footer，底部区域

说明：以上标签有兼容问题，如：IE6、7、8不支持

2. 表单新属性

   具有兼容性问题

（1）placeholder，输入框占位文本，提示性信息，告知用户输入文本内容的类型；其值不会被提交到后台。

 <input type="text" name="username" placeholder="请输入用户名" />

（2）autofocus，自动获取焦点，打开网页就会自动聚焦输入框

 <input type="text" name="username" autofocus />

（3）autocomplete，自动补全（前提是该字段必须成功提交过一次），默认值为 on，off-关闭补全

 <input type="text" name="username" autocomplete=“on” />

（4）required，自动验证表单，验证表单不能为空（非空验证）

 <input type="text" name="username" required />

3. 新增的表单元素

   input标签：type属性的新值

• type="range"，滑块
• type="date"，日期控件，在手机端可以正常使用，但 PC 端有兼容问题。
• type="number"，唤醒数字键盘，可以输入字母 e（科学计数法），其他的字母不被允许输入；手机端会唤醒数字键盘。

具体的可以查找 MDN ：https://developer.mozilla.org/zh-CN/

4. 视频标签

• video，用于视频的播放
• 属性：

（1）autoplay，用于自动播放视频
（2）src，视频地址
（3）controls，播放控件
（4）loop，循环播放

 <video src="#" autoplay loop controls></video>

---

说明：

• 好处：方便开发和视频播放，没有广告植入
• 弊端：兼容性差
• 使用场景：手机端

---

• 播放格式：mp4、ogg、webm
• 由于各个浏览器支持的视频格式不相同，需要进行兼容性的处理

查找原则：

从上到下依次查找，若找到当前浏览器识别的格式，则会将视频解析出来；否则，继续往下查找，若所有格式都不支持，则会识别 a 标签并加以提示。目前浏览器对 mp4 格式支持最好。

注意：仅仅修改视频的后缀名来实现视频的兼容播放是不可行的，需要借助专业的视频转码工具来更改视频的格式，否则，浏览器是不能播放视频的。

    <!-- 兼容写法：准备三种不同格式的视频 -->
    <video>
      <source src="media/hello.mp4" />
      <source src="media/hello.ogg" />
      <source src="media/hello.webm" />
      <a href="http://www.baidu.com">您的浏览器版本过低，请尽快升级！</a>
    </video>