zoukankan      html  css  js  c++  java
  • html二

    超链接

    超链接有三种形式:

    1、外部链接:链接到外部文件。举例:

    <a href="new.html">点击进入到新网页</a>

    a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

    href是英语hypertext reference超文本地址的缩写。

    当然,我们也可以直接点进链接,访问一个网址。举例如下;

     <a href="http://www.baidu.com" target="_blank">进入百度</a>

    2、锚链接
    指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。
    首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字。效果如下:

    上图中解释:

    11行代码表示,顶部这个锚的名字叫做top。
    然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了#top)。注意上图中红框部分的#号不要忘记了,表示跳到名为top的特定位置,这是规定。如果少了#号,点击之后,就会跳到top这个文件或者top这个文件夹中去。

    如果我们将上图中的第23行代码写成:

    <a href="new.hhml#top">回到顶部</a>

    就表示,点击之后,跳转到new.html页面的top锚点中去。

    说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的。

    3、邮件链接
    代码举例:

    <a href="mailto:zhaoxu@tedu.cn">联系我们</a>

    效果:点击之后,会弹出outlook,作用不大。

    前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息

    特殊几个链接:

    返回页面顶部的位置

     <a href="#">跳转到顶部</a>

    与js有关:

     <a href="javascript:alert(1)">内容</a>
      <a href="javascript:;">内容</a>
    1. javascript:;表示什么都不执行,这样点击<a>时就没有任何反应 例如:<a href="javascrip:;">内容</2
    2. javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>

    超链接的属性

    • href:目标URL
    • title:悬停文本。
    • name:主要用于设置一个锚点的名称。
    • target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:
      • _self:在同一个网页中显示(默认值)
      • _blank在新的窗口中打开
      • _parent:在父窗口中显示
      • _top:在顶级窗口中显示

    blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。
    也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了target=”_blank”,就是在新的空白标签页中打开。

    ps:a是一个文本级的标签

    比如一个段落中的所有文字都能够被点击,那么应该是p包含a;

    <p>
        <a href="">段落段落段落段落段落段落</a>
    </p>

    而不是a包裹p:

    复制代码
    <a href="">
        <p>
            段落段落段落段落段落段落
        </p>
    </a>
    复制代码

    a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。

    总结:标签的使用
    a:
    (1)超链接
    href 超链接的地址
    target: _self 默认 在当前中打开链接地址
    _blank 在空白的页面打开连接地址
    (2)标签内部跳转
    锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。

    img
    src:连接的图片资源
    alt:图片资源加载失败。显示的文本

    ul: unordered list 无序列表 ul下的子元素只能是li
    li
    type='circle' 圆心
    type='square' 方块
    ol:
    ordered list
    只能是li
    dl:定义列表
    dt:定义标题
    dd:定义描述


    sublime的简单使用
    ctrl+shift+p 搜package control

    table border='1' style="border-collapse:collapse;"
    tr 表格行
    td 表格描述
    form
    HTTP协议
    action:提交的服务器网址
    method:get(默认)| post(应用:登录注册、上传文件)
    页面中的a img link 默认是get请求

    input
    type:
    text: 文本输入框
    password:密码输入框
    file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
    submit:提交按钮
    button:普通按钮
    name:提交到服务器端的key
    value: 显示的文本内容,与服务器端的value
    placeholder:文本代替

    label
    for:是与下面的某个表单控件的id属性进行关联

    BS交互

    1.form表单默认与服务器进行交互
    2.ajax技术
  • 相关阅读:
    Python 学习笔记 11.模块(Module)
    Python 学习笔记 8.引用(Reference)
    Python 学习笔记 9.函数(Function)
    Python 学习笔记 6.List和Tuple
    Python 学习笔记 4.if 表达式
    Python 学习笔记 2.自省
    Python 学习笔记 3.简单类型
    Python 学习笔记 7.Dictionary
    Python 学习笔记 5.对象驻留
    Python 学习笔记 10.类(Class)
  • 原文地址:https://www.cnblogs.com/zwq-/p/9664160.html
Copyright © 2011-2022 走看看