zoukankan      html  css  js  c++  java
  • 前端—— 前端介绍开始(二)

    图片与超链接

      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属性值保持一致

  • 相关阅读:
    Best Time to Buy and Sell Stock III <leetcode>
    Best Time to Buy and Sell Stock <leetcode>
    Search a 2D Matrix <leetcode>
    Minimum Path Sum <leetcode>
    Container With Most Water <leetcode>
    Binary Tree Level Order Traversal II <leetcode>
    Rotate Image <leetcode>
    获取安装的apk应用信息
    判断wifi连接是否可用
    kubectl常用命令汇总
  • 原文地址:https://www.cnblogs.com/Skyda/p/9755187.html
Copyright © 2011-2022 走看看