HTML（二）

 一、图片与超链接

1、URL

    Uniform Resource Locator 统一资源定位符
      作用：标识网络或本地资源的位置，俗称路径
      组成：协议 域名 文件目录 文件名
        et：
         http://www.taobao.com
         http://www.taobao.com/login/login.html
         http://www.baidu.com/img/logo.png
      路径分类：
         1、绝对路径：从计算机的根目录开始层层查找文件，构成的路径，就叫绝对路径。
             根目录 都以 / 或者是盘符标识。适用于网络路径，不适用于项目开发过程中访问本地文件
            et:
               /user/Desktop/img/logo.png
               C:/user/Desktop/img/logo.png
               C:/Users/Python/Desktop/day02/day02.txt      
            注意：
              1、windows电脑上正反斜杠不区分，需要手动调整成路径的斜杠 /
              2、复制粘贴绝对路径，只到文件目录，需要手动补全文件名
         2、相对路径 ：从当前所在的文件夹（目录）位置开始查找资源，构成路径就叫相对路径
            et :
                project -> index -> index.html logo.png
                在 index.html中访问png
                logo.png
                ../index/logo.png
            注意： ../ 表示返回上一级目录
      注意：
           1. URL 严格区分大小写
           2. 网络URL中避免出现中文

2、图片标签

    1、作用：在网页中插入一张图片
     2、语法：<img src="url">
     3、属性：
         src : 必填属性，设置图片路径（可以是网络路径，也可以是本地路径）
         width : 设置图片宽度，取值为像素值 200px
         height : 设置图片高度，像素单位可以省略的
         title : 取值是图片的描述信息，在鼠标悬停在图片上方时出现
         alt : 设置图片加载失败之后的提示文本

3、超链接标签

    1、提供了从当前文件跳转到其他文件的功能
     2、语法：<a href="url">超链接内容</a>
     3、属性：
         href：必填属性，指定链接地址。
           1、属性为空 ""，表示跳转至当前页，包含网络请求，相当于刷新。
           2、属性为 "#"，表示当前页，不包含网络请求。
     target：设置目标文件打开方式，指是否新建窗口打开，默认在当前窗口打开目标文件
           取值：
             _self：默认值，在当前窗口打开
             _blank：新建窗口打开

4、锚点链接

     作用：在指定文件的指定位置进行跳转
      语法：
        <a href="#">6.早年经历</a>

       <a name="6"></a>
        <p>早年。。</p>
      练习：
        模拟“回到顶部”操作

二、表格标签

1、语法：

     1、标签介绍：
         表格标签：<table></table>
         行标签：<tr></tr>  (table row)
         单元格标签：<td></td>  (table data)
     2、创建顺序：
         1、创建表格标签 <table></table>
     2、表格中创建行，每一行就是一个tr
     3、在行中创建单元格存放数据，每一个单元格对应一个td

2、标签属性：

   1、table 的标签属性
         1、border：设置表格边框，取值以像素px为单位的数值（px可以省略）
         2、bgcolor：设置表格的背景颜色，取值颜色为英文单词的颜色名称
         3、width：设置表格宽度，取值像素值
         4、height：设置表格高度，取值像素值
         5、align：设置表格在其父元素中的水平对齐方式，取值 left center right
         6、cellspacing：取值像素值，用来设置单元格的外边距。（单元格与单元格之间，或单元格与表格之间的距离）
         7、cellpadding：取值像素值，表示单元格的内边距（单元格内容与单元格边框之间的距离）
   2、tr 标签属性
         1、bgcolor：设置行背景颜色
         2、align： 设置当前行内容的水平对齐方式。 取值：left/center/right
         3、valign：设置当前行内容的垂直对齐方式。 取值：top/middle/bottom，默认垂直居中
   3、td 标签属性
         1、bgcolor：设置单元格的背景颜色
         2、width：设置单元格的宽度
         3、height：设置单元格的高度
         4、align：设置单元格内容的水平对齐方式
         5、valign：设置单元格内容的垂直对齐方式
   4、th 标签属性
         一般用于首行单元格，自带加粗效果

3、单元格合并：（重点）

      涉及单元格跨行或跨列合并的属性 rowspan colspan，是单元格独有的属性。
    1、单元格的跨行合并
         从当前单元格开始，向下合并几行
         <td rowspan="3"></td> 包含自身在内，向下合并单元格，最终占据三个单元格的位置
    2、单元格的跨列合并
         从当前单元格开始，向右合并几个单元格
         <td colspan="3"></td> 包含自身在内，向右合并单元格，最终占据三个单元格的位置
    注意：一旦发生了单元格合并，要时时调整表格结构，保证表格结构的完整 （如：5*5）
            发生跨行合并，要删除后续行中多余的单元格
            发生跨列合并，要删除当前行中多余的单元格

4、表格结构：

      行分组：允许将表格中的若干行划分为一组，便于管理
       语法：
  1、表头行分组
       <thead>
         <tr>
           <td></td>
         </tr>
       </thead>
  2、表格尾部
       <tfoot>
         <tr>
           <td></td>
         </tr>
       </tfoot>
  3、表格主题
       <tbody>
         <tr>
           <td></td>
         </tr>
       </tbody>
  注意：表格的结构化标签<thead>、<tfoot>、<tbody>
        可以省略，如果省略，所有的行和单元格会被自动添加到tbody中，作为表格主体信息
        如果涉及到行分组，需要添加结构标签，建议按照<thead><tfoot><tbody>的顺序书写

三、表单

1、用于接受用户输入的数据，并提交给服务器

     表单的二要素：
       1、表单标签 <from></from>
           收集用户信息，并提交给服务器
       2、表单控件：（重点）
           提供一组可以跟用户交互的可视化组件

2、form 元素

    1、from本身不可见的，但是不能省略，因为数据的提交功能是由from实现
    2、语法：
       <form>
         表单控件
       </form>
    3、标签属性
        <form action="" method></form>
             1、action：设置数据的提交地址
             2、method：数据提交的方式 get / post，默认以get方式提交
         1、get 请求：
           默认的提交方式，常用于向服务器获取数据
           特点：
              1、如果是提交数据，数据会以参数的形式拼接在URL后面
              2、安全性较低
              3、数据的大小有限制，最大为2KB
         2、post 请求：
             常用于向服务器发送数据
             特点：
              1、隐式提交，外部看不到数据，数据会被打包存在请求体中发送
              2、安全性高
              3、数据大小没有限制的

3、表单控件

 分类：
  1、文本框和密码框
      <input type="text">      普通文本输入框
      <input type="password">  密码框
        属性：
          1、name 属性，必填项，定义控件名称，缺少则无法提交当前的数据
          2、placeholder：设置提示文本
          3、maxlength：设置最大输入长度
          4、value：设置当前输入框的值，在text，password中不常用
  2、单选按钮与复选框
         <input type="radio" name="" value="">    单选钮
         <input type="checkbox" name="" value=""> 复选框
       属性：
         1、name：除了定义控件名称之外，还具有分组的作用，一组按钮中的name属性值必须保持一致
         2、value：必须给，设置按钮对应的值(用于提交)
         3、checked：默认选中
  3、隐藏域与文件选择框
      1、隐藏域
          作用 ：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中
          语法 ：<input type="hidden" name="uid" value="00001">
          属性 ：1. name 控件名称  2. value 控件的值
         * 隐藏域本身不可见，用于隐式传递用户相关的信息
      2、文件选择框
          作用 ： 选择文件上传，发送给服务器
          语法 ： <input type="file" name="">
          属性 ： name 定义控件名称

  4、下拉选择框
       <select name="province">
           <option value="hebei">河北</option>
       </select>
      * 假设用户选择河北省，在使用get方式提交数据时，URL后拼接的数据应为province=hebei
  5、文本域
       支持用户多行输入
       <textarea name="uinfo" cols="" rows=""></textarea>
       属性：
           1、name 控件名称
           2、cols 指定文本域默认显示的列数，一行能显示的英文字符数量，中文字符减半
           3、rows 指定文本域默认显示的行数
       注意：文本域是可以由用户调整大小的
  6、按钮
      1、提交按钮
              <input type="submit" name="submit" value="">
               属性：type = "submit" 设置按钮类型为提交
                        value 用来设置按钮的显示文本
               作用：讲表单中的数据提交给服务器
      2、重置按钮
               <input type="reset" value="">
                作用：将表单控件的值，重置为初始状态
      3、普通按钮
               <input type="button" value="">
                可以绑定自定义事件
               * 按钮中的value属性值实际上是定义按钮的显示文本
      4、特殊按钮
               <button>登录</button>
              注意：1、<button>标签如果放在form中使用，作用跟提交按钮是一致的（等同于input  submit），都会将表单中的数据发送给服务器。
                    2、<button>标签不局限于form中使用，在任何地方都可以使用，表示按钮，但是如果放在form外部，需要绑定自定义事件
                    3. 可以添加属性type 取值 submit / reset / button 进行区分 （非必填）
                    4. 在表单外作为普通按钮使用时，需要通过JS 动态绑定事件
  7、lable for ID          
        语法 ：<label for="male">男</label>
               <input type="radio" name="gender" value="male" id="male">
        注意：1、使用label标签包含表单控件要显示的文本信息
              2、为label标签添加for属性，属性值与所要绑定的表单控件的ID属性值保持一致，实现文本与控件的绑定