前端—— 前端介绍开始(二)

图片与超链接

  1 URL

    uniform Resource Locator 统一资源定位符

    作用:标识网络或本地资源的位置,俗称路径

    组成:协议   域名     文件目录   文件名

          http://www.taobao.com/login/.......**.html

    分类:

      1 绝对路径

        从根目录开始层层查找文件,构成的路径就叫绝对路径

        根目录都以  /  或者是盘符  标识

        适用于网络路径

        注意:

          1 。windows电脑上正反斜杠不区分。需要手动调整成路径的斜杠 /  

          2 .  复制粘贴绝对路径,只到文件目录,需要手动补全文件名

      2 相对路径

        从当前所有的文件夹(目录)开始查找资源,构成的路径就叫相对路径

   注意:1 ../表示返回上一级目录

      2 URL  严格区分大小写

      3 网络URL中避免出现中文

  2 图片标签

    1 作用:在网页中插入一张图片

    2 语法:<img src=''>

    3 属性:

      src : 必填属性,设置图片路径

      设置图片的宽度,取值为像素值 200px    【只设置宽度或者高度的话,默认是按比例来缩放2】

      height: 设置图片高度,像素单位可以省略的

      title:取值是图片的描述信息

      alt :设置图片加载失败之后的提示文本

  3 超链接标签

    1 。提供了从当前文件跳转到其他文件的功能

    2 。语法:<a>超链接内容</a>

    3 .  属性:

      href:必填属性,指定链接地址

        1 属性为空‘’表示跳转至当前页,包含网络请求。相当于刷新

        2 属性为‘#’表示当前页,不包含网络请求

      target:设置目标文件的打开方式,指是否新建窗口打开,默认在当前窗口打开目标文件

        取值:

          _self 默认值,在当前窗口打开

          _blank 新建窗口打开

  4 锚点链接

    作用:在指定文件的指定位置进行跳转

    语法:

      <a href='#6'>6.早年经历</a>  需要跳转的链接

      <a name='6'></a>    需要跳转到的位置

2   表格标签

  1 语法:

    1.标签介绍

      表格标签:<table></table>

      行标签:<tr></tr> (table row)

      单元格标签:<td></td> (table data)

    2 创建顺序:

      1 创建表格标签 <table></table>

      2 表格中创建行,每一行就是一个tr

      3 在行中创建单元格存放数据,每一个单元格对应的一个td

    3 table标签属性

      1 border :设置表格边框,取值为像素值

        实线为solid  虚线为dashed   点线边框为dotted   双线边框为double

      2 bgcolor:设置表格背景颜色,取值颜色的英文单词

      3 表格宽度,取值像素值

      4 height:设置表格高度,取值为像素值

      5 align:表格的水平对齐方式,取值 left

      6 cellspacing:取值为像素值,用来设置单元格的外边距(单元格与单元格之间,或单元格与表格边框之间的距离)

      7 cellpadding:取值像素值,表示单元格的内边距(同上相反)

     4 tr 标签属性

      1 hgcolor:设置行背景颜色

      2 align:设置内容水平对齐方式 left/center/right

      3 valign:设置内容垂直对齐方式 top/middle/bottom

          默认水平居左,垂直居中

    5 td 标签属性

      1 hgcolor:设置单元格的背景颜色

      2 设置单元格的宽度

      3 height:设置单元格的宽度

      4 align:设置单元格水平

      5 valign:设置单元格垂直

    6 单元格合并:(重点)

      涉及单元格跨行或跨列合并的属性 rowspan colspan,是单元格独有的属性

      1 单元格的跨行合并

         从当前单元格开始,向下合并几行

        <td rowspan="3"></td> 包含自身在内,向下合并单元格,最络占据三个单元格的位置

      2 单元格的跨列合并

        从当前单元格开始,向右合并几个单元格,

        <td colspan="3"></td>包含自身在内向右合并单元格

        最终占据三个单元格的位置

      注意: 一旦发生单元格合并,要时时调整表格结构

          保证表格结构的完整

          发生跨行合并,要删除后续行中多余的单元格

          发生跨列合并,要删除当前行中多余的单元格

        

   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>的顺序书写

  3 表单

    1 用于接收用户输入的数据,并提交给服务器

      表单的二要素:

        1 表单标签 <form></form>

          收集用户信息,并且提交给服务器

        2 表单控件:(重点)

          提供一组可以跟用户交互的可视化组件

    2 form 元素

      1 from本身不可见的,但是不能省略,因为数据的提交功能要由form实现

      2 语法:

        <form>

          表单控件

        </form>

      3 标签属性

        <form action="提交的地址" method="提交的方法"></form>

         GET:

          默认的提交方式:常用于向服务器获取数据

          特点:

            1 如果是提交数据,数据会以参数的形式拼接在URL后面

            2 安全性较低

            3 数据的大小有限制,最大为2KB

         POST:

          常用于向服务器改送数据

          特点:

            1 隐式提交,外部看不到数据,数据会被打包存在请求体中发送

            2 安全性高

            3 数据的大小没有限制的

    3 表单控件

      分类:

        1 文本框和密码框

          <input type="text">普通文本输入框

          <input type="password">密码框

          1 name属性:必填项,定义控件名称,缺少则无法提交当前的数据

          2 placeholder:设置提示文本

          3 maxlength:设置最大输入长度

          4 value:设置当前输入框的值

        2 单选按钮与复选框

          <input type='radio' name="" value="">单选钮

          <input type="checkbox" name="" value="">复选框

          属性:

            1 name:除了定义控件名称之外,还具有分组的作用,一组按钮中的name属性值必须保持一致

            2 value:必须给,设置按钮对应的值  

            3 checked:默认选中  

        3 隐藏域与文件选择框

         1 <input type='hidden' name="" value="">隐藏域

          隐藏域本身不可见,用于隐式传递用户相关的信息

         2 文件选择框

          <input type="file" name=""> 

  1  表单控件

    1 下拉选择框

      <select name="province">

        <option vavlue="hebei">河北</option>

      </select>

    2 文本域

      支持用户多行输入的

      <textarea name="uinfo" cols="" rows=""></textarea>

      属性:

        1 name 控件名称

       2 cols 指定文本域默认显示的列数,一行能显示的英文字符数量,中文字符减半

       3 rows 指定文本域默认显示的行数

      注意:文本域是可以由用户调整大小的

    3 按钮

      1 提交按钮

        <input type="submit" name="submit" values="">

        属性 type = submit设置按钮类型为提交

          value 用来设置按钮的显示文本    

        作用:将表单中的数据提交给服务器

      2 重置按钮

        <input type="reset" value>

        作用:将表单控件的值,重置为初始状态

      3 普通按钮

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

      4 特殊按钮

        <button>登录</button>

      注意:<button>标签如果放在form中使用,作用跟提交按钮是一致的,都会将表单中的数据发送给服务器

         在form外,需要绑定自定义事件

    4 lable for ID

      1 使用label标签包含要显示的文本

      2 为label标签添加for 属性,属性值与要绑定的控件的id属性值保持一致

原文地址:https://www.cnblogs.com/Skyda/p/9755187.html